一、一句话概括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 Pagesbase 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-Section1.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 明暗配色 tokenHero 渐变与文字色 - [ ] 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.tsxfixed 右上角、aria-label、键盘可操作 - [ ] 2.3 验证主题切换light ↔ dark刷新后偏好保持localStorage 禁用时不崩溃 ## Phase 3: Hero 组件 Phase 3 完成后暂停等待 review 确认再继续。 - [ ] 3.1 创建 src/components/ParticleBackground.tsxCanvas 静态粒子ResizeObserver 重绘aria-hidden无 RAF - [ ] 3.2 创建 src/components/HeroContent.tsxh1 姓名 职业 介绍Tailwind 居中排版长文案换行 - [ ] 3.3 创建 src/components/HeroSection.tsxmin-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按照上面的规划生成代码opsxapply 请开始实现 add-hero-seciton 的变更 注意严格按照 my-website/.cursor/rules/openspec-workflow.mdc phase 就停下来等我确认后再继续完成的任务会打 x4.接下来不要直接归档先去校验针对 Change 1 的apply 结果进行三维校验opsxverify 请你对 add-hero-seciton 的变更进行三维验证 1. 完整性所有任务是否完成所有的需求是否有读经的代码实现 2. 正确性是否匹配 Spec 的规格意图是否正确处理边界条件 3. 一致性 我的 design.md 中的技术方案和技术细节是否逐一在代码中实现以及命名方式是否一致修复一下5.归档opsxarchive 请你给我归档 add-hero-seciton 的变更 归档完成后请向我介绍OpenSpec结构的变化情况对比归档前哪些文件被更新了八、阶段三开发品牌站的 navigation1.提需求可以按照前面的流程先进行探索我们这儿就不探索了直接提需求。/opsx:propose add-navigation 现在为我的个人品牌站添加顶部的导航栏 - 固定在页面的顶部 - 左侧可以显示个人的logo 或者名字 - 右侧的导航栏包括首页、项目、联系我 - 点击到导航栏中的链接可以平滑的切换到对应的 section - 切换的时候添加一下背景模糊的效果 out-of-scope严禁开发 - 不做搜索 - 不做多级的下拉菜单 - 不做用户登陆和注册2.开发请展示出 add-navigation 生成的所有制品让我进行审查 当我审查通过后 开始分阶段的执行 apply每完成一个 phase 就停下来等我确认后再继续3.校验三维校验opsxverify 请你对 add-navigation 的变更进行三维验证 1. 完整性所有任务是否完成所有的需求是否有读经的代码实现 2. 正确性是否匹配 Spec的规格意图是否正确处理边界条件 3. 一致性 我的design.md 中的技术方案和技术细节是否逐一在代码中实现以及命名方式是否一致4.归档opsxarchive 请你给我归档 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 归档opsxarchive 请你给我归档 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的 tagestitle/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时代风口轻松解锁职业新可能希望大家都能把握机遇实现薪资/职业跃迁这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】