stitch · diff

v2.0.0 to git:20260809.59a41cf

96 added, 142 removed. Audit A to A.

---

name: stitch

- description: >

- Stitch MCP 통합 스킬. 4가지 모드: (1) DESIGN.md 생성, (2) 프롬프트 최적화,

- (3) 멀티페이지 자율 생성 루프, (4) React/TypeScript 변환.

- "Stitch", "UI 생성", "디자인 to 코드", "멀티페이지", "DESIGN.md" 요청에 실행.

- /stitch로 실행.

- triggers:

- - "stitch"

- - "UI 생성"

- - "디자인 to 코드"

- - "DESIGN.md 생성"

- - "디자인 시스템 분석"

- - "프롬프트 최적화"

- - "UI 프롬프트"

- - "멀티페이지 생성"

- - "사이트 빌드 루프"

- - "React 변환"

- - "HTML to React"

- auto_apply: false

- license: MIT

- metadata:

- version: "2.0.0"

- merged_from:

- - stitch-design-md

- - stitch-enhance-prompt

- - stitch-loop

- - stitch-react

+ description: Operate Google Stitch through an already configured Stitch MCP server. Use when the user explicitly mentions Stitch or asks to generate, edit, vary, import, export, synchronize, or convert Stitch screens; manage a Stitch design system; run a resumable multi-page Stitch loop; or turn Stitch screens into React. Do not trigger for generic UI design requests that do not require Stitch.

---

- # Stitch — UI 생성 통합 스킬

- > Stitch MCP로 UI를 생성하고, 분석하고, 변환하는 4가지 모드를 하나로.

- ## Quick Start

- ```

- /stitch design # Mode 1: 프로젝트 분석 → DESIGN.md 생성

- /stitch prompt # Mode 2: 모호한 아이디어 → Stitch 최적 프롬프트

- /stitch loop # Mode 3: 멀티페이지 자율 생성 (바톤 시스템)

- /stitch react # Mode 4: Stitch HTML → React/TypeScript 변환

- /stitch # 대화형: 상황에 맞는 모드 자동 선택

- ```

+ # Stitch

- **공식 호출명:** `/stitch`

+ Treat Stitch as a design execution backend. Keep product structure, visual direction, and design policy in Aphrodite; use this skill to translate those decisions into Stitch operations and code artifacts.

- ---

+ ## Boundary

- ## Mode 1: Design — DESIGN.md 생성

+ - Let `design-plan` (`/aphrodite`) own discovery, IA, layout blueprints, and the root `DESIGN.md`.

+ - Let Stitch own remote project/screen operations and `.stitch/` runtime state.

+ - Let the existing application architecture own routing, state, data, and component conventions.

+ - Use standalone Stitch mode only when the user explicitly wants direct Stitch work without Aphrodite.

- 기존 Stitch 프로젝트를 분석하여 디자인 시스템 문서를 생성합니다.

- 새 스크린 생성 시 기존 디자인 언어와의 일관성을 보장하는 source of truth.

+ Never invent a visual direction inside this skill when `DESIGN.md` or `docs/design-refs/` exists. Compile those artifacts into Stitch inputs.

- > **스키마 통일**: 생성하는 `DESIGN.md`는 아프로디테와 **같은 정본 스키마**를 따릅니다 — 2층(YAML 토큰 + 산문), 토큰 중괄호 참조, `npx @google/design.md lint`로 검증. 스키마·lint·export 상세는 [`../design-plan/references/design-md-guide.md`](../design-plan/references/design-md-guide.md).

- > **체이닝**: aphrodite(CSV 정방향) ↔ stitch(화면 역방향)는 같은 DESIGN.md를 주고받습니다. aphrodite가 만든 DESIGN.md를 stitch 생성 컨텍스트로 쓰거나, stitch가 역추출한 DESIGN.md를 aphrodite가 lint·정교화합니다.

+ ## Preflight

- ### Workflow

+ 1. Inspect the available tools and identify the Stitch MCP namespace by capability, not by a hard-coded prefix.

+ 2. Stop and report the missing dependency if no Stitch MCP tools are available. Never fabricate project IDs, screen IDs, URLs, or tool results.

+ 3. Read [references/mcp-contract.md](references/mcp-contract.md) completely before any Stitch MCP call.

