企业官网建设流程全解析

Vue项目3步接入@shadcn/lint：让AI Agent乖乖遵守你的设计规范

【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lint

如果你的 Vue 项目由 AI Agent 参与开发，它写出来的 UI 代码往往"能跑但难看"：p-[13px]、bg-pink-500、rounded-huge随便往组件上贴，设计规范全靠自觉。@shadcn/lint就是为了解决这个问题而生的 agent-first linter：你用配置文件声明 Tailwind 设计系统里"允许什么、替代方案是什么"，当 Agent 违反规则时，它报出的错误不仅说明哪里错了，还会基于你项目里真实的组件、变体和主题，告诉 Agent 该怎么改。本文用 3 步带你完成 Vue 项目接入，无需重写任何现有组件，也无需使用 shadcn/ui，Tailwind v4 即可。

第一步：安装 @shadcn/lint 和 Vue 解析器

要求 Node.js 20.19+、ESLint 9.30+。Vue 模板（<template>里的class、:class、:style）需要在 ESLint 下配合vue-eslint-parser才能被读取，所以依赖一共 4 个：

npm install -D @shadcn/lint eslint @typescript-eslint/parser vue-eslint-parser

💡 如果你的项目已经在用eslint-plugin-vue，保留它的 parser 配置即可，只需在后面追加本插件。

第二步：在 eslint.config.mjs 注册插件

在项目根目录创建（或编辑）eslint.config.mjs，为**/*.vue添加一个配置块：

import { plugin as shadcn } from "@shadcn/lint" import tsParser from "@typescript-eslint/parser" import { defineConfig } from "eslint/config" import vueParser from "vue-eslint-parser" export default defineConfig([ { files: ["**/*.vue"], languageOptions: { parser: vueParser, parserOptions: { parser: tsParser }, }, plugins: { shadcn }, rules: { "shadcn/no-arbitrary-values": "error", }, }, ])

运行npx eslint .，看到规则生效即说明配置成功。完整的 Vue 配置示例见 docs/vue.md，官方还准备了 SETUP.md 供 Agent 自行读取并帮你完成安装。

第三步：启用规则，让 AI Agent 自动遵守

3.1 选择你的规则。@shadcn/lint 内置 6 条针对设计规范打造的规则，按需开启：

各规则的详细说明在 docs/rules/ 目录下都有专门文档。

3.2 把 lint 交给 Agent。在package.json中加一个lint脚本，然后在项目的AGENTS.md里写上一句话：

After making changes, run `npm run lint` and fix all errors.

从此 Agent 每次改完代码都会自己跑 lint、自己读错误、按提示修复——错误信息本身就是"设计规范说明书"。

为什么 Agent 一听就懂：诊断示例

普通工具报错只会说"padding 不允许"，而 @shadcn/lint 的错误会基于你的设计系统给出完整指引。比如某个 Button 拥有sm、lg两个尺寸，Agent 写出class="p-4"后看到的是：

"p-4" is not allowed on <Button>: <Button> owns its spacing. Use a variant (sm, lg) for size. Use margin for layout or a gap on the parent for space around it. Add a size in components/ui/button.vue only if the design explicitly calls for one.

它不仅指出违规，还告诉 Agent：该用哪个变体、间距应该放到哪里、什么情况下才允许改组件源码。官方评测显示，150+ 次任务运行中，几乎所有任务在一轮纠错后就达到零违规，修复成本比纯文字规则降低 10%~48%。方法论文档见 docs/evals.md。

在 Vue 项目中，class="p-4"、:class="{ 'bg-primary': active }"、:class="cn(base, props.class)"、v-bind="{ class }"甚至 SVG 的fill属性都能被识别，模板变量还会自动追踪到<script setup>解析——覆盖范围详见 docs/vue.md 的 What is read 表格。

进阶：给不同组件定不同规矩（Contracts）

规则支持contracts，为每个组件单独定策略。例如：CardTitle 允许改字体大小但保留字重，CardContent 允许改内边距但保留排版：

"shadcn/no-restyle": ["error", { allow: ["layout"], contracts: [ { pattern: "^CardTitle$", allow: ["layout", "typography"], deny: ["font-*"] }, { pattern: "^CardContent$", allow: ["layout", "spacing"] }, ], }]

你还可以用message把错误文案改写成团队自己的设计语言（支持{{component}}、{{sizes}}等占位符）。更多玩法见 docs/design-systems.md。

常见疑问速答

🔹 没有 components.json 能用吗？可以。linter 会自动查找导入 Tailwind 的样式表作为主题，通过settings.shadcn.ui或componentImports告诉它你的组件在哪，参考 docs/how-it-works.md。

🔹 存量代码违规太多怎么办？先用warn级别起步，修掉高频违规后升级为error，还能用--max-warnings设上限防止反弹。渐进式落地方案见 docs/adoption.md。

🔹 Oxlint 可以用吗？可以，但 Oxlint 只能读.vue文件的<script>块，读不到模板里的 class。想检查模板，用 ESLint 跑 Vue 文件即可，两者可共存。

🔹 规则实现源码在哪看？所有规则都位于 packages/lint/src/rules/，分类器（判断text-sm是排版还是颜色）在 packages/lint/src/grammar/categories.ts。

小结

@shadcn/lint 的核心价值在于：它不改你的组件 API，只是把"设计系统怎么用"变成机器可执行、Agent 可理解的规则。配置一次，之后无论哪个 Agent、哪次会话，写出的 UI 都长一个样。完整规则选项查阅 docs/rules.md，项目总览见 README.md。

【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lint