一、为什么需要这三件套？

在AI编程助手日益普及的今天，你是否遇到过这些问题：

• 描述完需求后AI直接开始写代码，方向跑偏

• 缺乏文档沉淀，做完即忘

• 修改需求后AI“忘记”之前的上下文

• 代码质量参差不齐，缺乏统一规范

Claude Code + Superpowers + OpenSpec 的组合，正是为解决这些痛点而生。它让AI从“随性编码”转变为“工程化开发”，实现可追溯、高质量、可协作的AI辅助编程。

---

二、三件套分别是什么？

三者的关系可以概括为：OpenSpec管需求，Superpowers管过程，Claude Code管执行。

工具	核心定位	一句话概括	类比
Claude Code	AI执行引擎	在终端里帮你读写文件、运行命令的AI代理	“双手”
Superpowers	行为与流程纪律层	为Claude Code注入工程方法论的技能包	“大脑”与“工作法”
OpenSpec	需求与规格管理层	通过结构化文档管理需求和规格的框架	“设计蓝图”

2.1 Claude Code：执行层（双手）

Claude Code是Anthropic公司推出的命令行AI编程助手。你可以在终端中用自然语言与它交流，它能帮你完成构建功能、修复Bug、重构代码等开发任务。

核心能力：

• 理解整个代码库，跨多文件编辑

• 执行命令、运行构建

• 破坏性操作前请求人工确认

2.2 Superpowers：行为纪律层（大脑与工作法）

Superpowers是由开发者Jesse Vincent打造的开源插件，核心理念是 “流程大于提示词” ——通过规范流程来保证AI的输出质量，而非依赖更聪明的模型。

核心机制：

• 内置20多种可组合的技能（Skills）

• 强制AI在写代码前先思考、规划

• 遵循测试驱动开发（TDD）、代码审查等工程纪律

• 支持子代理（Subagent）并行开发，大幅提升效率

2.3 OpenSpec：意图与规格层（设计蓝图）

OpenSpec是一个规范驱动开发（SDD）框架，解决AI“做什么”的问题。它像一份“设计蓝图”，在动工前就把所有功能、接口、验收标准都规划好。

核心机制：

• 在openspec/changes/目录下创建结构化提案

• 包含proposal.md（提案说明）、design.md（技术方案）、tasks.md（任务清单）

• 需求可追溯、可版本管理

• 特别适合在已有项目上进行功能迭代

---

三、安装指南

开始前，请确保已安装 Node.js 20.19.0 或更高版本。

3.1 安装 Claude Code

根据操作系统在终端中执行对应命令：

macOS / Linux：

curl -fsSL https://claude.ai/install.sh | bash

Windows (PowerShell)：

irm https://claude.ai/install.ps1 | iex

或使用 Homebrew (macOS)：

brew install --cask claude-code

或使用 NPM：

npm install -g @anthropic-ai/claude-code

安装后执行 claude --version 看到版本号即表示成功。

3.2 安装 OpenSpec

# 全局安装
npm install -g @fission-ai/openspec@latest

# 进入项目目录
cd your-project

# 初始化 OpenSpec
openspec init

初始化时会引导你选择AI助手（选 Claude Code），并在项目中创建 openspec/ 和 .claude/ 等目录。

3.3 安装 Superpowers

Superpowers 需要在已启动的 Claude Code 会话中安装，而非系统终端：

# 在 Claude Code 会话中依次执行
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

安装完成后，输入 /exit 退出并重新启动 Claude Code，看到 “Superpowers loaded successfully” 的提示即表示激活成功。

---

四、协同工作流：从UX图到代码

假设你已经有了UX设计图和RESTful API文档，接下来展示如何让三件套协同工作，实现“先分析→再文档→后代码”的完整流程。

4.1 OpenSpec：定义“做什么”（规范阶段）

第一步是将UX图和接口文档转化为结构化的、AI可执行的规范。

提示词示例：

/openspec:proposal 根据项目中的UX设计图 `[路径/UX-设计图.png]` 和 RESTful API 文档 `[路径/API-文档.md]`，为“用户管理列表页”创建一份变更提案。

要求：
1. 分析输入：仔细分析UX图，提炼出所有功能点（搜索、分页、表格列、操作按钮等）。对照API文档，明确每个功能对应的接口（URL、Method、Request/Response数据结构）。

2. 产出文档：在 `openspec/changes/add-user-list/` 目录下生成：
   - proposal.md：说明为什么要做这个功能
   - design.md：怎么做（组件结构、数据流、状态管理等）
   - tasks.md：实施清单

