mcpField
S
stitch-mcp-list-design-systems

stitch-mcp-list-design-systems

github.com/gabelul设计与 UI4739 次安装14 周前更新
代码仓库

关于 stitch-mcp-list-design-systems

此技能通过 Stitch MCP 列出可用的 Stitch 设计系统，帮助查找可复用的主题配置及其 assetId。可按项目筛选，也可查看所有项目中的设计系统。

主要功能

  1. 01列出可用设计系统
  2. 02按项目 ID 筛选
  3. 03读取主题配置与资源 ID
  4. 04说明后续应用或更新所需的 ID 格式

适用场景

  1. 01应用设计系统前查找 assetId
  2. 02查看已有设计系统
  3. 03创建前检查是否已有设计系统
  4. 04项目设置时检查可复用主题

MCP 相关

指导调用 Stitch MCP 的 list_design_systems 工具，并说明 projectId 和返回的资源 ID 在后续调用中的格式。

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/stitch-mcp-list-design-systems确认已加载。

详细介绍

Stitch MCP — 列出设计系统

列出所有可用的 Stitch 设计系统。这些是可复用的主题配置（颜色、字体、圆角），可应用于屏幕，确保项目在视觉上保持一致。

关键前提条件

仅当用户明确提到“Stitch”时才使用此技能。

使用场景

  • 应用设计系统前——需要查找 assetId
  • 用户询问“我有哪些设计系统？”
  • 编排器在项目设置期间检查是否存在现有设计系统（步骤 4b）
  • 创建新设计系统前——检查是否已有设计系统

调用 MCP 工具

{
  "name": "list_design_systems",
  "arguments": {
    "projectId": "3780309359108792857"
  }
}
projectId — 仅限数字 ID，可选
✅ "3780309359108792857"
❌ "projects/3780309359108792857"

如果省略，则返回所有项目中的所有设计系统。

输出架构

返回一个 Asset 对象数组：

{
  "assets": [
    {
      "name": "assets/15996705518239280238",
      "displayName": "SaaS Dashboard Theme",
      "designSystem": {
        "theme": {
          "colorMode": "LIGHT",
          "font": "DM_SANS",
          "roundness": "ROUND_EIGHT",
          "customColor": "#6366F1",
          "backgroundLight": "#FFFFFF",
          "backgroundDark": "#18181B"
        }
      }
    }
  ]
}

列出后

以易读的表格呈现：

#名称字体颜色模式资源 ID
1SaaS Dashboard ThemeDM Sans#6366F1Light15996705518239280238

然后提供以下选项： -“将其中一个应用到屏幕？”→ stitch-mcp-apply-design-system -“更新现有设计系统？”→ stitch-mcp-update-design-system -“创建新设计系统？”→ stitch-mcp-create-design-system

从每个资源（assets/15996...）中提取 name 字段。根据后续调用的不同，它有两种用法：

  • apply_design_system 的 assetId——去掉 assets/ 前缀，传入纯数字 ID
  • update_design_system 的 designSystem.name——按返回结果传入 name，保留前缀

评论

支持 Markdown