一句话让AI Agent自动守规矩用AGENTS.md接入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 Agent 写界面代码最头疼的一点它总能创造性地偏离你的设计规范。shadcn/lint是专为 AI Agent 打造的设计系统 lint 工具支持 ESLint 和 Oxlint覆盖 React、Vue、Svelte 的 Tailwind v4 项目你在AGENTS.md里只写一句话——改完代码后运行 lint 并修掉所有报错Agent 就会自动把违规代码改回你设计系统里已有的组件、变体和主题色。为什么 Agent 需要能执行的设计规矩普通类型约束比如限制style属性只能告诉 Agent padding 不允许却不说该怎么改。而shadcn/lint的每条报错都自带来自你设计系统的修复指南例如p-4 is not allowed on Button: Button owns its spacing. Use a size (sm, lg), or margin here or gap on the parent for space around it.也就是说规则由你定义报错会告诉 Agent 改哪里、改成什么、去哪里找。项目无需重构现有的设计系统直接生效。三步接入从安装到 Agent 自动守规矩第一步让 Agent 自己完成安装把下面这段提示词发给你的编码 Agent比如 Claude Code即可它会读取 SETUP.md 自动完成安装和配置且不会擅自开启规则Read the SETUP.md of the shadcn/lint project and set up shadcn/lint in this project.如果想手动装React 项目只需一条命令npm install -D shadcn/lint eslint typescript-eslint/parser然后在eslint.config.mjs里注册插件并开启规则Oxlint 用户写.oxlintrc.json即可配置方式见 README.md 的 Get started 章节。第二步选择适合你的规则shadcn/lint内置 6 条规则按需开启规则抓什么no-restyleAgent 用className乱改组件外观no-raw-colors绕过主题的裸色如bg-pink-500no-arbitrary-values任意值如p-[13px]no-inline-styles内联样式和style块no-unknown-classesTailwind 根本生成不了的拼错类名require-static-classeslint 读不懂的动态类名已有老代码建议从warn级别开始用--max-warnings锁住存量问题数新代码保持error严格模式——完整迁移路径见 docs/adoption.md。第三步在 AGENTS.md 里写入那一句话把 lint 命令加进package.json的lintscript然后在项目根目录的AGENTS.md写入After making changes, run npm run lint and fix all errors.就这么简单。从此 Agent 每次改完 UI 代码都会先跑一遍设计系统检查看到带修复建议的报错后自行修正。官方实测150 次任务几乎一次修正归零官方在 docs/evals.md 中给出了可复现的评测无 lint 时各模型每轮任务产生 40~120 个设计系统违规有 lint 反馈后超过 150 次任务运行中几乎所有任务一轮修正后违规归零更省钱对比只给规则文字的对照组用 lint 诊断修正的成本低10%~48%观感不丢评委模型对修正前后的视觉保真度评分基本都在 9~10 分。典型的修正过程是把Button classNamebg-[#FF6B35] ...变成组件上新增的variantbrand变体——修复落在了你希望它落的地方。进阶用契约Contracts为每个组件定制规矩如果你希望标题可以改字体但 Avatar 只能改尺寸可以在规则里写contracts为不同组件分别放行哪些类别的类布局、间距、颜色、排版……还能用{{sizes}}、{{variants}}等占位符把你们的团队约定直接写进报错文案。详见 docs/design-systems.md 和 docs/rules.md。想深入理解 linter 如何解析你的组件、主题和变体可以读 docs/how-it-works.md。想本地跑评测复现数据克隆仓库后执行git clone https://gitcode.com/gh_mirrors/lint3/lint cd lint pnpm build node packages/evals/run.mjs --model claude-sonnet-5总结 一句话接入AGENTS.md里写改完代码后运行npm run lint并修复所有报错️ 规则可编排allow/deny/contracts/ 自定义消息不改一行组件代码 效果可验证150 次 Agent 任务实测违规基本一轮归零修正成本更低 框架全覆盖React、Vue、Svelte 同一套规则ESLint 与 Oxlint 通用让设计规范从文档里的口头约定变成Agent 每次都会执行的检查——这就是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辅助生成（AIGC），仅供参考