AI 时代的软件工程:如何用 OpenSpec 驱动“全自动”开发

AI 时代的软件工程:如何用 OpenSpec 驱动“全自动”开发

文章目录

在与 AI(如 Cursor, Codex)协作时,开发者常遇到“逻辑断层”或“幻觉代码”。为了解决这一痛点, OpenSpec 应运而生。它不是一个工具,而是一套文档驱动(Document-Centric)的协作标准。

通过 OpenSpec,可以实现从“模糊需求”到“原子化提交”的全自动转化。


第一步:确立“项目宪法” —— project.md

project.md 是 AI 的长期记忆,定义了项目的“生存边界”。无论新旧项目,这都是第一步。

1. 存量项目(已有基础代码)

如果项目已动工,可以让 AI 扫描现有结构来填充上下文:

Prompt: “Please read openspec/project.md and help me fill it out with details about my project, tech stack, and conventions.”

2. 全新项目(从零开始)

对于新项目,需要通过对谈明确核心约束:

  • Tech Stack: 明确指定的框架(如 SwiftUI, Vision)。
  • Hard Constraints: 关键的技术标准(如导出分辨率、间距、性能指标)。
  • Conventions: 架构模式(如 Service Layer, MVVM)。
  • ……

第二步:设计蓝图 —— 提案(Proposal)连发

OpenSpec 的核心原则是:设计阶段严禁编写业务代码。当面对复杂功能时,应先让 AI 生成一套完整的提案。

  • Proposal 目录:AI 会在 openspec/changes/ 下为每个模块建立独立的“施工图纸”。
  • 澄清讨论 (Clarification):AI 会在 design.md 中标注 Open Questions
  • 例如: 讨论 UI 的交互细节、阴影的参数、或算法的边界。
  • 价值:修改 Markdown 的成本远低于重构 Swift 代码。在动笔前,所有模糊点都已通过文档对齐。

第三步:存盘设计 —— 锁定 Git 基准线

在执行代码生成前,务必将所有 .md 设计文档提交。这一步是为了确保“方案”与“实现”在 Git 历史中是分离的。

gitadd openspec/changes/ git commit -m "docs: finalize design proposals for core modules"

第四步:全量自动化实施 —— Pipeline 模式

当所有图纸通过校验后,可以启动“多米诺骨牌”式的自动化模式。通过设定强制执行,让 AI 按照依赖顺序自我迭代。

自动化执行策略:

  1. Atomic Commits: 要求 AI 每完成一个 Task 必须执行 Git 提交。
  2. Context Refresh: 在开启每个新提案前,强制 AI 重新阅读 project.md
  3. Auto Archive: 完成后自动归档已执行的提案。

第五步:归档与清理 —— 保持上下文纯度

执行 openspec archive [proposal-name] --yes 是流程的终点。

  • 物理清理:归档会将文件移出 changes/ 目录。
  • 防止干扰:这能防止 AI 在处理下一个任务时被旧的、已实现的逻辑文档干扰,确保 AI 的“注意力”始终集中在当前任务。

结语:慢即是快

OpenSpec 将开发者从“码农”提升为“架构师”。通过前期的文档约束和全自动化的原子提交,得到的不仅是代码,而是一个逻辑严密、可追溯、高质量的项目仓库。

Read more

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.