stitch-mcp-update-design-system について
stitch-mcp-update-design-systemは、既存のStitch Design Systemを変更するスキルです。テーマやビジュアル設定を調整する際に必要なアセット識別子とプロジェクトIDを説明し、更新はマージではなくテーマ全体の置き換えであると示します。
主な機能
- 01既存のデザインシステムの更新
- 02テーマプロパティの調整
- 03アセットIDとプロジェクトIDの指定
- 04テーマ項目全体の置き換え
- 05既存画面への変更の再適用
活用シーン
- 01テーマの色やフォントの変更
- 02ブランド刷新後のデザイントークン調整
- 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 の中にネストされません。
| 引数 | 型 | 必須 | 説明 |
|---|---|---|---|
name | string | はい | assets/ プレフィックスを含むアセット識別子。例:assets/15996705518239280238。トップレベルに指定し、designSystem の中には入れません。 |
projectId | string | はい | 数字のみのプロジェクト ID。projects/ プレフィックスは付けません |
designSystem | object | はい | {displayName, theme} — 以下を参照 |
designSystem — {displayName, theme} のみ
| フィールド | 型 | 必須 | 説明 |
|---|---|---|---|
displayName | string | はい | 人が読める名前 |
theme | DesignTheme | はい | ビジュアル設定(すべてのフィールドのリファレンスについては 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 - 更新前に生成された画面には、変更が自動的に反映されません。再適用が必要です