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	十六进制颜色	品牌主色
colorVariant	enum	MONOCHROME、NEUTRAL、TONAL_SPOT、VIBRANT、EXPRESSIVE、FIDELITY、CONTENT、RAINBOW、FRUIT_SALAD	可选。根据 customColor 生成调色板的策略
designMd	string	—	可选。设计系统 Markdown 文档
overridePrimaryColor / overrideSecondaryColor / overrideTertiaryColor / overrideNeutralColor	string	十六进制颜色	可选。精确覆盖颜色，优先级高于 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 Variable	→ DesignTheme 字段
--color-primary	customColor
--font-family（标题）	headlineFont（映射到最接近的枚举值）
--font-family（正文）	bodyFont（映射到最接近的枚举值）
--radius 或 --border-radius	roundness（4px→FOUR、8px→EIGHT、12px→TWELVE、16px 及以上→FULL）

没有用于输入精确背景十六进制值的字段——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）。它有两种不同的用法：
  • update_design_system 的 designSystem.name——原样传入，保留 assets/ 前缀
  • apply_design_system 的 assetId——去掉前缀，只传入数字 ID
  • generate_screen_from_text 的 designSystem 参数——原样传入，保留前缀
• 提示：“将此设计系统应用到现有屏幕？” → stitch-mcp-apply-design-system
• 编排器会保存此值，以便在步骤 5b 中自动应用