Spec Kit UI MCP

> 交互式 MCP 服务器，通过可视化界面收集项目需求，自动生成 Spec Kit 7 条命令。专为 Cursor 编辑器优化。


✨ 特性

- 🎯 智能需求收集 - 通过交互式网页表单收集项目需求
- 🤖 AI 驱动 - AI 根据描述自动生成针对性问题
- 📊 多回合对话 - 支持多轮问答，逐步完善需求
- 🎨 美观界面 - 现代化 UI 设计
- 📝 自动生成命令 - 基于需求自动生成 7 条 Spec Kit 命令
- 💾 会话管理 - 自动保存会话历史

📦 在 Cursor 中使用

$3

在 Cursor 的设置中配置 MCP 服务器：

打开 Cursor 设置 → MCP → 添加服务器配置：

``json
{
"mcpServers": {
"spec-kit-ui-mcp": {
"command": "npx",
"args": ["-y", "spec-kit-ui-mcp", "--work-dir", "工作目录地址"]
}
}
}
`

$3

配置完成后，重启 Cursor 使 MCP 服务器生效。

$3

在 Cursor 的 AI 对话框中，直接描述你的项目需求：

`
我想做一个电商网站，包含商品列表、购物车、订单管理功能
`

AI 会自动调用 MCP 工具，引导你完成需求收集并生成 Spec Kit 命令。

📸 界面预览

$3

!需求收集界面

$3

!问题配置界面

$3

!需求分析界面

$3

!命令预览界面

🎯 完整使用案例

$3

第一步：描述项目需求

`
我想做一个待办事项应用
`

AI 自动执行：

1. 调用 gather 工具收集需求
2. 打开浏览器展示问题配置表单
3. 你填写完成后提交

第二步：AI 分析需求

AI 调用 analyze 工具分析需求是否完整。

- 如果需求不够明确，AI 会继续问问题（多轮对话）
- 如果需求明确，AI 继续下一步

第三步：生成 Spec Kit 命令

AI 调用 build 工具生成 7 条命令：

- /constitution - 项目原则和开发规范
- /specify - 功能规格和用户故事
- /clarify - 技术细节澄清
- /plan - 技术实现方案
- /tasks - 任务分解和评估
- /analyze - 风险分析和缓解
- /implement - 具体实现指导

第四步：预览命令

AI 调用 preview 工具在浏览器中展示生成的命令，你可以复制使用。

$3

`
我想做一个在线教育平台，包含：
- 课程管理：老师可以创建、编辑课程
- 视频播放：支持视频进度记录
- 作业系统：学生提交作业，老师批改
- 讨论区：师生互动交流
- 数据分析：学习行为分析
`

AI 会引导你逐步完善：

- 用户角色和权限
- 技术栈选择
- 部署方式
- 性能要求
- 安全考虑

最终生成完整的 Spec Kit 7 条命令。

$3

如果你不熟悉 Spec Kit，可以在 Cursor 中说：

`
我想学习 Spec Kit 的命令
`

AI 会调用 learn_speckit 工具，打开交互式学习页面，详细介绍每个命令的用途和使用方法。

🛠️ MCP 工具详解

$3

作用：
收集用户的项目需求信息，AI 根据项目描述自动生成针对性问题配置。

参数：

- projectIdea (必填): 项目想法描述，例如 "我想做一个待办事项应用"
- userResponse (可选): 用户之前填写的回答文本（用于多轮对话）
- previousFeedback (可选): 用户的修改意见（用于多轮对话）
- sessionId (可选): 会话 ID，提供则继续现有会话，否则创建新会话

使用场景：

- 第一次描述项目需求
- 需要补充更多需求信息
- 修改之前的需求回答

工作流程：

1. 检查 SpecKit 是否已初始化
2. 创建或继续会话
3. AI 生成问题配置 JSON
4. 自动调用 configure 工具打开可视化界面

输出：
返回 AI 提示词，指导 AI 生成需求配置 JSON 文件。

---

$3

作用：
接收需求配置文件路径，启动本地 Web 服务器，在浏览器中展示配置表单，等待用户填写并提交。

参数：

- configFilePath (必填): 需求配置 JSON 文件的路径

使用场景：

- gather 工具生成配置文件后自动调用
- 需要用户填写具体需求信息

工作流程：

1. 读取配置文件验证有效性
2. 启动 Web 服务器（端口 3456）
3. 打开浏览器展示表单
4. 等待用户填写并提交
5. 保存用户回答到文件

输出：
返回格式化的用户回答文本和响应文件路径。

---

$3

作用：
分析收集到的需求信息，判断是否足够完整和明确。如果需求明确，生成需求总结并指示构建命令；如果不明确，指示继续收集更多信息。

参数：

- projectIdea (必填): 项目想法描述
- userAnswers (必填): 用户当前回答的文本
- userResponseFilePath (必填): 用户回答的响应文件路径（用于提取 sessionId）

使用场景：

- configure 工具获取用户回答后自动调用
- 判断是否需要继续收集需求

工作流程：

1. 从文件路径提取 sessionId
2. 保存输入参数到文件
3. AI 分析需求完整性
4. 如果需求明确，AI 生成需求总结 JSON
5. 如果需求不明确，AI 指示继续 gather

输出：
返回 AI 提示词，指导 AI 分析需求并决定下一步操作。

---

$3

作用：
基于完整的需求总结，生成 Spec Kit 7 条命令：/constitution、/specify、/clarify、/plan、/tasks、/analyze、/implement。使用 Vue 3 + TypeScript 技术栈，强调高可用、高性能、高可维护性。

参数：

- requirementsSummaryFilePath (必填): 需求总结 JSON 文件路径

使用场景：

- analyze 工具确认需求完整后自动调用
- 生成最终的 Spec Kit 命令

工作流程：

1. 读取需求总结文件
2. 提取项目想法和需求总结
3. AI 根据模板生成 7 条命令
4. 保存命令到 JSON 文件
5. 自动调用 preview 工具展示结果

输出：
返回 AI 提示词，指导 AI 生成 7 条 Spec Kit 命令的 JSON 文件。

生成的命令包括：

1. /constitution - 项目原则和开发规范
2. /specify - 功能规格和用户故事
3. /clarify - 技术细节澄清
4. /plan - 技术实现方案
5. /tasks - 任务分解和评估
6. /analyze - 风险分析和缓解
7. /implement - 具体实现指导

---

$3

作用：
接收命令结果文件路径，在浏览器中以美观的方式展示生成的 7 条 Spec Kit 命令，方便用户查看和复制。

参数：

- commandsFilePath (必填): 命令结果 JSON 文件路径

使用场景：

- build 工具生成命令后自动调用
- 查看已生成的命令结果

工作流程：

1. 读取命令结果文件
2. 验证文件格式有效性
3. 启动 Web 服务器（如果未启动）
4. 打开浏览器展示命令
5. 用户可以复制各个命令

输出：
返回命令列表摘要和浏览器展示页面。

---

$3

作用：
打开一个交互式网页，详细介绍 Spec Kit 的所有命令、用途、使用方法和最佳实践。

参数：
无需参数（或 _ 占位参数）

使用场景：

- 不熟悉 Spec Kit 命令
- 想了解各个命令的详细用法
- 查看命令使用示例

工作流程：

1. 启动 Web 服务器（如果未启动）
2. 打开学习指南页面
3. 展示所有命令的详细说明和示例

输出：
返回提示信息，告知已打开学习页面。

学习内容包括：

- 📚 所有 Spec Kit 命令的详细说明
- 💡 每个命令的中文示例
- 🎯 可视化的开发流程
- 💭 实用的使用技巧

🔧 高级配置

$3

这个 MCP 需要在你的项目目录中创建和管理文件：

- 检查 .specify/ 目录是否存在（SpecKit 初始化标志）
- 在 .specify/ui-cache/ 目录下保存会话数据
- 存储生成的配置文件和命令结果

因此，必须在配置中指定 --work-dir 参数，指向你要开发的项目目录。

$3

如果你有多个项目需要使用 Spec Kit UI MCP，可以为每个项目配置不同的服务器：

`json
{
"mcpServers": {
"spec-kit-project-a": {
"command": "npx",
"args": ["-y", "spec-kit-ui-mcp", "--work-dir", "E:/Projects/ProjectA"]
},
"spec-kit-project-b": {
"command": "npx",
"args": ["-y", "spec-kit-ui-mcp", "--work-dir", "E:/Projects/ProjectB"]
}
}
}
`

这样你可以在不同的项目间切换使用。

$3

所有会话数据自动保存在项目的 .specify/ui-cache/ 目录下：

`
.specify/
└── ui-cache/
└── session-20231204-123456/
├── 1-gather-request.json # gather 工具的输入参数
├── 1-gather-response.json # AI 生成的问题配置
├── 1-gather-prompt.md # gather 工具的提示词
├── 2-configure-response.json # 用户填写的回答
├── 2-configure-prompt.md # configure 工具的提示词
├── 3-analyze-request.json # analyze 工具的输入
├── 3-analyze-response.json # 需求总结
├── 3-analyze-prompt.md # analyze 工具的提示词
├── 4-build-request.json # build 工具的输入
├── 4-build-response.json # 生成的 7 条命令
└── 4-build-prompt.md # build 工具的提示词
`

每个步骤都有完整的记录，方便追溯和调试。

💡 使用技巧

$3

`
✅ 好的描述：
我想做一个任务管理网站，包含看板视图、列表视图、
团队协作功能，界面简约现代，支持暗色模式，
使用 Vue 3 + TypeScript，部署到云服务器

❌ 不好的描述：
我想做一个网站
`

详细的描述能让 AI 生成更准确的问题配置。

$3

不用担心第一次说不清楚，AI 会通过多轮对话帮你完善需求：

- 第一轮：收集基本功能需求
- 第二轮：收集技术栈和部署方式
- 第三轮：收集性能和安全要求

$3

所有会话数据都保存在 .specify/ui-cache/ 目录，你可以：

- 查看之前的需求配置
- 修改用户回答并重新生成
- 对比不同版本的命令

$3

如果你是第一次使用，建议先调用 learn_speckit 工具学习各个命令的用途，这样能更好地理解生成的结果。

🚀 开发

`bash


克隆仓库

git clone https://github.com/yourusername/spec-kit-ui-mcp.git
cd spec-kit-ui-mcp

安装依赖

npm install

构建

npm run build

开发模式

npm run dev
``

📄 许可证

MIT © spec-kit-ui-mcp contributors

🙏 致谢

- Model Context Protocol - MCP SDK
- Spec Kit - 开发方法论
- Vue.js - 前端框架
- Tailwind CSS - 样式框架

---

如果有帮助，请给个 ⭐️ Star！