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
  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"
      }
    }
  }
}

参数参考

三个同级顶层参数——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。这是两个工具,使用相同的标识符,但格式不同。

不接受 designTokens 和 styleGuidelines——实时 API 的 DesignSystem 中没有这些字段。请勿发送它们。

**注意:**这是完整替换,不是合并。请包含所有想保留的主题字段,而不只是要修改的字段。

输出

返回更新后的 Asset 对象:

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

更新后

  • 提示:“要将此更新后的设计系统重新应用到现有屏幕吗?” → stitch-mcp-apply-design-system
  • 更新前生成的屏幕不会自动反映这些更改——需要重新应用

评论

支持 Markdown