작업 스킬
Stitch Skills
텍스트·이미지 기획에서 화면 디자인과 프런트엔드로 이어집니다.
소개
공개 문서를 바탕으로 LessAI Tools가 정리
구현 전에 화면을 검토하려는 사람용입니다. Google Stitch 프로젝트의 화면 생성·편집, 스타일 관리, React 등 코드 변환을 안내합니다. Stitch 계정, 프로젝트 권한, MCP 연결과 스킬 의존성이 필요합니다. Google Labs code가 공개했지만 Google 공식 지원 제품은 아니라고 명시합니다. 한도는 현재 공식 안내를 따릅니다.
시작하기
필요 조건을 확인하고 AI 도우미를 선택해 연결 단계를 보세요.
- 준비 사항
- 플러그인 지원 Codex·Claude Code·Cursor이며 뒤 두 설치 명령은 Node.js·npm도 필요합니다.
- 본인 Stitch 계정과 문서의 MCP 인증을 준비하세요. 디자인 생성은 인터넷이 필요합니다.
- 비용
- 플러그인은 Apache-2.0입니다. Stitch 한도는 계정에서 확인하며 도우미 비용은 별도입니다.
- 필요 권한
- MCP는 허가된 Stitch를 읽고 수정합니다. 프롬프트·선택 이미지·HTML은 Stitch로 가고 생성 파일은 로컬 저장됩니다. 허용 자료만 올리고 인증은 본인 도우미에 두세요.
Codex공식 연결 문서 있음
현재 README에 Codex 설치가 명시됩니다. 디자인 접근용 Stitch MCP도 연결해야 합니다.
연결 단계
- Codex 설정 → 플러그인 마켓 → 추가에서 출처는 https://github.com/google-labs-code/stitch-skills, Git ref는 main으로 설정하세요.
- 추가한 마켓에서 stitch-design을 설치하고 디자인 플러그인부터 시작하세요.
- 아래 Stitch MCP 안내로 인증·연결 후 새 세션에서 본인 프로젝트 목록을 요청하세요.
연결 결과 확인
실제 프로젝트를 확인하세요. 없으면 빈 목록도 정상입니다. 시험 화면을 요청해 Stitch에서 확인하세요. 스킬 설치만으로 MCP 연결은 되지 않습니다.
공식 출처
Claude Code공식 연결 문서 있음
현재 README에 Claude Code 설치가 명시되며 디자인 접근용 Stitch MCP도 필요합니다.
연결 단계
- 대상 프로젝트에서 터미널을 열어 Node.js·npm을 확인하세요.
- npx plugins add google-labs-code/stitch-skills --scope project --target claude-code 를 실행하고 안내를 확인하세요.
- 아래 Stitch MCP 안내로 인증·연결 후 새 세션에서 본인 프로젝트 목록을 요청하세요.
연결 결과 확인
실제 프로젝트를 확인하세요. 없으면 빈 목록도 정상입니다. 시험 화면을 요청해 Stitch에서 확인하세요. 스킬 설치만으로 MCP 연결은 되지 않습니다.
공식 출처
Cursor공식 연결 문서 있음
현재 README에 Cursor 설치가 명시되며 디자인 접근용 Stitch MCP도 필요합니다.
연결 단계
- 대상 프로젝트에서 터미널을 열어 Node.js·npm을 확인하세요.
- npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor 를 실행하고 안내를 확인하세요.
- 아래 Stitch MCP 안내로 인증·연결 후 새 세션에서 본인 프로젝트 목록을 요청하세요.
연결 결과 확인
실제 프로젝트를 확인하세요. 없으면 빈 목록도 정상입니다. 시험 화면을 요청해 Stitch에서 확인하세요. 스킬 설치만으로 MCP 연결은 되지 않습니다.
공식 출처
공식 출처
연결 안내 확인일 2026-10-13 · 공개 문서를 기반으로 합니다. 모든 프로젝트를 직접 설치해 테스트하지는 않았습니다.
활용 방법
- 텍스트나 참고 이미지로 화면 생성·편집
- 일관된 화면용 스타일 관리
- 선택한 스킬로 프런트엔드 컴포넌트 변환
공식 프로젝트 및 문서
프로젝트 설명(번역)
Stitch MCP용 모음으로 공개 Agent Skills 표준과 Antigravity·Gemini CLI·Claude Code·Cursor를 지원
비슷한 작업의 플러그인
주요 용도를 우선하고 공통 작업과 스타 수를 참고합니다. 연결 방법은 다를 수 있습니다.
- Anthropic Skills · Frontend Design — 의도적인 레이아웃, 타이포그래피 및 상호 작용 선택을 통해 인터페이스를 계획하고 구축하고 비평합니다.
- Taste Skill — 공개 웹사이트에 의도적인 시각적 방향을 부여한 다음 브라우저에서 결과를 확인하세요.
- Text to CAD — 치수와 모양 설명으로 편집 가능한 3D 부품을 만듭니다.