S

shadcn/lint

AI 优先 Linter

shadcn/lint

Tailwind 的 className 是字符串,AI 模型容易随意拼接样式导致设计漂移。shadcn/lint 将设计约束转化为可执行规则,错误信息直接告诉 AI 应该用什么——5 天获得 2100+ GitHub Stars。

2100+
GitHub Stars(5 天内)
6 条规则
no-restyle / no-raw-colors 等
150+
Agent 任务评测零违规

免费试用 · 无需下载即可在线体验

关于 shadcn/lint

Agent 优先的设计系统守护者

shadcn/lint 是 shadcn/ui 团队于 2026 年 9 月 14 日发布的开源 Linter,旨在解决 AI 编码智能体在 Tailwind CSS 项目中频繁违反设计系统规范的问题。传统 TypeScript 类型检查只能报错,却无法告诉 AI「应该用什么替代」,而 shadcn/lint 的错误信息会从项目组件和主题中读取具体建议。

发布 5 天内即获 2154 个 GitHub Stars,Ultracite 7.12 随即集成了可选预设,OpenHands 也在发布两天后开启试用。它兼容 ESLint 9.30+ 和 Oxlint 1.80+,适用于任何 Tailwind v4 项目,不强制依赖 shadcn/ui 组件库。

核心功能一览

六大核心能力,覆盖创作全流程

🤖

AI 友好的错误信息

错误提示包含具体组件名称、可用变体和文件路径,让 AI 模型一次性修正而非盲目猜测。

📐

6 条核心规则

no-restyle(禁止自定义样式)、no-raw-colors(强制使用主题色)、no-arbitrary-values(禁止任意值)、no-inline-styles 等。

🔒

组件级合约

通过正则表达式定义每个组件允许/禁止的样式类别,精细控制设计边界。

⚡

ESLint + Oxlint 双引擎

同时支持 ESLint 9.30+ 和 Oxlint 1.80+,可在 CI/CD 中灵活集成。

📊

JSON 结构化输出

默认输出机器可读的 JSON 报告,AI 智能体可直接解析并自动修复。

零基础快速上手

4 步完成你的第一件 AI 作品,无需任何设计经验

1

安装依赖

运行 npm install -D @shadcn/lint oxlint(或对应 ESLint 插件),在配置文件中添加规则。

2

配置规则

在 .oxlintrc.json 或 eslint.config.js 中添加 shadcn 规则,可选择预置的 shadcn/ui 规则集。

3

定义组件合约

为特定组件配置允许/禁止的样式类别,如 Button 只允许 width/full 和 margin 类。

4

在 AGENTS.md 中集成

在 AI 编码智能体的指令文件(AGENTS.md)中加入「运行 lint 并修复所有错误」的提示,实现自动合规。

全平台客户端下载

支持网页端、桌面端、移动端及浏览器插件,随时随地开启创作

使用入口

GitHub 仓库
开源 MIT 协议
下载
npm 包
@shadcn/lint v0.1.1+
下载
文档
安装与配置指南
下载
Oxlint 插件
Oxlint 1.80+ 兼容
下载
爱派AiPyAD

常见问题解答

遇到问题?这里可能有你想要的答案

1

shadcn/lint 需要我用 shadcn/ui 组件吗?

不需要。它适用于任何 Tailwind v4 项目,预置规则只是方便 shadcn/ui 用户快速上手。

2

为什么 AI 模型会违反设计系统?

因为 Tailwind className 是纯字符串,TypeScript 无法约束其内容。AI 模型看到 'p-4' 就随手加上,却不知道 Button 组件应该用自己的 size prop。

3

和 ESLint 原有的 tailwindcss 插件有什么区别?

shadcn/lint 的错误信息会从项目实际组件和主题中读取可用选项,告诉 AI 具体该用什么替代,而不仅是报错。

同类对比

和同类工具横向对比,帮你选对工具。

对比维度shadcn/linttailwindcss/eslint-pluginStylelintBiome
Agent 优先是(核心设计目标)否(人类开发者)否否
Tailwind v4是部分需插件否
AI 友好错误是(含替代建议)否否部分
JSON 输出是否是是
LicenseMITMITMITMIT