+ 4. Read the project root `DESIGN.md` and relevant `docs/design-refs/` artifacts before generating or editing a screen.

+ 5. Check `.stitch/metadata.json` before remote lookup. Validate it with:

- 1. **네임스페이스 탐색**: `list_projects`로 프로젝트 목록 조회

- 2. **스크린 조회**: `list_screens`로 전체 스크린 확인

- 3. **메타데이터 수집**: `get_screen_metadata` + `get_screen_html`

- 4. **에셋 다운로드**: `download_screen_asset`으로 이미지/폰트 수집

- 5. **분석 → DESIGN.md 생성**

+ ```bash

+ python <STITCH_SKILL_DIR>/scripts/validate_stitch_state.py .stitch/metadata.json

+ ```

- ### 분석 원칙

+ Resolve `<STITCH_SKILL_DIR>` to the directory containing this `SKILL.md`; do not assume the skill is installed inside the target project.

- | 분석 영역 | 추출 항목 |

- |-----------|----------|

- | 프로젝트 아이덴티티 | 전체 분위기, 스타일 톤 |

- | 색상 팔레트 | 설명적 이름 + Hex + 역할 (primary, accent 등) |

- | 타이포그래피 | Heading/Body/Caption 체계, 폰트 패밀리 |

- | 기하학 | border-radius, box-shadow 패턴 |

- | 깊이 표현 | 그림자와 고도를 자연어로 설명 |

+ 6. Classify the action:

+ - Read-only: list/get projects, retrieve screens, download artifacts, compare state.

+ - Remote mutation: create/edit/vary/apply a design system.

+ - Sensitive upload: send a local image, HTML file, or `DESIGN.md` to Stitch.

+ 7. Treat the user's explicit request to create/edit/vary as authorization for that scoped remote mutation. Before a sensitive upload, still show the exact project, files, types, and sizes and obtain confirmation.

- ---

+ ## Route the Request

- ## Mode 2: Prompt — 프롬프트 최적화

+ | Invocation | Route | Required reference |

+ |---|---|---|

+ | `/stitch generate` | Generate a screen from text or an uploaded image | [generate-and-design-system.md](references/generate-and-design-system.md) |

+ | `/stitch edit` | Modify selected existing screens | [generate-and-design-system.md](references/generate-and-design-system.md) |

+ | `/stitch variants` | Produce controlled alternatives from a selected screen | [generate-and-design-system.md](references/generate-and-design-system.md) |

+ | `/stitch design-system pull` | Reverse-extract remote visual language into a proposed `DESIGN.md` update | [generate-and-design-system.md](references/generate-and-design-system.md) |

+ | `/stitch design-system push` | Synchronize the root `DESIGN.md` into Stitch | [generate-and-design-system.md](references/generate-and-design-system.md) |

+ | `/stitch design-system apply` | Apply a Stitch design-system asset to selected screens | [generate-and-design-system.md](references/generate-and-design-system.md) |

+ | `/stitch loop` | Generate a resumable multi-page set | [loop-state.md](references/loop-state.md) |

+ | `/stitch react` | Convert or synchronize Stitch screens with a React app | [react-handoff.md](references/react-handoff.md) |

+ | `/stitch import` | Capture local UI and upload it into Stitch | [import-export.md](references/import-export.md) |

+ | `/stitch sync` | Refresh remote metadata and local staged artifacts | [loop-state.md](references/loop-state.md) |

+ | `/stitch status` | Compare local runtime state with the remote project | [loop-state.md](references/loop-state.md) |

- 모호한 UI 아이디어를 Stitch에 최적화된 상세 프롬프트로 변환합니다.

+ Preserve these compatibility aliases:

- ### Enhancement Process

+ - `/stitch design` means `/stitch design-system pull`.

+ - `/stitch prompt` means compile an Aphrodite brief into a `/stitch generate` request without calling Stitch unless generation was requested.

- 1. **입력 분석**: 사용자 아이디어의 타입 파악, 누락 정보 식별

- 2. **컨텍스트 수집**: DESIGN.md 로드, 프로젝트 도메인 추론

- 3. **프롬프트 확장**: 아래 체크리스트로 구체화

+ If the request is ambiguous, infer the least-mutating route from the available artifacts. Ask only when two routes would materially change different remote state.

- | 항목 | 확인 |

- |------|------|

