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 — 빠른 비교표

	Stitch MCP	Figma MCP (공식)	Framelink (커뮤니티)
하는 일	텍스트 → UI 디자인 + HTML/CSS 생성	Figma 디자인 읽기/쓰기 → 코드 컨텍스트	Figma 디자인 읽기 → 단순화된 데이터
방향	텍스트 → 디자인 + 코드	디자인 → 코드 (+ 코드 → 디자인)	디자인 → 코드
디자인 소스	AI 생성 (Gemini 2.5 Pro)	사람이 만든 Figma 파일	사람이 만든 Figma 파일
가격	무료 (프리뷰)	무료: 6회/월; 전체: Dev seat ($25/월)	무료 (MIT)
최적 사용처	제로에서 프로토타이핑	기존 디자인의 픽셀 퍼펙트 구현	저렴한 Figma → 코드

이미 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 도구 목록:

도구	기능
`generate_screen_from_text`	텍스트 프롬프트로 새 화면 생성
`get_screen_code`	생성된 화면의 HTML/CSS 가져오기
`get_screen_image`	스크린샷 (base64) 가져오기
`build_site`	화면을 라우트에 매핑, 페이지별 HTML 출력
`extract_design_context`	"디자인 DNA" 추출 (색상, 폰트, 레이아웃) — 일관성 유지용
`list_projects` / `list_screens`	프로젝트와 화면 목록 조회

공식 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개):

도구	기능
`get_design_context`	구조화된 코드 표현 반환 (기본: React + Tailwind)
`get_variable_defs`	디자인 토큰 반환 — 색상, 간격, 타이포그래피
`get_screenshot`	레이아웃 충실도를 위한 스크린샷
`get_metadata`	속성이 포함된 XML (ID, 이름, 타입, 위치)
`use_figma`	캔버스에 쓰기 — 객체 생성, 편집, 삭제
`generate_figma_design`	웹 페이지를 Figma 디자인으로 캡처
`create_new_file`	빈 Figma 파일 생성
`generate_diagram`	Mermaid 구문으로 FigJam 다이어그램 생성
`search_design_system`	연결된 디자인 라이브러리 검색
`get_code_connect_map`	Figma 노드를 코드 컴포넌트에 매핑
+ 4개 더	Code Connect 제안, 확인, 규칙, FigJam

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

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

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

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

도구	기능
`get_figma_data`	디자인 데이터를 가져와서 단순화 (YAML/JSON)
`download_figma_images`	이미지 에셋 (PNG, SVG, GIF) 로컬 다운로드

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

항목별 비교

인증 & 설정

	Stitch MCP	Figma MCP (공식)	Framelink
인증 방식	gcloud OAuth	브라우저 OAuth	개인 액세스 토큰
설정	`npx @_davideast/stitch-mcp init`	에디터에 원격 URL 추가	`npx figma-developer-mcp`
사전 요구	Node.js 18+, Google Cloud 프로젝트, gcloud CLI	Figma 계정 + 적절한 seat	Figma 계정 + API 토큰
연결 방식	`npx ... proxy` (stdio)	`https://mcp.figma.com/mcp` (HTTP)	`npx ...` (stdio)

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

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

가격

	Stitch MCP	Figma MCP (공식)	Framelink
기본 비용	무료 (프리뷰)	무료 티어 있음	무료 (MIT)
무료 한도	350 Standard + 50 Experimental 생성/월	6 도구 호출/월	Figma API 레이트 리밋
전체 액세스	무료 (현재)	Dev seat: $25/월	무료
향후 비용	미정 (실험적)	쓰기 기능 유료 전환 예정	무료

핵심 포인트:

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

플랫폼 지원

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

플랫폼	Stitch MCP	Figma MCP (공식)	Framelink
Claude Code	O	O	O
Cursor	O	O	O (최적화)
VS Code (Copilot)	O	O	O
Gemini CLI	O	O	O
Windsurf	O	O	O
Claude Desktop	O	O	O
Codex CLI	O	제한적	O

출력 형식

	Stitch MCP	Figma MCP (공식)	Framelink
주요 출력	HTML/CSS 코드 + 스크린샷	React + Tailwind (커스텀 가능)	단순화된 YAML/JSON
프레임워크 지원	HTML/CSS만 (정적)	프롬프트로 아무 프레임워크	프레임워크 무관 데이터
디자인 토큰	`extract_design_context` 통해	`get_variable_defs` 통해	출력에 포함
스크린샷	Base64 이미지	Figma 스크린샷	없음
전체 사이트 생성	가능 (CLI로 Astro)	불가	불가

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

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

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

쓰기 기능

	Stitch MCP	Figma MCP (공식)	Framelink
디자인 생성	O (AI 생성)	O (`use_figma`, `generate_figma_design`)	X
기존 디자인 편집	O (SDK `edit()`)	O (`use_figma`)	X
변형 생성	O (1-5개, creative range)	X	X
다이어그램 생성	X	O (FigJam, Mermaid)	X

알려진 이슈 (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를 쓸 때:

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

워크플로우 예시:

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

Figma MCP (공식)를 쓸 때:

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

Framelink을 쓸 때:

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

Stitch + Figma 함께 쓰기:

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

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

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

비교 요약

기준	우세	이유
새 디자인 생성	Stitch MCP	텍스트로 생성하는 유일한 옵션
기존 디자인 구현	Figma MCP	Figma 파일 직접 접근
무료 사용	Framelink	제한 없음, 비용 없음, MIT 라이선스
도구 개수	Figma MCP (공식)	14개 도구 (읽기 + 쓰기)
설정 간편성	Figma MCP (공식)	원격 URL + OAuth, 로컬 설치 불필요
출력 품질	상황에 따라	모바일은 Stitch; 디자인 시스템 기반은 Figma
미래 안정성	Figma MCP	Figma 공식 지원; Stitch는 "실험적"
커뮤니티/생태계	Framelink	14,000+ 스타, MIT, 45+ 릴리스
디자인 도구에 쓰기	Figma MCP (공식)	`use_figma`로 캔버스 완전 제어
변형 생성	Stitch MCP	내장 1-5개 변형 + creative range

결론

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

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