跳转到使用指南
create-design-md作者 Julien Thibeaut

Create Design MD Skill.

Claude Code 和 Codex 的品牌与设计系统 skill:从现有产品仓库或公开网站创建或更新 DESIGN.md。

  • Brand & Design Systems
  • DESIGN.md
ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md
--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document
从上游文件读取的前言和章节标题,2026-09-14 · 完整 16,176 字符

01 功能说明

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

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

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

以 skill 自身的术语

把现有产品转化为一份书面设计合约。在仓库模式下,它会审计本地产品的 token、主题、共享基础组件与渲染路由,并在该产品根目录写入 DESIGN.md;在 URL 模式下,它会在桌面和移动宽度下,根据 DOM、计算样式和已加载样式表重建一份草案。

两种模式共用同一套证据流水线——角色、值、来源、范围、复现次数、置信度——以及同一套扁平 token 模式,导出目标可选 css-tailwind、json-tailwind 或 dtcg。只有在治理来源明确指定,或通过三重验证的值才会被保留,且文档只有在 lint 与导出均通过后才会发布。它只改动 DESIGN.md,不改动其他任何内容。

它产出什么

  • URL 模式下写入当前工作区的重建版 DESIGN.md 草案,并标注为草案。
  • 一份报告,列出所使用的模式、被审计的产品或 URL、所用的治理来源,以及文档中排除的冲突或无支持依据的部分。
  • 最终的 lint 与导出结果,二者必须都通过才能交回文档。
查看示例提示词 ↗

工作方式

  1. 01
    选择模式

    当本地产品仓库可用时使用仓库模式,在该产品根目录写入 DESIGN.md;当只给出一个公开 URL 时使用 URL 模式,在当前工作区生成一份重建草案。

  2. 02
    收集证据并记录来源

    在任何归一化之前,每个候选项都会先记录其来源、范围和复现次数,因此两种模式都进入同一套记录流水线。

  3. 03
    归一化为 DESIGN.md 模式(schema)

    不确定的、本地但无合约依据的,或与实现无关的候选项会被剔除;其余则映射到规范化的扁平 token 模式中。

  4. 04
    在验证通过前拦截草案

    只有在解析出的 frontmatter 通过结构检查之后,才会写入 Markdown,因此正文绝不会先写好再反向拼凑到 YAML 上。

  5. 05
    Lint 与导出

    先运行结构化 lint,然后按所选目标执行一次兼容性导出,且每个已填充的分类都必须出现在输出中。

  6. 06
    报告模式、来源与缺口

    报告会说明所用的模式和被审计的产品或 URL、所用的治理来源、任何因缺乏支持而省略的内容,以及 lint 与导出的结果。

02 找到适合场景

何时使用 create-design-md Skill

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

适合场景

  • 记录界面的设计语言,并根据代码库中的现有证据重建其视觉系统。
  • 为编程 Agent 提供持续存在的 UI 上下文,而不是在每个任务中重复设计决策。
  • 一个没有源码可用的公开网站,此时可以接受根据 DOM、计算样式和已加载 CSS 重建出的草案。

了解边界

  • 编辑产品源码、依赖或配置以匹配已记录的设计——范围仅限于 DESIGN.md 文件。
  • 从一个运行中的网站读取内部 token 名称、组件归属或未记录的意图:URL 证据无法确立这些内容。
  • 在没有渲染后的浏览器检查的情况下工作;必须请求截图或源文件,而不是从文案或 HTML 中推断。
  • 倾倒发现的每一个 token 或组件——详尽的清单明确不在范围之内。

需要提供的信息

  • 如果仓库包含多个产品,应选择哪一个用户必须指明所记录的可部署产品;若归属存在歧义,skill 会先询问再写入。
  • 一个公开 URL,加上可渲染的浏览器访问URL 模式会在桌面和移动宽度下检查 DOM、计算样式以及公开加载的样式表;仅靠截图无法确定精确数值。
  • 非默认导出目标(如有)URL 输出默认使用 css-tailwind,除非用户指定其他目标,因为 token 名称必须对该目标保持有效。

03 Skill 内部

