150次真实测试shadcn/lint如何让AI Agent违规率趋近于零附成本数据【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lintshadcn/lint 是一个面向 Tailwind v4 项目的AI Agent 设计系统 Linter它读取你的组件、变体和主题把设计系统规则变成 Agent 能看懂的诊断信息。官方用 5 个主流模型做了 150 次真实任务测试——反馈后每个模型的违规数从 42~117 降到 0修正成本降低 10%~48%。这篇文章完整拆解它的测试方法、违规率数据和成本数据。什么是 shadcn/lint为 Agent 而生的设计系统 Linter传统 Linter 只会告诉 Agent「这里不允许 padding」而 shadcn/lint 会接着说「Button 自己管理间距用 size 属性sm、lg或者用 margin 控制外部空间——变体定义在 components/ui/button.tsx」。它提供 6 条内置规则覆盖设计系统最常见的「违规姿势」规则抓什么no-restyle用 className 重新覆盖组件外观no-raw-colorsbg-pink-500这类原始色板颜色no-arbitrary-valuesp-[13px]这类任意值no-inline-styles内联 style 和style元素no-unknown-classesTailwind 生成不了的拼写错误require-static-classesbg-${color}这类 Linter 读不到的类关键点是规则可配置、建议来自你自己的设计系统——不需要引入 shadcn/ui也支持 React、Vue、Svelte兼容 ESLint 和 Oxlint。规则细节见 docs/rules.md 和 docs/how-it-works.md。测试设计150 次真实 Agent 任务是怎么跑的评测框架在 packages/evals每个任务跑在一套全新、无上下文的 Agent 上分三组条件对照BeforeAgent 直接生成组件全程没有任何 LinterAfter新 Agent 从上一阶段的原始输出开始拿到任务描述 规则说明 Linter 诊断最多 3 轮修正Rules only对照组同样拿到规则文本但没有诊断信息让 Agent 自查由隐藏的 lint 检查决定是否给下一轮。任务分两类提示词见 packages/evals/tasks/temptation.json 和 packages/evals/tasks/neutral.json诱惑任务8 个故意要求系统外的样式——「粉色圆角胶囊按钮」「精确复刻设计稿13px 内边距」「品牌色 #FF6B35」「让卡片真正跳出来」中性任务8 个完全不带样式语言——「搭建账号设置页」「做一个发票表格」「登录页」考验 Agent 会不会「顺手」改样式。违规率数据从 69 条到 0 条一轮修正先看每个模型各一次代表性运行完整数据见 docs/evals.md模型完成任务反馈前错误反馈后错误Sonnet 58/8690Haiku 4.58/8660Opus 58/8420GPT 5.6 Terra8/81170GPT 5.6 Sol6/8980跨 150 次任务运行只有2 次反馈后违规数非零——而那 2 次是 Linter 自身的 3 个漏洞v3 渐变类误判、原始色经过查找表传递当天修复并补了测试。没有 Agent 使用eslint-disable、内联样式或style元素来「作弊过关」。中性任务同样收敛Sonnet 5 从 14 条违规到 08/8 任务全绿1 轮Haiku 4.5 从 21 条到 0。更值得注意的结论不加强制的模型也会漂移。没有 Linter 时Sonnet 5 单次生成 50~80 条违规、Haiku 4.5 差不多、Opus 5 约 40 条——模型不是不会写样式而是「你要求的东西不在系统里它就照做」。成本数据Linter 诊断省下 10%~48% 修正成本对照组是本文最有说服力的部分同样的起点、同样的规则文本、同样 3 轮机会唯一变量是有没有 Linter 诊断指标Sonnet 5Haiku 4.5Opus 5任务全绿仅规则文本8/87/88/8任务全绿有诊断8/88/88/8平均修正轮数仅规则1.251.571.00平均修正轮数有诊断1.001.001.00修正成本仅规则$3.57$1.41$4.35修正成本有诊断$2.47$0.74$3.93Sonnet 5 省31%Haiku 4.5 省48%Opus 5 省10%一次完整运行生成 修正 8 个任务的成本Haiku 4.5 约 $1.7Sonnet 5 约 $3.6~5.2Opus 5 约 $5.7~8.4弱模型收益最大Haiku 在纯规则模式下有 1 个任务三轮自查都修不好字体 token 声明到了错误命名空间拿到点名指出问题类的诊断后1 轮修好。Linter 的价值不是「强模型做不到」而是结果是自动的、可验证的、便宜的——你不用把规则贴进每条提示词。视觉保真度修好了但没有「修没了」违规清零不等于把设计也删掉了。框架用 Playwright 渲染修复前后的截图由裁判模型打分3 轮取中位数运行意图保留评分Sonnet 52026-09-048/89–10Haiku 4.52026-09-047/89–10Opus 52026-09-107/89–10未判定的 2 对是测试工具限制组件没导出任何页面两边都渲染成空盒子不是设计损失。典型修复长这样bg-[#FF6B35] text-white被改写成组件自己的brand变体——样式落进了组件 API 里而不是消失。官方也诚实地划了边界新 token 和新变体仍需人工评审「lint 通过 ≠ 设计批准」。长期漂移与红队测试模拟一周的真实工作漂移实验8 个中性任务在一个项目里按顺序跑模拟一周开发Sonnet 5 各跑 3 组序列不强制 lint 的项目结束时剩18~23 条违规词汇表从未增长强制 lint 的项目每次都结束于 0变体比开始时更多24 个任务无一使用绕过手段。红队沙盒7 种对抗策略CSS 变量透传原始色、变量里动态拼类、SVGfill属性、组件转导出——5 种被拦截2 种「逃逸」globals.css里的纯 CSS、新造 theme token前者属于 CSS Linter 的职责后者按定义就属于系统内。另外每次发版还会扫描 485 个文件的注册表快照违规数超过 基线当前 602 条就直接构建失败。如何复现这 150 次真实测试完整方法、运行编号和局限性都写在 docs/evals.md运行器是 packages/evals/run.mjs。复现需要模型 CLIClaude 或 Codex并已登录每次运行都是真实付费调用git clone https://gitcode.com/gh_mirrors/lint3/lint cd lint pnpm build node packages/evals/run.mjs --model claude-sonnet-5 # 诱惑任务配对运行 node packages/evals/run.mjs --model claude-sonnet-5 --control # 加规则对照 node packages/evals/fidelity.mjs packages/evals/results/run-id/results.json # 保真度评分预算参考一次配对诱惑运行 Haiku 4.5 约 $2Sonnet 5 约 $4~5Opus 5 约 $6~9加--control大约再多一半。上手与延伸阅读如果你只想在项目里启用它把 SETUP.md 交给你的编码 Agent 即可也可以按 README.md 的 Get started 章节手动配置React/Vue/Svelte × ESLint/Oxlint 共 6 种组合都有示例。装好后在AGENTS.md里写一句「提交前运行npm run lint并修复所有错误」闭环就完成了。想深入的话评测完整数据与运行 IDdocs/evals.mdLinter 如何读取组件、主题与变体docs/how-it-works.md6 条规则的全部选项docs/rules.md合同contracts与自定义消息docs/design-systems.md评测框架入口packages/evals/【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考