stitch-mcp-apply-design-system

Name: stitch-mcp-apply-design-system
Author: gabelul

github.com/gabelul设计与 UI4740 次安装14 周前更新

代码仓库

关于 stitch-mcp-apply-design-system

用于将已创建的 Stitch 设计系统应用到一个或多个屏幕的技能，可统一颜色、字体和圆角。操作需要项目 ID、屏幕实例信息和设计系统资产 ID。

主要功能

01将设计系统应用到多个屏幕
02更新颜色、字体和圆角主题
03使用屏幕实例与资产 ID
04返回更新后的屏幕数据

适用场景

01让项目中的屏幕统一视觉主题
02为多个屏幕应用现有设计系统

MCP 相关

该技能通过 Stitch MCP 工具调用 apply_design_system，将设计系统应用到指定屏幕实例，并返回更新后的屏幕数据。

安装

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

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

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

详细介绍

Stitch MCP — 应用设计系统

将先前创建的 Stitch 设计系统应用到一个或多个屏幕。此操作会更新屏幕的视觉主题（颜色、字体、圆角），使其与设计系统保持一致，确保整个项目的视觉风格统一。

重要前提

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

必须具备：

一个 projectId（数字）
一个或多个 screenId 值（数字）
一个来自设计系统的 assetId（通过 list_design_systems 或 create_design_system 获取）

使用场景

创建设计系统后，想将其应用到屏幕
用户说“让所有屏幕都匹配此主题”或“应用设计系统”
编排器的第 5b 步保存了一个 assetId，并提供了应用选项
确保多屏幕项目的视觉风格统一

调用 MCP 工具

{
  "name": "apply_design_system",
  "arguments": {
    "projectId": "3780309359108792857",
    "selectedScreenInstances": [
      {
        "id": "a1b2c3d4e5f6",
        "sourceScreen": "projects/3780309359108792857/screens/98b50e2ddc9943efb387052637738f61"
      }
    ],
    "assetId": "15996705518239280238"
  }
}

参数参考

`projectId` — 仅数字 ID，不带前缀

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

`selectedScreenInstances` — 对象数组，而非屏幕 ID

这是最容易让人弄错的参数。它接受屏幕实例，每个实例都是一个 {id, sourceScreen} 对，而不是屏幕 ID 列表。

✅ [{ "id": "a1b2c3d4e5f6",
      "sourceScreen": "projects/3780.../screens/98b5..." }]

❌ ["88805abc123def456"]                    ← bare screen ids
❌ [{ "id": "98b50e2ddc99...", ... }]        ← source screen id in the id slot

从 get_project → screenInstances 获取这两个值。id 是实例 ID；sourceScreen 是其对应屏幕的完整 projects/{p}/screens/{s} 路径。它们是不同的值，交换后调用会失败。

其结构与 create_design_system_from_design_md 相同，后者接受单个实例而非数组。

`assetId` — 纯数字，不带前缀

✅ "15996705518239280238"
❌ "assets/15996705518239280238"

从以下位置获取：

stitch-mcp-list-design-systems → 取 name 字段（assets/15996...），并去掉 assets/ 前缀
stitch-mcp-create-design-system → 同样去掉返回的 name 中的前缀

apply_design_system 需要纯数字，但 generate_screen_from_text 的 designSystem 参数需要带前缀（assets/15996...）。这是同一个标识符，但因工具不同，格式也不同。

输出

返回反映已应用设计系统的更新后屏幕数据。

应用后

重新获取受影响的屏幕：对每个 screenId 调用 stitch-mcp-get-screen
向用户展示更新后的屏幕截图
提供以下选项：
- “编辑更新后的屏幕？” → stitch-mcp-edit-screens
- “转换为代码？” → 框架转换
- “应用到更多屏幕？” → 再次调用 apply_design_system

支持 Markdown

登录后评论