stitch-skills: 프롬프트 하나로 React·React Native 코드까지

Google Labs가 공개한 stitch-skills는 Stitch MCP 서버와 연동되는 에이전트 스킬 라이브러리다. Codex, Gemini CLI, Claude Code, Cursor 등 주요 코딩 에이전트에서 Agent Skills 표준을 준수해 동작한다. 디자인부터 코드 생성까지 개발 워크플로우를 자동화하는 데 초점을 맞췄다.

텍스트나 이미지로 화면을 생성하고, 기존 프론트엔드 코드를 Stitch 디자인으로 변환하는 기능이 핵심이다. React, React Native, shadcn/ui 컴포넌트로의 코드 변환을 지원하며, Remotion을 활용한 워크스루 영상 생성도 가능하다. DESIGN.md 파일을 통해 디자인 시스템을 추출하고 적용하는 기능도 제공한다.

단순 디자인 도구가 아니라, 디자인 산출물을 즉시 실행 가능한 코드로 변환하는 파이프라인을 제공한다. 프롬프트를 정교화하거나, 단일 프롬프트로 다중 페이지 웹사이트를 생성하는 유틸리티 스킬도 포함된다. 스킬 간 의존성이 있으므로 선택적 설치 시 관련 항목을 함께 포함해야 한다.

UI 디자인과 프론트엔드 개발을 동시에 다루는 팀에 적합하다. 반복적인 디자인-코드 변환 작업을 줄이고, 일관된 디자인 토큰을 유지하면서 빠른 프로토타이핑을 원하는 개발자에게 유용하다. Apache-2.0 라이선스로 공개되어 있어 자유롭게 활용할 수 있다.