思考未来

2026年9月20日

@shadcn/lint：给 AI 写前端加一道“设计系统检查”

AI 编码工具能很快生成页面，但也常把按钮尺寸、颜色和间距写得越来越随意：组件明明有 size 变体，Agent 却直接塞进 p-4；项目已经定义主题色，它又写出 bg-pink-500。shadcn 团队开源的 @shadcn/lint，就是把这些设计系统约束变成可执行的 li

AI 编码工具能很快生成页面，但也常把按钮尺寸、颜色和间距写得越来越随意：组件明明有 size 变体，Agent 却直接塞进 p-4；项目已经定义主题色，它又写出 bg-pink-500。shadcn 团队开源的 @shadcn/lint，就是把这些设计系统约束变成可执行的 lint 规则，并在报错时直接告诉 Agent 应该怎样修改。

📌 这个项目是干什么的

它是一款面向 Tailwind CSS 设计系统的 linter，目前同时支持 ESLint 和 Oxlint。团队可以限制组件是否允许被 className 重新设计，禁止原始颜色、任意值、内联样式和无法静态分析的动态类名，也可以为不同组件设置独立 contract。

它不要求使用 shadcn/ui，也不用重写现有组件；自有 Tailwind 组件和第三方组件同样可以配置规则。shadcn/ui 项目能通过 components.json 自动发现组件和主题，其他项目则可手动指定组件导入路径、主题和 class 合并函数。

🔍 为什么值得关注

第一，它把给 Agent 的自然语言规范变成确定性反馈。 只在 AGENTS.md 里写“遵守设计系统”，模型很容易漏掉；lint 可以在每次改动后重复检查，并返回具体位置和修复建议。

第二，报错信息不只说“错了”。 规则能读取组件变体、主题和文件路径。例如禁止给 Button 改 padding 时，可以提示改用已有的 sm、lg 尺寸。对编码 Agent 来说，这比普通类型错误更容易形成一次“修改—检查—修复”的闭环。

第三，它允许逐步接入。 团队可以先把规则设为 warning，观察误报，再从原始颜色、任意值等边界清楚的规则开始，最后收紧组件级 contract。项目还公开了评测方法和任务数据，方便理解官方所称的 Agent 修复效果，而不是只看宣传数字。

🧪 谁适合试，怎么开始

它更适合已经使用 Tailwind v4，并让 Claude Code、Codex 等 Agent 频繁修改前端的团队。最短路径是先选 ESLint 或 Oxlint：项目要求 Node.js 20.19 以上；ESLint 需 9.30 以上，Oxlint 需 1.80 以上。

建议先在一个非核心页面安装 @shadcn/lint，启用 no-raw-colors 和 no-arbitrary-values，运行一次现有代码基线，再把 lint 命令写入 package.json 和 Agent 的完成检查。确认规则稳定后，再加入 no-restyle 与组件 contract。

⚠️ 使用提醒

当前项目版本仍处于 0.1.x，规则与兼容性还在快速调整；Oxlint 的 JS 插件 API 也仍是 alpha。接入存量项目时不要一次开启全部 error，否则历史债务和误报会淹没真正的问题。它解决的是可静态表达的设计约束，不能替代视觉回归、可访问性检查和人工设计评审。

🔗 参考资源