mcpField
S
stitch-design

stitch-design

github.com/nguyenthienthanhデザイン・UI2548 回インストール今日更新
リポジトリ

stitch-design について

stitch-designは、Google Stitch AIでUIレイアウトを作成するスキルで、デザインやフロントエンドのワークフローに向いています。オプションのStitch MCPサーバーによる生成と、手動のプロンプト・エクスポート手順に対応し、静的デザインの制約も示します。

主な機能

  1. 01テキストプロンプトから画面を生成
  2. 02画面の編集とバリエーション作成
  3. 03デザインシステムの作成と適用
  4. 04画面のHTMLとスクリーンショット取得
  5. 055種類のデザイン向けプロンプトテンプレート
  6. 06手動でエクスポートしたHTMLとCSSの処理

活用シーン

  1. 01ダッシュボードやランディングページのレイアウト案作成
  2. 02モバイル・EC・フォームのデザイン作成
  3. 03画面間でデザイントークンを維持
  4. 04実装の参照用にスクリーンショットを引き継ぎ

MCP 対応

Stitch APIキーを設定すると、オプションのリモートStitch MCPサーバーを使ってデザインの生成・編集と出力取得ができます。サーバーや認証を利用できない場合は、手動のプロンプト・エクスポート手順を使います。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nguyenthienthanh/aura-frog --skill stitch-design

インストール後、Claude Code で/stitch-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
design-checklist.md
export-guide.md
prompt-templates.md

詳細

AI が読み取るリファレンスです。 実行中に Claude が読み取れるように最適化されています。 人間向けの説明については、トピックに応じて docs/architecture/HIERARCHICAL_PLANNING.md または docs/getting-started/ を参照してください。

スキル：Google Stitch Design

Gemini を活用した Google Stitch AI（https://stitch.withgoogle.com）で UI デザインを生成します。

stitch_info[1]{engine,limits,quota}:
  Gemini (Flash draft / Pro final),"static layouts only — no hover/animation/state; not pixel-perfect",~350 gen/month free (MCP shares this)

2 つの統合方法 — 設定済みの場合は MCP を優先し、それ以外の場合は手動で貼り付けます。

paths[2]{path,when,how}:
  MCP (automated),"stitch server enabled in .mcp.json + STITCH_API_KEY set","call tools directly — no copy-paste"
  Manual (fallback),"no Stitch MCP / no auth / hit quota","generate prompt → user pastes into stitch.withgoogle.com → ingest export"

方法 A — Stitch MCP（自動）

stitch MCP はオプトイン方式のリモート http サーバーで、バンドルされていません。.mcp.json には含まれていません （"disabled": true フラグには効果がありません。Claude Code はこれを無視してサーバーを起動するため、サーバーを無効にするには設定から除外する必要があります）。プロジェクト独自の .mcp.json にエントリーを追加し、docs/operations/MCP_GUIDE.md § Optional Servers のスニペットを参照してください。直接生成を有効にするには、STITCH_API_KEY を設定します（Stitch → Settings でキーを作成します）。OAuth よりも API キー認証が推奨されます（OAuth トークンは 1 時間で期限切れになり、クライアントで手動更新が必要です）。

⚠️ 初回接続時に確認してください。 エンドポイント（https://stitch.googleapis.com/mcp）、ヘッダー名、以下の正確なツール名は、完全な敵対的検証を行えなかった 2026 年半ばの調査に基づいています。これらを信頼する前に、サーバーのツール一覧を取得してください（エージェントに「Stitch のプロジェクトを一覧表示して」と指示するか、ツールのスキーマを確認します）。そして https://stitch.withgoogle.com/docs/mcp/setup と照合してください。名前が異なる場合は、実際の名前を使用し、作り出さないでください。サーバーに接続できない場合は、方法 B に切り替えてください。

