你以为 AI 写 UI 只能靠 rules 文件约束？今天 @shadcn/lint 把这件事变成机器可验证的了

写过前端的都知道，TypeScript 能拦住你调一个不存在的 API，但拦不住你在 className 里随手写个 bg-pink-500 或者 p-[13px]。这个信息差，现在成了 AI coding agent 最大的设计系统漏洞——Cursor、Claude Code 这些工具写 UI 的时候，rules 文件只能告诉它们”要遵守规范”，但没法告诉它们”哪里写错了、应该怎么改”。今天 shadcn/ui 官方出了一个工具，专门填这个坑。

@shadcn/lint 是一个面向 AI agent 的 Tailwind 设计系统 linter。它的核心思路很直接：你定义规则，agent 每次写完 UI 跑一遍 lint，错误信息本身就是给 agent 的修复指令，不是给人看的通用 ESLint 错误。

它靠六条规则管住 AI 的手

no-restyle 是旗舰规则，拦住调用方直接覆写组件的样式——Button 自带的 padding 和圆角，agent 不能再靠 className 盖掉。no-raw-colors 拦住直接用 HEX 色值，no-arbitrary-values 拦住 p-[13px] 这种非标量写法，no-inline-styles 拦住 style={{}}，no-unknown-classes 拦住 Tailwind 根本不认的类名，require-static-classes 拦住模板字符串里的动态类。

光拦还不够，关键是错误信息本身要像 Prompt 一样直接。比如你用了 p-4 在 Button 上，linter 会说：

“p-4” is not allowed on <Button>: this component owns its spacing. Use a size prop (sm/lg), or margin here or gap on the parent for space around it.

这就是 agent 下一轮修改需要的全部上下文。

数据说话：150+ 次实测，一轮纠正后零违规

shadcn 团队做了内部评测，在 150+ 次任务运行里，coding agent 在第一轮纠正后全部达到零违规。更关键的是对比数据：只用 rules 文件引导时，修复一次设计系统违规平均花 10-48% 更多 token；配上 lint 反馈回路之后，修复成本直接降下来。没有一个模型会去摸 eslint-disable 或者 style={{}} 这两个逃生舱——这两个口子被规则堵死了。

落地：三行命令配完，agent 自己会用

实际集成只需要三步：装包、选 linter、往 AGENTS.md 里加一句 After making changes, run npm run lint and fix all errors。不需要改任何组件 API，不需要引入新的构建步骤。Oxlint 和 ESLint 9.30+ 都支持，建议用 Oxlint，速度快一个量级。

对于有 per-component 精细策略的团队，linter 支持用正则配置每个组件的允许规则——Button 只许改 margin 和 width，CardTitle 可以动字体大小但不许动 font-weight，CardContent 可以动间距但不许动排版。这些在配置文件里声明，不用动组件代码。

下一步

如果你在用 shadcn/ui 或者任何 Tailwind v4 设计系统，装上 @shadcn/lint 试试看。给 AI agent 的设计系统约束，终于有了一个机器可验证的闭环——而不只是一段”请遵守规范”的文字描述。