create-design-md Skill 给 Claude Code 和 Codex 的规则

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

  1. 只触及文档本身

    仓库模式不得更改产品源码、依赖、配置或生成文件,也不得将偶然的实现模式提升为设计决策。

  2. 优先采用仓库证据

    只要有源码可用,就选择仓库模式;提供的 URL 可用于验证渲染呈现效果,但绝不能替代仓库证据。

  3. 仅一种 schema,映射形态是唯一变化

    token 分组始终是映射(mapping),绝不是序列(sequence),两种模式都必须使用相同的扁平 token 名称,不得引入第二种 schema。

  4. 写入前先确定导出目标

    Tailwind v4 用 css-tailwind,Tailwind v3 用 json-tailwind,其他情况用 dtcg;token 名称必须对所选目标保持有效。

  5. URL 主张需要三项证明

    URL 模式下的主张需要观察、依据和结果三者齐备;只要缺一项,该主张就应省略而非猜测。

  6. 只输出符合正则的 token 名称

    每个输出的 token 名称都必须匹配 ^[a-zA-Z0-9][a-zA-Z0-9-]*$;不符合的键会被拒绝并重写。

  7. 归一化单个 group 级 token

    像 --radius 这样的单一源 token 会变成 rounded.base;sm、md、lg 和 xl 绝不能从工具类或重复值中派生。

  8. 验证未通过就不发布

    只要 lint 或导出失败,文档就绝不会返回;若某个已填充的类别在导出中缺失,则视为 schema 失败。

04 投入使用

在 Claude Code 或 Codex 中安装 create-design-md

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

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

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

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

针对 skills/create-design-md/SKILL.md 的通用 skills CLI 形式;仓库也可能记录了自己的路径。

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

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

Starter prompt
Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

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

检查首次结果

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

  • 在此前选定的目标下恰好执行一次兼容性导出,并检查输出结果。
  • 对于 css-tailwind,确认颜色映射到 --color-、字体族映射到 --font-、字号映射到 --text-、圆角映射到 --radius-、间距映射到 --spacing-;若一个已填充的排版区块既没有输出 --font- 也没有输出 --text-*,则说明该文档必须重写。
  • 保存前,先读回已解析的 frontmatter,并自行剔除标量式排版子项或不在权威源中出现的圆角键。
  • 更新现有文档时,先临时保留原始内容,并将其与新文件进行差异对比,恢复任何被移除的已采纳决策。
  • 在编码主题模式前先检查已安装的规范,仅当不支持模式时才回退到 Themes 表。

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

05 开源、可追溯

来源、许可与验证

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

Repository
github.com/ibelick/ui-skills Branch main
Skill 文件
skills/create-design-md/SKILL.md 验证时记录的内容校验和;提交 79081ab
License
MIT 来自 LICENSE。
仓库星标数
8,402 GitHub 快照于 2026-09-14 拍摄,针对整个 ibelick/ui-skills 仓库,该仓库在此目录中包含 5 个 skills。这不是 create-design-md 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 边界只修改 DESIGN.md;不引入竞争性 schema,不倾倒每个发现的 token。
  2. 1. 选择模式Repository 模式与 URL 模式的区别、各自能证明什么,以及何时应先询问。
  3. 共享证据流程两种模式都必须遵守的六步记录流程和遗漏门限。
  4. 2. 追溯证据仓库的检查顺序;URL 的采样列表、证明与证据台账。
  5. 3. 决定应纳入的内容schema 设计、导出目标选择、主题处理,以及正文可以声明的内容。
  6. 4. 撰写文档最简 frontmatter、允许的章节顺序,以及保存前应删除的内容。
  7. 5. 验证Lint、一次导出、类别检查,以及对更新文档进行差异对比。
  8. 6. 报告需要返回的内容:模式、被审查的目标、来源、遗漏项、验证结果。
Skill 自身的描述
「从现有产品仓库或公开网站创建或更新 DESIGN.md。当被要求记录界面的设计语言、重建其视觉系统、从当前证据中提取设计 token 和指南,或为编程 Agent 提供持久的 UI 上下文时使用。不修改产品源代码或将意外的实现模式提升为设计决策。」

SKILL.md 的前置描述。完整文件约 16,176 个字符。在 GitHub 上阅读完整文件。

Create Design MD

在真实的品牌与设计系统工作任务上运行 create-design-md。

下载 OpenDesign,从其 SKILL.md 链接导入 create-design-md,粘贴上述提示,并在结果之前阅读计划。

终端
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

OpenDesign 桌面客户端

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

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

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

支持 macOS 与 Windows