3. 增量规格：使用 ADDED Requirements 和 ADDED Scenarios 来描述新增功能，并包含具体的验收场景。

4. 确认后执行：在我确认这些文档无误之前，不要开始编写任何代码。

产出效果：Claude Code会调用OpenSpec，在 openspec/changes/add-user-list/ 目录下生成完整的需求文档、技术方案和任务清单。

---

4.2 Superpowers：规划“怎么做”（计划阶段）

当OpenSpec的规范确认后，让Superpowers将规范文档拆解成更细致、可执行的编码任务。

提示词示例：

/superpowers:write-plan 基于 `openspec/changes/add-user-list/` 目录下的规范，为“用户管理列表页”生成一份详细的编码计划。

要求：
1. 任务拆解：将开发工作拆解为2-5分钟即可完成的小任务。
2. 明确细节：每个任务需要明确涉及的文件名（如 src/views/UserList.vue）、核心职责和验收标准。
3. 合理排序：按照正确的开发顺序排列任务（如：定义TypeScript类型 → 编写API调用函数 → 开发UI组件 → 联调）。

产出效果：生成一份详细、可执行的 plan.md 文档，将“用户管理”拆解为数十个具体、可执行的编码任务。

---

4.3 Claude Code + Superpowers：执行“动手做”（编码阶段）

最后，让Claude Code按照Superpowers制定的计划执行编码。此时，Superpowers的TDD（测试驱动开发）、代码审查等纪律会自动生效。

提示词示例：

/superpowers:execute-plan 请按照刚刚生成的编码计划，开始执行。从第一个任务开始，逐项完成。

执行原则：
1. TDD驱动：对于核心逻辑，请遵循“先写测试，再写实现”的原则。
2. 进度汇报：每完成一个任务，简要汇报进度。
3. 质量自检：任务完成后，进行代码审查。

产出效果：AI有条不紊地逐个完成任务。对于复杂项目，Superpowers会启动多个子代理并行开发不同部分，最后合并代码。

---

五、核心Skill速览

Superpowers内置了20多种可组合的技能，以下是几个关键技能：

技能名称	核心作用	触发时机
brainstorming	需求澄清：通过苏格拉底式提问把模糊想法变清晰	任何新需求的起点
writing-plans	任务拆解：将设计文档分解为可执行的小任务	方案确认后
subagent-driven-development	并行开发：为独立任务创建子代理并行工作	大型复杂项目
test-driven-development	测试先行：先写测试再写功能代码	核心业务逻辑
systematic-debugging	根因分析：结构化流程定位Bug根源	调试排错
writing-skills	自定义技能：创建专属Skill	团队规范沉淀

---

六、提示词策略总结

6.1 从“指令型”到“目标型”

类型	示例	问题
指令型（不推荐）	“帮我写一个登录页”	AI直接写代码，需求不明确
目标型（推荐）	“我需要开发登录功能，请先分析需求，输出设计文档，再编码”	强制AI走完整流程

6.2 万能提示词模板

目标：[用一句话描述你要解决的问题或构建的功能]

输入材料：
- UX设计图：[文件路径]
- API文档：[文件路径或Swagger地址]

约束条件：
1. 请先完成需求分析和方案设计，输出文档
2. 在我确认文档后，再拆解任务、制定计划
3. 最后按计划逐步实现编码
4. 每个阶段都与我确认后再进入下一阶段

技术要求：[可选] 技术栈、框架版本、编码规范等

---

七、最佳实践与注意事项

7.1 使用建议

1. 从小处着手：先从一个独立的小功能（如一个列表页）开始实践

2. 善用文档沉淀：openspec/ 目录下的文档可追溯、可版本管理

3. 及时确认：每个阶段完成后及时确认，避免方向偏差

4. 逐步深入：复杂项目时，Superpowers会自动调用更多技能

7.2 常见问题与解决

问题	解决方案
使用指令型提示词	改用目标型提示词，强调“先分析再编码”
跳过文档阶段	用 /openspec:proposal 强制创建规范文档
一次性描述过多需求	分阶段迭代，逐步完善
AI忽略UX图细节	在提示词中明确引用图片路径，要求“提取设计规范”

---

八、总结

Claude Code、Superpowers和OpenSpec三者协同，形成了一条完整的AI辅助前端开发流水线：

• OpenSpec 负责“定义要做什么”（需求与规范）

• Superpowers 负责“规划怎么做”（任务拆解与流程纪律）

• Claude Code 负责“动手去实现”（编码执行）

通过这套组合，你可以将AI辅助开发从随性的“聊天模式”，升级为严谨、可追溯、高质量的工程模式。