前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

Claude Code 加 OpenSpec 让 AI 编程从临场发挥进化到工程化交付

首页
2026-05-18 11:00:00
AI
Claude CodeOpenSpecSpec-Driven DevelopmentAI Coding工程化

「让 AI 写一段代码」很简单,「让 AI 交付一份能上线的需求」很难。本文用一份真实项目的实战流程,讲清楚 Claude Code 加 OpenSpec 怎么把 AI 编程从临场发挥推到工程化交付,并明确什么时候是刚需、什么时候是过度工程。

在本篇文章中,我们将从浅入深,和大家一起学习以下知识:

  • 为什么 AI 编程到真实业务就开始翻车
  • OpenSpec 三件套(proposal / design / tasks)各自的角色
  • Claude Code 怎么和 OpenSpec 协同:规范层、流程层、执行层
  • 从一句话需求到 archive 的完整 13 步实战
  • 任务分流:轻 / 中 / 大什么时候走 SDD,什么时候直接做
  • 三件套常见反模式与失败逃生路径
  • 一份可直接复制的 CLAUDE.md 配置片段

# 痛点与解决方案

「让 AI 写一段代码」和「让 AI 交付一个能上线的功能」之间,差的不是模型能力,是工程化。我们都遇到过这些场景:

  • 需求理解偏差:一句话「加个登录」,AI 实现完发现接口契约、UI 风格、错误码全和现有系统对不齐,返工三轮
  • 决策记录缺失:为什么用 JWT 不用 Session?两周后再翻代码完全想不起来理由
  • 工程纪律失守:测试没写、类型没过、构建没跑就声称「完成」,CI 一跑红一片
  • 多人协作冲突:两个工程师各让 AI 帮自己加同一个模块,两套方案在 review 时打架

问题不在 AI,在我们没给它一份能跟着走的蓝图。OpenSpec 就是解决这个问题的:它把「一句话需求」拆解成 proposal.md + design.md + tasks.md 三份结构化文档,让 AI 和人都按同一份规范执行。配合 Claude Code 的 Agent runtime,整个流程就跑通了。

# 一、为什么要 Spec 先行

Spec-Driven Development(SDD,规范驱动开发)不是新概念,传统 PRD / RFC 都是它的形态。但传统文档的问题是重、慢、写完就锁死。AI 时代需要新的 SDD 范式:

维度 传统 PRD / RFC OpenSpec
文档形态 重型,几千字 轻量 Markdown,三个文件
编写周期 评审会几轮,几天到几周 一次会话 30-60 分钟
变更方式 评审锁定,改动成本高 实施中可随时迭代
工具支持 通常锁定单一平台 25+ AI Assistant 通用
状态管理 文档系统外维护 同仓 changes/ + archive/
谁来写 产品 / 架构师 人和 AI 一起写

OpenSpec 的核心思想是轻、可迭代、谁实施谁也参与写规范。这和「先评审三个月再开工」的传统 SDD 是两套哲学。

# 二、OpenSpec 三件套各自的角色

每份变更落在 openspec/changes/<change-id>/ 下,标配三个文件加一个 specs/ 目录:

openspec/
├── specs/                    # 当前系统的事实来源(项目规范)
└── changes/
    └── <change-id>/
        ├── proposal.md       # 为什么要做:背景、目标、成功标准
        ├── design.md         # 怎么做:架构决策、接口设计、数据流
        ├── tasks.md          # 实施清单:可执行的具体任务
        └── specs/            # 本次变更涉及的 capability 规范
            └── <capability>/
                └── spec.md
@前端进阶之旅: 代码已经复制到剪贴板

三个文件的边界要划清楚,否则会写串:

  • proposal.md —— 「为什么做」。说清楚痛点、目标、不做会怎样、成功标准。不写实现细节
  • design.md —— 「怎么做」。架构选型、接口契约、数据流、依赖关系、关键决策的取舍理由。不写任务清单
  • tasks.md —— 「做什么」。可执行的产品 / 规范层任务,用户视角的可验证成果项。不写文件级实现步骤

注意 tasks.md 不是 plan。它说「做什么」,不说「怎么做」。如果你要文件级的实施步骤,那是 superpowers 的 writing-plans 该干的事。

# 三、Claude Code 怎么和 OpenSpec 协同

OpenSpec 只产规范,不写代码。Claude Code 是 Agent runtime,能跑代码、跑工具、跑测试。两者协同的关键是职责分层:

  • 规范层(OpenSpec):产出 proposal / design / tasks,不写代码
  • 流程层(superpowers):plan / brainstorm / debug / TDD / verify / review
  • 执行层(gstack):浏览器 / QA / ship / deploy / canary / 护栏

类比一下:OpenSpec 是蓝图,superpowers 是大脑,gstack 是手脚。

三者通过文件和命令传递信息,不靠隐式状态:

  • OpenSpec 把 tasks.md 交给 superpowers 的 executing-plans
  • superpowers 把执行结果交给 gstack 验证
  • gstack 把验证结果反馈给 superpowers 决定下一步
  • 出现契约错误时回到 OpenSpec 修订 design.md

fe

  • 痛点与解决方案
  • 一、为什么要 Spec 先行
  • 二、OpenSpec 三件套各自的角色
  • 三、Claude Code 怎么和 OpenSpec 协同
  • 四、典型工作流:从一句话到 archive
    • 第 1 步 propose 阶段
    • 第 2 步 design 阶段
    • 第 3 步 tasks 阶段
    • 第 4 步 brainstorm 收敛(可选)
    • 第 5 步 writing-plans
    • 第 6 步 创建 worktree
    • 第 7 步 executing-plans + TDD
    • 第 8 步 跑 verification
    • 第 9 步 跑 /browse 或 /qa
    • 第 10 步 requesting-code-review
    • 第 11 步 ship
    • 第 12 步 land-and-deploy
    • 第 13 步 archive
  • 五、什么时候走 SDD,什么时候直接做
  • 六、常见反模式
    • 反模式 1:用 OpenSpec 写所有任务
    • 反模式 2:proposal 和 design 写串
    • 反模式 3:tasks 写成文件级 plan
    • 反模式 4:跳过 archive
    • 反模式 5:实施中发现规范错了还硬扛
    • 反模式 6:把 OpenSpec、superpowers、gstack 视作三个并列工具
  • 七、刚需还是过度工程
  • 八、一份可复制的 CLAUDE.md 片段
  • 九、失败逃生通道
  • 总结
  • 参考

← NativeWind v4 主题切换实战 双通道架构告别闪烁与延迟重新认识 Claude Code 架构治理与团队工程化实战全景 →