🚨 Tech Radar · @shadcn/lint：给 AI Coding Agent 装上设计系统方向盘用 AI 写前端最大的痛点，就是 Coding Agent 的「样式漂移（Style Drift）」

Wed, 16 Sep 2026 15:01:08 GMT

🚨 Tech Radar · @shadcn/lint：给 AI Coding Agent 装上设计系统方向盘

用 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

FF6B35 | Agili

🚨 Tech Radar · @shadcn/lint：给 AI Coding Agent 装上设计系统方向盘用 AI 写前端最大的痛点，就是 Coding Agent 的「样式漂移（Style Drift）」