83.3K+下载
跳转到使用指南
design-md作者 Google Labs

Design MD Skill.

一个用于品牌和设计系统工作的 Claude Code 和 Codex skill：分析 Stitch 项目并编写语义化的 DESIGN.md。

  • Brand & Design Systems
  • DESIGN.md
下载 OpenDesign查看使用指南
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
前置信息和章节标题读取自 2026-09-14 的上游文件 · 完整内容 7,644 字符

01 功能说明

design-md Skill 在 Claude Code 和 Codex 中的作用

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

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

以 skill 自身的术语

此 skill 将现有的 Stitch 项目转换为一份 DESIGN.md，作为提示 Stitch 以相同设计语言生成新页面的事实来源。它适用于拥有 Stitch MCP 访问权限、并已设计至少一个页面的设计师和开发者：该 skill 会发现 MCP 命名空间，解析项目和页面 ID，获取页面对象及其 HTML 和截图，并读取项目的 designTheme。

随后它会以富有表现力的设计语言（而非原始技术值）记录视觉主题与氛围、以带有十六进制代码和功能角色的描述性名称呈现的颜色、字体排印、组件样式以及布局原则。

它产出什么

  • 一个涵盖五部分内容的设计系统：视觉主题与氛围、带角色说明的调色板、字体排印规则、按钮/卡片/输入框的组件样式，以及布局原则。
查看示例提示词 ↗

工作方式

  1. 01
    发现 MCP 命名空间

    运行 list_tools 以找到 Stitch MCP 前缀，随后在对该服务器的每次后续调用中重复使用该前缀。

  2. 02
    解析项目与页面

    当未给出 Project ID 时列出所拥有的项目，随后按数字项目 ID 列出页面，并匹配诸如 Home 或 Landing Page 这样的页面标题。

  3. 03
    获取页面对象与资源

    get_screen 会返回截图与 HTML 下载 URL、屏幕尺寸、设备类型和 designTheme；随后下载该 HTML 并解析其中的 Tailwind 类和组件模式。

  4. 04
    读取项目级 Design Theme

    使用完整的 projects/{id} 路径调用 get_project，会返回包含色彩模式、字体、圆角度和自定义颜色的 designTheme 对象。

  5. 05
    综合出语义系统

    从屏幕中提取设计 token，用富有表现力的形容词捕捉整体氛围，并把技术性数值转译为描述性语言。

  6. 06
    编写 DESIGN.md

    在项目目录中严格按照规定的五段式格式创建 DESIGN.md。

02 找到适合场景

何时使用 design-md Skill

当工作是此类品牌与设计系统工作时，在 Claude Code 或 Codex 中使用 design-md skill。下方的适用范围和限制取自该 skill 自己的文件。

适合场景

  • 你已经拥有一个包含至少一个设计好的屏幕的 Stitch 项目，并希望从其中提取出一份书面的设计系统。
  • 你希望有一份可信来源，用来提示 Stitch 生成与现有设计语言相匹配的新屏幕。
  • 你只知道项目的标题或 URL，希望该 skill 能从你拥有的项目中找到对应的 Project ID。
  • 你希望用富有表现力的形容词来命名氛围，而不是简单地复述 CSS。

了解边界

  • 如果没有 Stitch MCP Server 以及一个已有设计好屏幕的 Stitch 项目，该 skill 无法运行。
  • 它生成的是 Markdown 格式的设计系统，而不是新屏幕；DESIGN.md 将作为后续 Stitch 提示的输入。
  • 明确将诸如 rounded-xl 这类未经翻译的技术术语列为应避免的陷阱。
  • 丢弃十六进制代码而只保留描述性颜色名称，被视为一种失误。

需要提供的信息

  • Project ID（可选）如果未提供，该 skill 会列出你拥有的项目，并根据标题或 URL 模式匹配目标项目。
  • Screen ID（可选）如果未提供，该 skill 会查看屏幕标题以确定目标屏幕。
  • Stitch Effective Prompting Guide作为设计说明文档应使用的语言和模式的参考。

03 Skill 内部

design-md Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 仅使用数字 ID

    将 projectId 和 screenId 作为数字 ID 传递，切勿使用完整的 projects/{id} 路径，唯有调用 get_project 时才使用完整名称。

  2. 绝不裸露颜色值

    每种颜色都会获得一个描述性的自然语言名称、括号中的确切十六进制代码，以及其功能角色，例如用于主要操作的 Deep Muted Teal-Navy（#294056）。

  3. 转译几何形态，而非照搬引用

    将 border-radius 和布局数值转换为物理描述：rounded-full 变为「药丸形」，rounded-lg 变为「微圆角」，rounded-none 变为「锐利的直角边缘」。

  4. 禁止使用泛泛的词汇

    避免使用「蓝色」或「圆角」之类的词语；优先使用「深邃海洋青（#0077B6）」或「柔和的圆润边缘」。

  5. 遵循既定结构

    文件以项目标题和 Project ID 开头，随后是五个编号章节：视觉主题与氛围、色彩体系与角色、字体规则、组件样式、布局原则。

  6. 解释「为什么」，而不只是「是什么」

    在描述性措辞后的括号中给出精确数值，并始终说明每个设计元素的用途。

  7. 保持术语一致

    在整份文档中使用相同的术语，使设计系统读起来像一个统一整体。

