使用此流程提高编码效率可以达到：65%
一、 openSpec:
githb地址：https://github.com/studyzy/OpenSpec-cn/blob/main/docs/concepts.md
openSpec规格驱动开发（SDD）框架, 先制定规范明确怎么做之后再开始。
重点三步工作：Propose（提案）→ Apply（实施）→ Archive（归档）
-
Propose：/opsx-propose，AI 基于你的描述生成技术设计 + 任务清单，这是人工 Review 的检查点 -
Apply：/opsx-apply，对齐后 AI 按规格逐步实施，不再即兴发挥 -
Archive：/opsx-archive，完成后自动将变更合并进主文档，形成活文档
1.1、使用终端进行安装
# 全局安装 OpenSpec（中文版）
sudo npm install -g @studyzy/openspec-cn
# 后续使用升级命令 - OpenSpec（中文版）
npm install -g @studyzy/openspec-cn@latest
# 或安装英文原版
sudo npm install -g @fission-ai/openspec@latest
1.2、进入到要使用的项目中：
1、cd your-project
2、openspec-cn init
1.3、选择一下要使用的AI工具：
image.png
1.4、选择成功后页面：
image.png
二、 vscode 中 使用openSpec:
2.1、vscode中安装 openspec：
image.png
2.2、在 vscode 中安装codex
image.png
2.3、项目中会生成一系列相关的文档：
### 全局安装 openspec-cn 后，在 vscode 中的 codex 窗口直接输入
openspec-cn init
### 生成对应的文件后重启vscode
image.png
三、 openSpec项目实践
3.1、在codex 中输入对应的命令
发送以下命令后，OpenSpec 全套规范存储在：openspec/changes/add-assistant中
/opsx:propose add-assistant
任务说明：
>1. 全局解读当前前端项目现有代码结构、分层、组件、请求规范、状态管理；
>2. 依据业务需求文档：/Users/L.s/Desktop/telecom/文档/详细需求.docx 完整拆解业务需求、页面交互、字段、业务规则；
>3. 对照后端接口文档：/Users/L.s/Desktop/telecom/文档/接口文档.md 匹配入参、出参、请求方式、错误码、权限逻辑；
>4. 交叉比对需求与接口定义，梳理不匹配、缺失字段、异常分支、未覆盖场景；
>5. 自动生成完整变更方案：proposal.md、specs验收用例、design.md技术实现方案、tasks.md分步开发清单；
约束：全程基于现有项目技术栈，不引入额外第三方依赖，保持和存量代码风格统一。
3.2、人与 AI 思想对齐，实现代码
必须人工对生成的以下文件做检查： proposal.md、specs、design.md、tasks.md，如果 AI 理解有偏差要及时做调整
规格调整一直后执行以下命令：
/opsx:apply add-assistant
image.png
3.3、 规范自查
校验生成的代码是否完全与 specs 对其
/opsx:verify
3.3、 先不执行change归档
将代码使用 gstack审核通过、联调通过后，再进行归档
- 不完全相信 openspec 生成的代码，换一个模型 gstack 进行代码验证、测试。
- 多交流想法可能会产生多元视角，帮助我们规避盲区、完善方案细节。
四、安装gStack与实践
gstack: 架构栈能力-根据不同角色（CEO、review工程师、QA 测试）进行代码审计
/plan-ceo-review：产品 CEO 视角，校验需求价值、砍掉冗余范围、验证产品切入点
/review：工程经理视角，评审架构、数据模型、高并发边界场景
/cso：排查注入、越权、敏感数据泄露、加密缺失等安全问题
/plan-design-review：设计师视角，对交互、视觉规范打分、提出优化点
/autoplan：一键串联三轮评审，自动完成完整需求预校验流程
/ship: 打包上线部署
git clone https://github.com/garrytan/gstack.git ~/.codex/skills/gstack
4.1、gStack 验证 openspec 输出的代码
**在实现接口真实联调过程中提示:环境缺少 node / npm/pnpm ，无法完成自动化回归直接查看第五步
1、执行以下命令：
/review：对代码做静态评审、架构检查、分层规范、代码冗余、TS 类型、安全漏洞等检查。会输出：工程评审风险、架构整改项、代码规范问题.
/review
Spec baseline: openspec/changes/add-assistant
Code diff fixed point: branch:origin/dev
External reference docs:
1. 需求文档：/Users/L.s/Desktop/telecom/文档/详细需求.docx
2. 后端接口：/Users/L.s/Desktop/telecom/文档/接口文档.md
约束：仅静态代码审计，不发起后端接口请求，不修改代码，输出所有架构、规范、设计偏离问题
或更换询问方式
/review 请对 xxx.vue文件中的代码审计，不修改代码，输出所有架构、规范、设计偏离问题
2、执行以下命令：
/qa业务需求验收、接口自动化、页面交互测试、接口文档对齐、真实后端请求. 会输出：结构化测试缺陷、复现步骤、接口入参出参、需求不匹配记录
/qa
# 1. 校验基准
OpenSpec spec path: openspec/changes/add-assistant
Code diff fixed point: origin/dev
# 2. 外部业务校验依据
需求文档: /Users/L.s/Desktop/telecom/文档/详细需求.docx
接口文档: /Users/L.s/Desktop/telecom/文档/接口文档.md
# 3. 运行环境参数
项目已在 google 浏览器中启动, 可以直接进行真实接口联调，token = 'xxxxxxxxx----------xxxxx'
# 4. 执行约束
将测试中发现的问题输出到/Users/L.s/Desktop/telecom/travel-culture-heritage-front/.codex/skills/testRes.md中,不要修改代码
或更换询问方式
/qa
# 1. 校验代码文件
主要的测试功能是xxx 模块,代码存放在/Users/L.s/Desktop/telecom/travel-culture-heritage-front/apps/rbac/src/views/museum/assistant文件夹下.
# 2. 外部业务校验依据,
测试文档: /Users/L.s/Desktop/telecom/文档/文物报社Ai.xlsx
# 3. 运行环境参数
项目已在 google 浏览器中启动, 可以直接进行真实接口联调，
token="xxxxxxxxx----------xxxxx"
# 4. 执行约束
将测试中发现的问题输出到/Users/L.s/Desktop/telecom/travel-culture-heritage-front/.codefree/new_testRes.md中,不要修改代码,
#5.要求
按照测试文档一项一项的测试,备注那一列标注是否验证通过,如果验证不通过写出测试问题
4.2、输出的测试文档：
image.png
4.3、输出的接口联调结果：
image.png
4.4、当测试文档足够完整后，开始修复检查出的代码 bug
image.png
4.5、修复完成以上问题之后，根据测试文档一项一项进行测试
image.png
4.6、修复问题后循环执行两步直至无阻断缺陷
严谨、严谨、再严谨，尽量自己再做一下冒烟测试。。。
4.7、执行本次修改归档
/opsx:archive add-assistant
image.png
五、如果在执行过程中出现信息：
当前验证环境缺少
node/npm/pnpm，无法完成自动化回归
5.1、按照以下步骤操作：
- vscode 设置界面搜索框输入：terminal.integrated.defaultProfile.windows
- 修改配置文件为：“Command Prompt”
- 重启 vscode，继续以上的
/review测试指令
image.png
