用 AI 写前端最大的痛点,就是 Coding Agent 的「样式漂移(Style Drift)」。给它一个需求,上一秒还在飞速写业务,下一秒随手掏出 p-[13px]、bg-[#FF6B35]、hover:rounded-full,瞬间击穿团队维护的 Design System。
传统编译/Lint 报错只会冷冰冰提示「TS2353: padding 属性不存在」,结果 Agent 往往开始发散幻觉硬搞 逃逸。shadcn 团队开源的 @shadcn/lint 则把 Linter 彻底重塑为 AI 的自愈纠偏方向盘:
🔍 核心看点:
1. 报错即 Prompt:不再单向报错,而是直接给出替代路径。例如写了 p-4,报错直接指引「 独占间距,请改用 size (sm, lg) 或外层 margin」。
2. 语义化色值推导:基于 OKLab 色彩空间计算色差,自动将野色值匹配到 @theme 中最接近的声明 Token。
3. Contracts 样式契约:细粒度定义组件部件权限(如允许 CardTitle 改字体大小但禁止换字体族,允许 CardContent 调内边距但禁止换排版)。
4. 评测收敛惊人:官方 150+ 轮真实任务实测,Claude 3.5 Sonnet / Haiku / Opus 均在 1 轮内收敛到 0 违规,纠错 Token 成本骤降 10%~48%。
5. 双引擎兼容:原生依托 Tailwind v4 动态编译器,同时支持 ESLint 与极速 Rust Linter「Oxlint」。
⚡️ Agili 犀利点评:
这是开发工具链演进的重要分水岭——把 Linter 彻底重塑为 AI Agent 的可编程闭环护栏(Steering Engine)。
避坑注意:目前强绑定 Tailwind v4(v3 需升级);无法穿透 [&_button] 等复杂后代选择器;务必在
AGENTS.md 里写入「npm run lint」指令以闭环自愈。🔗 源码与文档:https://github.com/shadcn-ui/lint