- | 페이지 목적 | 랜딩? 대시보드? 폼? |

- | 대상 사용자 | B2B? B2C? 관리자? |

- | 핵심 요소 | CTA 버튼, 차트, 테이블, 카드 등 |

- | 레이아웃 | 그리드, 사이드바, 탭, 풀스크린 |

- | 색상/타이포 | DESIGN.md 토큰 참조 |

- | 상호작용 | 호버, 애니메이션, 드래그 |

- | 반응형 | 모바일 우선? 데스크톱 우선? |

+ ## Artifact Authority

- 4. **구조화 출력**: 개요, 시각적 스타일, 레이아웃, 핵심 요소, 상호작용, 디자인 시스템 컨텍스트

+ Use this order when artifacts disagree:

- ---

+ 1. Root `DESIGN.md`: design-system source of truth.

+ 2. Latest `docs/design-refs/` brief, sitemap, direction, and layout blueprint: page structure and content contract.

+ 3. Existing application code: functional and architectural contract.

+ 4. `.stitch/` files: transport, cache, and resumable execution state.

+ 5. Remote Stitch screen: generated implementation candidate.

- ## Mode 3: Loop — 멀티페이지 자율 생성

+ Use `.stitch/DESIGN.md` only as a synchronized transport copy of root `DESIGN.md`. Do not let it become a second independently edited design system. See [references/loop-state.md](references/loop-state.md) for the full artifact contract.

- 바톤(Baton) 시스템으로 멀티페이지 웹사이트를 자율 생성합니다.

+ ## Core Execution Protocol

- ### 핵심 메커니즘

+ 1. Retrieve the current project and selected screens before mutation.

+ 2. Resolve the intended device type, target screen instances, and design-system asset.

+ 3. Compile only the requested change:

+ - Generate for a new structure.

+ - Edit for a localized change.

+ - Create variants for exploration around a good base.

+ - Avoid rerolling a screen whose structure is already correct.

+ 4. Perform the smallest sufficient Stitch operation.

+ 5. Retrieve the resulting project and screen metadata again; do not trust a mutation response alone.

+ 6. Download the resulting HTML and full-width screenshot into `.stitch/designs/` without overwriting existing files unless refresh was requested.

+ 7. View the screenshot and compare it with `DESIGN.md`, the layout blueprint, and the requested delta.

+ 8. Update `.stitch/metadata.json` only from observed remote state, then run the state validator.

+ 9. Run code-level and visual verification required by the selected route.

+ 10. Report project ID, affected screen IDs, local artifacts, verification evidence, and any residual drift.

- ```

- [SITE.md 계획] → [바톤 읽기] → [Stitch 생성] → [통합] → [검증] → [바톤 전달] → 반복

- ```

+ ## Non-Negotiable Rules

- `next-prompt.md` 파일이 각 반복 간 작업을 릴레이하는 바톤 역할.

+ - Never assume legacy tools such as `get_screen_html`, `get_screen_metadata`, or `download_screen_asset` exist. Discover the live contract and prefer `get_screen` download URLs when available.

+ - Never repeat colors, fonts, and theme instructions in every generation prompt when a project-level Stitch design system is applied. This creates two competing theme sources.

+ - Never send position or dimension fields to `apply_design_system`; pass only `id` and `sourceScreen` for real screen instances.

+ - Never expose an API key in a prompt, command transcript, committed file, or report. Use the `STITCH_API_KEY` environment variable for direct uploads.

+ - Never overwrite an existing root `DESIGN.md`, staged screen, or application file without first comparing the old and new state.

+ - Never keep an autonomous loop alive by inventing unnecessary pages. Finish when the declared roadmap is complete.

+ - Never impose a new React architecture merely because Stitch emitted static HTML. Adapt to the repository's stack and conventions.

+ - Never declare visual fidelity from HTML inspection alone. Inspect the downloaded screenshot or a rendered local page.

- ### 1회 반복 흐름

+ ## Deterministic Helpers

- 1. **바톤 읽기**: `next-prompt.md`에서 페이지명, 경로, 프롬프트 추출

- 2. **컨텍스트 확인**: SITE.md (사이트맵) + DESIGN.md (디자인 시스템) 참조

- 3. **Stitch 생성**: `generate_screen_from_text(prompt, project_id)` → HTML + 스크린샷