04 投入使用

在 Claude Code 或 Codex 中安装 design-md

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

将 design-md 添加到 Claude Code、Codex 或您的 Agent

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

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

用于 plugins/stitch-utilities/skills/design-md/SKILL.md 的通用 skills CLI 形式；该仓库可能会记录自己的路径。

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

使用你自己的内容和约束调整此提示，然后在 Claude Code 或 Codex 中运行它。

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

来源：SKILL.md 示例（原文照录）。

检查首次结果

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

  • 确认格式与既定的 DESIGN.md 结构完全一致，而不是随意拼凑的布局。
  • 检查每个色彩代码都准确无误，且每种颜色都同时保留描述性名称和十六进制值。
  • 核实每个元素的功能角色都有说明，而不仅仅是外观描述。
  • 检查氛围部分是否具体而非笼统，以及阴影和间距是否被遗漏。

在 OpenDesign 中design-md 已内置：在Plugins → Skills中，于顶部栏选择它。

下载 OpenDesign阅读快速入门

05 开源、可追溯

来源、许可与验证

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

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills 分支 main
Skill 文件
plugins/stitch-utilities/skills/design-md/SKILL.md 验证时已记录内容校验和；提交 0337446
License
Apache-2.0 来自 LICENSE。
仓库星标数
8,304 GitHub 快照拍摄于 2026-09-14，针对整个 google-labs-code/stitch-skills 仓库，该仓库在本目录中包含 12 个 skill。不代表 design-md 的评分或使用量。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中（检查于 2026-08-28）；此页面尚未记录实际运行。

SKILL.md 内部

  1. 概述将 DESIGN.md 定义为提示生成新 Stitch 屏幕的可信来源。
  2. 前提条件需要 Stitch MCP 访问权限、一个已设计的屏幕，以及提示指南。
  3. 目标重申 Stitch 会读取以具体色彩数值支撑的视觉描述。
  4. 获取与网络请求六个步骤：命名空间、项目、屏幕、元数据、资源下载、项目 designTheme。
  5. 分析与综合说明提取身份特征、氛围、色彩体系、几何形态和层次感。
  6. 输出准则仅使用描述性语言，保持 Markdown 简洁，给出精确的十六进制代码，并解释原因。
  7. 输出格式（DESIGN.md 结构）需按原样填写的五章节 Markdown 模板骨架。
  8. 使用示例以 Furniture Collection 项目及其 Home 页面为例进行演示。
  9. 最佳实践做到描述具体、功能明确、术语一致、视觉清晰、数值精确。
  10. 成功要点先看全局，寻找规律，语义化命名，记录层级结构。
  11. 常见误区不要保留未翻译的术语，不要遗漏代码，不要给出含糊或不完整的描述。
Skill 自身的描述
「分析 Stitch 项目并将语义化设计系统综合到 DESIGN.md 文件中」

来自 SKILL.md 的前言描述。完整文件约 7,644 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 design-md skill 的常见问题

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

该 skill 使用哪些工具来访问 Stitch？

它声明了 stitch 工具以及 Read、Write 和 web_fetch。实际执行时，它会先运行 list_tools 查找 MCP 前缀，然后用该前缀调用 list_projects、list_screens、get_screen 和 get_project。

最终我能得到什么？

一个在项目目录中创建的 DESIGN.md 文件，结构为项目标题和 ID，随后是关于视觉主题与氛围、配色方案与角色、字体规则、组件样式以及布局原则的各个章节。它旨在作为在向 Stitch 提示生成新界面时可复用的可信来源。

它能替代手动完成这项工作吗？

它会为你完成提取和撰写工作，但有特定的用词要求：颜色需要有生动的名称、精确的十六进制代码和功能角色；圆角值要写成类似“药丸形”或“锐利的直角边缘”这样的短语，而不是原始的类名。它还要求你说明每个决策背后的原因。

Design MD

在真实品牌和 design-system 工作任务上运行 design-md。

design-md skill 内置于 OpenDesign 中。下载应用，在 Plugins → Skills 中选择该 skill，粘贴上方提示，并在查看结果前阅读方案。

下载 OpenDesign浏览所有 skills
终端
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md