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

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

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

安装 Cursor ：前往官网下载并安装 Cursor 编辑器。
安装 Python：确保你的电脑上已安装 Python 环境。
安装 uv 包管理器 （Spec-Kit 官方推荐使用此工具进行安装）：
打开电脑的终端（Terminal 或命令提示符），输入：
bash 复制代码
```
pip install uv
# 如果你是 macOS 也可以用：brew install uv
```
全局安装 Spec-Kit 的命令行工具 ：
在终端中运行以下命令：
bash 复制代码
```
uv tool install specify-cli --from git+https://github.com/github/spec-kit.git
```

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

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

bash 复制代码

cd simple-calculator
specify init .

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

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

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

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

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

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

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

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

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

继续输入：

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

继续输入：

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

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

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

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

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

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

参考来源：