用途:把项目的品牌标识(BI)——颜色、间距、字体、圆角、阴影、断点,以及每页都会出现的少量组件——确立为唯一事实来源,其余代码都应引用它;当代码偏离时找出偏离点并把值推回令牌。
主要能力:1)建立 BI 事实来源:若已有令牌文件则沿用,否则按框架脚手架生成。支持 Tailwind v3(theme.extend)、Tailwind v4(@theme)、CSS Modules、styled-components、Emotion、MUI、Chakra、vanilla CSS 自定义属性、SCSS、Vanilla Extract 等。脚手架默认值有明确取向,如 4px 基准间距、1.25 字号比例、保守圆角;颜色槽位需操作者填入真实色值,不得凭空编造十六进制值。2)审计偏离:在 src/、app/、components/、pages/ 中搜索硬编码 hex、rgb()/hsl()/oklch()、Tailwind 任意值、魔法像素值、内联 style 对象,并把每个命中分类为 DRIFT—trivial、DRIFT—near-match、DRIFT—missing token 或 INTENTIONAL。还做组件级审计:重复的 Button、导航、卡片/弹窗/表单外壳、页面布局、Logo 文件。3)修复偏离:为每个 DRIFT 生成具体 diff 提案,小范围直接应用,涉及多文件则交给 refactor-verify。
使用方式:先写显式 Assumptions 块(框架、令牌文件路径、品牌是否已定义、请求动作),不要静默选择解释;若令牌文件缺失且品牌未定义,先向操作者询问主色与展示字体。审计命令示例:git grep -nE '#[0-9a-fA-F]{3,8}\b' -- '.tsx' '.ts' '.jsx' '.js' '.vue' '.svelte' '.css' '.scss' '*.html' ':!tokens' ':!theme' ':!tailwind.config.'。输出为审计报告,含事实来源、汇总、热点文件、重复组件、建议新增令牌、已应用修复、待批准修复与交接项。
适用场景:公开发布前;从模板移植后;经历三次以上 AI 生成 UI 会话后;多人分页开发时。
限制:不做品牌设计、不做视觉回归测试、不重写组件库、不做 Figma 转代码;不迁移框架;不改动 src/、app/、components/、pages/、styles/ 之外的配置、构建脚本、CI 与后端代码;不一次修复全部偏离,每次限定一个范围;不把 .storybook/ 或 .stories. 计为偏离来源;不静默替换近似颜色。资料未提供具体收费、价格与平台信息。