Stitch MCP vs Figma MCP — 어떤 디자인-투-코드 MCP를 써야 할까?

Stitch MCP vs Figma MCP — 어떤 디자인-투-코드 MCP를 써야 할까?

Google Stitch MCP와 Figma MCP는 둘 다 Model Context Protocol로 디자인 도구를 AI 코딩 에이전트에 연결한다. 하지만 풀려는 문제가 근본적으로 다르다.

Stitch MCP는 텍스트 프롬프트로 새 UI 디자인을 생성하고 HTML/CSS를 출력한다. Figma MCP는 기존 Figma 디자인을 읽어서 코드 생성에 필요한 구조화된 데이터를 에이전트에 전달한다.

이 비교 글에서는 도구, 가격, 플랫폼 지원, 출력 품질, 그리고 실제 결정 — 언제 뭘 써야 하는지를 다룬다.

TL;DR — 빠른 비교표

이미 Figma 디자인이 있으면 Figma MCP를 쓰자. 아무것도 없는 상태에서 AI가 디자인해주길 원하면 Stitch MCP를 쓰자. 둘은 경쟁 관계가 아니라 보완 관계다.

각 도구가 실제로 하는 일

Stitch MCP — AI가 디자인을 생성한다

Stitch는 Google Labs의 실험적 도구다. UI를 텍스트로 묘사하면 비주얼 디자인과 HTML/CSS 코드를 동시에 생성한다.

MCP 서버(@_davideast/stitch-mcp)가 Stitch API를 래핑해서 AI 에이전트가 도구로 호출할 수 있게 한다.

사용자: "SaaS 가격 페이지 3개 티어로 만들어줘"
에이전트 → Stitch MCP 호출 → 디자인 + HTML/CSS 생성
에이전트 → 코드를 프로젝트에 반환

Figma 파일도 없고, 디자이너도 필요 없다. AI가 처음부터 디자인을 만든다.

MCP 도구 목록:

공식 SDK(@google/stitch-sdk)는 반복 수정용 edit()과 1-5개 디자인 변형 생성용 variants()를 추가로 제공한다.

Figma MCP (공식) — 기존 Figma 파일을 읽는다

Figma의 퍼스트파티 MCP 서버는 기존 Figma 디자인을 AI 코딩 에이전트에 연결한다. 에이전트가 디자인을 읽고, 레이아웃과 토큰, 컴포넌트를 이해한 다음, 매칭되는 코드를 생성한다.

사용자: "이 Figma 디자인 구현해줘" + Figma URL 붙여넣기
에이전트 → Figma MCP 호출 → 디자인 구조, 변수, 스크린샷 읽기
에이전트 → 디자인에 맞는 React/Vue/HTML 코드 생성

MCP 도구 목록 (14개):

공식 서버는 https://mcp.figma.com/mcp에서 원격 호스팅 — 로컬 설치 불필요. 인증은 브라우저를 통한 OAuth.

Framelink (커뮤니티) — 경량 Figma 리더

Framelink은 GitHub 스타 14,000+의 커뮤니티 빌드 대안이다. 공식 Figma MCP보다 6개월 먼저 나왔고, 원래 Cursor용으로 만들어졌다.

도구는 2개뿐이지만 집중적이다:

읽기 전용, 무료, MIT 라이선스. OAuth 대신 개인 액세스 토큰 사용.

항목별 비교

인증 & 설정

Stitch MCP는 설정이 가장 복잡하다 — Google Cloud 프로젝트 생성, 빌링 활성화, gcloud 인증, Stitch API 활성화가 필요. init 마법사가 대부분 자동화하지만 여전히 단계가 많다.

Figma MCP (공식)이 가장 간단하다: 원격 URL 추가하고 브라우저에서 인증하면 끝.

가격

핵심 포인트:

• Stitch MCP는 프리뷰 기간 동안 후하다 — 월 350회 생성이면 꽤 많다. 하지만 실험적 제품이라 향후 가격은 불확실.
• Figma MCP (공식) 무료 티어는 월 6회로 실질적으로 사용 불가. 진짜 사용하려면 Dev seat ($25/월) 필요. 캔버스 쓰기(use_figma)도 베타 후 유료 전환 예정.
• Framelink은 인위적 제한 없이 완전 무료. Figma API 레이트 리밋만 적용.

플랫폼 지원

세 도구 모두 주요 AI 코딩 플랫폼을 지원한다:

출력 형식

Stitch MCP는 순수 HTML/CSS를 출력한다 — React 컴포넌트도, Vue도 아닌 정적 HTML + 임베디드 CSS. 에이전트가 이걸 프레임워크별 코드로 변환할 수 있지만, 초기 출력은 항상 바닐라 HTML/CSS다.

