freemcplab / 디렉터리 / 플레이그라운드 / Stitch MCP

● 커뮤니티 davideast ⚡ 바로 사용

Stitch MCP

Name: Stitch MCP MCP Server
Author: davideast

Bridge between Google Stitch's AI design canvas and your real codebase — Claude reads the design and writes React/Vue/SwiftUI for it.

Stitch is Google's AI UI design tool. Stitch MCP lets Claude pull the active Stitch design (layout tree, tokens, generated assets) and translate it into your project's component conventions, instead of you copy-pasting screenshots.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

Pull current Stitch design as a structured tree
Maps Stitch tokens to your design-system tokens
Outputs React / Vue / Svelte / SwiftUI
Round-tripping: edit code, sync changes back as notes
Image-asset export with naming conventions

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "stitch-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "stitch-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "stitch-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "stitch-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "stitch-mcp",
      "command": "npx",
      "args": [
        "-y",
        "stitch-mcp"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "stitch-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "stitch-mcp"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add stitch-mcp -- npx -y stitch-mcp

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Stitch MCP

Turn a Stitch screen into production React

👤 Developers ⏱ ~15 min intermediate

언제 쓸까: You finished a screen in Stitch and want a PR-ready component.

흐름

Pull design

stitch_get_active_design; inspect tree.✓ 복사됨

→ Tree loaded
Map tokens

Map Stitch tokens to your tailwind config.✓ 복사됨

→ Token map ready
Generate

Generate React component using your project's conventions.✓ 복사됨

→ Component file ready

결과: Component lives in your repo with your tokens, not pasted Stitch CSS.

조합

다른 MCP와 조합해 10배 효율

stitch-mcp + shadcn-ui-mcp

Map Stitch components onto your shadcn primitives

Combine stitch-mcp with shadcn-ui-mcp: Map Stitch components onto your shadcn primitives✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
get_active_design	(see docs)	Fetch current Stitch design tree	1 call
export_assets	(see docs)	Export image assets with names	1 call
map_tokens	(see docs)	Map Stitch tokens to a target token system	1 call

비용 및 제한

운영 비용

API 쿼터: Stitch API quota applies
호출당 토큰: Design trees are mid-size
금액: Free MCP; Stitch usage applies
팁: Strip out hidden layers before generating code — keeps token count down

보안

권한, 시크릿, 파급범위

최소 스코프: stitch:read

자격 증명 저장: Stitch API token in env

데이터 외부 송신: stitch.google.com

문제 해결

자주 발생하는 오류와 해결

Design returns empty

Confirm the right Stitch project is active in your account

Generated code uses Stitch tokens

Provide a token-mapping config first

대안

Stitch MCP 다른 것과 비교

대안	언제 쓰나	단점/장점
figma MCP	Source is Figma	Different design tool