跳转到使用指南
stitch::manage-design-system作者 Google Labs

Stitch Manage Design System Skill.

Claude Code 和 Codex 的品牌和设计系统 skill:通过 MCP 工具在 Stitch 中创建、更新和应用设计系统。

  • Brand & Design Systems
  • 设计系统
google-labs-code/stitch-skills · plugins/stitch-design/skills/manage-design-system/SKILL.mdSKILL.md
--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata
前言和章节标题读取自 2026-09-14 的上游文件 · 完整 5,630 字符

01 功能说明

stitch::manage-design-system Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

通过 MCP 工具管理在 Stitch 中充当项目单一信息源的设计系统。它检索项目元数据和屏幕资产(list_projects、list_screens、get_screen、read_url_content),通过 design-md skill 从现有屏幕合成 token,或根据纯文本描述合成 token,写入 .stitch/DESIGN.md,然后上传该 markdown 并调用 create_design_system_from_design_md。

在上传任何内容之前,都有一个硬性检查点,需要用户批准显示名称、颜色、字体和圆角。创建完成后,apply_design_system 仅使用屏幕实例 id,将 token 推送到现有屏幕上,.stitch/metadata.json 会记录项目、屏幕以及设计系统摘要。

它产出什么

  • 为该项目生成的 DESIGN.md 设计文件。
  • 一个 .stitch/metadata.json 文件,用于跟踪项目 id、标题、所有已知屏幕以及设计系统摘要。
  • 保存在 Stitch 内部的项目级设计 token,后续生成提示无需重复声明这些内容。
查看示例提示词 ↗

工作方式

  1. 01
    检索项目和屏幕资产

    list_projects 找到目标 projectId,list_screens 呈现具有代表性的屏幕,例如 Home 或 Main Dashboard,get_screen 返回截图和 htmlCode 下载 URL,随后再获取 HTML。

  2. 02
    合成设计系统

    现有屏幕通过 design-md skill 进行解读;全新项目或直接给出的描述,则先将用户宽泛的措辞映射为精确的值。

  3. 03
    上传 DESIGN.md 并创建设计系统

    推荐使用的上传脚本会在进程内对该 markdown 进行 base64 编码,并将其发送到项目的 batchCreate 端点,从而绕过输出 token 限制;随后 create_design_system_from_design_md 会使用 projectId 和返回的屏幕实例运行。

  4. 04
    将系统应用到现有屏幕

    apply_design_system 接收 projectId、assetId 以及一份屏幕实例列表,使已构建的屏幕采用所存储的 token。

02 找到适合场景

何时使用 stitch::manage-design-system Skill

当工作是此类品牌与设计系统任务时,在 Claude Code 或 Codex 中使用 stitch::manage-design-system skill。适用范围和限制来自该 skill 自身的文件。

适合场景

  • 一个需要一套权威设计语言来统一未来所有屏幕的项目。
  • 一个尚无任何屏幕的全新 Stitch 项目,用户仅提供一段文字风格描述。
  • 从项目中已存在的屏幕中,反向推导出一套设计系统。

了解边界

  • 任何超过约 5KB 的 DESIGN.md 都无法通过直接的 MCP 上传工具处理,需要改用脚本方式。
  • 关于如何描述设计元素的指导不在此文件中,而是委托给另一个 skill。
  • 完整的 designSystem 对象结构并未在此列出,它存放在一个单独的参考文件中。

需要提供的信息

  • Stitch 项目 id标识设计系统所属的项目,上传脚本以及后续每一次 MCP 调用都需要它。
  • 代表性界面诸如 Home 或 Main Dashboard 之类的界面,在从现有项目中提取 token 时充当视觉来源。
  • 纯文字风格描述在没有任何界面存在时使用,例如一句简短描述配色、圆角和字体的话。
  • 上传脚本的参数上传脚本需要在命令行中传入项目 id、文件路径、API key 以及一个 generated-by 值。

03 Skill 内部

stitch::manage-design-system Skill 赋予 Claude Code 与 Codex 的规则

