Google Stitch의 Agent Skills 오픈 표준을 따르는 에이전트 스킬과 플러그인의 모음입니다. Codex, Antigravity, Gemini CLI, Claude Code, Cursor와 같은 코딩 에이전트와 호환됩니다.

Stitch 플러그인 전체 제품군을 전역적으로 설정하는 가장 빠른 방법입니다.

Stitch Skills 마켓플레이스를 추가한 후 필요한 플러그인을 설치하세요.

CLI를 통한 방식 (권장)

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
--sparse .agents/plugins \
--sparse plugins/stitch-design \
...

[!TIP] --sparse 플래그는 선택 사항입니다. 이 플래그는 나열된 경로만 체크아웃하도록 제한하여 더 빠르게 클론합니다. 모든 저장소를 가져오려면 이를 생략하세요.

Codex UI를 통한 방식

**설정(Settings) → 플러그인 마켓플레이스(Plugin Marketplaces) → 추가(Add)**로 이동하여 다음을 입력합니다:

필드	값
Source	https://github.com/google-labs-code/stitch-skills
Git ref	main
Sparse paths	(선택 사항) .agents/plugins, plugins/stitch-design, plugins/stitch-build, plugins/stitch-utilities

마켓플레이스가 등록되면 다음 조합 중 원하는 것을 설치할 수 있습니다:

— 디자인 중심 스킬: stitch-design
— 빌드 및 컴포넌트 스킬: stitch-build
— 유틸리티 및 헬퍼 스킬: stitch-utilities

# Claude Code — 현재 프로젝트에 설치
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Cursor — 현재 워크스페이스에 설치
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

필요한 특정 스킬만 선택하세요.

중요

Stitch Design Skills는 종종 상호 의존성(inter-dependencies)을 가집니다. 스킬을 선별적으로 설치하기로 결정했다면, 필요한 모든 종속성을 포함하는지 확인하세요.

npx skills add google-labs-code/stitch-skills

다음 명령어를 실행하여 플러그인 및 스킬의 도움말 문서를 확인할 수 있습니다:

npx plugins --help
npx skills --help

이러한 스킬들은 에이전트 환경에 Stitch MCP 서버가 구성되어 실행 중이어야 합니다. 서버를 등록하고 적절한 환경 변수 및 자격 증명을 설정하려면 Stitch MCP 설정 지침을 따랐는지 확인하십시오.

Stitch 내에서 디자인을 생성, 관리 및 최적화하기 위한 핵심 설계 워크플로우입니다.

Skill	Description	Prompt Example
stitch::code-to-design	프론트엔드 코드(React, Vue 등)를 HTML 추출 + 디자인 시스템 + 업로드를 통해 Stitch Design으로 변환	"/path/to/dashboard에 있는 프론트엔드 코드를 'Dashboard-Migration-2026'이라는 이름의 Stitch 프로젝트에 업로드하세요."
...
코드 생성, 프레임워크 통합 및 Stitch 디자인으로부터 에셋 컴파일.

Skill	Description	Prompt Example
stitch::react-components	Stitch 화면을 자동화된 검증 및 디자인 토큰 일관성을 갖춘 React 컴포넌트 시스템으로 변환	· "Stitch 프로젝트 projects/123의 모든 화면을 React 컴포넌트로 변환하세요."
· "앱을 Stitch 프로젝트 13039335308618232534 의 최신 업데이트와 동기화하세요."
...
프롬프트 향상, 디자인 사양 생성 및 디자인 표준 강화를 지원하는 도구들.

Skill	Description	Prompt Example
design-md	Stitch 프로젝트를 분석하고 의미론적 언어로 포괄적인 DESIGN.md 파일을 생성	"Stitch 프로젝트 projects/123을 분석하여 DESIGN.md를 생성하세요."
...

plugins/
├── stitch-design/ — 핵심 디자인 워크플로우 플러그인
│ ├── plugin.json
...

각 스킬은 Agent Skills 표준을 따릅니다:

skills/<skill-name>/ 
├── SKILL.md — 에이전트의 "미션 컨트롤"
├── scripts/ — 실행 가능한 강제자 (검증 및 네트워킹)
...

모든 새로운 스킬은 Agent Skills 오픈 표준을 구현하기 위해 위의 파일 구조를 따라야 합니다.

검증(Validation): Stitch HTML을 다른 UI 프레임워크로 변환하고 구문을 검증하는 스킬입니다.데이터 분리(Decoupling Data): 정적 디자인 콘텐츠를 외부 목업 데이터 파일로 변환하는 스킬입니다.디자인 생성(Generate Designs): 주어진 데이터 세트로부터 Stitch에 새로운 디자인 화면을 생성하는 스킬입니다. 이 프로젝트는 Google에서 공식적으로 지원하지 않는 제품이며, Google 오픈 소스 소프트웨어 취약점 보상 프로그램 대상이 아닙니다.