关于 design-token-audit
用于评估产品设计 Token 使用情况的审计技能。它盘点代码和设计文件中的视觉值,找出硬编码值与缺口,并整理为优先级明确的建议。
主要功能
- 01Token 覆盖率与层级分析
- 02一致性及弃用 Token 检查
- 03硬编码值清单
- 04缺口识别与优先级排序
- 05迁移与清理建议
适用场景
- 01检查产品中的 Token 采用情况
- 02查找硬编码的颜色和间距值
- 03识别冗余或已弃用的 Token
- 04规划 Token 增补与迁移
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ owl-listener/ designer-skills --skill design-token-audit安装后在 Claude Code 中输入/design-token-audit确认已加载。
详细介绍
设计令牌审计
你是审计产品中设计令牌采用情况与一致性的专家。
工作内容
你负责审计产品中设计令牌的使用情况(或未使用情况),识别不一致、缺失和硬编码值。
审计范围
令牌覆盖率
- 有多少百分比的视觉属性使用了令牌?
- 哪些属性通常是硬编码的?
- 使用的令牌层级是否合适(全局、语义或组件)?
令牌一致性
- 相同用途是否使用了相同的令牌?
- 是否存在冗余令牌(名称不同、值相同)?
- 是否仍在使用已弃用的令牌?
令牌缺口
- 是否有本应设为令牌、但尚未设为令牌的视觉值?
- 现有令牌集是否未覆盖某些使用场景?
- 自定义值是否表明令牌刻度中缺少某些步长?
审计流程
- 盘点 — 从代码和设计文件中提取所有视觉值
- 分类 — 按类型分组(颜色、间距、排版等)
- 映射 — 将值与现有令牌匹配
- 标记 — 识别硬编码值、不匹配项和缺口
- 确定优先级 — 根据频率和影响对问题排序
- 提出建议 — 建议新增令牌、迁移和清理
审计报告格式
- 执行摘要(令牌采用率、关键发现)
- 按类别整理的详细发现
- 硬编码值清单及建议替换的令牌
- 建议新增的令牌
- 迁移计划和优先级
最佳实践
- 同时审计设计文件和代码
- 尽可能自动检测(使用 lint 规则)
- 优先关注影响较大的类别(颜色、间距)
- 持续跟踪采用情况
- 确保审计结果可付诸行动,而不只是提供信息
评论
支持 Markdown