mcpField
S
stitch-mcp-update-design-system

stitch-mcp-update-design-system

github.com/gabelulデザイン・UI4739 回インストール14 週間前に更新
リポジトリ

stitch-mcp-update-design-system について

stitch-mcp-update-design-systemは、既存のStitch Design Systemを変更するスキルです。テーマやビジュアル設定を調整する際に必要なアセット識別子とプロジェクトIDを説明し、更新はマージではなくテーマ全体の置き換えであると示します。

主な機能

  1. 01既存のデザインシステムの更新
  2. 02テーマプロパティの調整
  3. 03アセットIDとプロジェクトIDの指定
  4. 04テーマ項目全体の置き換え
  5. 05既存画面への変更の再適用

活用シーン

  1. 01テーマの色やフォントの変更
  2. 02ブランド刷新後のデザイントークン調整
  3. 03既存画面への更新スタイルの適用

MCP 対応

Stitch MCPの`update_design_system`ツールで既存デザインシステムのテーマを置き換えます。デザインシステムの一覧、作成、適用に使うツールも案内します。

インストール

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

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-update-design-system

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

詳細

Stitch MCP — デザインシステムを更新

既存の Stitch デザインシステムを更新します。新しいデザインシステムを作成せずに、テーマのプロパティ、デザイントークン、またはスタイルガイドラインを変更する際に使用します。

重要な前提条件

ユーザーが「Stitch」と明示的に言及した場合にのみ、このスキルを使用してください。

呼び出す前に、デザインシステムのアセットの name が必要です。まだ分からない場合:

  • stitch-mcp-list-design-systems で既存のデザインシステムを一覧表示します
  • または、stitch-mcp-create-design-system から返された name を使用します

使用する場面

  • ユーザーが既存のデザインシステムの色、フォント、または角の丸みを変更したい場合
  • デザインシステムを確認した後、特定のプロパティを調整したい場合
  • ブランド刷新後にデザイントークンを更新する場合

MCP ツールを呼び出す

{
  "name": "update_design_system",
  "arguments": {
    "name": "assets/15996705518239280238",
    "projectId": "3780309359108792857",
    "designSystem": {
      "displayName": "SaaS Dashboard Theme v2",
      "theme": {
        "colorMode": "DARK",
        "headlineFont": "GEIST",
        "bodyFont": "GEIST",
        "labelFont": "GEIST",
        "roundness": "ROUND_TWELVE",
        "customColor": "#818CF8"
      }
    }
  }
}

パラメーターのリファレンス

トップレベルの引数は、相互に独立した 3 つです。name は designSystem の中にネストされません。

引数型必須説明
namestringはいassets/ プレフィックスを含むアセット識別子。例:assets/15996705518239280238。トップレベルに指定し、designSystem の中には入れません。
projectIdstringはい数字のみのプロジェクト ID。projects/ プレフィックスは付けません
designSystemobjectはい{displayName, theme} — 以下を参照
designSystem — {displayName, theme} のみ
フィールド型必須説明
displayNamestringはい人が読める名前
themeDesignThemeはいビジュアル設定(すべてのフィールドのリファレンスについては stitch-mcp-create-design-system を参照)

update_design_system ではアセット ID にプレフィックス(assets/159967...)を付けますが、apply_design_system では同じ ID をプレフィックスなしで指定します。2 つのツールで、同じ識別子を異なる形式で使用します。

designTokens と styleGuidelines は受け付けられません。ライブ API の DesignSystem にこれらのフィールドはありません。送信しないでください。

注: これはマージではなく、全置換です。変更する項目だけでなく、維持したいテーマのフィールドをすべて含めてください。

出力

更新された Asset オブジェクトを返します。

{
  "name": "assets/15996705518239280238",
  "displayName": "SaaS Dashboard Theme v2",
  "designSystem": { ... }
}

更新後

  • 「更新したデザインシステムを既存の画面に再適用しますか?」と提案します → stitch-mcp-apply-design-system
  • 更新前に生成された画面には、変更が自動的に反映されません。再適用が必要です

コメント