Google Stitch MCP 설정 가이드 — Claude Code, Cursor, Gemini CLI 전 플랫폼 (2026)
모든 AI 코딩 플랫폼별 Stitch MCP 설정법. 자동 설치, 수동 설정, UI 생성 예제, 트러블슈팅까지 — 공식 문서에 없는 실전 가이드.
Stitch MCP 실전 가이드 — 설치부터 UI 생성까지
Google Stitch는 텍스트 프롬프트로 UI 디자인과 프론트엔드 코드를 만들어주는 도구입니다. Stitch MCP는 이걸 AI 코딩 에이전트(Claude Code, Cursor, Gemini CLI 등)에서 직접 쓸 수 있게 연결해주는 MCP 서버입니다.
공식 문서가 있긴 한데, 설치 순서만 나열돼 있고 실전에서 어떻게 쓰는지는 빠져 있습니다. 이 글은 설치부터 실제 UI 생성까지 한 번에 정리합니다.
Stitch MCP가 뭔데
Stitch는 Google Labs에서 만든 실험적 도구입니다. 2026년 기준 기본은 Gemini 3 Flash, 고품질 모드는 Gemini 3 Pro로 동작하며, 프롬프트를 입력하면 UI 디자인 + HTML/CSS 코드를 생성합니다.
관련 포스트
Paper of the Week #2 — 점수는 초록에, 청구서는 표 2에
HoH(arXiv 2609.01481)의 Planner→Developer→QA 루프를 Claude Code 둘레에 직접 지어 숨긴 테스트 8과제로 쟀습니다. 점수 차이는 재실행 노이즈 안, 토큰은 58k에서 177k로 3배. HoH 자신의 표 2도 3.25배입니다. 1호가 약속한 matched-loss 대조군 채점도 함께 실었습니다.
프로젝트 유형별 CLAUDE.md 템플릿 5종 — 복붙용 파일과 에이전트가 실제로 따르는 규칙
Next.js·Python ML·모노레포·데이터 파이프라인·연구 노트북용 CLAUDE.md/AGENTS.md 템플릿 5종. 어떤 줄이 장식이고 어떤 줄을 에이전트가 실제로 따르는지, 그리고 규칙 파일로 사이드 이펙트를 통제하는 법까지.
폰에서 Claude Code 쓰기 — 세 가지 접근과, 진짜 되는 방법
폰으로 Claude Code에 붙는 세 가지 방법 — tmux + SSH, /remote-control, 그리고 서버 기반 에이전트. 진짜 해결책은 "모바일 지원"이 아니라 컴퓨트를 기기에서 분리하는 것입니다.