一、一句话概括
OpenSpec 是专门配合 AI 写代码的轻量开源工具，核心作用：先定清楚要做什么，再让 AI 写代码，杜绝 “你说东，AI 写西” 的返工问题，属于「规范驱动开发（SDD）」工具链。
二、它解决什么最烦人的痛点？
平时用 Cursor、Claude Code、Codex 等写代码，普遍踩坑：
- 需求只存在聊天框里，AI 记不全，写出来功能跑偏；
- 改一次需求，AI 乱改一堆无关代码，越修 bug 越多；
- 做完的功能没有书面记录，过几天忘了当初要实现的逻辑；
- 多人协作时，每个人对需求理解不一样，代码冲突严重。
OpenSpec 相当于给 AI 套上缰绳：所有需求、方案、任务全部写成标准化文档，AI 严格按文档干活，不能自由发挥。
三、它的核心工作流程（4 步超简单）
1.提案（proposal）：说清楚「为什么要做这个功能」
你输入一句话需求（比如 “给后台加暗黑模式切换”），一条命令自动生成提案文档，写清业务目的、使用场景。
2.定规范 + 拆任务（spec + tasks）：明确「做什么、怎么做、分几步」
AI 自动产出两份文件：
- spec.md：硬性规范（页面长啥样、接口字段、交互逻辑、边界限制，白纸黑字）；
- tasks.md：可勾选的待办清单，把大功能拆成一个个小编码任务。 这一步你可以反复修改、核对，人和 AI 完全达成共识再往下走。
3.AI 执行代码（apply）
确认规范没问题后，执行命令，AI 只按照 tasks 清单逐条写代码，不会额外乱加功能。
4.归档（archive）
功能开发完成，把整套规范归档到项目文件夹，永久留存，后续迭代、改 bug、新人接手都能直接看原始需求，文档和代码永远同步。
四、关键优势（普通人能看懂）
轻量无门槛 npm
一行命令就能安装，不用复杂配置、不用填任何 API 密钥，小项目、个人开发者都能用，30 分钟就能上手。
兼容绝大多数 AI 编码工具
原生适配 Claude Code、Cursor、GitHub Copilot、Windsurf 等 20 多种 AI 编程助手，不用换你现在的编辑器。
变更可追溯、可审计
每次新增功能单独存一套文档，能清晰看到：新增了什么需求、修改了哪些规则、删掉了哪些逻辑，线上出问题方便复盘。
不挑老项目
不用推翻现有代码重构，直接在已有项目上迭代新功能，不像重型规范工具只能从零搭建项目。
五、举个生活化类比
把写软件比作装修房子：
- 不用 OpenSpec：你口头跟装修师傅（AI）说 “客厅装灯带”，师傅自由发挥，尺寸、灯光、走线全凭理解，装完大概率不合心意，反复拆改；
- 用 OpenSpec：先出书面装修方案（spec）：灯带长度、色温、开关位置、布线要求，再拆分施工步骤（tasks），确认图纸没问题再动工，师傅严格按图纸施工，几乎不会出错。
接下来根据上面的介绍，手把手带着大家基于 OpenSpect 开发项目！
六、阶段一：完成项目的初始化
1.全局安装 OpenSpec
打开 GitHub 地址：https://github.com/Fission-AI/OpenSpec
在 AI 编程工具里执行：
帮我全局安装 OpenSpec 的最新版本。github 地址是：https://github.com/Fission-AI/OpenSpec ， 使用 npm 的安装方式， 注意：你在安装完需要确认 nodejs 的版本必须大于等于 20.19.0, 如果版本不够请提醒我升级。2.创建项目目录
创建好后用 Cursor 打开。
3.创建前端项目脚手架
帮我先创建一个 React + Vite + Typescript 的项目，项目名叫做 my-website， 创建完成后，安装配置 Tailwind Css v4， 然后确保项目可以正常启动，通过 npm run dev 启动后，告诉我启动地址！4.项目纳入OpenSpec 管理
使用 CLI 工具做项目初始化
按 Enter 选择工具。
选择你当前使用的 AI 编程工具，我们使用的是 Cursor。（空格用来选住）
初始化好 OpenSpec 的相关文件
5.修改 config.yaml 文件
请打开 openspec/config.yaml，帮我优化它的内容。 我需要的配置： schema: spec-driven context: | 项目：个人品牌站（Personal Website） 技术栈：React 19 + Vite 7 + TypeScript + Tailwind CSS v4 部署：GitHub Pages，base path 为 /my-website/ 设计风格：科技感，动态粒子风，支持亮/暗切换 性能：首屏加载 < 2 秒，所有图片使用 lazy loading rules: proposal: - 必须明确写出 out-of-scope（不做什么） - 必须评估对现有功能的影响 specs: - 使用 Given/When/Then 格式描述交互行为 - 每个 spec 必须包含至少一个边界/异常场景 tasks: - 每个任务粒度不超过 30 分钟 - 按 Phase 分组，每个 Phase 结束后等待我确认 Languages: | Generate all artifacts in Simplified Chinese. Use English for code-related terms.6.创建项目宪法
如果是 Claude Code 那就创建 CLAUDE.md 文件，如果是 Cursor，就用 rules 文件。
根据 Cursor 的规范要求，帮我创建一个 Rule，包含内容如下： # OpenSpec 工作流规则 ## 核心纪律 1. **先读后做**：执行任何 OpenSpec 命令前，先读取： - openspec/config.yaml（项目约束） - openspec/specs/ 目录下相关域的规范（当前系统行为） - openspec/changes/ 当前活跃的变更（如果存在） 2. **不要猜测需求**：如果 spec 中没有明确定义某个行为，问我，不要自行补充。 3. **out-of-scope 是红线**：proposal.md 中标注为 out-of-scope 的功能，严禁实现。 ## Apply 阶段规则 1. 每完成一个 tasks.md 中的 Phase，停下来。 2. 总结当前阶段的代码变更（改了什么文件、为什么这么改）。 3. 等待我 review 并确认后，再继续下一 Phase。 4. 严禁一次性实现所有任务。 ## 代码标准 - 所有组件使用 TypeScript + 函数式组件 - 样式全部使用 Tailwind CSS，禁止内联 style - 支持暗色模式（dark: 前缀） - 所有图片使用 lazy loading - 组件文件名使用 PascalCase运行完，Cursor 会产生一个 rule 文件
模式选择：Always Apply
七、阶段二：开发品牌站的 Hero-Section
1.Explore 交互一下，打算怎么干
/explore 我要给个人品牌站添加 hero section， 想法是： - 全屏高度的 hero ，可以居中显示我的名字、职业 还有一句话介绍我 -CTA 按钮，可以跳转我的项目 - 背景色是动态科技粒子感的渐变色 - 支持 明亮/暗黑模式切换 你帮我想一下：你建议的技术方案 有没有遗漏的边界情况用了 explore 后，Cursor 会了解一下当前的项目，然后给出方案建议。
2.确定 Changes 1 的提案
/opsx:propose add-hero-seciton 现在为我的个人品牌站添加 Hero Seciton - 全屏高度的 hero ，可以居中显示我的名字、职业 还有一句话介绍我 - 背景：CSS 渐变底 + Canvas 粒子叠加 - 支持 明亮/暗黑模式切换 out-of-scope（严禁开发）： - 不做动画效果 - 不做导航栏 - 不做后端的API生成四个制品
查看文件，我们目前是属于新增需求
3.开始分阶段执行 Change 1 的 代码生成
我们看一下 tasks.md 文件，OpenSpec 帮我们规范的流程：
## Phase 1: 基础配置与主题 Token > Phase 1 完成后暂停，等待 review 确认再继续。 - [ ] 1.1 创建 `src/content/hero.ts`，定义 `name` / `role` / `tagline` 占位文案 - [ ] 1.2 在 `src/index.css` 添加 `@theme` 明暗配色 token（Hero 渐变与文字色） - [ ] 1.3 在 `index.html` `<head>` 添加防 FOUC 主题初始化内联脚本 ## Phase 2: 明暗模式系统 > Phase 2 完成后暂停，等待 review 确认再继续。 - [ ] 2.1 创建 `src/hooks/useTheme.ts`（读取/写入 localStorage，同步 `<html>` class，含 try/catch 回退） - [ ] 2.2 创建 `src/components/ThemeToggle.tsx`（fixed 右上角、aria-label、键盘可操作） - [ ] 2.3 验证主题切换：light ↔ dark，刷新后偏好保持，localStorage 禁用时不崩溃 ## Phase 3: Hero 组件 > Phase 3 完成后暂停，等待 review 确认再继续。 - [ ] 3.1 创建 `src/components/ParticleBackground.tsx`（Canvas 静态粒子，ResizeObserver 重绘，aria-hidden，无 RAF） - [ ] 3.2 创建 `src/components/HeroContent.tsx`（h1 姓名 + 职业 + 介绍，Tailwind 居中排版，长文案换行） - [ ] 3.3 创建 `src/components/HeroSection.tsx`（min-h-dvh、CSS 渐变底层 + ParticleBackground + HeroContent 层级） ## Phase 4: 集成与验收 > Phase 4 完成后暂停，等待 review 确认再继续。 - [ ] 4.1 更新 `src/App.tsx`：挂载 HeroSection + ThemeToggle，移除占位页内容 - [ ] 4.2 运行 `npm run build` 确认 TypeScript 与构建无错误 - [ ] 4.3 本地 `npm run dev` 验收：全屏 Hero、双层背景、明暗切换、320px 窄屏、键盘 Tab 到 Toggle按照上面的规划生成代码：
opsx：apply 请开始实现 add-hero-seciton 的变更 注意：严格按照 @my-website/.cursor/rules/openspec-workflow.mdc phase 就停下来等我确认后再继续！完成的任务会打 x
4.接下来不要直接归档，先去校验
针对 Change 1 的apply 结果进行三维校验
opsx：verify 请你对 add-hero-seciton 的变更进行三维验证： 1. 完整性：所有任务是否完成，所有的需求是否有读经的代码实现 2. 正确性：是否匹配 Spec 的规格意图，是否正确处理边界条件 3. 一致性： 我的 design.md 中的技术方案和技术细节是否逐一在代码中实现，以及命名方式是否一致修复一下
5.归档
opsx：archive 请你给我归档 add-hero-seciton 的变更 归档完成后，请向我介绍OpenSpec结构的变化情况（对比归档前，哪些文件被更新了）八、阶段三：开发品牌站的 navigation
1.提需求
可以按照前面的流程先进行探索，我们这儿就不探索了，直接提需求。
/opsx:propose add-navigation 现在为我的个人品牌站添加顶部的导航栏 - 固定在页面的顶部 - 左侧可以显示个人的logo 或者名字 - 右侧的导航栏包括：首页、项目、联系我 - 点击到导航栏中的链接可以平滑的切换到对应的 section - 切换的时候添加一下背景模糊的效果 out-of-scope（严禁开发）： - 不做搜索 - 不做多级的下拉菜单 - 不做用户登陆和注册2.开发
请展示出 add-navigation 生成的所有制品，让我进行审查， 当我审查通过后， 开始分阶段的执行 apply，每完成一个 phase 就停下来等我确认后再继续！3.校验
三维校验
opsx：verify 请你对 add-navigation 的变更进行三维验证： 1. 完整性：所有任务是否完成，所有的需求是否有读经的代码实现 2. 正确性：是否匹配 Spec的规格意图，是否正确处理边界条件 3. 一致性： 我的design.md 中的技术方案和技术细节是否逐一在代码中实现，以及命名方式是否一致4.归档
opsx：archive 请你给我归档 add-navigation 的变更 归档完成后，请向我介绍 OpenSpec 结构的变化情况（对比归档前，哪些文件被更新了）九、阶段四：体验一下 OpenSpec Delta Spec 的功能标记
1.Change 3 提案并测试修改的功能标记
/opsx:propose add-project-section 现在为我的个人品牌站添加项目的展示区 - 显示在Hero Section 的下方 - 卡片式的布局，每个项目卡片的内容包括：项目的截图，项目的名称，项目的简介，Github链接 - 最少展示4个项目 - 特效：鼠标悬浮时有微特效 同时呢，你要进行功能修改： - Hero Section 的 CTA 按钮的 锚点现在要跳转到这个新的 Section out-of-scope（严禁开发）： - 项目的详情页 - 项目搜索功能2.一次性完成 change3 的所有需求
请展示出 add-project-section 生成的所有制品，让我进行审查， 当我审查通过后， 开始分阶段的执行 apply， 同时：请你对 add-project-section 的变更进行三维验证： 1. 完整性：所有任务是否完成，所有的需求是否有读经的代码实现 2. 正确性：是否匹配 Spec的规格意图，是否正确处理边界条件 3. 一致性： 我的design.md 中的技术方案和技术细节是否逐一在代码中实现，以及命名方式是否一致 注意：你不再需要每完成一个 phase 就停下来等我确认后再继续，直接跑完所有任务！3.针对 Change 3 完成 Spec 归档
opsx：archive 请你给我归档 add-project-section 的变更 归档完成后，请向我介绍OpenSpec结构的变化情况（对比归档前，哪些文件被更新了）十、阶段五：配置 About Section + SEO 优化 + 部署上线
1.Change 4 继续丰富个人品牌站
/opsx:propose add-about-section 现在为我的个人品牌站添加 “关于我” 区域 - 左侧：一张我帅气的照片 - 右侧：个人简介（3段文字） - 下方：品牌标签：xx空间 out-of-scope（严禁开发）： - 不要做联系我的表单2.Change 4 添加网站的 SEO 优化策略
/opsx:propose add-seo 现在为我的个人品牌站添加 SEO 的基础优化和社交身份支持 - 设置HTML的 tages（title/description） - 语义化 HTML的审查 - 添加 robots.txt，允许 google 爬虫索引可以多个需求同时做
3.单次执行多步的提案文件
开始自动的执行 apply，同时完成三维验证： 1. 完整性：所有任务是否完成，所有的需求是否有读经的代码实现 2. 正确性：是否匹配 Spec 的规格意图，是否正确处理边界条件 3. 一致性： 我的 design.md 中的技术方案和技术细节是否逐一在代码中实现，以及命名方式是否一致4.归档
/opsx:archive 归档上面的任务。5.部署/上线
我现在要部署我的个人品牌站上线，请参考：https://docs.github.com/en/pages 把我的应用品牌站部署上去 1. 你需要 vite.config.ts 中 配置 base：‘my-website’ 2. 在 package.json 中添加 deploy 脚本 3. 确保这个项目可以关联 Github 远程仓库， 如果没有，你要引导我创建并 上传我的项目 4. 你需要执行部署，并告诉我最终的访问地址学AI大模型的正确顺序，千万不要搞错了
🤔2026年AI风口已来！各行各业的AI渗透肉眼可见，超多公司要么转型做AI相关产品，要么高薪挖AI技术人才，机遇直接摆在眼前！
有往AI方向发展，或者本身有后端编程基础的朋友，直接冲AI大模型应用开发转岗超合适！
就算暂时不打算转岗，了解大模型、RAG、Prompt、Agent这些热门概念，能上手做简单项目，也绝对是求职加分王🔋
📝给大家整理了超全最新的AI大模型应用开发学习清单和资料，手把手帮你快速入门！👇👇
学习路线:
✅大模型基础认知—大模型核心原理、发展历程、主流模型（GPT、文心一言等）特点解析
✅核心技术模块—RAG检索增强生成、Prompt工程实战、Agent智能体开发逻辑
✅开发基础能力—Python进阶、API接口调用、大模型开发框架（LangChain等）实操
✅应用场景开发—智能问答系统、企业知识库、AIGC内容生成工具、行业定制化大模型应用
✅项目落地流程—需求拆解、技术选型、模型调优、测试上线、运维迭代
✅面试求职冲刺—岗位JD解析、简历AI项目包装、高频面试题汇总、模拟面经
以上6大模块，看似清晰好上手，实则每个部分都有扎实的核心内容需要吃透！
我把大模型的学习全流程已经整理📚好了！抓住AI时代风口，轻松解锁职业新可能，希望大家都能把握机遇，实现薪资/职业跃迁～
