개요
Google Stitch는 Google Labs가 만든 AI 기반 UI 디자인 도구. 자연어 프롬프트, 손그림 와이어프레임, 스크린샷을 받아 편집 가능한 UI와 동작하는 프론트엔드 코드(HTML/CSS)로 변환. 화면 생성에 Gemini 계열 모델 사용, 결과물을 Figma로 내보내거나 코드를 복사해 사용 가능. 멀티스크린 프로토타입도 만들 수 있으며 현재 베타. API 키 방식과 OAuth로 외부 도구(Cursor, Claude Code 등)와 MCP 연동, Stitch SDK로 코드에서 직접 호출도 지원.
핵심 포인트
-
Vibe Design & Vibe Coding: Stitch의 두 작업 방식. Vibe Design은 형용사로 분위기 정의 → 색/타이포그래피/컴포넌트 자동 생성. Vibe Coding은 자연어를 소스 코드처럼 써서 UI 생성(prompt-to-code, iterative refinement, sketch-to-UI).
-
DESIGN.md: 에이전트가 읽는 디자인 시스템 문서. YAML front matter에 기계용 디자인 토큰(hex, 폰트 속성, 간격), 마크다운 본문에 사람용 디자인 근거.
AGENTS.md의 디자인 짝. 없으면 각 화면이 따로 놀지만 있으면 통일된 제품처럼 보임. -
MCP 연동: Stitch는
https://stitch.googleapis.com/mcp원격 MCP 서버 제공. Claude Code, Cursor, Gemini CLI, Antigravity 등이 Stitch 프로젝트 직접 조작 가능. 14개 도구(프로젝트/화면 관리, AI 생성, 디자인 시스템 업로드 등) 제공. -
Agent Skills:
npx plugins add google-labs-code/stitch-skills한 줄로 3개 플러그인(stitch-design/build/utilities) 13개 스킬 설치. 코딩 에이전트에 화면 생성, 디자인 시스템 추출, 코드↔디자인 라운드트립 능력 추가. -
Stitch SDK (
@google/stitch-sdk): TypeScript/JavaScript에서stitch싱글턴으로 프로젝트 생성, 화면 생성/편집/변형. Vercel AI SDK(stitchTools())와 Google ADK(stitchAdkTools()) 통합 내장. 비공식 프로젝트(Stitch 서비스는 Google Labs 베타). -
디자인 모드 4종: Thinking with 3 Pro(추론 중심), Redesign(Nano Banana Pro, Vibe Design 특화), 2.5 Pro(코드 품질+디자인 충실도), Fast(와이어프레이밍+Figima 내보내기). 스타일 단어 은행(Bento Grid, Glassmorphism, Brutalist 등)으로 아트 디렉션.
-
App vs Web: 단순 화면 크기 선택이 아닌 Primary Design Surface 선택. App=세로 스크롤+하단 내비게이션, Web=가로 배치+상단 내비+다중 컬럼. 플랫폼 전환 시 크기 조절보다 “번역(translate)” 권장.
왜 중요한가
Stitch는 디자인-개발 간극을 좁히는 도구이면서 동시에 AI 에이전트가 디자인 시스템을 읽고 쓸 수 있는 평문 프로토콜(DESIGN.md)을 제시. MCP와 Agent Skills 표준을 통해 IDE/CLI/코드 어디서든 디자인 생성이 가능해지는 흐름을 보여줌. Vibe Design+Vibe Coding 결합은 “프롬프트만으로 완성된 UI+코드”를 향한 실험적 이정표.
후속 링크 / 키워드
- Model Context Protocol
- Vercel AI SDK
- Google ADK for TypeScript
- Stitch SDK npm
- 키워드: DESIGN.md, AGENTS.md, Vibe Coding, prompt-to-code, Gemini 3 Pro, Figma 내보내기