十大Agent神级技能实战指南：从TDD到UI设计，程序员提效必备
上一次我们系统聊了 Agent Skills 是什么、怎么用，以及和 Prompt / MCP 的区别。今天直接上干货，分享 10 个真正值得程序员装上的 Skills，覆盖开发流程、代码审查、UI 设计、网页操作、前端验收、MCP 开发、API 接入等高频场景：
- 让 AI 自动走完整 TDD 流程，测试先行，实现在后
- 把模糊输入变成 PRD、技术方案或决策文档
- 一键生成符合行业特色的完整设计系统
- 从 SOLID、安全性、性能等多维度做专业代码审查
- 解决长对话中上下文“腐烂”的失忆问题
- 为 AI 配上真实的浏览器操控和自动浏览能力
- 用 Playwright 对本地 Web 应用进行交互验收与截图检查
- 辅助开发 MCP Server，将内部 API 封装成 Agent 工具
- 在编写 Claude API 应用时查 SDK、流式、工具调用、缓存和模型迁移细节
接下来按场景逐一展开。
Superpowers
如果你只是偶尔让 AI 补一行代码，Superpowers 可能看起来有些笨重。但当你把 Claude Code、Cursor 这一类工具真正嵌入日常开发后，一个现实问题立刻浮现：AI 可以写代码，但并不会自动遵守工程流程。
需求还没有澄清就动手，测试还没跑就说“完成”，改到一半把主分支搞乱，或者实现后只检查语法而不管设计是否跑偏。Superpowers 要解决的正是这些。
它把需求澄清、方案拆分、Git Worktree、TDD、代码审查、调试和完成验证打包成一套 Skills，让 AI 在每个阶段都按固定步骤推进，避免你在 Prompt 里一遍遍提醒。
内置主要技能：
| 技能名称 | 触发方式 | 核心能力 |
|---|---|---|
| brainstorming | 命令 /superpowers:brainstorm | 先追问目标、约束和边界，再整理成设计文档 |
| using-git-worktrees | 自动（设计确认后） | 为每个任务独立开 Git worktree，隔离当前分支干扰 |
| writing-plans | 自动（设计确认后） | 把设计拆成 2–5 分钟粒度的小任务，写明文件、改法与验证方式 |
| executing-plans | 自动（执行计划时可选） | 适合批量重复任务，按计划逐项推进 |
| test-driven-development | 自动（代码实现阶段） | 按红-绿-重构节奏，先补充测试，再补实现 |
| subagent-driven-development | 自动（执行计划时可选） | 给任务分配独立子 Agent，完成后二次检查设计符合度和代码质量 |
| code-review | 自动（任务完成后） | 在代码合入前做第二轮质量检查 |
| systematic-debugging | 需要时触发 | 按阶段定位问题来源，避免边猜边改 |
| verification-before-completion | 自动（宣称完成时） | 没有测试、日志或命令输出，就不允许宣布完成 |
我最看重的是 verification-before-completion 和 test-driven-development。很多 AI 编程翻车症结就在验证：模型改完了代码，测试、日志、命令输出却没跟上。Superpowers 直接把验证变成流程硬约束：没有证据，就不能收工。
目前 Superpowers 支持 Claude Code、Cursor、Codex、OpenCode 等主流 AI 编程工具。下面以 Claude Code 为例。
如果你还没有 Claude Code，先确保本机有 Node.js 18+，然后执行：
npm install -g @anthropic-ai/claude-code
在 Claude Code 里添加插件市场：
/plugin marketplace add obra/superpowers-marketplace
安装 Superpowers：
/plugin install superpowers@superpowers-marketplace
共有三个下载选项：
Superpowers 下载
| 选项 | 作用范围 |
|---|---|
| Install for you (user scope) | 全局生效，电脑上任何地方启动 Claude Code 都能调用 |
| Install for all collaborators (project scope) | 项目成员共享，配置写入项目文件，同事拉代码即可用 |
| Install for you, in this repo only (local scope) | 仅限当前文件夹，换目录即失效 |
更推荐 User Scope。Superpowers 管理的是通用开发流程，并不依赖某个具体项目。全局安装后，无论打开 Java、前端还是临时脚本目录，都能直接使用同一套工作流。
安装完毕后，用 /plugin 或 /plugin list 查看列表，确认 Superpowers 已生效。
项目地址：https://github.com/obra/superpowers
Everything Claude Code
Everything Claude Code 更像一套“把 Claude Code 用到极致”的配置样板。
它背后有一个传播度很高的故事：作者曾在 8 小时内用 Claude Code 完成一个产品，并获得 Anthropic 黑客松冠军，之后他把相关配置整理成开源仓库，现在 GitHub 上已接近 4 万 Star。
这个项目值得关注的地方远不止命令的多少。它把 Claude Code 的工作方式重新拆解，让 AI 写代码时有角色、有边界、有自动检查，避免在同一个聊天上下文里硬撑长任务。
| 组件类型 | 作用说明 |
|---|---|
| Agents | 将规划、架构、TDD、审查等任务交给不同子 Agent |
| Skills | 沉淀可复用的工作流，如测试优先、后端开发规范 |
| Hooks | 在关键节点自动跑检查，比如提交前扫描调试日志 |
| Rules | 放团队或个人的长期编码规则 |
| Commands | 通过 /tdd、/code-review 等命令快速触发固定流程 |
原仓库给出过一组实战数据：功能开发速度提升 65%，代码审查问题减少 75%，PR 平均问题数从 12 个降到 3 个。这些数字可以先当成作者自己的测试结果，不必直接等同于每个人的收益；但它至少说明一件事：Claude Code 的效果非常依赖周边流程。
我更在意的，是它对上下文腐化的处理。
Claude Code 在连续处理长任务时，前面讨论过的约束、临时决策、文件边界，很容易在后续对话中淡化。Everything Claude Code 的做法是把这些分别沉淀到 Agents、Skills、Rules、Hooks 里：该规划的去规划，该审查的去审查，该检查的交给 Hook，上下文压力自然变小，输出也更稳定。
但它不像 Superpowers 装完就只有一条主线，配置项会更多。刚上手时可以先抄它的目录结构和几个高频命令，不必一股脑全搬进项目。
项目地址：https://github.com/affaan-m/everything-claude-code
Doc Co-Authoring
前两个技能更偏代码执行，Doc Co-Authoring 则靠前一步，主要解决“还没到写代码那一步”的问题。
很多返工其实埋藏在需求刚出口的那几分钟。你给 AI 一句“做个退款功能”，它当然可以立刻开始写 Controller、Service、表结构和测试；但退款状态怎么流转、接口是否幂等、优惠券和库存如何回滚、失败后要不要人工补偿，这些没说清楚时，后面写得越快，改起来越痛。
Anthropic 官方 Skills 仓库里的 doc-coauthoring，特别适合放在编码之前使用。它关心的是 PRD、技术方案、决策文档、RFC 这类协作文档的质量，重点放在上下文、结构和读者理解上，文字润色反而排在后面。
它的流程大致分三段：
| 阶段 | 做什么 |
|---|---|
| Context Gathering | 先收齐背景、约束、历史讨论、架构依赖和相关方关注点 |
| Refinement & Structure | 按章节来回打磨，先提问和展开，再筛选内容，最后整理成段落 |
| Reader Testing | 换一个全新上下文的 Claude 来读文档，检查遗漏和误解 |
我比较推荐把它和开发类 Skill 串联使用：先用 doc-coauthoring 写一份短方案，把状态机、接口约束、异常分支和验收标准列清楚；然后再交给 Superpowers 这类工具拆任务、写测试、写实现。
这样做会慢一点，特别小需求会显得绕。但只要任务涉及多模块、多角色或多失败分支，先写好文档通常比后面补救更便宜。
安装 Anthropic 官方示例 Skills：
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
项目地址：https://github.com/anthropics/skills/tree/main/skills/doc-coauthoring
UI UX Pro Max
这是一款专为 AI 编程 Agent（Claude Code、Cursor、Windsurf 等）设计的专业 UI/UX 设计 Skill。
它的核心能力是一键生成完整的设计系统（Design System），根据产品类型和行业特性自动给出设计决策。
v2.0 新增的 Design System Generator，能根据你的产品类型、行业特征、目标用户，在几秒内自动输出一套完整的设计系统。
该技能内置的设计知识库：
| 资源类型 | 数量 | 说明 |
|---|---|---|
| UI 风格 | 67 种 | Glassmorphism、Neumorphism、Bento Grid、AI-Native UI 等 |
| 行业色板 | 161 个 | 每个行业都有专属配色方案，全部带色值说明 |
| 字体搭配 | 57 种 | 精选字体组合，附带 Google Fonts 链接 |
| 推理规则 | 161 条 | 行业特定的设计系统生成规则 |
| UX 准则 | 99 条 | 最佳实践、反模式与可访问性规则 |
| 支持技术栈 | 13 种 | React/Next.js + shadcn/ui、Vue/Nuxt、Tailwind、SwiftUI、Flutter、React Native 等 |
它是如何工作的？
当你输入“帮我做一个美容 SPA 的落地页”时，它不会随便扔一套紫色渐变，而是会推理：这是健康养生行业 → 推荐柔和的 Soft UI 风格 → 配色用淡粉 + 鼠尾草绿 + 金色点缀 → 字体选优雅的 Cormorant Garamond，同时还会列出该行业应该避免的反模式（比如不要使用 AI 感十足的紫粉渐变）。
安装非常简单：
Claude Code（推荐）：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Cursor / Windsurf / Continue 等：使用官方 CLI
npm install -g uipro-cli
uipro init --ai claude # 或 cursor、windsurf 等
安装后，只需用自然语言描述 UI 需求，技能会自动激活：
帮我做一个 SaaS 产品的落地页
设计一个医疗分析仪表盘
做一个深色主题的金融 App
它还会自动生成 Pre-delivery Checklist，确保没有 emoji 当图标、hover 状态完整、reduced-motion 被尊重等专业细节。
项目地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
如果你觉得 UI UX Pro Max 偏重，只需要一个轻量的前端设计指导，可以试试 Anthropic 官方的 frontend-design Skill。它专注避免 AI 生成的“千篇一律”美学——拒绝 Inter/Roboto 等泛滥字体，拒绝紫白渐变这类套路配色，鼓励大胆的排版和非常规布局。虽然没有 UI UX Pro Max 那么完整的设计知识库，但胜在轻量，适合设计要求不那么复杂的小场景。
sanyuan-skills
这是一个面向生产环境的 Claude Code 技能集合，把资深工程师的审查经验封装成 Skill，让 AI 从多个专业维度审查代码。
目前包含三个核心技能：
| 技能名称 | 核心功能 | 适用场景 |
|---|---|---|
| Code Review Expert | 资深工程师级别的代码审查，覆盖 SOLID 原则、安全性、性能、错误处理、边界条件等 | 代码提交前的质量把关 |
| Sigma | 基于 Bloom’s 2-Sigma 掌握学习理论的 1 对 1 AI 导师，采用苏格拉底式提问 | 学习新技术、深入理解某个概念 |
| Skill Forge | 元技能，用于创建高质量 Skill，内置 12 种经过实战检验的技术 | 想自己开发 Skill 时的起点 |
Code Review Expert 的审查维度：
- SOLID 原则：单一职责、开闭原则、里氏替换等
- 安全性：SQL 注入、XSS、敏感信息泄露等
- 性能：算法复杂度、内存泄漏、不必要的循环等
- 错误处理：异常捕获、边界条件、空值处理等
- 代码质量：命名规范、注释、可读性等
安装命令：
# 审查专家
npx skills add sanyuan0704/sanyuan-skills --path skills/code-review-expert
# Sigma 导师
npx skills add sanyuan0704/sanyuan-skills --path skills/sigma
# Skill Forge
npx skills add sanyuan0704/sanyuan-skills --path skills/skill-forge
安装后在 Claude Code 中直接调用：
/code-review-expert # 审查当前 git 变更
/sigma <主题> # 启动学习辅导，例如 /sigma React Hooks
/skill-forge # 创建新技能
项目地址：https://github.com/sanyuan0704/sanyuan-skills
Web Access
Claude Code 自带 WebSearch 和 WebFetch，但缺少编排策略与浏览器自动化能力。这个 Skill 补上了这一块——让 Claude Code 能自主浏览网页、操作动态页面，并跨会话积累站点经验。
| 能力 | 说明 |
|---|---|
| 自动工具选择 | 根据场景自动选择 WebSearch / WebFetch / curl / Jina / CDP，可自由组合 |
| CDP 浏览器操作 | 直连日常使用的 Chrome，自然携带登录态；支持动态页面、交互操作、视频帧捕获 |
| 并行分治 | 派发子 Agent 并行处理多个目标，共享一个 Proxy，Tab 级隔离 |
| 站点经验积累 | 按域名存储操作经验（URL 规律、平台特征、已知坑点），跨会话复用 |
| 媒体提取 | 直接从 DOM 提取图片/视频 URL，或截取任意时间点的视频帧并分析 |
v2.4.1 将脚本从 bash 迁移到 Node.js，支持 Windows / Linux / macOS，还新增了 DOM 边界穿透能力，能处理 Shadow DOM、iframe 等选择器无法到达的元素。
安装方式：
git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access
前提条件：Node.js 22+，Chrome 需开启远程调试（在 chrome://inspect/#remote-debugging 中勾选"Allow remote debugging for this browser instance"）。
安装后可以直接用自然语言驱动：
搜索一下 xxx 的最新进展
帮我去小红书搜一下 xxx 的账号
同时调研这 5 个产品网站，给我一个对比总结
项目地址：https://github.com/eze-is/web-access
Webapp Testing
Web Access 更偏向“上网和操作现有网站”，而 webapp-testing 更适合程序员的本地开发场景：启动本地服务，打开页面，跑 Playwright 脚本，检查交互、控制台日志和截图。
它解决了一个很具体的问题：AI 写完前端后，通常只跑 npm run build，却没有真正点页面。构建通过不代表按钮可点、弹窗正常、表单校验生效，也不代表移动端没有遮挡。
webapp-testing 内置了一套 Playwright 测试流程：
| 能力 | 说明 |
|---|---|
| 服务生命周期管理 | 通过 scripts/with_server.py 启动一个或多个本地服务，测试结束后自动处理退出 |
| 动态页面检查 | 等待 networkidle 后再检查 DOM，避免页面未渲染完就开始断言 |
| 截图与日志捕获 | 保存页面截图，读取控制台日志，适合排查前端样式和运行时错误 |
| 元素发现 | 先侦察页面上的按钮、链接、输入框，再生成更可靠的选择器 |
常见用法：AI 写完一个管理后台页面后，让它用 webapp-testing 打开 http://localhost:5173，检查新增按钮、表单提交、错误提示、弹窗关闭、暗色模式和移动端宽度下的布局。这个环节不一定替代正式 E2E 测试，但能抓住很多“代码看起来没问题、页面一用就露馅”的问题。
如果前面已安装 Anthropic 的 example-skills，通常不用重复安装，直接在对话中提及“use webapp-testing”即可触发。
项目地址：https://github.com/anthropics/skills/tree/main/skills/webapp-testing
MCP Builder
MCP 已成为 AI 编程工具中绕不开的一层：数据库、内部平台、工单系统、知识库、部署平台，都可以通过 MCP 暴露给 Agent。
但 MCP Server 并不是把 API 简单包一层就完事。更容易踩坑的地方在于工具边界、参数收敛、错误返回、鉴权、分页，以及如何让 Agent 调用后拿到足够稳定的结果。
mcp-builder 是 Anthropic 官方提供的 MCP Server 开发 Skill，用来指导构建高质量 MCP 服务。它覆盖 Python 的 FastMCP，也覆盖 Node/TypeScript 方向的 MCP SDK。
我把它放在“程序员必备”里，原因很简单：当你开始频繁让 AI 读项目、查内部文档、跑部署、查监控时，单靠复制粘贴上下文很快就会遇到瓶颈。MCP 的作用就是把这些重复动作变成可调用的工具。
适合处理的场景：
- 把公司内部 OpenAPI 封装成 MCP 工具，让 Agent 能查订单、查用户、查配置
- 给数据库查询加一层受控工具，限制只读、限制表范围、统一脱敏
- 把部署、日志、告警平台的常用动作封装成标准工具
- 为团队沉淀一套可复用的 Agent 工具层，而不是每个人都去写一遍脚本
需要诚实说明：MCP Builder 更适合已经准备好做工具集成的同学。刚接触 AI 编程时，可以先用 Superpowers、sanyuan-skills 等开箱即用的 Skill；等你发现 Agent 总在重复查同一批系统，再来考虑写 MCP Server。
项目地址：https://github.com/anthropics/skills/tree/main/skills/mcp-builder
Claude API
如果你的工作只是在 IDE 里用 AI 写代码，Claude API 这个 Skill 不一定每天用到。
但当你开始开发 AI 应用——智能客服、代码生成平台、文档分析工具、内部 Agent 平台——它就变得很有价值，因为 API 细节变化快，靠记忆写 SDK 调用很容易写出过期代码。
Anthropic 官方的 claude-api Skill 覆盖了模型选择、价格、参数、流式输出、工具调用、MCP、Agent、缓存、Token 计算和模型迁移等内容，还按语言拆分了文档目录：
| 语言 / 接入方式 | 说明 |
|---|---|
| Python | 使用官方 Python SDK |
| TypeScript | 使用官方 TypeScript SDK 和 Zod |
| Java | Java / Kotlin / Scala 项目可参考 |
| Go | Go 服务端应用可参考 |
| Ruby / PHP | 适合对应语言栈项目 |
| C# | .NET 项目可参考 |
| cURL | 原始 HTTP、Shell 脚本或调试用 |
这个 Skill 最值得借鉴的一点是它的“先查文档再写代码”约束：遇到 SDK 方法名、参数、流式事件、工具调用结构时，不允许 AI 凭印象猜。对 API 集成来说，这比多写几行示例代码更重要。
项目地址：https://github.com/anthropics/skills/tree/main/skills/claude-api
skill-creator
这是 Anthropic 官方 Skills 仓库中的一个元技能，专门用于创建、修改和优化 Skill。
它提供了一套 Skill 开发工作流：
| 阶段 | 工作内容 |
|---|---|
| 意图捕获 | 理解你想让 Skill 做什么，明确边界和目标 |
| 起草 SKILL.md | 编写 Skill 的核心指令文件，包含 frontmatter 和指令内容 |
| 测试验证 | 创建测试用例，运行对比实验（有 Skill vs 无 Skill） |
| 迭代优化 | 根据测试反馈持续改进指令 |
| 描述优化 | 优化 Skill 的 description，提高触发准确性 |
它还内置了评估系统：生成可视化评测报告，对比“使用 Skill”与“不使用 Skill”的输出差异，支持多轮迭代优化。
适合想为团队制作专属 Skill 的开发者作为起点。
项目地址：https://github.com/anthropics/skills/tree/main/skills/skill-creator
总结
按场景整理一下，方便按需选择：
| 场景 | 推荐 Skill | 一句话说明 |
|---|---|---|
| 完整开发流程 | Superpowers | TDD + Code Review + 自动计划，装完直接用 |
| 多角色协作 | Everything Claude Code | 子 Agent 分工，解决上下文腐化 |
| 需求与技术文档 | Doc Co-Authoring | PRD、技术方案、决策文档的协作写作流程 |
| UI 设计 | UI UX Pro Max / frontend-design | 前者完整设计系统，后者轻量设计指导 |
| 代码审查 | sanyuan-skills | SOLID + 安全 + 性能多维度审查 |
| 网页浏览与操作 | Web Access | CDP 浏览器自动化 + 站点经验积累 |
| 本地 Web 验收 | Webapp Testing | Playwright 交互测试 + 截图和日志检查 |
| 工具接入 | MCP Builder | 开发 MCP Server，连接内部 API 和平台 |
| AI 应用开发 | Claude API | SDK、流式输出、工具调用、缓存和模型迁移 |
| 自制 Skill | skill-creator | Anthropic 官方的 Skill 开发工具 |
不必全部安装，根据日常场景挑几个即可。刚开始接触，建议从 Superpowers 和 sanyuan-skills 入手，先把开发流程和代码质量兜住；如果你经常做前端开发，再加一个 Webapp Testing；如果已经开始为团队构建内部 Agent，MCP Builder 和 skill-creator 会更有用。