코딩 에이전트가 구글 스티치 디자인을 직접 다루게 하는 스킬 모음
프롬프트 하나로 화면을 만들고, 그 화면을 React 코드로 바꾸는 과정을 코딩 에이전트가 스스로 처리합니다. 구글 스티치와 연동되는 에이전트 스킬을 모아둔 저장소로, 디자인과 개발 사이를 잇는 반복 작업을 줄여줍니다. Codex, Claude Code, Cursor 같은 도구에서 바로 쓸 수 있습니다.
디자인에서 코드로, 에이전트가 이어주는 흐름
이 저장소는 구글 스티치 MCP 서버와 함께 동작하는 에이전트 스킬을 제공합니다. 텍스트나 이미지로 새 화면을 생성하고, 기존 화면을 수정하며, 디자인 시스템을 적용하는 작업이 가능합니다. 생성된 디자인은 React, React Native, Vite 기반 대시보드 등 다양한 프론트엔드 코드로 변환됩니다. 각 스킬은 에이전트 스킬 오픈 표준을 따르므로, 여러 코딩 에이전트에서 호환됩니다.
세 가지 플러그인으로 나뉜 기능
기능은 디자인, 빌드, 유틸리티 세 가지 플러그인으로 구분됩니다.
- 디자인 플러그인 프론트엔드 코드를 스티치 디자인으로 변환하거나, 텍스트로 새 화면을 생성합니다. 디자인 시스템을 업로드하고 화면에 적용하는 기능도 포함됩니다.
- 빌드 플러그인 스티치 화면을 React 컴포넌트나 React Native 코드로 변환합니다. Remotion으로 워킹스루 영상을 만들거나 shadcn/ui를 통합하는 가이드도 제공합니다.
- 유틸리티 플러그인 모호한 UI 아이디어를 구체적인 프롬프트로 다듬거나, 디자인 표준을 강제하는 DESIGN.md 파일을 생성합니다. 단일 프롬프트로 다중 페이지 웹사이트를 생성하는 기능도 있습니다.
에이전트별 설치 방법
사용하는 코딩 에이전트에 따라 설치 명령이 다릅니다. Codex는 마켓플레이스를 추가한 뒤 필요한 플러그인을 선택 설치합니다. Claude Code와 Cursor는 npx plugins add 명령으로 프로젝트나 워크스페이스에 설치합니다. OpenCode는 스킬 폴더를 직접 복사하고 MCP 서버 설정을 수동으로 추가해야 합니다.
사용 전 확인 사항
이 저장소는 공식적으로 지원되는 구글 제품이 아닙니다. 구글 오픈소스 소프트웨어 취약점 보상 프로그램 대상에서도 제외됩니다. 스킬 간 의존성이 있을 수 있으므로 선택 설치 시 필요한 모든 의존성을 포함해야 합니다. OpenCode를 사용할 경우 스킬 이름이 소문자 케밥 케이스여야 하며, 도구 이름이 OpenCode 내장 도구와 다를 수 있어 조정해야 합니다.
