スキルリファレンス

Stitch Design Skills は 3 つのプラグインに分かれています。各スキルは Agent Skills オープン標準に従っており、互換性のある任意のコーディングエージェントで動作します。

stitch-design

デザインの作成、キャプチャ、管理のためのコアデザインワークフローです。

code-to-design

完全なインポートパイプラインをオーケストレーションします。フレームワークの検出 → 静的 HTML の抽出 → デザイントークンの抽出 → Stitch へのアップロード。

依存関係： extract-static-html、extract-design-md、upload-to-stitch

generate-design

テキストまたは画像から新しい画面を生成し、既存の画面を編集し、デザインバリアントを作成します。

MCP ツール： generate_screen_from_text、edit_screens、generate_variants、list_projects、create_project、list_design_systems

manage-design-system

DESIGN.md の仕様をアップロードし、プロジェクトレベルのデザインシステムを作成して、画面に適用します。

MCP ツール： create_design_system_from_design_md、apply_design_system、list_design_systems、upload_design_md

extract-design-md

フロントエンドのソースコード（React、Vue、Svelte、Angular、プレーン CSS、Tailwind）から DESIGN.md を逆算します。ビルドステップは不要です。

パイプライン： ソースツリーのスキャン → フレームワークの検出 → トークンの抽出 → 正規化 → 重複排除 → DESIGN.md の生成

extract-static-html

実行中のウェブアプリケーションから自己完結型の HTML スナップショットをキャプチャし、CSS をインライン化して画像を base64 に変換します。

upload-to-stitch

LLM の出力トークン制限を回避するスタンドアロンスクリプトを介して、ローカルアセット（画像、HTML）を Stitch REST API にアップロードします。

stitch-build

Stitch のデザインを基にしたコード生成とメディアコンパイルです。

react-components

Stitch の画面を、Tailwind テーマの抽出と AST ベースの検証を伴うモジュール式の React コンポーネント階層に変換します。

remotion

Remotion を使用して、スプリングアニメーションのズーム効果と設定可能なトランジションを備えたウォークスルー動画を Stitch プロジェクトから生成します。ウォークスルー動画を生成するを参照してください。

shadcn-ui

shadcn/ui コンポーネントの統合に関する専門的なガイダンスです。Radix UI と Tailwind CSS を使った探索、インストール、カスタマイズを扱います。

stitch-utilities

パイプラインの両端での品質強化です。

design-md

既存の Stitch プロジェクトの画面を分析し、レンダリングされた出力から DESIGN.md を合成します。これは デザイン → トークン の方向です（コード → トークン である extract-design-md とは対照的です）。

MCP ツール： list_screens、get_screen、upload_design_md、list_projects、get_project

enhance-prompt

曖昧なアイデアを、UI/UX キーワード、デザインシステムのコンテキスト、ページ構造を備えた、構造化された生成可能なプロンプトに変換します。

stitch-loop

リレーバトンパターンを使って、自律的な複数ページサイト生成をオーケストレーションします。複数ページのサイトを構築するを参照してください。

taste-design

汎用性を排した基準を備えたプレミアムな DESIGN.md ファイルを生成します。調整済みのカラーサイエンス、音楽の音程比によるタイプスケール、スプリング物理のモーション、明示的なアンチパターンカタログを含みます。プレミアムデザインシステムを作成するを参照してください。

個別のスキルをインストールする

プラグインスイート全体をインストールすることを推奨します。特定のスキルだけが必要な場合：

# Design only (generate and edit screens)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::generate-design,stitch::manage-design-system,enhance-prompt

# Import existing code (full migration pipeline)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::code-to-design,stitch::extract-design-md,stitch::extract-static-html,stitch::upload-to-stitch

# Code generation (Stitch to React)
npx skills add google-labs-code/stitch-skills \
  --skills react:components,shadcn-ui

多くのスキルには相互依存関係があります。選択してインストールする前に、上記の依存関係の一覧を確認してください。