5分钟上手@shadcn/lint：AI友好的Tailwind设计系统Linter快速入门

5分钟上手shadcn/lintAI友好的Tailwind设计系统Linter快速入门【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lint还在为 AI 编码助手乱改组件样式而头疼吗shadcn/lint是一款专为 AI Agent 打造的Tailwind 设计系统 Linter它让你用配置代码定义什么可以改、什么不能改当 AI 违反规则时报错信息不仅指出问题还会给出基于你现有组件和主题的修复建议。它基于 Tailwind v4无需 shadcn/ui同时支持ESLint / Oxlint与React、Vue、Svelte三大框架无需重写现有代码即可接入。为什么需要 AI 友好的设计系统 Linter在 AI 写 UI 的时代一个经典难题是类型检查只能告诉 AI 这里错了却不会告诉它应该怎么做。比如你希望Button组件不接受 padding 类而只允许通过size属性控制尺寸。用 TypeScript 类型限制固然可行但报错信息只有padding 不存在于该类型AI 无从得知正确的做法。shadcn/lint的差异在于错误信息自带设计系统的指引。传统类型报错shadcn/lint 报错padding does not exist in typep-4 is not allowed on Button: Button owns its spacing. Use a size (sm, lg), or margin here...这意味着 AI 读一眼报错就能自动修正大幅减少反复试错的循环。官方评测显示跨 5 个 AI 模型的 150 次任务运行几乎所有任务在 1 轮修正后违规数即降为 0成本比仅靠规则描述低10%~48%详见 docs/evals.md。环境要求与安装前准备在开始之前确认你的项目满足以下条件Node.js20.19 或更高版本Tailwind CSS v4无需 shadcn/ui 也能用Linter 二选一ESLint9.30推荐Vue/Svelte 模板必须用 ESLintOxlint1.80更快但只检查script块最快上手把配置交给 AI Agent最省事的安装方式是直接把项目交给编码 AI让它读完官方安装说明再操作给 AI 这条提示词请读取项目根目录的 SETUP.md并按说明在本项目中安装 shadcn/lintAI 会自动完成检测包管理器 → 识别 ESLint/Oxlint → 安装依赖 → 注册插件 → 验证 lint 命令可用。它不会擅自开启规则最后会告诉你去配置哪些规则。安装文档入口SETUP.md手动安装步骤ESLint 为例如果想自己动手React 项目的操作分三步第 1 步安装依赖npm install -D shadcn/lint eslint typescript-eslint/parser第 2 步在eslint.config.mjs注册插件核心是把shadcn加入plugins并挑选至少一条规则开启此处以no-arbitrary-values为例import { plugin as shadcn } from shadcn/lint import tsParser from typescript-eslint/parser import { defineConfig } from eslint/config export default defineConfig([ { files: [**/*.{js,jsx,ts,tsx}], languageOptions: { parser: tsParser, parserOptions: { ecmaFeatures: { jsx: true } }, }, plugins: { shadcn }, rules: { shadcn/no-arbitrary-values: error, }, }, ])第 3 步运行检查npx eslint .Vue 和 Svelte 项目需要额外引入对应解析器vue-eslint-parser/svelte-eslint-parser详见 docs/vue.md 和 docs/svelte.md。6 大内置规则AI 如何验证你的设计系统shadcn/lint内置 6 条规则覆盖了 AI 生成 UI 时最常翻车的场景规则拦截什么对应文档no-restyleAI 用className改组件外观应使用 variantsno-restyle.mdno-raw-colors裸色值如bg-pink-500应使用主题色no-raw-colors.mdno-arbitrary-values任意值如p-[13px]应使用设计标尺no-arbitrary-values.mdno-inline-styles内联style与style块no-inline-styles.mdno-unknown-classes无效类名如rounded-hugeno-unknown-classes.mdrequire-static-classes动态拼接如bg-${color}require-static-classes.md更多共享选项allow/deny/ 合约 / 自定义消息见 docs/rules.md。让 AI 遵守你的设计系统自定义规则shadcn/lint最有价值的地方是可编程——用配置就能表达Button 允许全宽、但不允许改 padding这类策略无需改组件 API。示例给不同组件配不同规则shadcn/no-restyle: [error, { allow: [layout], contracts: [ { pattern: ^CardTitle$, allow: [layout, typography] }, { pattern: ^CardContent$, allow: [layout, spacing] }, ], }]效果AI 写CardTitle classNametext-lg通过写CardTitle classNamemd:font-bold会被拦截报错会说明标题允许改字号、不允许改字重。自定义报错文案你甚至可以直接告诉 AI 该怎么办用{{sizes}}、{{file}}等占位符引用组件的真实值message: { spacing: Use a {{component}} size: {{sizes}}., }AI 看到的报错Use a Button size: sm, lg.最后一步写入 AGENTS.md让 AI 自动遵守在package.json中加入 lint 脚本scripts: { lint: eslint . }并在项目根目录的AGENTS.md加上一句After making changes, runnpm run lintand fix all errors.从此每次 AI 改完代码都会主动跑 lint 并修到 0 报错为止。延伸阅读工作原理docs/how-it-works.md接入现有项目指南docs/adoption.md排错手册docs/troubleshooting.md核心插件源码packages/lint/src/plugin.ts规则实现源码目录packages/lint/src/rules/shadcn/lint 的价值在于把设计系统的约束从口头约定变成了 AI 能读懂、能自检、能自动修复的代码。5 分钟装完剩下的交给你的设计系统规则。【免费下载链接】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），仅供参考