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 或命令提示符),输入:pip install uv # 如果你是 macOS 也可以用:brew install uv - 全局安装 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 扩展)。你将看到一个设计精美、逻辑严密的网页计算器完美运行!
参考来源:
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)