stitch-mcp-create-design-system

Stitch MCP — デザインシステムを作成

新しい Stitch デザインシステムを作成します。これは、任意の画面に適用できる再利用可能なテーマ設定です。ローカルでの CSS トークン抽出（stitch-design-system 経由）と、生成をまたいで保持される Stitch ネイティブのデザイントークンとの間を橋渡しします。

重要な前提条件

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

使用するタイミング

• stitch-design-system 経由で CSS トークンを抽出した後、それらを Stitch に保存したい場合
• ユーザーが複数の画面やプロジェクトで一貫したテーマを使いたい場合
• オーケストレーターのステップ 7 で、抽出したトークンから Stitch デザインシステムを作成するかどうかを提示された場合
• ユーザーが Stitch でデザインシステムを作成するよう明示的に依頼した場合

MCP ツールを呼び出す

{
  "name": "create_design_system",
  "arguments": {
    "designSystem": {
      "displayName": "SaaS Dashboard Theme",
      "theme": {
        "colorMode": "LIGHT",
        "headlineFont": "DM_SANS",
        "bodyFont": "DM_SANS",
        "labelFont": "DM_SANS",
        "roundness": "ROUND_EIGHT",
        "customColor": "#6366F1",
        "colorVariant": "TONAL_SPOT"
      }
    },
    "projectId": "3780309359108792857"
  }
}

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

designSystem — 必須オブジェクト

フィールド	型	必須	説明
displayName	string	はい	デザインシステムの、人が読みやすい名前
theme	DesignTheme	はい	ビジュアル設定。以下を参照してください

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

theme（DesignTheme）— ビジュアル設定

必須項目：colorMode、headlineFont、bodyFont、roundness、customColor。

フィールド	型	値	説明
colorMode	enum	LIGHT、DARK	基本の外観モード
headlineFont	enum	以下のフォント一覧を参照	見出しとタイトルに使う書体
bodyFont	enum	以下のフォント一覧を参照	本文と段落に使う書体
labelFont	enum	以下のフォント一覧を参照	任意。ラベル、キャプション、UI の装飾要素に使う書体
roundness	enum	ROUND_FOUR、ROUND_EIGHT、ROUND_TWELVE、ROUND_FULL（ROUND_TWO もありますが、非推奨で未使用です）	角丸の段階
customColor	string	16 進数カラー	ブランドのメインカラー
colorVariant	enum	MONOCHROME、NEUTRAL、TONAL_SPOT、VIBRANT、EXPRESSIVE、FIDELITY、CONTENT、RAINBOW、FRUIT_SALAD	任意。customColor に基づくパレット生成方式
designMd	string	—	任意。デザインシステムの Markdown ドキュメント
overridePrimaryColor / overrideSecondaryColor / overrideTertiaryColor / overrideNeutralColor	string	16 進数カラー	任意。customColor より優先される、正確なカラー指定
spacing	object	名前 → CSS 値のマップ	任意。例：{"sm": "8px"}
typography	object	レベル名 → Typography トークンのマップ	任意。各トークンは fontFamily、fontSize、fontWeight、letterSpacing、lineHeight で構成されます

font（非推奨の単数形フォントフィールド）、backgroundLight、backgroundDark、preset、description は入力として受け付けられません。これらが表示されるのは API のレスポンス（get_project、list_projects など）のみで、ここで送信する内容には含まれません。

使用可能なフォント（68 種類）

サンセリフ: INTER、DM_SANS、GEIST、SORA、MANROPE、RUBIK、MONTSERRAT、WORK_SANS、SPACE_GROTESK、PLUS_JAKARTA_SANS、PUBLIC_SANS、SOURCE_SANS_3、NUNITO_SANS、ARIMO、HANKEN_GROTESK、IBM_PLEX_SANS、SPLINE_SANS、LEXEND、EPILOGUE、BE_VIETNAM_PRO、GOOGLE_SANS、GOOGLE_SANS_FLEX、GOOGLE_SANS_TEXT、NOTO_SANS、OPEN_SANS、KARLA、LIBRE_FRANKLIN、FIRA_SANS、CHIVO、QUESTRIAL、OUTFIT、BRICOLAGE_GROTESQUE、COMFORTAA、QUICKSAND、RALEWAY、ROBOTO_FLEX、SYNE、OSWALD、ANYBODY、ATKINSON_HYPERLEGIBLE_NEXT

セリフ: NOTO_SERIF、NEWSREADER、DOMINE、LIBRE_CASLON_TEXT、EB_GARAMOND、LITERATA、SOURCE_SERIF_4、IBM_PLEX_SERIF、MERRIWEATHER、PLAYFAIR_DISPLAY、BODONI_MODA、VOLLKORN

等幅／コード: JETBRAINS_MONO、GOOGLE_SANS_CODE、GOOGLE_SANS_MONO、SPACE_MONO、COURIER_PRIME

コンデンス／ディスプレイ: BEBAS_NEUE、ANTON、ARCHIVO_NARROW、BARLOW_CONDENSED、CLIMATE_CRISIS、POIRET_ONE、METROPHOBIC

非推奨の別名（引き続き有効ですが、置き換え後の値を推奨します）: SOURCE_SERIF_FOUR → SOURCE_SERIF_4、SOURCE_SANS_THREE → SOURCE_SANS_3、METROPOLIS → 直接の後継なし

projectId — オプション、数値のみ

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

指定すると、デザインシステムを特定のプロジェクトに関連付けます。省略すると、グローバルデザインシステムが作成されます。

CSS トークンを DesignTheme にマッピングする

抽出した design-tokens.css から作成する場合：

CSS 変数	→ DesignTheme フィールド
--color-primary	customColor
--font-family（見出し）	headlineFont（最も近い列挙値にマッピング）
--font-family（本文）	bodyFont（最も近い列挙値にマッピング）
--radius または --border-radius	roundness（4px→FOUR、8px→EIGHT、12px→TWELVE、16px 以上→FULL）

正確な背景の 16 進数値を指定する入力フィールドはありません。backgroundLight／backgroundDark はレスポンス専用です。ライト／ダークの背景は、colorMode と、Stitch が customColor および colorVariant から導出するパレットによって決まります。特定のパレットスロットを固定する必要がある場合は、overridePrimaryColor などを使用してください。

出力

name フィールドを持つ Asset オブジェクトを返します。今後の update_design_system および apply_design_system の呼び出しに使うため、これを保存してください。

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

作成後

• name の値（例：assets/15996705518239280238）を保存します。これは次の 2 通りの方法で使用します。
  • update_design_system の designSystem.name — assets/ プレフィックスを付けたまま渡します
  • apply_design_system の assetId — プレフィックスを除き、数値のみを渡します
  • generate_screen_from_text の designSystem パラメーター — プレフィックスを付けたまま渡します
• 「このデザインシステムを既存の画面に適用しますか？」と提案します → stitch-mcp-apply-design-system
• オーケストレーターは Step 5b で自動適用するために、これを保存します