- 4. **통합**: HTML을 `site/public/{경로}/index.html`로 저장, 네비게이션 링크 연결

- 5. **검증**: 시각적 확인, 링크 동작, 반응형 레이아웃

+ Use the bundled scripts instead of re-emitting binary/base64 payloads or writing ad hoc state checks:

- ### SITE.md 구조

+ ```bash

+ # Validate resumable state

+ python <STITCH_SKILL_DIR>/scripts/validate_stitch_state.py .stitch/metadata.json

- ```markdown

- # Site: {프로젝트명}

+ # Download a screen artifact without accidental overwrite

+ python <STITCH_SKILL_DIR>/scripts/fetch_stitch_asset.py \

+ --url "<download-url>" --output .stitch/designs/home.html

- ## Pages

- | # | 페이지 | 경로 | 상태 |

- |---|--------|------|------|

- | 1 | 홈 | / | done |

- | 2 | 소개 | /about | pending |

- | 3 | 가격 | /pricing | pending |

+ # Preview an upload without network mutation

+ python <STITCH_SKILL_DIR>/scripts/upload_to_stitch.py \

+ --project-id "<project-id>" --file DESIGN.md --dry-run

```

- ---

- ## Mode 4: React — HTML → React/TypeScript 변환

- Stitch에서 생성된 정적 HTML을 프로덕션 React/TypeScript 컴포넌트로 변환합니다.

- ### Workflow

- 1. **스크린 가져오기**: `get_screen_html`로 HTML 획득

- 2. **디자인 토큰 추출**: Tailwind 클래스 + 인라인 스타일 → CSS 변수

- 3. **컴포넌트 분해**: 시맨틱 구조 분석 후 계층 분리

- 4. **React 컴포넌트 생성**: TypeScript + Props 타입 정의

- 5. **검증**: `tsc --noEmit` + 린트

- ### 컴포넌트 분해 계층

- | 계층 | 예시 | 기준 |

- |------|------|------|

- | `primitives/` | Button, Input, Badge | 단일 역할, 최소 단위 |

- | `patterns/` | Card, FormField, Avatar | primitives 조합 |

- | `blocks/` | Header, Hero, Footer | 섹션 단위 |

- | `layouts/` | PageLayout, SidebarLayout | 페이지 구조 |

- ### 분해 규칙

- - **단일 책임**: 1 컴포넌트 = 1 역할

- - **재사용성**: props로 변형 가능하게

- - **합성 가능**: children, slots 패턴 활용

- - **시맨틱 HTML**: `<nav>`, `<main>`, `<section>` 우선

+ Read [references/import-export.md](references/import-export.md) before using the uploader. An actual upload requires `STITCH_API_KEY` and `--confirm-upload` after user confirmation.

- ---

+ ## Completion Evidence

- ## 적용 조건

+ Do not report completion until all applicable evidence exists:

- - Stitch MCP 서버가 활성화된 환경에서만 사용

- - Stitch 없이 일반 UI 작업은 `frontend-design` 또는 `react-dev` 사용

- - Mode 선택이 모호하면 대화형으로 물어보기

+ - Stitch MCP capability and target project confirmed.

+ - Resulting screen or design-system IDs retrieved after mutation.

+ - `.stitch/metadata.json` updated and validator passed.

+ - Generated screenshot visually inspected.

+ - React route: typecheck/lint and rendered comparison completed when the project supports them.

+ - Loop route: sitemap and baton agree; baton is explicitly complete when no declared page remains.

- ## Related Files

+ ## Provenance

- | 파일 | 역할 |

- |------|------|

- | `DESIGN.md` | 디자인 시스템 정본 (aphrodite와 공유 스키마) |

- | `../design-plan/references/design-md-guide.md` | DESIGN.md 스키마 + lint/export 가이드 |

- | `SITE.md` | 멀티페이지 사이트맵 + 로드맵 |

- | `next-prompt.md` | 루프 바톤 (Mode 3) |

- | `agents/stitch-developer.md` | Stitch 오케스트레이션 에이전트 |

+ This local adapter selectively incorporates operational patterns from `google-labs-code/stitch-skills` as reviewed at commit `535b0889a46868c9b08f8a7f7084db3c1958a2b6` on 2026-08-09. The upstream project is a useful implementation reference, not the local design-policy authority and not an officially supported Google product.