跳转到使用指南
design-system作者 Anthropic

Design System Skill.

一个用于品牌与设计系统工作的 Claude Code 和 Codex skill:审查、记录或扩展现有设计系统。

  • Brand & Design Systems
  • 设计系统
anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md
--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document
上游文件前置元数据与章节标题,读取于 2026-09-14 · 全文 5,552 字符

01 功能说明

design-system skill 在 Claude Code 和 Codex 中做什么

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

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

以 skill 自身的术语

一个用于处理现有设计系统的斜杠命令 skill,支持三种模式:审计、文档化或扩展。审计模式会报告命名一致性、token 覆盖率和组件完整度,并按 100 分制评分该系统。文档模式会生成组件规范,包含描述、变体、属性、状态、无障碍性以及使用建议与禁忌。

扩展模式会针对系统中已有组件,提出一个新组件或模式的建议,列出其将使用的 token 以及引发的待解决问题。它涵盖设计 token、组件和模式,并在已连接设计工具或知识库时可从中读取信息。读者对象是负责维护系统一致性的设计师和开发者。

它产出什么

  • 以按优先级排序的行动建议结尾的设计系统审计报告
  • 包含属性、类型、默认值和描述的属性表的组件文档
  • 以所解决问题开篇的新组件提案
查看示例提示词 ↗

工作方式

  1. 01
    从参数中选择模式

    该命令接受一个模式加一个目标:审计整个系统,或对单个组件或模式运行文档化或扩展。

  2. 02
    从三个维度运行审计

    审计会检查命名一致性、相对于硬编码值统计的 token 覆盖率,以及每个组件的完整度,然后列出优先行动。

  3. 03
    编写组件规范

    文档模式会填充一个模板,内容包括描述、变体、带类型和默认值的属性、状态、无障碍性以及一个使用建议与禁忌表。

  4. 04
    针对现有系统提出扩展建议

    扩展模式会将新想法与相关组件进行比较,然后提出 API、变体、状态以及该组件将消耗的确切 token。

  5. 05
    在有已连接工具时从中提取信息

    在连接设计工具后,该 skill 可以提取组件属性和图层结构用于文档化,并在 Figma 中检查命名、变体和 token 使用情况。

02 找到适合场景

何时使用 design-system Skill

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

适合场景

  • 你怀疑组件之间的命名不一致或混入了硬编码值。
  • 你需要为某个组件编写文档,涵盖其变体、状态和无障碍性说明。
  • 你正在设计一个新组件或模式,希望它能融入现有系统。
  • 你希望该 skill 在写更多内容之前,先用已连接的知识库检查已经记录了哪些内容。

了解边界

  • 一次性组件如果重复了系统已有的能力,就违背了拥有该系统的意义。
  • 扩展提案并不能解决所有难题:它可能以仍需设计评审的悬而未决的决定结束。
  • 只有在有可用的设计工具连接器时,才能直接从 Figma 中读取组件。

需要提供的信息

  • 模式及其目标为命令提供一个模式以及它所应用的组件、模式或系统,这样 skill 就知道要填充哪个模板。
  • 用于对比的现有组件扩展提案会比较相关组件的共同点,以及为什么这些共同点还不够,因此这些相邻组件必须是已知的。

03 Skill 内部

design-system Skill 为 Claude Code 和 Codex 定下的规则

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

  1. 根据标准报告命名偏差

    命名不一致不只是被标记出来:每一行都会指出涉及的组件以及应采用的标准。

  2. 统计硬编码值,而非凭感觉判断

    Token 覆盖率会将一个明确的计数与发现的实例数量进行对比,例如硬编码的十六进制值、任意的间距值,或自定义的字体和尺寸。

  3. 记录所有内容

    如果某个组件、变体或规则没有被写下来,该 skill 就会认为它不存在。

  4. 在约束范围内保持灵活

    组件应当是可组合的而非僵化的,因此模式集会弯曲而不会被放弃。

  5. 为破坏性变更设置版本

    任何破坏性变更都必须附带迁移路径,而不仅仅是一个替代组件。

  6. 从审计开始

    默认的入口点是在记录或扩展任何内容之前,先对系统现状进行审计。

  7. 覆盖率胜过完美

    记录了百分之八十的组件,被视为比完美做完 10 个组件更好。

04 投入使用

在 Claude Code 或 Codex 中安装 design-system

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

将 design-system 添加到 Claude Code、Codex 或你的 Agent

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

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

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

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

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

Starter prompt
Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

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

检查首次结果

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

  • 阅读审计摘要:已审查的组件、发现的问题以及满分 100 的评分。
  • 检查每个组件的完整性表,因为状态、变体和文档会分别标记并评分。
  • 确认已记录组件的无障碍模块已填写完整。
  • 在扩展组件时,先确认状态表覆盖了默认、悬停和禁用行为,然后再进入评审。

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

05 开源、可追溯

来源、许可与验证

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

Author
Anthropic
Skill 文件
design/skills/design-system/SKILL.md 内容校验和已在验证时记录;提交 8f877b6
License
Apache-2.0 来自 LICENSE。
仓库星标数
24,012 GitHub 快照于 2026-09-14 拍摄,针对整个 anthropics/knowledge-work-plugins 仓库,该仓库在此目录中包含 7 个 skill。不是 design-system 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 用法三种调用形式:审查系统、记录组件、扩展模式。
  2. 设计系统的组成部分定义设计 token、组件和模式,以及它们的子部件、状态和 ARIA 相关事项。
  3. 原则一致性优先于创造性,在约束内保持灵活性,记录一切,进行版本管理和迁移。
  4. 输出——审查审查模板:总体评分、命名一致性、token 覆盖率、完整性、优先处理事项。
  5. 输出——文档组件模板:描述、变体、属性、状态、可访问性、注意事项、代码示例。
  6. 输出——扩展新组件模板:问题、相关模式、API、变体、状态、token、待解决的问题。
  7. 若有连接器可用用于审查、记录和发布的可选设计工具与知识库步骤。
  8. 提示先从审查开始,边构建边记录文档,覆盖率优先于完美主义。
Skill 自身的描述
「审查、记录或扩展你的设计系统。在检查组件间命名不一致或硬编码值、为组件的变体、状态和无障碍注释编写文档,或设计适配现有系统的新模式时使用。」

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

06 安装之前

关于 design-system skill 的常见问题

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

文档最终会存放到哪里?

工作结果会以 markdown 模板的形式返回到对话中。如果连接了知识库,该 skill 还可以将更新后的文档发布到你的 wiki。

我可以用它来设计全新的内容吗?

扩展模式适用于符合你现有系统的新组件或新模式。它从问题和现有模式中的空缺出发,提出 API、变体、状态和 token,并以仍需设计评审的决策和边界情况作为结尾。

如何调用不同的模式?

输入斜杠命令,指定模式和目标。审查针对整个系统运行,而文档和扩展则针对特定组件或模式,例如为你想添加的模式使用扩展形式。

Design System

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

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

终端
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

OpenDesign 桌面客户端

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

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

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

支持 macOS 与 Windows