Vibe Coding - 面向 Web 全栈开发者的 Claude Agent Skills 入门与实战

小小工匠2026-01-26 10:50

文章目录

  • [引言：当 AI 助手开始"长出团队习惯"](#引言：当 AI 助手开始“长出团队习惯”)
  • [一、核心概念速通：Agent Skills、Claude.md、MCP、子代理各负责什么](#一、核心概念速通：Agent Skills、Claude.md、MCP、子代理各负责什么)
    • [1.1 Agent Skills 是什么？](#1.1 Agent Skills 是什么？)
    • [1.2 Progressive Disclosure：不再"把所有文档一次性喂给模型"](#1.2 Progressive Disclosure：不再“把所有文档一次性喂给模型”)
    • [1.3 Claude.md：项目说明书，不是技能](#1.3 Claude.md：项目说明书，不是技能)
    • [1.4 MCP：把 GitHub、数据库、SaaS 全接进来](#1.4 MCP：把 GitHub、数据库、SaaS 全接进来)
    • [1.5 子代理（Subagents）：带专职角色的小团队成员](#1.5 子代理（Subagents）：带专职角色的小团队成员)
  • [二、从 Claude 视角理解 Agent Skills 的设计哲学](#二、从 Claude 视角理解 Agent Skills 的设计哲学)
    • [2.1 触发逻辑：Skill 的 name / description 比正文更重要](#2.1 触发逻辑：Skill 的 name / description 比正文更重要)
    • [2.2 为什么要"让技能自己长出来"：迭代式构建](#2.2 为什么要“让技能自己长出来”：迭代式构建)
  • [三、Skill 文件结构与工程实践（Next.js + Tailwind 视角）](#三、Skill 文件结构与工程实践（Next.js + Tailwind 视角）)
    • [3.1 一个典型 Skill 目录长什么样？](#3.1 一个典型 Skill 目录长什么样？)
    • [3.2 为 Next.js + Tailwind 定制一个 UI Review Skill](#3.2 为 Next.js + Tailwind 定制一个 UI Review Skill)
    • [3.3 与 Claude.md 的配合：项目上下文 + 技能规范](#3.3 与 Claude.md 的配合：项目上下文 + 技能规范)
  • [四、实战案例：为 Next.js + Tailwind 项目构建与使用 UI Review Skill](#四、实战案例：为 Next.js + Tailwind 项目构建与使用 UI Review Skill)
    • [4.1 需求分析：为什么要单独做一个 UI Review Skill？](#4.1 需求分析：为什么要单独做一个 UI Review Skill？)
    • [4.2 步骤 1：在真实对话中抽取技能骨架](#4.2 步骤 1：在真实对话中抽取技能骨架)
    • [4.3 步骤 2：设计 Skill 目录与资源](#4.3 步骤 2：设计 Skill 目录与资源)
    • [4.4 步骤 3：在 Claude 中安装并测试](#4.4 步骤 3：在 Claude 中安装并测试)
    • [4.5 步骤 4：结合 MCP 接入真实数据](#4.5 步骤 4：结合 MCP 接入真实数据)
  • [五、产品经理视角：如何用 Skills 定义团队"标准操作"](#五、产品经理视角：如何用 Skills 定义团队“标准操作”)
    • [5.1 把"模糊需求"变成可执行流程](#5.1 把“模糊需求”变成可执行流程)
    • [5.2 结合 Subagents 做"虚拟小组协作"](#5.2 结合 Subagents 做“虚拟小组协作”)
  • 六、常见坑与实践建议
    • [6.1 触发过度 vs 触发不足](#6.1 触发过度 vs 触发不足)
    • [6.2 与项目级 Claude.md 冲突](#6.2 与项目级 Claude.md 冲突)
    • [6.3 安全与脚本执行风险](#6.3 安全与脚本执行风险)
  • 七、总结：从"聪明助手"到"有技能的虚拟同事"

引言：当 AI 助手开始"长出团队习惯"

过去一年，如果你在用 Claude、ChatGPT 之类的大模型帮忙写代码、查文档、改 UI，大概率遇到过这些典型问题：

  • 每次都要重复告诉它"我们项目用的是 Next.js + Tailwind，代码风格按 ESLint + Prettier 来"。
  • 辛辛苦苦写的「项目说明 + 设计规范」塞进上下文，用几次就开始"上下文腐烂"：模型忘记、胡乱理解、回复风格不统一。
  • 换一个对话 / 换一个人使用，同样的规范和经验又得重说一遍，完全没有"团队级复用"。

Anthropic 在 2025 年推出的 Agent Skills，就是为了解决这类问题：它让 Claude 不只是一个"会写代码的聪明实习生"，而是一个可以被"系统化培养"的虚拟同事，具备稳定、可复用、可维护的专业技能。

这篇文章会从原理到实战，带你从零理解 Claude Agent Skills，搞清楚它和 Claude.md、MCP、子代理之间的边界，然后以一个 Next.js + Tailwind Web 项目为例，完整走一遍工程化落地流程，重点面向有实战经验的 Web 全栈开发者和技术向产品经理。

一、核心概念速通：Agent Skills、Claude.md、MCP、子代理各负责什么

1.1 Agent Skills 是什么？

可以把 Agent Skills 理解为：由文件夹承载的、可动态发现和加载的"能力包" 。

每个 Skill 通常包含：

  • 一个必需的 SKILL.md 文件：描述技能做什么、什么时候用、怎么用。
  • 若干可选资源：说明文档、模板、配置文件、示例数据等。
  • 可选脚本：用于执行确定性的操作，比如运行代码、处理数据、调用外部工具等。

关键点：

  • Skills 是跨项目可复用的能力，不绑定具体代码仓库，更像是「团队级技能插件」。
  • Claude 会在任务相关时自动触发对应 Skill，不需要你每次手动提醒。触发主要依赖 SKILL.md 中的名称与描述。

1.2 Progressive Disclosure：不再"把所有文档一次性喂给模型"

Agent Skills 最大的设计亮点是 Progressive Disclosure（渐进披露）：

它把技能内容拆成三层，并按需加载，从而在保持强上下文的同时，避免撑爆上下文窗口。

  • Level 1：只加载技能的 name 和 description，放进系统提示，所有对话一开始就可见。
  • Level 2：当 Claude 判断需要使用某个 Skill 时，它会通过 bash 或内部调用读取 SKILL.md 的主体说明。
  • Level 3：如果任务需要更细节的资源（脚本、模板、参考文档），再按需打开这些文件，脚本甚至可以在上下文之外执行，只把结果带回对话。

这意味着：你可以给 Claude 安装几十个技能，但平时上下文里只放很小一段 metadata，只有在真正相关时才加载完整内容，从而缓解"上下文越多模型越糊涂"的问题。

1.3 Claude.md：项目说明书，不是技能

Claude.md（有时写作 CLAUDE.md）是项目级、仓库级的说明文件，类似更智能的 README.md：

  • 描述：技术栈（如 Next.js + Tailwind）、目录结构、编码规范、测试策略、业务领域术语等。
  • 作用：为当前项目的所有对话提供统一上下文，让 Claude "永远知道"你这个仓库的基本情况。

与 Skills 的区别：

  • Claude.md 关注的是"这个项目本身是什么样"。
  • Skills 关注的是"我们团队做某类事的标准方法"，可以在多个项目间共享。

一个直观比喻：

  • Claude.md 像「本项目的内部 Wiki 首页」。
  • Skills 像「公司级 SOP/Playbook」，适用于多个项目和团队。

1.4 MCP：把 GitHub、数据库、SaaS 全接进来

MCP（Model Context Protocol）提供一套一致的协议，让 Claude 可以像调用"工具"一样访问外部系统，比如 GitHub、Postgres、Linear、Slack 等。

  • MCP 提供：
    • 列出/读取文件与代码仓库，查询数据库，调用 API。
  • Skills 提供：
    • 在拿到数据之后，如何按你团队习惯处理这些数据（分析、生成报告、改代码、建立 issue 等）。

一句话：MCP 是"接数据、接系统"的接口层，Skills 是"拿到数据之后，如何按规范办事"的能力层。

1.5 子代理（Subagents）：带专职角色的小团队成员

子代理是预配置好的专用 AI 助手，每个有独立的系统提示、工具权限和上下文，用来处理特定类型任务。

  • 例子：
    • Subagent A：专职「前端代码重构」，只允许访问前端目录。
    • Subagent B：专职「文档撰写」，访问设计稿与文案资源。
  • 它们可以并行工作，各自有独立上下文，然后把结果汇总回主对话。

和 Skills 的关系：

  • Skills 是所有代理都能使用的共有能力。
  • 子代理是某个场景下"谁来干活"，Skills 决定"他具备哪些专业技能"。

二、从 Claude 视角理解 Agent Skills 的设计哲学

从 Claude 的视角想问题有助于你写出"容易被正确触发"的技能。

2.1 触发逻辑：Skill 的 name / description 比正文更重要

在默认状态下，Claude 只看到所有技能的名字和简短描述，它会用这些信息来判断是否触发技能。

这意味着：

  • name 要尽可能清晰、具体、面向任务，避免抽象或模糊命名。
  • description 要告诉 Claude：
    • 这个技能对什么类型任务特别有用。
    • 什么时候不该用它（避免过度触发）。

对于 Web 全栈场景，一个好的命名示例：

  • next-tailwind-ui-review
    • description：
      • 「当你被要求审查或改进使用 Next.js + Tailwind 编写的前端代码时，使用本技能对 UI 一致性、可访问性和代码结构进行系统化评审。」

相比之下，一个差的命名：

  • ui-helper（过于模糊，Claude 很难精准判断触发场景）。

2.2 为什么要"让技能自己长出来"：迭代式构建

更推荐在真实任务中迭代构建 Skills，而不是一开始就写一个"完美大而全技能"：

  • 在你与 Claude 成功协作完成一次任务后，让 Claude 自己把「成功方法」「常见错误」整理进一个新的或现有的 Skill。
  • 当技能在使用过程中走偏时，再让 Claude 分析是哪里描述不清、资源缺失，进而更新 SKILL.md 或脚本。

这非常适合技术向产品经理的工作方式：你可以在真实项目沟通中，让 Claude 协助"抽象和沉淀"团队现有流程，而不是写一堆脱离实际的规范。

三、Skill 文件结构与工程实践（Next.js + Tailwind 视角）

这一节我们从工程视角拆 Skill 的目录结构，并讨论如何在 Next.js + Tailwind 项目中合理组织。

3.1 一个典型 Skill 目录长什么样？

结合官方文档和实践经验，典型结构如下（示例）：

text 复制代码 
next-tailwind-ui-review/
  SKILL.md          # 技能定义与说明（必需）
  CHECKLIST.md      # UI/UX/可访问性检查清单（可选资源）
  EXAMPLES/
    good-examples.md
    bad-examples.md
  scripts/
    run_a11y_audit.ts
    scan_tailwind_class_usage.ts
  • SKILL.md：
    • YAML frontmatter：name、description、version、作者、标签等。
    • 主体：
      • 使用说明
      • 工作流程步骤
      • 需要读取哪些资源文件
      • 什么时候调用 scripts 目录下的脚本。
  • 资源文件：
    • CHECKLIST / 模板 / 示例输出，帮助 Claude 输出更稳定。
  • 脚本：
    • 通过虚拟机或工具执行，用于静态分析、lint、检查类名等。

3.2 为 Next.js + Tailwind 定制一个 UI Review Skill

假设你有一个典型的 Next.js + Tailwind 单页应用项目，我们希望做一个 Skill：

  • 目标：在开发过程中，自动检查 UI 是否符合团队约定的 Tailwind 规范与可访问性标准，并给出修改建议。

SKILL.md 的 YAML frontmatter 可能长这样（示意，非官方格式）：

markdown 复制代码 
---
name: next-tailwind-ui-review
description: >
  When asked to review or improve UI implemented with Next.js and Tailwind CSS,
  use this skill to perform structured review on layout consistency, component patterns,
  Tailwind class usage, and accessibility (a11y) checks.
tags:
  - frontend
  - nextjs
  - tailwind
  - accessibility
version: 0.1.0
---

# 目的

本技能用于在审查 Next.js + Tailwind 前端代码时，提供结构化的代码与界面评审。

后续正文会：

  • 指导 Claude 如何分步骤工作（先看页面结构，再看组件封装，再查 Tailwind 使用，再做可访问性检查）。
  • 告诉它在什么情况下需要调用脚本目录中的 run_a11y_audit.ts（例如当用户提供了实际运行页面 URL 时）。

3.3 与 Claude.md 的配合：项目上下文 + 技能规范

在同一个 Next.js 项目中，Claude.md 可以简要说明：

  • 我们使用的 Next.js 版本、Tailwind 配置、组件库（如 Headless UI）、路由惯例等。
  • 我们的项目目录结构（app/ vs pages/），以及统一的组件存放位置。

next-tailwind-ui-review Skill 则不关心这些项目细节，而是沉淀通用准则，比如：

  • Tailwind class 排列顺序（布局类在前、颜色在后）。
  • 嵌套深度避免超过 3 层。
  • 必须为交互元素提供 aria-* 属性和键盘操作支持。

二者配合方式：

  • Claude 先通过 Claude.md 理解"你这个项目大概长什么样"。
  • 当你说「帮我审查这个登录页面的 UI 代码」，它再触发 next-tailwind-ui-review，按照技能说明逐步检查，必要时调用脚本做辅助分析。

四、实战案例：为 Next.js + Tailwind 项目构建与使用 UI Review Skill

下面我们以一个具体的"从零到能用"流程来走一遍，侧重原理 + 工程实践，方便你照抄到自己的项目中。

4.1 需求分析：为什么要单独做一个 UI Review Skill？

你可能已经有下面这些痛点：

  • 每次 PR review，大家讨论的都是类似问题：Tailwind 类名乱、颜色风格不统一、语义标签用错、缺少可访问性支持。
  • 产品经理在看预览环境时很难用自然语言清晰描述"不符合规范"的地方。
  • 即使用 Claude 做 review，每次也要先重新解释一次团队规范。

UI Review Skill 的目的：

  • 把这些重复性、可结构化的评审行为固化下来。
  • 让任何人（包括 PM）都能触发一次相对专业的"初筛"。

4.2 步骤 1：在真实对话中抽取技能骨架

推荐做法不是闭门造车，而是在日常协作中让 Claude 帮你提炼技能。

典型工作流：

  1. 在 Claude Code 中，打开你的 Next.js 项目。
  2. 让 Claude 按照你说的方式对某个页面做一次完整 UI review。
  3. 当你觉得「这个流程不错」时，说：
    • 「请把你刚才审查 UI 的方法，总结成一个可以重复使用的 Agent Skill 草稿，适用于所有 Next.js + Tailwind 项目。」
  4. Claude 会为你生成一个初版 SKILL.md，你可以再迭代。

这种方式的好处：

  • 你得到的是"真实有效"的流程，而不是凭空想象的 checklist。
  • Skills 内容天然对齐你和团队的语言风格与思考方式。

4.3 步骤 2：设计 Skill 目录与资源

基于前面的示意，我们最终可能形成这样的结构：

text 复制代码 
skills/
  next-tailwind-ui-review/
    SKILL.md
    CHECKLIST.md
    EXAMPLES/
      good-examples.md
      bad-examples.md
    scripts/
      run_a11y_audit.ts
      scan_tailwind_class_usage.ts

资源设计建议：

  • CHECKLIST.md 放纯文本清单，不混入太多解释，让 Claude 更容易按项输出。
  • EXAMPLES 用少量高质量示例，展示"好 vs 坏"的代码片段和组件设计。
  • scripts 用来做你平时觉得"人肉很麻烦但脚本很好写"的检查，比如：
    • 扫描 className 中 Tailwind 类是否使用了团队禁止的颜色。
    • 统计同一组件中是否有重复的布局模式。

4.4 步骤 3：在 Claude 中安装并测试

安装方式取决于你是用 Claude Code、Claude Web 还是 API/SDK，整体思路类似：

  • 把 Skill 放到 Claude Code 指定的 Skills 目录，或在设置中上传/配置。
  • 重启/刷新后，Claude 默认会加载所有 Skill 的 metadata（Level 1）。

测试方式：

  • 打开你的 Next.js 项目，选中一个页面文件或组件。
  • 发起自然语言请求：
    • 「帮我用我们团队的 Next.js + Tailwind UI 规范审查这个页面，并给出需要修改的地方。」
  • 观察 Claude 是否自动使用 next-tailwind-ui-review：
    • 它会引用 CHECKLIST 中的条目，按部就班提出问题。
    • 如需要脚本，会提示你它将运行哪个脚本做额外分析。

如果触发不理想，优先检查：

  • name 和 description 是否明确提到 "Next.js + Tailwind" 和 "UI review"。
  • 是否与其它 Skill 描述过于相似，导致 Claude 犹豫。

4.5 步骤 4：结合 MCP 接入真实数据

进一步，你可以用 MCP 把以下系统接进 Claude：

  • GitHub 仓库：自动拉取 Pull Request 中的变更文件。
  • Storybook / 设计稿：拉取组件文档或设计规范。
  • 日志 / 监控：分析实际用户行为数据，辅助 UI 决策。

在 UI Review Skill 中，你可以指定：

  • 如果当前任务是"review PR #123"，先用 MCP 从 GitHub 拉取相关文件，然后再执行 UI 审查流程。
  • 如果检测到与可访问性相关的问题，可以调用脚本在本地跑一次 a11y 审计工具，把结果整合进输出。

五、产品经理视角：如何用 Skills 定义团队"标准操作"

对于技术向产品经理，Agent Skills 提供了一个非常适合的抓手：你可以不用写太多代码，就在组织层面定义"高价值的标准动作"。

5.1 把"模糊需求"变成可执行流程

许多产品经理在 AI 协作中会遇到一个困境：

  • 自己脑子里有一套"评估页面好不好用"的标准，但很难一次性写成完整 prompt。
  • 每次和 AI 协作都要补充大量背景和偏好信息。

Agent Skills 允许你：

  • 在几次成功协作之后，把这套标准让 Claude 帮你整理成 SKILL.md + CHECKLIST。
  • 以后在所有相关场景中复用，无论是谁发起，AI 都会按这套标准执行。

5.2 结合 Subagents 做"虚拟小组协作"

假设你负责一个 Web 项目，你可以设计这样的虚拟团队结构：

  • 主代理：负责统筹项目沟通与任务分解。
  • Subagent A（前端专家）：
    • 使用 next-tailwind-ui-review Skill 做前端 UI 评审。
  • Subagent B（文案与信息架构）：
    • 使用"Landing Page 文案评审 Skill"。
  • Subagent C（数据分析）：
    • 使用"漏斗分析 Skill"，结合 MCP 接入的分析数据。

产品经理只需要说：

「帮我评审一下新注册流程，前端 UI、文案、以及数据漏斗都看一遍，最后给我一个综合报告。」

主代理会把任务拆给不同子代理，而子代理在执行时再调用对应 Skills，从而得到结构化的多维评审结果。

六、常见坑与实践建议

6.1 触发过度 vs 触发不足

  • 触发过度：
    • Skill 描述太宽泛，导致 Claude 在很多不相干场景也用它。
    • 解决：在 description 中明确说明"不适用"的情况，例如仅适用于 Next.js + Tailwind，排除纯后端任务。
  • 触发不足：
    • 描述太具体或关键词太少，Claude 不认为当前任务需要它。
    • 解决：在描述中加入更多自然语言表达，如"审查 UI""改进界面""页面布局""Tailwind class 清理"等常见用户说法。

6.2 与项目级 Claude.md 冲突

当 Claude.md 中的规范和 Skill 中的规范不一致时，Claude 可能会产生混乱。

建议：

  • 把项目独有的规则放入 Claude.md，把跨项目共通的放入 Skills。
  • 在 Skill 中明确写出"如果与项目级规范冲突，以项目规范为准"的说明。

6.3 安全与脚本执行风险

Skills 可以携带脚本并在虚拟机环境中执行，这带来了安全风险：

  • 恶意 Skill 可能尝试访问本地文件或网络资源，造成数据泄露。
  • 团队应只安装来自可信来源的 Skills，并仔细审查脚本内容。

对于团队使用：

  • 建议设立一条明确流程：新 Skill 必须由工程师代码 review 通过后才能安装到团队环境。

七、总结：从"聪明助手"到"有技能的虚拟同事"

对 Web 全栈开发者和技术向产品经理来说，Claude Agent Skills 的价值不在于"又多了一个新功能"，而在于：

  • 终于有了一个可以系统化沉淀团队经验、并在各个项目之间复用的载体。
  • Skills + Claude.md + MCP + 子代理，让 AI 协作从"单次对话"升级为"可运营的工作流"。

一个可执行的行动清单，可以从这四步开始：

  1. 在真实任务中让 Claude 帮你完成一次高质量的 UI review 或开发任务。
  2. 让 Claude 把这套做法抽象成一个 Skill 草稿（尤其是 SKILL.md）。
  3. 为 Next.js + Tailwind 项目完善 Claude.md，清晰写明项目背景与规范。
  4. 把 Skill 安装到 Claude Code 中，在新任务中反复使用和迭代，逐步形成团队级的技能库。

当你发现新来的同事只要打开 Claude，就能立即用上你这几年积累的经验，并且在 Next.js + Tailwind 项目里保持统一的 UI 品质，那就是 Agent Skills 真正"落地"的时刻。

相关推荐
人肉推土机2 个月前
基于Claude Skills思想构建可拓展Plan ReAct Agent系统
langchain·react·mcp·claude skills·plan agent
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03Claude Code Skills 实用使用手册04Open Code教程（四）| 高级配置与集成05UV安装并设置国内源06Linux下V2Ray安装配置指南07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09MC.JS 网页版《我的世界》 免安装中文版10BongoCat - 跨平台键盘猫动画工具