引言：当 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 等。
