AI-IDE(cursor/Trae/ClaudeCode/...) + SDD框架（spec-kit）

使用 Cursor 结合 GitHub 推出的开源工具 Spec-Kit 来写代码，代表着目前 AI 辅助编程最前沿的**规格驱动开发（Spec-Driven Development, SDD）**方法论。

虽然对于一个简单的"四则计算器"，你平时可能只需对 AI 说一句"帮我写个计算器"就能搞定，但如果使用 Spec-Kit 的标准流程走一遍，你将掌握一套能够让 AI 稳定开发复杂大型项目而不崩溃、不"胡编乱造"的工业级开发流。

第一步：环境与工具安装

1. 安装 Cursor ：前往官网下载并安装 Cursor 编辑器。

2. 安装 Python：确保你的电脑上已安装 Python 环境。

3. 安装 uv 包管理器 （Spec-Kit 官方推荐使用此工具进行安装）：
   打开电脑的终端（Terminal 或命令提示符），输入：

   pip install uv
   # 如果你是 macOS 也可以用：brew install uv

4. 全局安装 Spec-Kit 的命令行工具 ：
   在终端中运行以下命令：

   uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

第二步：初始化项目

在终端中，进入你想写代码的文件夹，然后使用 specify init . 初始化一个计算器项目：

执行后，命令行会出现交互式提示。当它询问你使用哪种 AI 辅助工具（Integration）时，使用上下方向键选择 cursor 并回车。

cd simple-calculator
specify init .

(此时你会发现项目里多了一个 .specify 文件夹，这就是 Spec-Kit 注入的 AI 系统模板和执行规则。)

第三步：在 Cursor 中进行"规格驱动开发" （ 5步工作流：宪法 + BA：澄清需求 + 架构师：输出技术文档 + 小组长：分解任务 + 开发测试：写代码）

在 Cursor 中，按下快捷键 Cmd + I (Mac) 或 Ctrl + I (Windows) 唤出 Composer 面板 （或者使用 Cmd/Ctrl + L 打开 Chat 并切换到 Agent 模式）。

接下来，我们将摒弃直接让 AI 写代码的习惯，严格按照 Spec-Kit 的 4 步走：

1. 确立宪章与原则 (Constitution)

在 Composer 中输入以下命令并发送：

/speckit.constitution 这个项目是一个极简的网页版四则运算计算器。请遵循以下原则：1. 仅使用纯 HTML、CSS 和 JavaScript（Vanilla Web），绝对不要引入 React、Vue 或 Tailwind 等外部框架。2. 所有代码逻辑必须简单易读。

(发送后，Cursor 会基于 Spec-Kit 模板在项目中生成一个 .specify/constitution.md，确立不可违背的底层代码原则。)

2. 定义需求规格 (Specify) BA：澄清需求

等上一步完成后，继续输入：

/speckit.specify 帮我设计一个四则运算计算器。它需要包含：1. 一个显示当前输入和计算结果的显示屏。 2. 数字键 0-9。 3. 基础运算符（+ - * /）。 4. 等于号（=）和清除键（C）。 5. 界面布局应该类似经典的实体计算器，需要有一点现代感的阴影和圆角设计。

(AI 会帮你生成一份严谨的 Markdown 格式的产品需求文档，明确"做什么"和"为什么做"。)

3. 制定技术计划 (Plan) 架构师：输出技术文档

继续输入：

/speckit.plan 基于刚才生成的需求规格，为计算器生成具体的技术实现计划。请包括文件结构设计（如 index.html, style.css, script.js）以及核心的计算逻辑该如何实现。

4. 拆解开发任务 (Tasks) 小组长：分解任务

继续输入：

/speckit.tasks 请将上述技术计划拆解为一份包含复选框（Checkboxes）的可执行任务列表。

(此时，AI 会生成一份按部就班的 TODO List，例如任务一：创建基础 HTML；任务二：编写 CSS 样式；任务三：实现 JS 计算器核心状态机...)

第四步：让 Cursor 开始写代码！(Implement) 开发测试：写代码

经过了前面的"深思熟虑"，现在才是真正写代码的时候。由于背景信息已经高度对齐，AI 绝对不会写出乱七八糟的代码。

在 Composer 面板向 AI 下达最终指令：

/speckit.implement 请阅读刚刚生成的任务列表，现在作为我的 AI 程序员，一步一步按顺序执行列表中的所有开发任务。完成每个文件后在任务列表上打勾，直到整个计算器项目开发并重构完成。

此时，Cursor 会自动生成 index.html、style.css 和 script.js，并将它们写入你的项目目录中。你可以直观地看到它把计划转换成了完美运行的代码。

第五步：运行测试

在 Cursor 编辑器中，右键点击生成好的 index.html，选择在默认浏览器中打开（或者使用你的 Live Server 扩展）。你将看到一个设计精美、逻辑严密的网页计算器完美运行！

参考来源：

1. github.blog
2. github.com
3. dev.to