Google Stitch Skills — Design-to-Code 파이프라인 심층 해부
디자인의 ‘시각적 맥락’을 AI가 온전히 이해하고 프로덕션 레벨 코드를 직접 작성하는 Stitch + Antigravity + MCP 기반 Design-to-Code 파이프라인
Problem
기존 AI 코딩 에이전트의 한계: 프롬프트(텍스트)를 코드로 변환. 디자인 시스템(브랜드 컬러, 패딩, 타이포그래피)을 텍스트로 전달하면 파편화된 Tailwind 클래스가 돌아옴.
결국 개발자가 피그마를 열고 직접 수동 보정 → “1픽셀 핑퐁”이 끝나지 않음.
Solution Architecture
Stitch Skills = 시각적 AI 디자인 툴(Stitch) + 에이전틱 코딩 환경(Antigravity) + MCP 연동
┌──────────────┐ MCP (JSON-RPC) ┌───────────────────┐
│ Stitch │ ──────────────────────▶ │ Antigravity │
│ (Design Engine)│ │ (Coding Agent) │
│ - 레이아웃 해석 │ │ │
│ - 컴포넌트 계층 │ 데이터 주입 │ - Stitch 스킬 로드 │
│ - Spatial awareness │ │ - DESIGN.md 참조 │
│ - 디자인 토큰 추출 │ │ - 코드 생성 │
└──────────────┘ └───────────────────┘
핵심: 텍스트 프롬프트가 아닌 **시각적 메타데이터(레이아웃, 구조, 디자인 토큰)**를 에이전트에 전달
기존 방식과의 비교
| 항목 | 기존 AI 코딩 에이전트 | Stitch Skills |
|---|---|---|
| 디자인 이해도 | 텍스트 프롬프트 의존 (시각적 맥락 부재) | 렌더링된 UI의 구조, 레이아웃, 디자인 토큰을 메타데이터로 직독직해 |
| 코드 일관성 | 파일마다 파편화된 인라인 스타일링 | 중앙 집중형 DESIGN.md를 Source of Truth로 활용 |
| 컴포넌트 재사용 | 매번 새 컴포넌트 하드코딩 | react-components 스킬로 재사용 가능한 모듈형 컴포넌트로 자동 분리 |
| 워크플로우 | 개발자가 AI 코드 리뷰 + 수동 보정 | 에이전트가 Stitch의 디자인을 직접 읽고 코드 작성 + UI 검증 자동화 |
Agent Skills 오픈 표준 구조
skills/[category]/
├── SKILL.md # 에이전트 행동 지침 & 프롬프트
├── scripts/ # 코드 검증/네트워킹용 실행 가능한 Enforcers
├── resources/ # 디자인 체크리스트, 타이포그래피 등 지식 기반
└── examples/ # Few-shot 학습용 Gold Standard 코드
design-md 스킬의 출력
# Auto-generated by Stitch: design-md skill
Tokens:
Colors:
Primary: "var(--brand-blue-600)"
Background: "#0F172A"
Typography:
Heading: "font-inter font-bold tracking-tight"
Body: "font-sans text-slate-300"
Rules:
- "Never use inline styles. Always use the predefined Tailwind tokens."
- "Extract repeating UI elements into discrete React components inside /src/components/ui"실무 적용 시나리오
시나리오 1: 레거시 시스템 위에 신규 대시보드 올리기
- 기획자가 경쟁사 대시보드 스크린샷/와이어프레임을 Stitch에 던짐
- Antigravity에서
shadcn-ui+react-components스킬 활성화 - 프롬프트: “이 레이아웃 바탕으로 대시보드 만들되, shadcn/ui 다크 테마 토큰 강제 적용, /api/v1/stats JSON 명세에 맞춰 렌더링”
- 결과: 기존 레거시와 충돌하지 않는 완벽히 격리된 모듈형 React 컴포넌트 + API 바인딩 로직
시나리오 2: Flutter 앱의 컴포넌트 일관성 유지
- 디자이너가 패딩 16px → 20px로 변경하면 에이전트가 자동 감지
- “Product Card의 패딩 변경됨. 재사용 가능한
ProductCardWidget의EdgeInsets값 수정하고 의존하는 12개 스크린 레이아웃 자동 테스트”
장점
- 디자인-투-코드 핑퐁 완전 제거
- DESIGN.md 기반 코드 일관성
- MCP로 벤더 종속 없는 확장 가능 (Stitch는 Google, 코딩은 Claude가 가능)
- Agent Skills 스킬 디렉터리로 표준화된 에이전트 교육
한계 & 트레이드오프
- 구글 생태계 벤더 락인 — Stitch + Antigravity + Gemini에 강하게 의존. 구글 서비스 종료 시 워크플로우 마비 리스크. MCP가 오픈 표준이나 100% 네이티브 호환성은 아직 어려움
- 블랙박스 현상 —
stitch-loop스킬로 자동 생성된 컴포넌트의 상태 관리(State Management) 코드가 부실한 경우 발생. Context API/Zustand 대신 Prop Drilling으로 처리된 코드 디버깅 비용이 직접 작성 비용을 역전 가능 - 할루시네이션에 의한 디자인 오염 — 스크린샷의 워터마크, 브라우저 스크롤바까지 UI 컴포넌트로 오해
Related Notes
- moc-ai-coding — AI 코딩 관련 MOC
- 2026-04-26-google-agents-cli — Google Agents CLI (ADK 기반)