1. 问题背景
随着 AI 编码工具的普及，生成 UI 界面变得前所未有的高效。但这也带来了一个新的问题：AI 生成的代码缺乏一致的样式规范。
AI 一次生成一屏、一页没问题，但它不了解你的设计系统，也没法「全局一起设计」——context 分分钟爆掉。于是颜色、边距、字体散落在各处，一开始甚至没有复用，单页看还行，整体就不 consistent。更糟的是：如果你一开始写的是浅色主题，中途想加深色，会发现到处是硬编码的色值，改起来非常痛苦。
2. AI 生成代码的常见问题
- 颜色：设计系统只允许几种主色，AI 会混用 hex、Tailwind 色号、各种命名色，深浅色主题难以统一。
- 间距：
p-2、p-[12px]、m-4、m-6等随机出现，没有统一的 scale。 - 字体：
text-xl、text-[24px]、text-2xl混用，没有预设等级。 - 其他：阴影、圆角、边框、透明度也类似，各处取值不统一。
3. 为什么会出现这个问题
每次 LLM 调用都是有随机性的、stateless 的——除非把之前所有页面的数据一起塞进 context，而 context 大小不允许。所以它没法「记住」你上一屏用了什么颜色、什么间距，只能按当前 prompt 和训练数据再「创造」一遍。生成的页面越多，inconsistent 就越多。
4. 解决方案：自定义 Linter
核心思路很简单：把你的设计系统变成一份"允许清单"，然后强制 AI 只能使用清单中的值。
4.1 设计系统作为单一数据源
把设计系统落成一份允许清单：颜色、间距、字体、阴影、圆角等每个维度只允许取哪些值。用配置文件或 design tokens 定义即可，格式不限（YAML、EDN、JSON 都行）。这份清单就是「真理源头」——所有代码（包括 AI 生成的）只能从这里取值。
4.2 验证逻辑
写一个校验工具：扫描代码里的样式/类名，和允许清单对照，不在清单里的就报错，并（可选）提示「应使用清单中的某某类值」。实现上可以是正则/AST 解析你用的 utility class 或内联样式，逻辑就是白名单匹配。
4.3 集成到工作流
这个工具可以集成到多个环节：
- 本地检查：提交前运行，拦截违规代码
- CI 检查：构建失败，强制修复
- AI Prompt：把允许清单作为约束传给 AI（LLM 不一定按约束生成，仍需靠 linter 兜底）
- IDE 插件：实时提示违规
5. 实际效果
5.1 AI 生成
AI 生成了一些代码，其中部分样式/类名不在允许清单中。
5.2 Linter 拦截
Linter 报出违规位置，并建议改用允许清单中的对应取值（例如某颜色 → 用主色/辅色列表中的某一个，某间距 → 用 spacing scale 中的某一个）。
5.3 结果
要么自动修复（替换为允许的值），要么标记为需要人工审查。随着时间的推移，AI 会"学习"到这些约束，生成更规范的代码。