企业官网建设流程全解析

Designer Skills设计系统实战：/tokenize和/create-component命令如何快速构建组件规范

【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skills

Designer Skills（designer-skills）是一套面向 AI Agent 时代的设计技能包，其中design-systems 插件内置了 11 个技能和 3 个命令，专门用于构建与维护设计系统。今天重点拆解两条最实用的命令：/tokenize从现有设计中自动提取并整理设计令牌（Design Tokens），/create-component从一句描述直接生成完整的组件规范——两步配合，新手也能快速搭出专业级的组件规范体系。

为什么要先建设计系统？

很多团队做设计系统时容易卡在同一步：值散落在各处，组件缺少规范。颜色写了上百种、间距全靠手拉、按钮状态说不全。designer-skills 的思路是：

• 技能（Skills）是知识单元（名词），教 AI 如何定义令牌、如何写组件规范；
• 命令（Commands）是工作流（动词），把多个技能串起来一次干完一件事。

你只需要敲命令，技能在底层自动运转。详见 design-systems/README.md。

第一步：用 /tokenize 提取设计令牌

/tokenize命令的作用是扫描一份 CSS 文件、设计稿或数值描述，把硬编码值整理成结构化的令牌体系。它的定义见 design-systems/commands/tokenize.md。

一条命令背后的 7 个动作

命令内部按顺序执行：

1. 提取— 扫描所有视觉值（颜色、间距、字号、圆角等）
2. 去重— 把相似值分组
3. 分类— 按颜色、间距、字体、层级、边框、动效归类
4. 分层— 建立 Global / Semantic / Component 三级结构
5. 命名— 应用统一命名规范
6. 主题映射— 规划暗色模式、品牌变体等主题
7. 文档— 生成令牌参考文档

最终产出一份包含清单、层级、主题映射和迁移指南的令牌规范。

令牌三层结构：新手最容易忽略的关键

design-token/SKILL.md 定义了令牌分类与分层：

配套的最佳实践很直白：组件永远不要引用原始值，只引用语义令牌，这样换主题时只需改一层映射。命名统一遵循{category}-{property}-{variant}-{state}模式，规则详见 naming-convention/SKILL.md。

第二步：用 /create-component 生成组件规范

令牌就绪后，/create-component可以只凭组件名（如 "date picker" 或 "notification banner"）生成一份可直接交付的完整规范，定义见 design-systems/commands/create-component.md。

一份规范的 8 个部分

component-spec/SKILL.md 规定了组件规范的完整结构：

命令在执行时会自动调用design-token技能识别该组件消费的令牌，调用accessibility-audit技能按 WCAG 标准补齐无障碍要求（见 accessibility-audit/SKILL.md），并用documentation-template技能统一文档结构（见 documentation-template/SKILL.md）。

两个命令怎么配合？

自然的顺序是：

1. /tokenize—— 先把散落的视觉值收拢成令牌体系，打好地基；
2. /create-component—— 在令牌基础上逐个生成组件规范，组件只消费语义令牌；
3. /audit-system—— 两条命令完成后的官方建议收尾动作，从一致性、完整性、无障碍、令牌覆盖率、主题支持五个维度做体检，产出带严重度分级的审计报告（见 design-systems/commands/audit-system.md）。

这样令牌、组件、审计形成闭环，设计系统从"一堆文件"变成"可维护的体系"。

新手上手：3 步把命令用起来

1. 安装 Claude Code（免终端操作）：安装并登录后，直接输入：

/plugin marketplace add Owl-Listener/designer-skills

2. 选择插件：输入/plugin打开 Discover 标签页，勾选design-systems（做设计系统只需要它），回车安装。

3. 敲命令：对话中输入/design-systems:tokenize 加上你的 CSS 文件或设计描述，或/design-systems:create-component 按钮组件，AI 会按上述流程逐步产出结果，你可以随时追问补充细节。

延伸参考文件

• 令牌与主题：design-systems/skills/theming-system/SKILL.md
• 图标系统：design-systems/skills/icon-system/SKILL.md
• 动效系统：design-systems/skills/motion-system/SKILL.md
• 治理与版本管理：design-systems/skills/design-system-governance/SKILL.md

小结

designer-skills 的 design-systems 插件把"设计系统怎么做"的专家判断写进了 AI 可执行的工作流：/tokenize负责收拢视觉值，/create-component负责生成组件规范，/audit-system负责持续体检。无需写代码，三条命令就能让新手团队快速拥有一份结构清晰、命名统一、覆盖无障碍的组件规范——这正是 AI Agent 时代设计系统建设的正确打开方式。

【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skills