stitch-skills

stitch-skills — Stitch MCP 向けエージェントスキル

AI を活用した UI デザイン生成、プロンプトの改善、画面からコードへのワークフロー。

stitch-skills は、Claude Code、Cursor、Gemini CLI との互換性を考慮し、Agent Skills オープンスタンダードに準拠した Stitch MCP サーバー向けのエージェントスキルライブラリです。

注記： Google が公式にサポートする製品ではありません。

インストール

プラグイン（Claude Code）

claude plugin marketplace add google-labs-code/stitch-skills

スキル（すべてのプラットフォーム）

# List available skills
npx skills add google-labs-code/stitch-skills --list

# Install a specific skill globally
npx skills add google-labs-code/stitch-skills --skill stitch-design --global
npx skills add google-labs-code/stitch-skills --skill stitch-loop --global
npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global
npx skills add google-labs-code/stitch-skills --skill react-components --global
npx skills add google-labs-code/stitch-skills --skill remotion --global
npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global
npx skills add google-labs-code/stitch-skills --skill design-md --global

# Install from jeo-skills
npx skills add https://github.com/akillness/jeo-skills --skill stitch-skills

使用する場面

• Stitch を通じて、自然言語のプロンプトから高忠実度の UI 画面を生成する
• 自動ファイル整理機能を使い、単一のプロンプトから複数ページのウェブサイトを作成する
• AI エージェント向けにデザインシステムを翻訳したDESIGN.md ドキュメントを作成する
• 曖昧な UI のアイデアを、具体性のある洗練された Stitch 向けプロンプトに改善する
• 整合性チェックを行いながら、Stitch のデザインをReact コンポーネントのアーキテクチャに変換する
• Remotion を使って、Stitch プロジェクトからウォークスルー動画を生成する
• React アプリケーションにshadcn/ui コンポーネントを統合する

使用しない場面

• トークンレベルのデザインシステムのリント、差分確認、エクスポートが必要な場合 → google-design に振り分けてください
• WCAG のコントラスト監査のみが必要な場合 → web-accessibility に振り分けてください
• バックエンド API の全体設計が必要な場合 → backend-api に振り分けてください
• 一般的な React の状態管理が必要な場合 → react-patterns に振り分けてください

利用可能なスキル

stitch-design

Stitch MCP システムを通じてプロンプトを改善し、画面を生成するための主要なスキルです。

Workflow:
1. Enhance the user's prompt for Stitch
2. Call stitch_generate_screen MCP tool
3. Validate and iterate on the output

stitch-loop

単一のプロンプトから複数ページのウェブサイトを作成する作業を自動化します。

Workflow:
1. Parse top-level pages from the prompt
2. Generate each screen via stitch_generate_screen
3. Organize files and validate output
4. Produce a complete, linked website

enhance-prompt

曖昧な UI のアイデアを、洗練された Stitch 向けプロンプトに変換します。

# Example: add design keywords, specificity, and system context
Input:  "a login page"
Output: "A clean, minimal login page with email/password fields,
         a primary CTA button using brand colors, subtle card elevation,
         and a 'Forgot password?' link below the form."

design-md

Stitch の画面生成に適した、デザインシステムを自然で意味のある言葉に置き換えた DESIGN.md ドキュメントを生成します。

# Output: repo-root DESIGN.md with brand tokens in Stitch-friendly language

react-components

Stitch の画面を、整合性検証を行いながら React コンポーネントのアーキテクチャに変換します。

Workflow:
1. Parse Stitch screen JSON/HTML output
2. Map elements to React component tree
3. Validate component naming and prop consistency
4. Output component files with TypeScript types

remotion

Remotion を使って、滑らかなトランジション、ズーム、テキストオーバーレイを備えた Stitch プロジェクトのウォークスルー動画を作成します。

# Requires: npx remotion studio
# Output: MP4 walkthrough video of Stitch screens

shadcn-ui

Stitch のデザインをもとに構築された React アプリケーションに shadcn/ui コンポーネントを実装するためのガイダンスを提供します。

npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input form

リポジトリ構成

各スキルは Agent Skills オープンスタンダードに準拠しています。

stitch-skills/
├── stitch-design/
│   ├── SKILL.md        — agent mission documentation
│   ├── scripts/        — validation and networking executables
│   ├── resources/      — knowledge base (checklists, style guides)
│   └── examples/       — reference implementations
├── stitch-loop/
├── enhance-prompt/
├── react-components/
├── remotion/
├── shadcn-ui/
└── design-md/

運用ルール

1. より良い結果を得るため、stitch-design で生成する前に enhance-prompt を実行してください
2. stitch-loop で複数ページの作業を始める前に、design-md を使って DESIGN.md を作成してください
3. react-components の出力後、React コンポーネントの命名に一貫性があるか確認してください
4. remotion で使用できるように、Stitch の画面出力は専用の screens/ ディレクトリに保存してください
5. shadcn-ui の統合は、react-components によるコンポーネントツリーの確立後にのみ行ってください
6. 反復：改善 → 生成 → レビュー → 改善が推奨されるサイクルです

使用例

# Full UI generation workflow
# 1. Enhance your prompt
stitch enhance-prompt "a dashboard for monitoring server health"

# 2. Generate screens via Stitch MCP
stitch generate "..." --pages overview,alerts,settings

# 3. Convert to React
stitch react-components ./screens/

# 4. Add shadcn/ui
npx shadcn-ui@latest add card badge table

# 5. Generate walkthrough video
stitch remotion ./screens/ --output walkthrough.mp4

出典：google-labs-code/stitch-skills — Apache-2.0 ライセンス