1. 为什么 Vibe Coding 需要一个能记住规范的 Agent如果你最近在用 Claude 写 Next.js 页面大概率经历过这种循环新开一个对话先花五分钟交代“我们用 App Router、Tailwind 走的是 v3 配置、组件放 components/ui、颜色只用 zinc 和 emerald 两套”然后才开始让它改代码。改完一轮换个会话同样的背景又得重讲一遍。这不是模型不聪明而是它没有“团队记忆”。Vibe Coding 的核心不是让 AI 帮你敲几行代码而是让 AI 带着你团队的工程习惯一起干活。Claude Agent Skills 就是干这个的它把“我们团队怎么审查 UI”“我们怎么写 Server Action”“我们怎么组织 Tailwind 类名”这类可复用的做事方法打包成 Claude 能自动发现、按需加载的能力包。你不用每次重复交代Claude 在遇到相关任务时会自己把对应 Skill 拉进来。这篇文章面向已经能独立搭 Next.js 项目的 Web 全栈开发者聚焦一件事怎么用 Claude Agent Skills 给一个 Next.js Tailwind 项目搭出可复制的骨架从配置到验证完整跑通。我会给出可以直接抄的 SKILL.md、settings.json 片段以及判断 Agent 到底有没有被触发的具体动作。整个链路里模型调用走 TaoToken 的兼容接口这样你在 Claude Code 或自建脚本里都能统一管理 Key。2. 前置准备TaoToken 接入与项目初始化2.1 拿到可用的 API KeyClaude Agent Skills 本身是 Claude 侧的能力但你要在本地跑 Claude Code 或自己写脚本调用就需要一个稳定的模型入口。TaoToken 提供的是 OpenAI/Anthropic 兼容的接口配置方式和官方 SDK 基本一致省去你改一堆适配代码。先去控制台创建 Key访问 https://taotoken.net/api-keys 新建一个 Key 并复制。建议按项目分 Key比如next-tailwind-dev一个、agent-test一个方便后面排查是哪个环境出的问题。Key 只在创建时完整显示一次记得先存进密码管理器。2.2 项目初始化假设你还没有项目先建一个标准的 Next.js Tailwind 骨架npx create-next-applatest next-skills-demo \ --typescript --tailwind --eslint --app --src-dir --import-alias /* cd next-skills-demo装完后确认tailwind.config.ts和src/app/globals.css都在。这个项目后面会作为 Skill 的“试验田”我们让 Claude 在这个仓库里执行 UI 审查任务观察 Skill 是否被触发。2.3 配置模型入口在项目根目录建.env.local把 TaoToken 的地址和 Key 写进去TAOTOKEN_API_KEYsk-你的key TAOTOKEN_BASE_URLhttps://taotoken.net/api如果你用的是 Claude Code它读取的是环境变量或 settings.json 里的配置。下面这段 settings.json 片段可以直接放进 Claude Code 的配置目录通常是~/.claude/settings.json或项目级.claude/settings.json{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的key }, skills: { enabled: true, directories: [./skills] } }注意skills.directories指向项目根目录下的skills/文件夹这是后面放 Skill 的地方。不同版本的 Claude Code 字段名可能略有差异如果启动时报未知字段先去掉skills段用默认的全局 Skills 目录把 Skill 放进去即可。3. 可复制的 Skill 骨架next-tailwind-ui-review3.1 目录结构在项目根目录建出这样的结构skills/ next-tailwind-ui-review/ SKILL.md CHECKLIST.md EXAMPLES/ good.md bad.md scripts/ scan-classes.mjsSKILL.md是必需的其余都是按需加载的资源。Claude 平时只看得到SKILL.md里的 name 和 description只有判断需要时才会读正文、再读 CHECKLIST 和脚本。3.2 SKILL.md 完整内容--- name: next-tailwind-ui-review description: 当任务涉及审查、改进或重构使用 Next.js App Router 与 Tailwind CSS 编写的前端代码时使用本技能。适用于页面布局一致性、组件封装、 Tailwind 类名规范、可访问性a11y检查。不适用于纯后端 API、 数据库迁移或与 UI 无关的脚本任务。 version: 0.1.0 tags: - frontend - nextjs - tailwind - accessibility --- # 目的 对 Next.js Tailwind 前端代码做结构化评审输出可执行的修改建议。 # 工作流程 1. 先读项目根目录的 CLAUDE.md确认技术栈与目录约定。 2. 定位被审查的文件判断是页面page.tsx还是组件components/。 3. 按 CHECKLIST.md 逐项检查不要跳项。 4. 对每个问题给出文件路径、行号、问题类型、修改建议。 5. 如果用户提供了运行中的页面 URL调用 scripts/scan-classes.mjs 做类名扫描把结果合并进报告。 # 输出格式 - 按严重程度分组阻断 / 建议 / 可选。 - 每条建议附一段修改后的代码片段。 - 最后给一个总体评分1-5和一句话结论。 # 冲突处理 如果本技能与项目 CLAUDE.md 的规范冲突以 CLAUDE.md 为准。3.3 CHECKLIST.md 与脚本CHECKLIST.md放纯清单方便 Claude 逐项打勾- [ ] 交互元素是否有 aria-label 或可见文本 - [ ] 图片是否有 alt - [ ] 颜色是否只用了 zinc / emerald 两套 - [ ] Tailwind 类名顺序布局 → 间距 → 排版 → 颜色 - [ ] 组件嵌套是否超过 3 层 - [ ] 是否使用了语义标签nav/main/sectionscripts/scan-classes.mjs做一个简单的类名扫描统计非约定颜色的使用import { readFileSync } from node:fs; const file process.argv[2]; const src readFileSync(file, utf8); const allowed /(zinc|emerald|white|black|transparent)/; const classRe /className([^])/g; const hits []; let m; while ((m classRe.exec(src)) ! null) { const classes m[1].split(/\s/); for (const c of classes) { if (/^(bg|text|border)-/.test(c) !allowed.test(c)) { hits.push(c); } } } console.log(JSON.stringify({ file, violations: hits }, null, 2));这个脚本故意写得很小目的是让你看到 Skill 调用脚本的链路而不是做一个完整的 lint 工具。4. 验证 Agent 是否真的调用了 Skill配置写完不代表生效。下面这套动作是我实测下来最能判断“Skill 到底有没有被触发”的方法。4.1 制造一个必然触发场景在src/app/page.tsx里故意写一段有问题的代码export default function Home() { return ( div classNamebg-blue-500 p-4 div onClick{() alert(hi)} classNametext-red-300 点我 /div img src/logo.png / /div ); }这里有三处问题用了blue和red不在约定色板、div当按钮用没有键盘支持、img缺alt。4.2 发起请求并观察在 Claude Code 里输入帮我用团队的 Next.js Tailwind UI 规范审查 src/app/page.tsx如果 Skill 生效你会看到几个信号Claude 明确提到它正在使用next-tailwind-ui-review输出按 CHECKLIST 的条目组织而不是自由发挥报告里出现“阻断/建议/可选”的分组如果它调用了脚本会显示执行scan-classes.mjs的命令和返回的 JSON。4.3 用脚本单独验证接口连通如果 Skill 没触发先排除模型入口的问题。直接跑一次接口调用curl https://taotoken.net/api/v1/messages \ -H x-api-key: $TAOTOKEN_API_KEY \ -H anthropic-version: 2023-06-01 \ -H content-type: application/json \ -d { model: claude-sonnet-4-20250514, max_tokens: 128, messages: [{role:user,content:回复 OK 两个字母}] }返回里有正常的content数组说明 Key 和地址没问题问题就出在 Skill 配置或触发描述上。想快速对比不同模型的表现可以直接在模型对话里试https://taotoken.net/models 把同一段审查请求丢进去看模型是否理解你的规范意图。5. 本篇常见错排查5.1 Skill 完全不触发最常见的原因是description写得太抽象。像“帮助改进前端代码”这种描述Claude 很难判断什么时候该用。把具体技术栈和任务类型写进去比如“Next.js App Router 与 Tailwind CSS”“UI 审查”“可访问性检查”触发率会明显上升。另一个原因是skills.directories路径写错Claude Code 启动时如果找不到目录会静默跳过建议先用绝对路径试一次。5.2 触发了但输出不符合预期通常是SKILL.md正文太长、指令太散。Progressive Disclosure 的设计是让正文保持聚焦把细节丢给 CHECKLIST 和 EXAMPLES。如果你把几百行规范全塞进 SKILL.md模型反而会抓不住重点。把“必须做什么”留在正文“具体检查项”移到 CHECKLIST。5.3 脚本执行报错scan-classes.mjs用的是 Node 原生模块不需要额外依赖。如果报Cannot use import statement outside a module检查项目package.json里有没有type: module没有的话把脚本后缀改成.cjs并改用require。另外脚本路径在 SKILL.md 里要写相对 Skill 目录的路径写绝对路径换台机器就失效。5.4 与 CLAUDE.md 冲突如果项目CLAUDE.md里写了“颜色用 slate”而 Skill 的 CHECKLIST 写“只用 zinc/emerald”Claude 会犹豫。解决办法是在 SKILL.md 里显式声明优先级就像上面那段“冲突处理”写的以项目规范为准。这样 Skill 可以跨项目复用项目差异交给 CLAUDE.md 处理。5.5 上下文被撑爆装了很多 Skill 之后如果感觉响应变慢检查是不是有 Skill 的 description 写得过长。Level 1 只加载 name 和 description这两项应该控制在两三句话内。正文再长都不影响日常上下文因为只有触发时才读。6. 把 Skill 用进日常编码流骨架跑通之后真正有价值的是把它接进你每天的工作。我自己的做法是每次做完一个页面不直接提交而是先让 Claude 用这个 Skill 过一遍把阻断项修掉再提 PR。这样 review 阶段讨论的就都是设计层面的问题而不是“这里颜色不对”“这个按钮没键盘支持”这种机械问题。如果你要长期跑这类 Agent 任务比如让 Claude 在 CI 里自动审查每个 PR 的 UI 变更可以考虑 Coding Plan 这类按量方案https://taotoken.net/coding-plan 比每次手动开对话更适合持续集成场景。接入文档在 https://taotoken.net/doc 里面有不同语言的调用示例照着改 base_url 就能用。下一步可以做的把next-tailwind-ui-review复制一份改成next-server-action-review专门检查 Server Action 的错误处理和鉴权再建一个tailwind-token-audit扫描整个src/目录的类名合规性。几个 Skill 叠起来你的 Vibe Coding 流程就从“每次重新交代”变成了“打开就能干活”。