SuperAPI AI 工具集

sb-health

设计与创作

查看项目

更新于 10-16 01:13

技能介绍

用途:sb-health 是设计系统健康门禁,针对 React+Vite 应用运行检查并写出 JSON,由包装器渲染为 Health Docs 与 TokenMatrix。浏览器无法执行 shell,因此由脚本完成检查。

主要能力:raw-color 检测组件中的 hex/rgba/hsl 字面量,若其值等于已有 token 的解析值,会指出应替换为哪个 token;undefined-token 检测引用了未声明的 --foo;scale-gap 检测间距/字号尺度的意外跳跃;unused-token 检测已声明但未被引用的 token,数据来自 sb-inventory 的 .storybook/project-inventory.json,需先运行 sb-inventory,否则跳过;design-md 交叉核对 DESIGN.md 声称的颜色与代码 CSS token 实际声明的颜色,输出 design-md-drift;property-token-family 为可选检查,检测合法 token 用错属性家族,默认关闭,需设计师编写 design-system/lint/colors.json 后启用,仅产生 warning/info,不会让 CI 变红;若配置了 stylelint 也会运行。

使用方式:运行 "$SKILL/scripts/validate-design-system.sh" 生成 .storybook/design-system-health.json,加 --emit-prompt 可输出 LLM 子代理提示;用 "$CORE/scripts/scaffold-wrapper.sh" DesignSystemHealth 生成包装器;用 "$SKILL/scripts/check-property-tokens.py" --init 初始化属性 token 规则文件。

限制:unused-token 与 scale-gap 仅为 info,不应直接删除或强行平滑;DESIGN.md 是声明而非事实,需先核对漂移;raw-color 应映射到已有 token 而非新建;不要手工重新 grep 计算 JSON。提取类工作应交给 /ds-runbook、/ds-audit、/ds-token-extract、/ds-component-extract,DESIGN.md 漂移交给 design-md 技能。