AI 编程必备 Skills 推荐:TDD、代码审查与网页自动化实战
之前写了篇,聊了 Skills 是什么、怎么用、和 Prompt / MCP 有什么区别。这篇不聊概念,直接分享 6 个我日常在用的 Skills,覆盖开发流程、代码审查、UI 设计、网页操作这些场景:
- 让 AI 自动遵循 TDD 流程,先写测试再写实现
- 一键生成符合行业标准的设计系统
- 对代码进行多维度专业审查(SOLID、安全性、性能)
- 解决 AI 聊太久会”失忆”的上下文腐化问题
- 给 AI 加上完整的网页浏览和自动化操作能力
下面一个个来看。
Superpowers
Superpowers 是一个专为 AI 编程 Agent(Claude Code、Cursor 等)设计的软件开发工作流框架,把 TDD、Code Review、Spec-Driven、Git Worktree、子 Agent 协作等实践封装成 Skills。内置的核心技能如下:
| 技能名称 | 触发方式 | 核心功能 |
|---|---|---|
| brainstorming | 命令 /superpowers:brainstorm | 通过苏格拉底式提问帮你理清需求,输出设计文档 |
| using-git-worktrees | 自动(设计确定后) | 创建隔离的 Git worktree 分支,避免影响主分支 |
| writing-plans | 自动(设计确定后) | 将设计拆解成可执行的小任务(每个任务 2-5 分钟),包含文件路径、代码片段和验证步骤 |
| executing-plans | 自动(执行计划时可选) | 批量执行任务计划,适合逻辑简单、重复性高的任务 |
| test-driven-development | 自动(代码实现阶段) | 强制红-绿-重构循环,所有代码必须先写测试才能写实现 |
| subagent-driven-development | 自动(执行计划时可选) | 为每个任务派发一个全新的子代理,完成后自动进行两阶段审查(先检查是否符合设计,再评估代码质量) |
| code-review | 自动(任务完成后) | 双阶段代码审查,代码完成后质量把关 |
| systematic-debugging | 需要时触发 | 系统化除错,分四个阶段调查根因 |
| verification-before-completion | 自动(宣称完成时) | 强制验证,没有证据不能说完成 |
这些技能不是孤立存在的,它们会串联成一条完整的工作流。
目前 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然后从这个插件市场安装插件:
/plugin install superpowers@superpowers-marketplace一共有三个下载选项:

| 选项 | 作用范围 |
|---|---|
| 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 业务还是 Python 脚本,这套方法论在大多数场景下都能用。全局安装后,你随时都能唤起这些能力,不用每个项目都折腾一遍。
安装完成后,在 Claude Code 中输入 /plugin 或 /plugin list,如果看到 Superpowers 出现在列表中,就说明安装成功了。
项目地址:https://github.com/obra/superpowers
Everything Claude Code
很多人把 Claude Code 当聊天框用。有位开发者在 8 小时内用它做完一个产品,拿了 Anthropic 黑客松冠军。
他把这套配置集开源了出来,在 Github 上已经斩获接近 4w Star:Everything Claude Code。
它把开发流程拆解成多个组件,让 AI 在不同角色间分工协作:
| 组件类型 | 作用说明 |
|---|---|
| Agents | 分工的子智能体,比如规划、架构、TDD、代码审查 |
| Skills | 封装好的工作流,像 TDD 方法论、后端开发经验 |
| Hooks | 自动执行的任务,改完代码自动检查有没有遗留的调试日志 |
| Rules | 全局生效的开发规范 |
| Commands | 斜杠命令,/tdd 跑测试、/code-review 审查代码 |
在实战测试中,这套方案让功能开发速度提升了 65%。代码审查出的问题减少了 75%,PR 的平均问题数从 12 个降到了 3 个。
但它解决的一个更实际痛点是:上下文腐化。
AI 聊太久会“失忆”,输出质量下降。这套配置让 AI 始终在清晰的角色框架内工作,保持稳定输出。每个 Agent 只负责自己擅长的领域,不会越界;每个 Skill 都有明确的触发条件和执行步骤,不会乱来。
项目地址:https://github.com/affaan-m/everything-claude-code
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-skillCursor / 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 命令安装:
# 安装代码审查专家
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
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 分工,解决上下文腐化 |
| UI 设计 | UI UX Pro Max / frontend-design | 前者完整设计系统,后者轻量设计指导 |
| 代码审查 | sanyuan-skills | SOLID + 安全 + 性能多维度审查 |
| 网页浏览与操作 | Web Access | CDP 浏览器自动化 + 站点经验积累 |
| 自制 Skill | skill-creator | Anthropic 官方的 Skill 开发工具 |
不需要全装,根据日常场景挑几个就行。刚开始接触的话,建议从 Superpowers 和 sanyuan-skills 入手——前者管开发流程,后者管代码质量,覆盖了最常见的开发需求。
