mcpField
S
stitch::manage-design-system

stitch::manage-design-system

github.com/google-labs-codeデザイン・UI8.6k10.4k 回インストール10 週間前に更新
リポジトリ

stitch::manage-design-system について

DESIGN.md や画面分析をもとに、Stitch のプロジェクト単位のデザインシステムを作成・更新するスキルです。画面の取得、アップロード前の確認、選択した画面へのデザイントークン適用を案内します。

主な機能

  1. 01Stitch のプロジェクトと画面情報の取得
  2. 02画面や説明文の分析
  3. 03DESIGN.md のアップロードとシステム作成
  4. 04画面へのデザインシステム適用
  5. 05プロジェクトメタデータの管理

活用シーン

  1. 01DESIGN.md から Stitch のデザインシステムを作成
  2. 02既存画面からシステムを抽出
  3. 03選択した画面に共通トークンを適用

MCP 対応

Stitch MCP ツールでプロジェクト、画面、メタデータを取得し、デザイン文書のアップロード、システム作成、画面への適用を行います。

インストール

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

$npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system

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

同梱ファイルexamples/metadata.jsonreference/tool-schema.md

詳細

デザインシステム

プロジェクトのデザイン言語の「信頼できる唯一の情報源」を作成し、今後のすべての画面で一貫性を保ちます。

メモ

このスキルで言及されているすべてのツール（例：get_screen、 create_design_system_from_design_md、apply_design_system）の MCP ツールプレフィックスの扱いについては、 システムプロンプトを参照してください。

📥 取得

Stitch プロジェクトを分析するには、Stitch MCP ツールを使用してメタデータとアセットを取得する必要があります。

  1. プロジェクトの検索：list_projects を使用して、対象の projectId を見つけます。
  2. 画面の検索：その projectId に対して list_screens を使用し、代表的な画面（例：「ホーム」、「メインダッシュボード」）を見つけます。
  3. メタデータの取得：対象画面に対して get_screen を呼び出し、screenshot.downloadUrl と htmlCode.downloadUrl を取得します。
  4. アセットのダウンロード：read_url_content を使用して HTML コードを取得します。

🧠 説明からの統合

既存の画面からデザインシステムを抽出する必要がある場合は、design-md スキル（stitch-utilities プラグイン内）を使用します。

既存の画面がない場合（新規プロジェクト）、またはユーザーが直接説明（例：「ダークテーマ、青と紫、角丸、Inter フォント」）を提供する場合は、次の手順を実行します。

  1. デザインマッピングを使用して、ユーザーの曖昧な表現を正確な値に対応付けます（stitch-utilities の design-md スキルまたは generate-design スキルを参照）。
  2. 具体的な HEX カラーコード、フォントファミリー、角丸の値を選択します。
  3. DESIGN.md ファイルを生成します（構成については、stitch-utilities の design-md スキルを参照）。
  4. 下記の「Stitch でデザインシステムを作成または更新する」手順に進みます。

📝 出力構成

DESIGN.md ファイルは、design-md スキル（stitch-utilities プラグイン内）で定義されている構成に従う必要があります。

🚀 Stitch でデザインシステムを作成または更新する

.stitch/DESIGN.md を生成した後、Stitch でデザインシステムも作成または更新してください。

デザインシステムの作成は 2 段階で行います。

警告

チェックポイント — ユーザーの確認が必要です。 アップロードする前に、必ず一時停止してユーザーに確認してください。 作成予定のデザインシステムの概要（表示名、主要な色、フォント、角丸）を提示し、明示的な承認を待ってから先に進みます。 ユーザーの確認なしにアップロードしてはいけません。

  1. DESIGN.md をアップロードします：

    • オプション A（推奨 — アップローダースクリプト）：.md ファイルをネイティブに処理できる、変更済みの upload-to-stitch Python スクリプトを使用します。このスクリプトはプロセス内で Markdown ファイルを Base64 エンコードし、出力トークンの上限を回避して /v1/projects/{projectId}/screens:batchCreate エンドポイントに送信します。

      python3 stitch-skills/plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py \
  --project-id <PROJECT_ID> \
  --file-path /path/to/DESIGN.md \
  --api-key <API_KEY> \
  --generated-by <GENERATED_BY>

      <GENERATED_BY> には、DESIGN.md を生成したスキルまたはツールを識別できる値を設定します。別のスキルから呼び出された場合は呼び出し元のスキル名（例：stitch::code-to-design）を使用し、単独で使用する場合はエージェントまたはツールの名前（例：Gemini、Claude Code）を使用します。省略した場合、スクリプトは UserUploadedDesignMd をデフォルトとして使用します。

      これにより、sourceScreen ID と screenInstance ID が返されます。

    • オプション B（MCP ツールを直接使用）：DESIGN.md が小さい場合（約 5 KB 未満）、デザイン Markdown の内容を Base64 エンコードしたものを designMdBase64 として渡し、upload_design_md MCP ツールを直接呼び出すことができます。

  2. デザインシステムを作成します：アップロード後すぐに create_design_system_from_design_md ツールを呼び出し、projectId と、アップロード手順で返された id および sourceScreen を含む selectedScreenInstance を渡します。

アップロードスクリプトと create_design_system_from_design_md の両方が完了すると、Stitch はプロジェクトレベルでデザイントークンを保持します。生成プロンプトでデザイントークンを繰り返し指定する必要はありません。

🎨 画面にデザインシステムを適用する

apply_design_system を使用して、既存の画面にデザインシステムを適用します。

重要

selectedScreenInstances には、id と sourceScreen のみを指定してください。位置や寸法のフィールド（x、y、width、height）を含めると、リクエストは「invalid argument」エラーで失敗します。画面インスタンスの ID は get_project から取得してください。

{
  "projectId": "...",
  "assetId": "...",
  "selectedScreenInstances": [
    {
      "id": "...",
      "sourceScreen": "projects/.../screens/..."
    }
  ]
}

必要な ID の取得方法：

  1. get_project を呼び出して screenInstances を取得します。各インスタンスには id と sourceScreen があります。
  2. list_design_systems を呼び出して、デザインシステムの name（形式：assets/{assetId}）を取得します。assets/ より後ろの部分を assetId として使用します。
  3. type: "DESIGN_SYSTEM_INSTANCE" のインスタンスを除外し、実際の画面のみを渡します。

📋 プロジェクトのメタデータを更新する

.stitch/DESIGN.md を作成した後、projectId、title、把握しているすべての画面、およびデザインシステムの概要を記録するため、.stitch/metadata.json も作成または更新します。形式については、examples/metadata.json を参照してください。

スキーマリファレンス

利用可能なすべてのオプションを含む designSystem オブジェクトの完全なスキーマについては、reference/tool-schema.md を参照してください。

💡 ベストプラクティス

デザイン要素の説明に関するベストプラクティスについては、design-md スキル（stitch-utilities プラグイン内）を参照してください。

コメント

Markdown 対応