一个前端开发的AI学习之路(二)

0 阅读1分钟

OpenSpec 是面向 AI 编码助手的轻量级规范驱动开发(SDD)CLI 工具,基于 Node.js 20.19.0+,通过 /opsx:斜杠命令或者$openspec-xxx 等skill驱动 AI 按规范开发。

环境准备

依赖node.js   检查 Node.js 版本(必须 ≥20.19.0)

1. 安装并验证

npm install -g @fission-ai/openspec@latest

openspec  --version

image.png

2. 初始化项目

cd my-app

openspec init  

选择 Codex

image.png   image.png

image.png

  初始化后的目录结构 my-app/

├── openspec/

│ ├── changes/ # 变更提案(待开发)

│ ├── specs/ # 系统当前规范(唯一真相源)

│ └──config.yaml

└── .codex/ # AI 助手配置(如 Codex, Claude Code)

注意:

1. 国内用户,如果期望spec 都用中文,需要修改配置 config.yaml

image.png

2.如果后续openspec 包升级了,可以在项目根目录下执行 openspec update, 然后在项目的根目录启动 codex 终端程序。

3.OpenSpec 是基于项目目录工作的(spec / changes 都在这里)。每次关闭窗口后,重新使用openspec 需要 重新打开终端 → 进入项目目录 → 启动 Codex → 继续用 OpenSpec

3. 采用Openspec SDD 方式开发需求

Codex 启动后,就可以开始帮你实现需求了。

重新实践一个新项目

1.在新目录user-task-management下进行 openspec int初始化

openspec init 会让选择AI 编程工具。

此时可以根据需要去修改配置文件,我将语言修改为中文

image.png

2. 启动codex

image.png

3. 开始探讨需求$openspec-explore xx,此时不会写代码,只是先确定方案

image.png

会经过多轮的讨论,最后确定方案

image.png

image.png

方案确认完成,接下来开始创建一个新的变更目录

image.png

4. 生成一个新的变更目录

$openspec-propose create-user-task-management-system

image.png

遇到了一个问题:

(1)终端卡着了,此时按ESC 退出,关闭这个终端,重新打开一个新的终端,启动codex

输入/resume 指令,会恢复上次的对话和任务上下文。此时看到上次的任务已经完成。

image.png

image.png

5. 开始实现 $openspec-apply-change create-user-task-management-system

image.png

代码完成后,需要再去手动验证功能,如果发现有bug,或者需要调整的地方,直接继续描述修改点,直到功能都符合预期。

6. 进行归档 $openspec-archive-change create-user-task-management-system

这是 OpenSpec 里完成功能开发后的标准收尾动作:归档既更新了项目主规范、清理了工作区,又保留了完整历史,能让新功能基于最新、可信的系统状态开始,减少冲突、提升效率。

image.png

image.png

Spec 归档后,文件夹

image.png  

image.png

项目最终效果

image.png  

image.png

image.png

接下来我计划熟悉skill ,等我实践完后再进行总结。