spec-kit cursor实践
认识spec-kit
如何安装
使用uv
uv tool install specify-cli --from git+https://github.com/github/spec-kit.git
specify init <PROJECT_NAME>
specify check直接下载文件（推荐）
从 GitHub Releases 页面直接下载可执行文件。
什么是SSD
- 意图驱动开发 -- 先定义规范（做什么），再实现细节（如何做）
- 使用护栏和组织原则 创建丰富的规范
- 多步细分 -- 而不是根据提示词一次性生成代码
- 严重依赖AI
如何使用
1. /constitution - 项目宪章
作用：建立项目“宪章”，明确必须遵守的最高原则
内容：
- 代码质量（如必须通过lint和单测）
- 测试标准（如TDD、覆盖率要求）
- 用户体验一致性（统一设计规范）
- 性能要求（如响应时间限制、资源占用指标） 避免AI在不同阶段给出互相矛盾或不符合规范的方案
示例场景：
有初始化模板时：
#speckit.constitution.md 克隆git@github.com:vbenjs/vue-vben-admin.git 作为脚手架，制定以代码质量、测试标准、用户体验一致性及性能要求为核心的原则。或使用现有仓库： 仓库clone单独clone下来,吧**.cursor** 和 .spec文件拖入，对应的命令也是有的
#speckit.constitution.md 当前仓库已有前端模版，严格遵守当前仓库的规则。制定以代码质量、测试标准、用户体验一致性及性能要求为核心的原则。无模板时：
后端接口暂时nitropack mock服务，前端调用后端接口。前端使用Vue 3 + Vite，使用TypeScript 类型推断，使用 Pinia 进行全局状态管理，使用 Tailwind CSS，组件全部使用 Ant Design Vue,typescript严格模式，统一eslint和prettier，提交之前必须通过lint或者typecheck，所有页面功能都需附带单元测试和页面级e2e测试2. /specify - 规格说明书
作用：生成规格说明书，描述要实现的功能和目标。
内容：
- 用户故事 User Stories
- 功能需求 Requirements
- 关键实体 Key Entities
- 成功标准 Success Criteria
不需要说明任何技术细节 需要检查spec.md文档，实现补充 每次执行都会创建一个feature分支
示例场景
#speckit.specify.md 我要创建一个名字为EDI的后台管理项目，用于管理数据。用户登录之后进入首页。用户可以查看表格数据，表单输入关键词进入快捷搜索，支持导入和导出数据。
页面1：物料主数据
菜单结构：生产质量/生产质量数据/物料主数据
VueRouter定义：manufacture/baseData/supplier_pro_material_data
搜索表单如下：其中select就是select组件，默认为input
事业部（select）、供应商（select）、供应商名称、奇瑞零件名称、供应商总成零件名称、项目名称、工厂名称、芯片MPN标识名称
表格展示字段如下:
奇瑞零件号、奇瑞零件名称、事业部编号、事业部、供应商代码、供应商名称、供应商总成零件号、供应商总成零件名称、奇瑞硬件版本号、奇瑞软件版本号、车型、项目名称、是否SOP、数据同步执行时间、工厂代码、工厂名称、供应商零件版本号、芯片采购类型、芯片MPN标识码、芯片MPN标识名称、数据来源、物料有效期（天）、类型、创建人登录账号、创建时间、更新人登录账号、更新时间
交互细节补充：
1. 表格的第一列都是checkbox, 前两列是固定定位，表格的上方都有导入，导出，删除的按钮。
1. 导入
1. 选择文件
2. 下载模版
2. 导出
1. 点击导出会打开一个title为自定义导出的弹窗，里面可以操作导出的列，表格有三个表头，第一个是checkbox，第二个是属性名，第三个是表格列名。checkbox默认全选，直接提交则会导出所有的表格数据。
2. 导出方式默认为全部，可以选择分页，需要设置导出的页大小和页码。
3. 导出的文件名称默认是菜单的名称，比如BOM主数据，用户可以手动修改
3. 删除
1. 表格的第一列checkbox选择后删除按钮disabled为false，默认是true。
2. 搜索表单所有使用Datepicker组件的，都需要支持rangePresets（查看今天、近三天、近一周、近30天、近90天）3. /plan - 技术实现计划
作用:制定技术实现计划
内容
- 技术栈（前端、后端、数据库、第三方服务）
- 架构设计（模块划分、交互方式）
- API合约雏形（路径、 请求/响应格式）
- 数据模型设计（字段、关系）
- 外部依赖于集成点
示例场景
#speckit.plan.md 当前模版已经提供了技术选型Vue3+Composition API，UI库使用ant-design-vue。严格使用当前仓库的代码风格和规范
只能修改apps/下的文件代码。业务代码目录apps/web-antd，mock服务目录apps/backend-mock。
mock服务返回的格式 { code: 0, data: {}, message: ''},列表接口返回格式可以参考apps/backend-mock/api/table/list.ts文件
业务代码可以参考playground下面的文件，使用useVbenForm和useVbenGrid，代码风格也要参开playground下面的例子。
前端采用 Next.js 14 (App Router 模式)，结合 TailwindCSS 与 shadcn/ui 构建用户界面，应用的主要页面包括任务列表页、新建任务页和设置页。TailwindCSS 负责全局样式、shadcn/ui 提供按钮、菜单、对话框等基础交互组件。前端状态管理使用 React 状态与服务器组件数据获取结合。
后端使用 Supabase 提供数据库和认证服务，数据库表设计如下：
users 表: id, email, created_at
todos 表: id, user_id, title, description, due_date, priority, completed, created_at, updated_at
认证由 Supabase Auth 完成，前端通过 session 获取用户信息，所有任务与用户 id 绑定。
数据获取采用 Next.js Server Actions 调用 Supabase，增加配置 todos 时，使用 Supabase 的 row-level security 策略，确保用户只能访问自己的任务。前端通过 React Server Components 获取任务列表，客户端交互（添加/编辑/完成任务）通过 form actions 或 client component 调用 API route。
性能与安全要求：
所有接口需启用 HTTPS，敏感信息不写入前端代码。
前端必须实现输入校验（zod），后端由 Supabase 约束与触发器保证数据一致性。
页面初始加载目标在 1.5s 内，JS 首包控制在 120KB 内。
非功能需求：
UI 必须具备可访问性（ally）。
提供简单的移动通信适应布局。
所有新增任务必须可设置截止日期与优先级，并在任务到期当天通过前端提醒显示。
最终交付：plan.md 会如何在本地运行（连接以及相关的性能要求之类的 POST /todos)，以及 quickstart 文档说明。4. /tasks - 任务拆解
将需求拆解为具体的开发任务，生成 task.md 文件。
5. /implement - 实现落地
执行具体的代码实现工作。
其他
拆解多个spec
对于大型项目，建议拆分为多个 spec 文件分别管理。
优缺点
优点: 用一套框架对齐需求、减少遗漏 缺点: 对于写spec要求非常高 + 超级慢