Claude Code 四大核心技能使用指南

本文详细介绍 Superpowers、Feature-Dev、UI/UX Pro Max 和 Ralph Wiggum 四个强大技能的使用方法，帮助开发者充分发挥 Claude Code 的潜力。

技能系统概述
Superpowers：完整开发工作流
Feature-Dev：功能开发指南
[UI/UX Pro Max：设计智能系统](#UI/UX Pro Max：设计智能系统 "#uiux-pro-max%E8%AE%BE%E8%AE%A1%E6%99%BA%E8%83%BD%E7%B3%BB%E7%BB%9F")
[Ralph Wiggum：迭代循环开发](#Ralph Wiggum：迭代循环开发 "#ralph-wiggum%E8%BF%AD%E4%BB%A3%E5%BE%AA%E7%8E%AF%E5%BC%80%E5%8F%91")
技能选择指南
总结

技能系统概述

Claude Code 的技能系统是一套可组合的专业工作流，它们在特定场景下自动激活，帮助开发者以系统化的方式完成复杂任务。

核心原则

erlang 复制代码

如果你认为某个技能有哪怕 1% 的可能适用于当前任务，
你就必须调用它。这不是建议，而是强制要求。

技能优先级

当多个技能可能适用时，按以下顺序使用：

流程技能优先（brainstorming、debugging）- 决定如何处理任务
实现技能其次（frontend-design、mcp-builder）- 指导具体执行

Superpowers：完整开发工作流

什么是 Superpowers？

Superpowers 是一套完整的软件开发工作流，基于可组合的"技能"构建。它从你启动编程代理的那一刻开始工作，不是直接跳入编码，而是先退一步理解你真正想要做什么。

安装方式

Claude Code 用户：

bash 复制代码

# 注册 marketplace
/plugin marketplace add obra/superpowers-marketplace

# 安装插件
/plugin install superpowers@superpowers-marketplace

# 验证安装
/help

核心工作流

Superpowers 包含七个阶段的完整开发流程：

1. Brainstorming（头脑风暴）

在编写代码之前激活，通过问答细化粗略想法，探索替代方案，分段展示设计供验证。

关键原则：

一次只问一个问题
优先使用选择题
无情地应用 YAGNI（你不会需要它）
总是提出 2-3 种方案后再定案

流程：

复制代码

理解项目状态 → 逐个提问细化想法 → 提出2-3种方案
→ 分段展示设计（每段200-300字）→ 验证后保存设计文档

2. Git Worktrees（Git工作树）

设计批准后激活，在新分支上创建隔离的工作空间，运行项目设置，验证干净的测试基线。

3. Writing Plans（编写计划）

将工作分解为小任务（每个2-5分钟），每个任务都有：

精确的文件路径
完整的代码
验证步骤

4. Subagent-Driven Development（子代理驱动开发）

这是 Superpowers 的核心机制：

markdown 复制代码

每个任务分派新的子代理 → 两阶段审查：
  1. 规格合规审查（代码是否符合规格）
  2. 代码质量审查（代码是否写得好）

优势：

每个任务有新鲜的上下文（无污染）
自动审查检查点
子代理可以在工作前后提问

示例流程：

css 复制代码

读取计划 → 提取所有任务 → 创建TodoWrite

任务1：
  [分派实现子代理] → 子代理实现、测试、提交
  [分派规格审查子代理] → 确认代码符合规格
  [分派代码质量审查子代理] → 批准代码质量
  [标记任务完成]

任务2: ...

所有任务完成后 → 最终代码审查 → 完成开发分支

5. Test-Driven Development（测试驱动开发）

Superpowers 强制执行 RED-GREEN-REFACTOR 循环：

复制代码

写失败测试 → 观察失败 → 写最小代码 → 观察通过 → 提交

铁律：

复制代码

没有先失败的测试，就没有生产代码

在测试之前写了代码？删除它。从头开始。

常见借口及真相：

借口	真相
"太简单不需要测试"	简单代码也会出错，测试只需30秒
"我之后会测试"	立即通过的测试什么也证明不了
"删除X小时的工作太浪费"	沉没成本谬误，保留未验证的代码才是技术债务
"TDD太教条"	TDD才是务实的，"务实"的捷径=生产环境调试=更慢

6. Code Review（代码审查）

在任务之间激活，根据计划审查代码，按严重程度报告问题。关键问题会阻止进度。

7. Finishing Branch（完成分支）

任务完成时激活，验证测试，提供选项（合并/PR/保留/丢弃），清理工作树。

核心哲学

测试驱动开发 - 始终先写测试
系统化优于临时 - 流程优于猜测
降低复杂性 - 简单是首要目标
证据优于声明 - 在宣布成功前验证

Feature-Dev：功能开发指南

什么是 Feature-Dev？

Feature-Dev 是一个系统化的功能开发技能，帮助开发者深入理解代码库、识别并询问所有不明确的细节、设计优雅的架构，然后实现。

七个阶段

Phase 1: Discovery（发现）

目标： 理解需要构建什么

操作：

创建包含所有阶段的 todo 列表
如果功能不清晰，询问用户：
- 要解决什么问题？
- 功能应该做什么？
- 有什么约束或要求？
总结理解并与用户确认

Phase 2: Codebase Exploration（代码库探索）

目标： 在高层和底层理解相关现有代码和模式

操作：

并行启动 2-3 个 code-explorer 代理，每个代理：
- 全面追踪代码，专注于理解抽象、架构和控制流
- 针对代码库的不同方面
- 包含 5-10 个关键文件列表

示例代理提示：

"找到与 [功能] 类似的功能并全面追踪其实现"
"映射 [功能区域] 的架构和抽象"
"分析 [现有功能/区域] 的当前实现"

代理返回后，阅读所有识别的文件以建立深入理解
呈现发现和模式的综合摘要

Phase 3: Clarifying Questions（澄清问题）

目标： 在设计前填补空白并解决所有歧义

这是最重要的阶段之一，不能跳过。

操作：

审查代码库发现和原始功能请求
识别未明确的方面：边缘情况、错误处理、集成点、范围边界、设计偏好、向后兼容性、性能需求
以清晰、有组织的列表向用户呈现所有问题
等待答案后再进行架构设计

Phase 4: Architecture Design（架构设计）

目标： 设计具有不同权衡的多种实现方案

操作：

并行启动 2-3 个 code-architect 代理，关注不同方面：
- 最小变更：最小变化，最大复用
- 清洁架构：可维护性，优雅抽象
- 务实平衡：速度 + 质量
审查所有方案，形成哪个最适合此特定任务的意见
向用户呈现：
- 每种方案的简要摘要
- 权衡比较
- 你的推荐及理由
- 具体实现差异
询问用户偏好哪种方案

Phase 5: Implementation（实现）

目标： 构建功能

未经用户批准不要开始

操作：

等待用户明确批准
阅读前几个阶段识别的所有相关文件
按选定架构实现
严格遵循代码库约定
编写干净、文档完善的代码
随着进展更新 todos

Phase 6: Quality Review（质量审查）

目标： 确保代码简单、DRY、优雅、易读且功能正确

操作：

并行启动 3 个 code-reviewer 代理，关注不同方面：
- 简单性/DRY/优雅
- 缺陷/功能正确性
- 项目约定/抽象
整合发现，识别你建议修复的最高严重性问题
向用户呈现发现并询问他们想怎么做（现在修复、稍后修复或按原样进行）
根据用户决定处理问题

Phase 7: Summary（总结）

目标： 记录完成的工作

操作：

将所有 todos 标记为完成
总结：
- 构建了什么
- 做出的关键决策
- 修改的文件
- 建议的下一步

UI/UX Pro Max：设计智能系统

什么是 UI/UX Pro Max？

UI/UX Pro Max 是一个可搜索的 UI 设计数据库，包含 50+ 种 UI 风格、21 种调色板、50 种字体配对、20 种图表类型、8 种技术栈的最佳实践。

前提条件

确保已安装 Python：

css 复制代码

python3 --version || python --version

使用方法

当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，按以下工作流程：

步骤 1：分析用户需求

从用户请求中提取关键信息：

产品类型：SaaS、电商、作品集、仪表盘、着陆页等
风格关键词：极简、活泼、专业、优雅、深色模式等
行业：医疗、金融科技、游戏、教育等
技术栈 ：React、Vue、Next.js，或默认使用 html-tailwind

步骤 2：搜索相关领域

使用 search.py 多次搜索以收集全面信息：

lua 复制代码

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]

推荐搜索顺序：

顺序	领域	用途
1	product	获取产品类型的风格推荐
2	style	获取详细风格指南（颜色、效果、框架）
3	typography	获取字体配对和 Google Fonts 导入
4	color	获取配色方案（主色、辅色、CTA、背景、文字、边框）
5	landing	获取页面结构（如果是着陆页）
6	chart	获取图表推荐（如果是仪表盘/分析）
7	ux	获取最佳实践和反模式
8	stack	获取技术栈特定指南

步骤 3：可用技术栈

栈	关注点
html-tailwind	Tailwind 工具类、响应式、无障碍（默认）
react	状态、hooks、性能、模式
nextjs	SSR、路由、图片、API 路由
vue	Composition API、Pinia、Vue Router
svelte	Runes、stores、SvelteKit
swiftui	视图、状态、导航、动画
react-native	组件、导航、列表
flutter	Widgets、状态、布局、主题

示例工作流

用户请求： "做一个专业护肤服务的着陆页"

bash 复制代码

# 1. 搜索产品类型
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. 搜索风格
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. 搜索字体
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. 搜索配色
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. 搜索着陆页结构
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. 搜索 UX 指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. 搜索技术栈指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

专业 UI 通用规则

这些是经常被忽视但会让 UI 看起来不专业的问题：

图标和视觉元素

规则	正确做法	错误做法
不使用 emoji 图标	使用 SVG 图标（Heroicons、Lucide）	使用 emoji 作为 UI 图标
稳定的悬停状态	使用颜色/透明度过渡	使用会移动布局的缩放变换
一致的图标尺寸	使用固定 viewBox（24x24）配合 w-6 h-6	随意混合不同图标尺寸

交互和光标

规则	正确做法	错误做法
光标指针	给所有可点击元素添加 `cursor-pointer`	交互元素保持默认光标
悬停反馈	提供视觉反馈（颜色、阴影、边框）	元素交互时无任何指示
平滑过渡	使用 `transition-colors duration-200`	瞬间状态变化或太慢（>500ms）

亮/暗模式对比度

规则	正确做法	错误做法
亮模式玻璃卡片	使用 `bg-white/80` 或更高透明度	使用 `bg-white/10`（太透明）
亮模式文字对比	使用 `#0F172A`（slate-900）作为文字	使用 `#94A3B8`（slate-400）作为正文
边框可见性	亮模式使用 `border-gray-200`	使用 `border-white/10`（不可见）

交付前检查清单

视觉质量

没有使用 emoji 作为图标
所有图标来自一致的图标集
品牌 logo 正确
悬停状态不会导致布局偏移

交互

所有可点击元素有 cursor-pointer
悬停状态提供清晰的视觉反馈
过渡平滑（150-300ms）
键盘导航的焦点状态可见

亮/暗模式

亮模式文字有足够对比度（最少 4.5:1）
玻璃/透明元素在亮模式下可见
边框在两种模式下都可见

布局

浮动元素与边缘有适当间距
内容不会隐藏在固定导航栏后面
响应式适配 320px、768px、1024px、1440px
移动端无水平滚动

Ralph Wiggum：迭代循环开发

什么是 Ralph Wiggum？

Ralph Wiggum 是一种基于持续 AI 代理循环的开发方法。正如 Geoffrey Huntley 所描述的： "Ralph 是一个 Bash 循环" - 一个简单的 while true，重复给 AI 代理喂入提示文件，让它迭代改进工作直到完成。

这个技术以《辛普森一家》中的 Ralph Wiggum 命名，体现了不顾挫折持续迭代的哲学。

核心概念

这个插件使用 Stop hook 实现 Ralph，拦截 Claude 的退出尝试：

bash 复制代码

# 你只运行一次：
/ralph-loop "你的任务描述" --completion-promise "DONE"

# 然后 Claude Code 自动：
# 1. 处理任务
# 2. 尝试退出
# 3. Stop hook 阻止退出
# 4. Stop hook 喂入相同的提示
# 5. 重复直到完成

循环发生在你当前会话内 - 你不需要外部 bash 循环。

这创建了一个自引用反馈循环：

迭代之间提示不变
Claude 之前的工作保留在文件中
每次迭代看到修改的文件和 git 历史
Claude 通过读取文件中自己过去的工作自主改进

快速开始

arduino 复制代码

/ralph-loop "构建一个 todos 的 REST API。要求：CRUD 操作、输入验证、测试。完成后输出 <promise>COMPLETE</promise>。" --max-iterations 50 --completion-promise "COMPLETE"

Claude 将：

迭代实现 API
运行测试并看到失败
根据测试输出修复 bug
迭代直到满足所有要求
完成后输出完成承诺

命令

/ralph-loop

在当前会话中启动 Ralph 循环。

arduino 复制代码

/ralph-loop "<提示>" --max-iterations <n> --completion-promise "<文本>"

选项：

--max-iterations <n> - N 次迭代后停止（默认：无限）
--completion-promise <text> - 表示完成的短语

/cancel-ralph

取消活动的 Ralph 循环。

bash 复制代码

/cancel-ralph

提示编写最佳实践

1. 清晰的完成标准

错误示例：

复制代码

构建一个 todo API 并让它好用。

正确示例：

diff 复制代码

构建一个 todos 的 REST API。

完成条件：
- 所有 CRUD 端点工作正常
- 输入验证就位
- 测试通过（覆盖率 > 80%）
- 带 API 文档的 README
- 输出：<promise>COMPLETE</promise>

2. 增量目标

错误示例：

复制代码

创建一个完整的电商平台。

正确示例：

arduino 复制代码

阶段 1：用户认证（JWT、测试）
阶段 2：产品目录（列表/搜索、测试）
阶段 3：购物车（添加/删除、测试）

所有阶段完成后输出 <promise>COMPLETE</promise>。

3. 自我纠正

错误示例：

复制代码

为功能 X 写代码。

正确示例：

markdown 复制代码

使用 TDD 实现功能 X：
1. 写失败测试
2. 实现功能
3. 运行测试
4. 如果失败，调试并修复
5. 需要时重构
6. 重复直到全部通过
7. 输出：<promise>COMPLETE</promise>

4. 安全阀

始终使用 --max-iterations 作为安全网，防止在不可能的任务上无限循环：

arduino 复制代码

# 推荐：始终设置合理的迭代限制
/ralph-loop "尝试实现功能 X" --max-iterations 20

哲学

Ralph 体现几个关键原则：

原则	说明
迭代 > 完美	不要追求第一次就完美。让循环细化工作。
失败是数据	"确定性的失败"意味着失败是可预测的和有信息量的。
操作员技能很重要	成功取决于写好提示，不只是有好模型。
坚持获胜	持续尝试直到成功。循环自动处理重试逻辑。

适用场景

适合：

有明确成功标准的定义良好的任务
需要迭代和细化的任务（如让测试通过）
你可以走开的绿地项目
有自动验证的任务（测试、linter）

不适合：

需要人类判断或设计决策的任务
一次性操作
成功标准不清楚的任务
生产环境调试（使用针对性调试代替）

真实世界成果

在 Y Combinator 黑客马拉松测试中一夜成功生成 6 个仓库
一份 <math xmlns="http://www.w3.org/1998/Math/MathML"> 50 k 合同以 50k 合同以 </math>50k合同以297 API 成本完成
用这种方法在 3 个月内创建了整个编程语言（"cursed"）

技能选择指南

场景对照表

场景	推荐技能
构建新功能	Feature-Dev → Superpowers
UI/UX 设计实现	UI/UX Pro Max
长时间自主任务	Ralph Wiggum
完整项目开发	Superpowers（完整工作流）
修复 bug	Superpowers（systematic-debugging）
代码审查	Superpowers（code-reviewer）

组合使用

这些技能可以组合使用：

Feature-Dev + UI/UX Pro Max：开发带 UI 的新功能
Ralph Wiggum + Superpowers：自主完成带 TDD 的长任务
Superpowers + Feature-Dev：完整的企业级功能开发

总结

技能	核心价值	最佳场景
Superpowers	完整的 TDD 工作流	项目开发全流程
Feature-Dev	系统化功能开发	新功能实现
UI/UX Pro Max	设计智能数据库	UI 设计和前端开发
Ralph Wiggum	自主迭代循环	长时间自动化任务

黄金法则

erlang 复制代码

如果你认为某个技能有哪怕 1% 的可能适用，就必须使用它。
这不是可选的，这是强制的。你不能为绕过它找理由。