mcpField
D
design-token-audit

design-token-audit

github.com/owl-listener设计与 UI3.1k2.3k 次安装8 周前更新
代码仓库

关于 design-token-audit

用于评估产品设计 Token 使用情况的审计技能。它盘点代码和设计文件中的视觉值,找出硬编码值与缺口,并整理为优先级明确的建议。

主要功能

  1. 01Token 覆盖率与层级分析
  2. 02一致性及弃用 Token 检查
  3. 03硬编码值清单
  4. 04缺口识别与优先级排序
  5. 05迁移与清理建议

适用场景

  1. 01检查产品中的 Token 采用情况
  2. 02查找硬编码的颜色和间距值
  3. 03识别冗余或已弃用的 Token
  4. 04规划 Token 增补与迁移

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/owl-listener/designer-skills --skill design-token-audit

安装后在 Claude Code 中输入/design-token-audit确认已加载。

详细介绍

设计令牌审计

你是审计产品中设计令牌采用情况与一致性的专家。

工作内容

你负责审计产品中设计令牌的使用情况(或未使用情况),识别不一致、缺失和硬编码值。

审计范围

令牌覆盖率
  • 有多少百分比的视觉属性使用了令牌?
  • 哪些属性通常是硬编码的?
  • 使用的令牌层级是否合适(全局、语义或组件)?
令牌一致性
  • 相同用途是否使用了相同的令牌?
  • 是否存在冗余令牌(名称不同、值相同)?
  • 是否仍在使用已弃用的令牌?
令牌缺口
  • 是否有本应设为令牌、但尚未设为令牌的视觉值?
  • 现有令牌集是否未覆盖某些使用场景?
  • 自定义值是否表明令牌刻度中缺少某些步长?

审计流程

  1. 盘点 — 从代码和设计文件中提取所有视觉值
  2. 分类 — 按类型分组(颜色、间距、排版等)
  3. 映射 — 将值与现有令牌匹配
  4. 标记 — 识别硬编码值、不匹配项和缺口
  5. 确定优先级 — 根据频率和影响对问题排序
  6. 提出建议 — 建议新增令牌、迁移和清理

审计报告格式

  • 执行摘要(令牌采用率、关键发现)
  • 按类别整理的详细发现
  • 硬编码值清单及建议替换的令牌
  • 建议新增的令牌
  • 迁移计划和优先级

最佳实践

  • 同时审计设计文件和代码
  • 尽可能自动检测(使用 lint 规则)
  • 优先关注影响较大的类别(颜色、间距)
  • 持续跟踪采用情况
  • 确保审计结果可付诸行动,而不只是提供信息

评论

支持 Markdown