스킬 자체의 표현으로
이 스킬은 Stitch 프로젝트를 모듈형 React 및 Vite 프런트엔드로 전환하거나, 기존 React 컴포넌트를 최신 Stitch 디자인에 맞게 동기화합니다. Stitch 화면을 기반으로 작업하는 프런트엔드 엔지니어를 위한 것으로, 에이전트는 list_tools로 Stitch MCP 접두사를 찾고, get_screen으로 모든 화면을 가져오고, scripts/fetch-stitch.sh로 HTML과 스크린샷을 내려받고, tailwind.config 토큰을 resources/style-guide.json으로 추출한 다음, AST 검증을 통과하는 컴포넌트, 훅, 목 데이터를 빌드합니다.
게이팅된 네 단계가 이 순서를 강제하며, npm run validate는 Readonly Props 인터페이스, hex 값 대신 테마 토큰 사용, 단일 거대 페이지 파일 금지를 강제합니다.
산출물
- 각 화면에 대해 .stitch/designs/{page}.html과 .stitch/designs/{page}.png에 다운로드된 디자인 산출물.
- projectId, title, deviceType, screens 맵, Last Sync Time 필드를 담은 .stitch/metadata.json.
- 현재 프로젝트의 색상, 폰트, 스페이싱, radius, 타이포그래피 토큰을 담아 덮어쓴 resources/style-guide.json.
- src/components의 React 컴포넌트, src/hooks의 hooks, src/data/mockData.ts의 목 데이터, 그리고 이를 렌더링하는 업데이트된 entry point.
작동 방식
- 01Stitch 네임스페이스 찾기
list_tools를 실행하여 MCP 프리픽스를 알아낸 다음, 이후의 모든 Stitch 호출에 그 프리픽스를 재사용합니다.
- 02모든 화면의 메타데이터 가져오기
프로젝트의 각 화면에 대해 get_screen을 호출하여 디자인 JSON과 다운로드 URL을 빠짐없이 가져옵니다.
- 03스크립트를 통해 다운로드
내부 fetch 도구는 Google Cloud Storage에 대해 실패할 수 있으므로, 리다이렉트와 보안 핸드셰이크를 처리하는 제공된 bash 스크립트를 통해 다운로드합니다.
- 04디자인 토큰 추출
다운로드한 각 HTML 파일을 열고, head 스크립트 블록의 tailwind.config 객체에서 색상, 폰트, 스페이싱, radius, 타이포그래피를 읽습니다.
- 05템플릿에서 컴포넌트 작성
제공된 컴포넌트 템플릿을 기반으로, entry point를 연결하기 전에 placeholder 컴포넌트 이름의 모든 인스턴스를 바꿔줍니다.