MCP ワークフロー
mcp_workflow[6]{step,action,tool}:
  1,Read design SoT,".claude/design/design-system.md (if present) → seed the prompt"
  2,Generate screens,"generate_screen_from_text (modelId GEMINI_3_FLASH for drafts)"
  3,Iterate,"edit_screens / generate_variants on selected screen IDs"
  4,Seed design system,"create_design_system / apply_design_system (foundational tokens)"
  5,Pull outputs,"fetch screen HTML + download screenshot PNG per screen"
  6,Persist + handoff,"merge design.md → .claude/design/design-system.md; save PNGs as vision-loop targets"
  • モデルの選択： GEMINI_3_FLASH でドラフトを作成します（低コストで、すばやく反復できます）。Pro モデルに切り替えるのは最終確認時のみです。生成のたびに月あたり約 350 回の無料枠が消費されます。使用回数を記録し、破棄するドラフトに無料枠を使い切らないでください。
  • デザインシステムツール（create_design_system、update_design_system、list_design_systems、apply_design_system）は、画面間で一貫性を保つ Stitch デザインシステムを構築・管理するためのエージェント主導の方法です。これを .claude/design/design-system.md に反映してください（rules/agent/design-system-persistence.md を参照）。
  • スクリーンショットは重要な基準です： 各画面の PNG を保存してください。Claude が実際に操作できる UI を実装する際、design-vision-loop スキルの参照基準になります。
Stitch の制約に合わせた引き継ぎ

Stitch が出力するのは静的なレイアウトです。ホバー状態、アニメーション、フォームの検証、状態管理はなく、ピクセル単位の正確さも保証されません。そのため、Stitch はレイアウトと見た目を担当し、フロントエンドエージェントは動作、インタラクティブ性、モーション、アクセシビリティを担当します。それぞれを個別に指定してください。Stitch にそれらを期待しないでください。

方法 B — 手動（フォールバック）

MCP を利用できない場合に使用します。従来どおりのコピー＆ペーストの手順です。

workflow[5]{step,action,output}:
  1,Gather requirements,Requirements doc
  2,Generate prompt,Optimized Stitch prompt
  3,Create review doc,.claude/workflow/stitch-design-review-*.md
  4,Guide user,Instructions + link
  5,Process export,Component code
  1. 要件をまとめる — アプリの種類（ダッシュボード／ランディングページ／モバイル／EC／フォーム）、対象ユーザー、テーマ、主な機能、ブランド。
  2. プロンプトを生成する — アプリの種類に応じて references/prompt-templates.md からテンプレートを読み込み、内容を記入します。
  3. レビュー文書を作成する — .claude/workflow/stitch-design-review-{project-name}.md に仕様とチェックリストをまとめます。
  4. ユーザーを案内する — そのままコピー＆ペーストできるプロンプト、Stitch へのリンク、エクスポート方法（Figma への貼り付けと HTML/CSS）を提示します。
  5. エクスポートを処理する — HTML/CSS を確認し、トークンを .claude/design/design-system.md に抽出して、規約に従ってコンポーネントを生成します。

デザインの種類

design_types[5]{type,use_case,template}:
  dashboard,Admin panels; analytics,references/prompt-templates.md#dashboard
  landing,Marketing; product pages,references/prompt-templates.md#landing
  mobile,iOS/Android screens,references/prompt-templates.md#mobile
  ecommerce,Product; cart; checkout,references/prompt-templates.md#ecommerce
  forms,Multi-step wizards,references/prompt-templates.md#forms

関連ファイル

  • references/prompt-templates.md - 種類別に最適化されたプロンプト（どちらの手順でも使用）
  • references/design-checklist.md - 詳細なレビュー用チェックリスト
  • references/export-guide.md - Stitch からのエクスポート（手動手順）

こちらも参照してください： rules/agent/design-system-persistence.md（Stitch の出力を永続化）、skills/design-vision-loop/SKILL.md （実装した UI を Stitch の画面 PNG と照合）。Google はオープンソースの stitch-skills （google-labs-code/stitch-skills）も提供しています。より詳細なワークフローが必要な場合は任意で、README に従ってインストールしてください。このリポジトリには含まれていません。

コメント

Markdown 対応