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