Figma MCP (공식)은 기본이 React + Tailwind지만 프롬프트로 아무 프레임워크 코드 표현을 생성할 수 있다. 출력 품질은 Figma 파일의 구조화 수준에 크게 의존한다.

Framelink은 코드를 직접 생성하지 않는다 — 단순화된 디자인 데이터를 제공하고 LLM이 해석해서 코드로 변환한다. 현대 LLM이 구조화된 레이아웃 데이터를 프레임워크 코드로 번역하는 데 꽤 능숙하기 때문에 의외로 효과적이다.

쓰기 기능

알려진 이슈 (2026년 3월 기준)

Stitch MCP:

• 치명적 프록시 버그 — process.exit(0)가 stdio MCP 전송을 즉시 종료. 다수의 오픈 이슈 (#161-170). Claude Code 연동에 특히 영향.
• .env 파일 충돌로 프록시가 깨질 수 있음
• 화면 간 디자인 기억 없음 — 각 생성은 독립적
• API 키 인증은 MCP 프록시에서 작동 안 함 (OAuth만 가능)

Figma MCP (공식):

• 베타 상태 — 기능 변경 가능
• 큰 선택 영역은 타임아웃이나 불완전한 응답 유발
• 쓰기 기능(use_figma)은 유료 전환 예정
• 무료 티어 월 6회는 사실상 사용 불가

Framelink:

• 읽기 전용 — Figma에 쓰기 불가
• 도구 2개뿐 (공식 14개 이상)
• 스크린샷 기능 없음
• 큰 파일은 처리 속도 느림

실전 사용 시나리오

Stitch MCP를 쓸 때:

1. 제로에서 프로토타이핑 — 디자이너 없고, Figma 파일 없고, 아이디어만 있을 때
2. 빠른 UI 목업 필요 — "가격 페이지 3가지 변형 보여줘"
3. MVP 랜딩 페이지 제작 — 빠르게 생성하고 반복
4. 화면 간 디자인 일관성 — extract_design_context로 디자인 시스템 유지

워크플로우 예시:

"SaaS Dashboard 프로젝트 만들어"
→ "이메일, 비밀번호, Google OAuth가 있는 로그인 페이지 생성"
→ "사이드바 내비게이션과 통계 카드 4개가 있는 대시보드 생성"
→ "로그인 페이지에서 디자인 컨텍스트 추출"
→ "추출한 디자인 컨텍스트에 맞게 설정 페이지 생성"
→ "로그인을 /, 대시보드를 /dashboard, 설정을 /settings에 매핑해서 사이트 빌드"

Figma MCP (공식)를 쓸 때:

1. 디자이너의 Figma 디자인이 있을 때 — 픽셀 퍼펙트 구현
2. 디자인 토큰 추출 필요 — 색상, 간격, 타이포그래피를 코드 변수로
3. Code Connect 사용 — Figma 컴포넌트를 React/Vue 컴포넌트에 매핑
4. 디자인 도구에 쓰기 필요 — 웹 페이지를 Figma로 캡처

Framelink을 쓸 때:

1. 예산이 중요 — 무료, 호출 제한 없음
2. Cursor 사용자 — Cursor에 최적화되어 만들어짐
3. 이미지 에셋 다운로드 필요 — 프로젝트에 직접 저장
4. 단순함을 원할 때 — 도구 2개, 토큰 하나, 끝

Stitch + Figma 함께 쓰기:

가장 강력한 설정은 둘 다 사용하는 것이다:

1. Stitch MCP → 텍스트 프롬프트로 초기 디자인 생성
2. Figma로 내보내거나 재작성해서 디테일 다듬기
3. Figma MCP → 다듬어진 디자인을 읽어서 프로덕션 코드 생성

또는 Stitch는 빠른 프로토타이핑에, Figma MCP는 프로덕션 구현에 사용.

비교 요약

결론

Stitch MCP와 Figma MCP는 경쟁하지 않는다 — 다른 문제를 푼다.

• 디자인이 아직 없다면? → Stitch MCP. AI가 디자인과 코드를 생성.
• Figma에 디자인이 있다면? → Figma MCP (전체 기능은 공식, 무료는 Framelink).
• 완전한 프로덕트를 만든다면? → 둘 다 사용. Stitch로 빠른 프로토타이핑, Figma MCP로 프로덕션 구현.

"어떤 MCP를 써야 하나?"라는 질문의 답은 결국: 디자인이 이미 있는가, 아니면 만들어야 하는가?

링크 & 리소스

• Stitch MCP (CLI): github.com/davideast/stitch-mcp
• Stitch SDK: github.com/google-labs-code/stitch-sdk
• Stitch 플랫폼: stitch.withgoogle.com
• Figma MCP (공식): github.com/figma/mcp-server-guide
• Framelink MCP: github.com/GLips/Figma-Context-MCP
• Stitch MCP 설정 가이드: sotaaz.com/post/stitch-mcp-guide