尧图网站建设 
为什么AI总把UI样式改得面目全非shadcn/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 写个页面按钮多了莫名其妙的p-4配色变成刺眼的bg-pink-500间距随手写p-[13px]——设计系统形同虚设UI 改得面目全非shadcn/lint就是为了解决这个问题而生的一个agent 优先agent-first的 Tailwind 设计系统检查器。你只需用配置定义什么是允许的当 AI 破坏规则时报错不仅说明哪里错了还会基于你的组件、变体和主题告诉它怎么改对。设计规则第一次变成了真正可验证、可执行的代码检查。 痛点为什么 AI 写的 UI 总跑偏AI 编码助手能写出功能正确的代码但它并不懂你的设计系统。它不知道你的Button自己管理内边距页面应该用size属性而不是p-*你的品牌色只存在于主题 token 里而不是bg-amber-500间距必须落在0.5 / 1 / 1.5 / 2的刻度上在AGENTS.md里写再多请遵守设计规范的文字提示AI 也只是听着没有机制强制它遵守。规则不可执行就等于没有规则。用 TypeScript 类型限制style属性固然可行但类型报错只会说padding不允许——它不会告诉 AI应该用sm还是lg。AI 缺的不是禁止而是基于你设计系统的指引。✅ 核心思路报错即指引让规则可验证shadcn/lint 的定位是agent 优先的检查器每条报错都自带三段信息——什么违反了规则哪个组件、哪类样式该用什么替代来自你组件里的变体、主题里的 token去哪里找答案组件文件路径、主题文件路径以Button为例AI 写了classNamep-4后看到的不是干巴巴的不允许而是p-4 is not allowed onButton:Buttonowns its spacing. Use a size (sm, lg), or margin here or gap on the parent for space around it.AI 拿到这条报错一次就能改对——因为答案就在你的设计系统里。而且无需重写任何组件它直接适配你现有的 Tailwind v4 项目不要求使用 shadcn/ui同时支持ESLint 与 Oxlint覆盖React、Vue、Svelte三大框架。 6 条规则把设计系统变成可执行的检查清单内置的 6 条规则覆盖了 AI 改样式时最常见的事故现场每条都可以按需开启规则拦截什么规则说明no-restyle用className偷改组件外观docs/rules/no-restyle.mdno-raw-colorsbg-pink-500这类绕过主题的原色docs/rules/no-raw-colors.mdno-arbitrary-valuesp-[13px]这类随意值docs/rules/no-arbitrary-values.mdno-inline-styles内联样式和style块docs/rules/no-inline-styles.mdno-unknown-classesTailwind 生成不了 CSS 的类名如拼错的rounded-hugedocs/rules/no-unknown-classes.mdrequire-static-classes检查器读不懂的动态类名如bg-${color}docs/rules/require-static-classes.md这些检查规则的实现位于 packages/lint/src/rules/而对组件、主题、变体的解析逻辑在 packages/lint/src/project/——它会读取你的components.json、解析导入别名、跟随重导出定位组件工作原理详见 docs/how-it-works.md。 实测效果150 次任务运行一次纠错基本清零这不是纸上谈兵。项目方用这些规则让多个编码 agent 执行了150 多个 UI 任务结果非常一致几乎每个任务在一轮纠错后就达到零违规模型完成数纠错前错误纠错后错误Sonnet 58/8690Haiku 4.58/8660Opus 58/8420GPT 5.6 Terra8/81170更关键的是成本相比只靠文字规则约束使用 lint 反馈修复违规平均节省 10%–48% 的开销——AI 少猜、少试错改一次就到位。完整的方法论和数据见 docs/evals.md。 快速上手3 步让 AI 遵守你的设计规范第 1 步安装依赖React ESLint 为例需 Node.js 20.19、ESLint 9.30npm install -D shadcn/lint eslint typescript-eslint/parser第 2 步注册插件并启用规则。在eslint.config.mjs中引入plugin as shadcn打开一两条你最需要的规则即可Oxlint 项目则只需在.oxlintrc.json的jsPlugins里加上shadcn/lint。框架差异与完整配置见 docs/react.md、docs/vue.md、docs/svelte.md。第 3 步给 AI 下可执行的命令。把 lint 命令加入package.json然后在AGENTS.md里写上一句话After making changes, runnpm run lintand fix all errors.从此 AI 每次改完代码都会自己跑检查、自己修错。官方还提供了面向 AI 的一页式安装指南 SETUP.md——直接把这段提示交给你的编码 agent 就能完成接入Read SETUP.md and set up shadcn/lint in this project.老项目建议按 docs/adoption.md 的节奏渐进接入先从warn级别开一条规则修掉高频违规后再逐步加严。 进阶玩法契约 自定义提示把设计说明写进报错shadcn/lint 最灵活的地方在于规则是程序化的不需要改组件 API契约contracts给不同组件定不同规则。比如允许CardTitle改字号但保留字重允许CardContent调间距但不动字体——每个组件哪些能改、哪些不能改一目了然。自定义提示message用自己的话写报错文案还能用占位符自动填入真实信息比如Use a {{component}} size: {{sizes}}对 Button 会渲染成Use a Button size: sm, lg。共享设置settings.shadcn识别自定义组件目录、cn/cva之外的合并函数支持 monorepo 跨包校验。同一套规则、选项、契约和提示在 React / Vue / Svelte 上行为一致详细配置见 docs/rules.md 与 docs/design-systems.md。 它适合谁用 AI 编码的团队把设计规范从口头约定变成 AI 每次提交前都会执行的检查维护设计系统的人同一套组件不同项目可以配不同的使用契约无需 forkTailwind v4 用户无论用不用 shadcn/ui自己的主题 token 都能被正确识别一句话总结提示词只能劝说AI 遵守设计规范而 shadcn/lint 让设计规则变成 AI 能读懂、能验证、能自动修复的错误信息。规则可执行UI 才稳定。【免费下载链接】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），仅供参考 为什么AI总把UI样式改得面目全非？@shadcn/lint让设计规则真正可验证
为什么AI总把UI样式改得面目全非shadcn/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 写个页面按钮多了莫名其妙的p-4配色变成刺眼的bg-pink-500间距随手写p-[13px]——设计系统形同虚设UI 改得面目全非shadcn/lint就是为了解决这个问题而生的一个agent 优先agent-first的 Tailwind 设计系统检查器。你只需用配置定义什么是允许的当 AI 破坏规则时报错不仅说明哪里错了还会基于你的组件、变体和主题告诉它怎么改对。设计规则第一次变成了真正可验证、可执行的代码检查。 痛点为什么 AI 写的 UI 总跑偏AI 编码助手能写出功能正确的代码但它并不懂你的设计系统。它不知道你的Button自己管理内边距页面应该用size属性而不是p-*你的品牌色只存在于主题 token 里而不是bg-amber-500间距必须落在0.5 / 1 / 1.5 / 2的刻度上在AGENTS.md里写再多请遵守设计规范的文字提示AI 也只是听着没有机制强制它遵守。规则不可执行就等于没有规则。用 TypeScript 类型限制style属性固然可行但类型报错只会说padding不允许——它不会告诉 AI应该用sm还是lg。AI 缺的不是禁止而是基于你设计系统的指引。✅ 核心思路报错即指引让规则可验证shadcn/lint 的定位是agent 优先的检查器每条报错都自带三段信息——什么违反了规则哪个组件、哪类样式该用什么替代来自你组件里的变体、主题里的 token去哪里找答案组件文件路径、主题文件路径以Button为例AI 写了classNamep-4后看到的不是干巴巴的不允许而是p-4 is not allowed onButton:Buttonowns its spacing. Use a size (sm, lg), or margin here or gap on the parent for space around it.AI 拿到这条报错一次就能改对——因为答案就在你的设计系统里。而且无需重写任何组件它直接适配你现有的 Tailwind v4 项目不要求使用 shadcn/ui同时支持ESLint 与 Oxlint覆盖React、Vue、Svelte三大框架。 6 条规则把设计系统变成可执行的检查清单内置的 6 条规则覆盖了 AI 改样式时最常见的事故现场每条都可以按需开启规则拦截什么规则说明no-restyle用className偷改组件外观docs/rules/no-restyle.mdno-raw-colorsbg-pink-500这类绕过主题的原色docs/rules/no-raw-colors.mdno-arbitrary-valuesp-[13px]这类随意值docs/rules/no-arbitrary-values.mdno-inline-styles内联样式和style块docs/rules/no-inline-styles.mdno-unknown-classesTailwind 生成不了 CSS 的类名如拼错的rounded-hugedocs/rules/no-unknown-classes.mdrequire-static-classes检查器读不懂的动态类名如bg-${color}docs/rules/require-static-classes.md这些检查规则的实现位于 packages/lint/src/rules/而对组件、主题、变体的解析逻辑在 packages/lint/src/project/——它会读取你的components.json、解析导入别名、跟随重导出定位组件工作原理详见 docs/how-it-works.md。 实测效果150 次任务运行一次纠错基本清零这不是纸上谈兵。项目方用这些规则让多个编码 agent 执行了150 多个 UI 任务结果非常一致几乎每个任务在一轮纠错后就达到零违规模型完成数纠错前错误纠错后错误Sonnet 58/8690Haiku 4.58/8660Opus 58/8420GPT 5.6 Terra8/81170更关键的是成本相比只靠文字规则约束使用 lint 反馈修复违规平均节省 10%–48% 的开销——AI 少猜、少试错改一次就到位。完整的方法论和数据见 docs/evals.md。 快速上手3 步让 AI 遵守你的设计规范第 1 步安装依赖React ESLint 为例需 Node.js 20.19、ESLint 9.30npm install -D shadcn/lint eslint typescript-eslint/parser第 2 步注册插件并启用规则。在eslint.config.mjs中引入plugin as shadcn打开一两条你最需要的规则即可Oxlint 项目则只需在.oxlintrc.json的jsPlugins里加上shadcn/lint。框架差异与完整配置见 docs/react.md、docs/vue.md、docs/svelte.md。第 3 步给 AI 下可执行的命令。把 lint 命令加入package.json然后在AGENTS.md里写上一句话After making changes, runnpm run lintand fix all errors.从此 AI 每次改完代码都会自己跑检查、自己修错。官方还提供了面向 AI 的一页式安装指南 SETUP.md——直接把这段提示交给你的编码 agent 就能完成接入Read SETUP.md and set up shadcn/lint in this project.老项目建议按 docs/adoption.md 的节奏渐进接入先从warn级别开一条规则修掉高频违规后再逐步加严。 进阶玩法契约 自定义提示把设计说明写进报错shadcn/lint 最灵活的地方在于规则是程序化的不需要改组件 API契约contracts给不同组件定不同规则。比如允许CardTitle改字号但保留字重允许CardContent调间距但不动字体——每个组件哪些能改、哪些不能改一目了然。自定义提示message用自己的话写报错文案还能用占位符自动填入真实信息比如Use a {{component}} size: {{sizes}}对 Button 会渲染成Use a Button size: sm, lg。共享设置settings.shadcn识别自定义组件目录、cn/cva之外的合并函数支持 monorepo 跨包校验。同一套规则、选项、契约和提示在 React / Vue / Svelte 上行为一致详细配置见 docs/rules.md 与 docs/design-systems.md。 它适合谁用 AI 编码的团队把设计规范从口头约定变成 AI 每次提交前都会执行的检查维护设计系统的人同一套组件不同项目可以配不同的使用契约无需 forkTailwind v4 用户无论用不用 shadcn/ui自己的主题 token 都能被正确识别一句话总结提示词只能劝说AI 遵守设计规范而 shadcn/lint 让设计规则变成 AI 能读懂、能验证、能自动修复的错误信息。规则可执行UI 才稳定。【免费下载链接】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），仅供参考