什么是shadcn/lintAgent时代Tailwind设计系统的AI Linter完全入门【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lintshadcn/lint 是一款面向 Agent 时代的Tailwind 设计系统 AI Linter你用规则描述哪些样式是允许的编码智能体Coding Agent写 UI 代码时它能自动检查违规并基于你的组件、变体variants和主题给出修复建议。无需重写现有代码即可让 AI 稳定地产出符合设计规范的前端界面。为什么 Agent 时代需要设计系统 Linter当 AI 智能体替你写前端界面时一个常见问题随之而来你要一个粉色按钮它真的给你bg-pink-500——但你的设计系统里没有这个颜色你让它加内边距它直接写p-4——而你的Button组件自己管理间距它随手造出一个rounded-huge这样的类——Tailwind 根本无法生成对应 CSS传统的做法是把设计规范写进 Prompt 里求它遵守但 Agent 仍会漂移。而类型系统虽然能拦截错误报错信息却太冷——只说不允许不说该怎么办。shadcn/lint 的思路是让 Linter 报错时附带来自你设计系统的指导。同样是Button上用p-4普通检查只告诉你padding 不允许而它告诉你p-4 is not allowed on Button: Button owns its spacing. Use a size (sm, lg), or margin here or gap on the parent...——错在哪、该用什么替代、去哪里找一次说清。这正是 Agent 能直接读懂并执行的信息。核心特点它和普通 Linter 差在哪能力说明 Agent-first 设计报错自带替代方案 出处Agent 一次纠正即可收敛 基于你的设计系统建议来自你自己的组件、cva/tv变体和theme主题令牌 可编程规则用allow/deny/contracts按组件定制策略不改组件代码️ 三大框架通用同一套规则跑在 React、Vue、Svelte 上⚡ 双引擎支持ESLint9.30和 Oxlint1.80任选 不依赖 shadcn/ui配合 Tailwind v4 使用自己的组件库同样适用给每个组件立规矩Contracts最实用的功能是契约contracts不同组件可以有不同的允许清单。让CardTitle允许改字体大小但锁死字体族和字重让Button允许布局类mt-*、w-full但间距必须走size属性允许改间距但强制要求用主题里的刻度值禁止p-[13px]这类任意值组件保持灵活使用方式由你的规则决定——同一套组件可以发布到不同项目、配不同的规则。一键安装步骤把一段 Prompt 交给你的编码智能体它把安装这件事也 Agent 化了。给编码智能体这段提示即可Read SETUP.md and set up shadcn/lint in this project.智能体会自动检测包管理器、Monorepo 结构、组件目录和 Tailwind v4 主题完成插件注册并验证配置。如果你想手动安装先克隆仓库查看完整指南git clone https://gitcode.com/gh_mirrors/lint3/lint安装完成后只需两件事在package.json中添加lint脚本eslint .或npx oxlint在AGENTS.md里写一句修改代码后运行npm run lint并修复所有错误完整配置参考SETUP.md 与 docs/README.md6 条内置规则清单这些规则源自对生产级设计系统的研究并为 Agent 场景做了测试规则拦截什么no-restyle用className覆写设计系统组件的样式no-raw-colorsbg-pink-500这类未声明的原始调色板颜色no-arbitrary-valuesp-[13px]这类任意值no-inline-styles内联style和style元素no-unknown-classesrounded-huge、hovr:flex这类 Tailwind 无法生成的类会自动建议近似类名require-static-classesbg-${color}这类 Linter 读不懂的动态类每条规则都支持warn/error级别、自定义报错文案以及用{{sizes}}、{{file}}等占位符引用组件与主题信息。规则细节见 docs/rules.md源码位于 packages/lint/src/rules/。效果实测150 任务的数据说话项目内置了一套严格的评测体系evals让多个前沿模型在隔离的 shadcn 项目中故意偏离设计系统地写 UI再观察 Linter 反馈后的修复效果。结果模型完成任务反馈前错误数反馈后错误数Sonnet 58/8690Haiku 4.58/8660Opus 58/8420GPT 5.6 Terra8/81170几乎每个任务都在一轮纠正后归零且修复大多落在最理想的位置——把样式沉淀成组件上的新 variant而不是打补丁。对照实验还显示带 Linter 诊断的修复成本比只给规则文本低 10%–48%。方法论详见 docs/evals.md。存量项目怎么接入三步渐进法老项目不需要一步到位推荐路径详见 docs/adoption.md先开warn把no-restyle设为警告观察高频违规用--max-warnings封顶记录当前警告数作为上限进 CI 保证只减不增新代码从严对新目录设errorlegacy 目录保持warn逐步收敛支持范围与底层原理Tailwind v4项目不需要 shadcn/uiReact、Vue、Svelte 三端规则完全一致它如何理解你的项目通过components.json或导入路径发现组件追踪 re-export 与包装组件读取theme中的--color-*令牌并比较 OKLab 色距来生成颜色建议no-unknown-classes会真的调用你安装的 Tailwind 验证类能否生成 CSS。详见 docs/how-it-works.mdMonorepo、自定义cn函数、cva变体识别等高级配置见 README.md 的 Settings 章节新手上手路线推荐顺序步骤文档1️⃣ 读懂它能查什么docs/rules.md2️⃣ 配置组件契约与自定义报错docs/design-systems.md3️⃣ 存量项目渐进接入docs/adoption.md4️⃣ 各框架完整安装指南docs/react.md · docs/vue.md · docs/svelte.md5️⃣ 遇到缓存、误报等坑docs/troubleshooting.md如果你正在用 AI 智能体写前端界面shadcn/lint 是目前少有的为 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辅助生成（AIGC），仅供参考