深入no-restyle规则：@shadcn/lint如何阻止AI Agent篡改组件外观

深入no-restyle规则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/lint当 AI 编码 Agent 帮你写界面时它很容易顺手给Button加上p-4 bg-pink-500 rounded-full——组件外观就这样被悄悄改掉了。shadcn/lint 是一款专为 AI Agent 打造的 Tailwind 设计系统 linter其中的no-restyle 规则专门解决这个问题它声明组件外观由谁决定并在 Agent 违规时给出一条带修复建议的错误信息而不是一句干巴巴的不允许。为什么 AI Agent 总是顺手改样式Agent 写代码时看到间距不够、颜色不对最直觉的做法就是堆className。普通校验比如 TypeScript 类型限制能拦下修改但只能告诉 Agentpadding 不合法不会告诉它正确的做法是什么——于是 Agent 反复试错外观依然失控。no-restyle 的思路相反规则本身是一份可执行的外观契约。你定义哪些类允许出现linter 会读取你项目里真实的组件、variant 和 theme把修复方案直接写进错误信息原理详见 docs/how-it-works.md。规则如何工作把类名归入外观类别no-restyle 内置了一套类名语法把常见的 Tailwind 类分组到外观类别里例如类别典型类默认归属spacing间距p-4、py-2组件自己管理color颜色bg-pink-500组件自己管理typography排版text-sm组件自己管理shape形状rounded-full组件自己管理layout布局mt-4、w-full页面可以控制这份映射定义在 categories.ts规则的主逻辑在 no-restyle.ts。三步开启no-restyle最快配置方法最小配置只有一行允许布局类其余外观类一律拦截。shadcn/no-restyle: [error, { allow: [layout] }]效果一目了然// ✅ 允许布局交给页面 Button classNamemt-4 w-fullSave/Button // ❌ 报告内边距、颜色、圆角属于 Button 自己 Button classNamep-4 bg-pink-500 rounded-fullSave/Button第二步别忘记在组件目录里关闭该规则让组件文件自己定义内部样式例如components/ui/**下设为off。第三步是给 Agent 留一句话——在AGENTS.md里写上改动后运行 lint 并修复所有错误形成闭环。完整示例见 docs/rules/no-restyle.md。Contracts 契约给每个组件不同的外观权限全局一刀切往往不够。contracts按组件名正则分配不同权限例如标题可以改字号内容区可以改内边距但谁都不能改颜色shadcn/no-restyle: [error, { allow: [layout], contracts: [ { pattern: ^CardTitle$, allow: [layout, typography] }, { pattern: ^CardContent$, allow: [layout, spacing] }, ], }]CardTitle classNametext-sm通过classNametext-pink-500被报告——因为没有任何契约允许它。规则还支持deny从允许集合里剔除某类如w-*和自定义错误文案详见 规则选项总览。Agent 能直接照做的错误信息no-restyle 最大的价值在消息模板见 no-restyle.ts间距违规 → 列出该组件真实定义的size如sm, lg并提示用 margin/gap 处理周围空间外观违规 → 列出可用variant名称并给出组件文件路径自定义message里可用{{component}}、{{variants}}、{{sizes}}、{{file}}占位符让每条报错都带着下一步做什么。Agent 拿到的不再是这里错了而是用现有设计系统词汇的修复清单。官方评测显示150 多轮任务中各模型在一轮 lint 反馈后基本都能达到零违规方法与数据见 docs/evals.md。规则边界no-restyle 看不到什么只检查被识别为设计系统组件的导入普通div不受约束语法无法识别的类名会被标为unclassified需按类名显式放行合同匹配的是类名和分组不是等价 CSS 效果w-*不匹配[width:100%]allow: [p-*]也会放行p-[13px]——任意值要交给 no-arbitrary-values动态拼接的类名由 require-static-classes 兜底。好消息是它足够穿透跨文件的 re-export、重命名导入、转发className的包装组件、cn()合并调用里的条件类都会被追到真正的组件身上判定。小结一份 Agent 可读的外观契约allow / deny声明页面可以动什么默认建议从layout开始contracts按组件细分外观权限message 占位符把改用哪个 variant / size直接写进报错组件目录内关闭规则组件自己拥有自己的样式。对新手来说no-restyle 的本质是把设计规范从文档变成了一条会说话、可被 Agent 执行的 lint 规则——外观不再靠自觉而是靠工具保证一致。【免费下载链接】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），仅供参考