SKILL.md 为 Agent 设定的 6 条具体指令、默认值与边界——文件中真正改变结果的那部分。

  1. 上传前先暂停以等待用户确认

    该 skill 必须先暂停并询问,才能上传任何内容到 Stitch,需展示显示名称、主色、字体和圆角,并等待明确的批准。

  2. 应用时只发送 id 与 sourceScreen

    selectedScreenInstances 不携带任何位置或尺寸数据,只有这两个标识字段。

  3. 从目标列表中排除 design-system 实例

    类型为 DESIGN_SYSTEM_INSTANCE 的实例会被过滤掉;只有真正的界面才会被传给 apply_design_system。

  4. 标记 Markdown 的生成者

    generated-by 参数用于指明生成该 DESIGN.md 的 skill 或工具;省略该参数时会回退到一个固定的默认标签。

  5. 上传完成后立即创建系统

    上传步骤完成后,会立即以 projectId 和 selectedScreenInstance 调用 create_design_system_from_design_md。

  6. 从设计系统名称中读取资产 id

    list_design_systems 返回的 name 形如 assets/{assetId};assets/ 之后的部分即为应用时所用的 assetId。

04 投入使用

在 Claude Code 或 Codex 中安装 stitch::manage-design-system

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 stitch::manage-design-system 添加到 Claude Code、Codex 或您的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system

针对 plugins/stitch-design/skills/manage-design-system/SKILL.md 的通用 skills CLI 形式;具体仓库可能记录了自己的路径。

为 Skill 分配第一个品牌和 design-system 工作任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 在继续之前,确认上传确实返回了这两个标识符。
  • 确认上传脚本和创建调用均已完成,因为只有此时 token 才会存储在项目层级。
  • 从 get_project 中获取界面实例 id,而不是猜测,这样 apply_design_system 才能拿到有效的目标。
  • 上传前先按照别处定义的结构检查生成的 DESIGN.md。

在 OpenDesign 中通过其 SKILL.md 链接导入 stitch::manage-design-system:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Skill 文件
plugins/stitch-design/skills/manage-design-system/SKILL.md 验证时记录的内容校验和;commit 0337446
License
Apache-2.0 来自 LICENSE。
仓库星标数
8,304 GitHub 快照于 2026-09-14 针对整个 google-labs-code/stitch-skills 仓库拍摄,该仓库在此目录中包含 12 个 skills。这不是 stitch::manage-design-system 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 📥 检索四个有序步骤,通过 Stitch MCP 工具拉取项目、屏幕和 HTML 资源。
  2. 🧠 从描述进行综合何时复用 design-md skill,以及如何将模糊的措辞转化为具体的值。
  3. 📝 输出结构说明 DESIGN.md 遵循 design-md skill 中定义的结构。
  4. 🚀 在 Stitch 中创建或更新设计系统在强制用户确认检查点之后的两步上传与创建流程。
  5. 🎨 将设计系统应用到屏幕确切的 JSON 结构,以及获取所需 id 的三个步骤。
  6. 📋 更新项目元数据写入 .stitch/metadata.json,包含项目 id、标题、屏幕和系统摘要。
  7. 模式参考指向 reference/tool-schema.md 以获取完整的 designSystem 对象模式。
  8. 💡 最佳实践将设计元素描述建议交由 design-md skill 处理。
Skill 自身的描述
"- 使用 MCP 工具管理 Stitch 中的设计系统。包括资源检索、在 Stitch 中创建/更新设计系统,以及将设计系统应用到界面。"

来自 SKILL.md 的前置描述。完整文件约 5,630 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 stitch::manage-design-system Skill 的问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

未经我同意会有内容上传到 Stitch 吗?

不会。存在一个明确的检查点:该 skill 必须先呈现即将创建的设计系统摘要,涵盖显示名称、关键颜色、字体和圆角,并等待批准后才会上传。

如果我的 DESIGN.md 大于几 KB 怎么办?

使用推荐的上传脚本,而不是直接调用 MCP 工具。它会在进程内对 markdown 进行 base64 编码,并发送到 batchCreate 端点,从而绕开输出 token 限制。

应用设计系统所需的 id 来自哪里?

get_project 会返回 screenInstances,包含其 id 和 sourceScreen,同样只过滤出真实屏幕。

它能在一个完全没有屏幕的全新项目上工作吗?

可以。当没有屏幕,或用户直接给出描述时,该 skill 会将模糊的用词映射为精确的值,选定具体的十六进制颜色、字体族和圆角,然后生成 DESIGN.md。

Stitch 管理设计系统

在真实的品牌与设计系统工作任务中运行 stitch::manage-design-system。

下载 OpenDesign,从其 SKILL.md 链接导入 stitch::manage-design-system,粘贴上方的提示,在结果出来之前先阅读计划。

终端
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows