mcpField
D
design-token-audit

design-token-audit

github.com/infrasity-labs设计与 UI15076 次安装18 周前更新
代码仓库

关于 design-token-audit

design-token-audit 是用于检查产品设计令牌使用情况与一致性的设计技能,覆盖代码和设计文件。它识别硬编码值、使用不一致和令牌缺口,并整理为可执行建议与迁移计划。

主要功能

  1. 01衡量令牌覆盖情况
  2. 02发现令牌使用不一致与冗余
  3. 03识别弃用令牌和令牌缺口
  4. 04盘点并映射视觉属性值
  5. 05排列问题优先级并提出迁移方案

适用场景

  1. 01检查产品各处的令牌使用
  2. 02查找硬编码的颜色和间距值
  3. 03规划新增令牌与清理工作

安装

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

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill design-token-audit

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

详细介绍

设计令牌审计

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

工作内容

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

审计范围

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

审计流程

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

审计报告格式

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

最佳实践

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

评论

支持 Markdown