@shadcn/lint：shadcn 官方出品 agent 优先 linter，报错自带设计系统修复建议

本文介绍 shadcn-ui 官方新出的 @shadcn/lint（2.6 千 stars，MIT）——一个 agent 优先的 Tailwind 设计系统 linter：你定义设计系统规则，agent 破坏规则时，报错不只是说"不对"，还会基于你的组件、变体和主题解释错在哪、该怎么改。Tailwind v4 项目直接可用，不要求用 shadcn/ui，支持 ESLint 和 Oxlint，兼容 React、Svelte、Vue。

项目简介

这是 shadcn-ui 官方 9 月开源的新工具，专门解决一个 AI 时代的新问题：coding agent 改前端时随手写内联样式，把设计系统搅乱。传统 TypeScript 类型当然能拦一部分，但报错信息对 agent 毫无指引——比如 TS2353: 'padding' does not exist in type，agent 只知道不行，不知道该用什么。

@shadcn/lint 的同一规则报错长这样：

"p-4" is not allowed on Button：Button 自己管理内边距。用 size（sm/lg），或用 margin/gap 处理周围间距。只有设计明确要求时才去 components/ui/button.tsx 加新尺寸。

报错即教学，agent 拿到就能自己改对。

核心特性

agent-first 报错：错误信息带设计系统上下文和修复建议
不改组件 API：复杂的样式策略（哪些属性允许、哪些锁定）用配置表达，不用写复杂 TS 类型
现有设计系统直接接入：无需重写组件
双 linter 支持：ESLint 与 Oxlint 插件双形态
三框架兼容：React、Svelte、Vue

快速开始

最省事的方式，把这句话给你的 coding agent：

text

Read https://github.com/shadcn-ui/lint/blob/main/SETUP.md
and set up @shadcn/lint in this project.

装完挑规则、在配置里定义你的设计系统允许什么。一个典型配置示例：允许 margin 和全宽、把尺寸和形状锁定在 Button 组件内部——通过 shadcn/no-restyle 规则数组表达。

适用场景

用 AI agent 维护前端代码库的团队：设计系统一致性从"靠人盯"变成"lint 兜底"
shadcn/ui 及 Tailwind v4 用户：官方出品，与组件体系天然契合
设计系统负责人：把口头规范变成机器可验证的规则

注意事项

需要 Tailwind v4
规则集还在扩展中，特殊场景可能需要自定义配置
agent 修复质量取决于模型，报错里的建议是引导而非保证

项目链接

GitHub 仓库：https://github.com/shadcn-ui/lint
安装指南：仓库 SETUP.md