从 Cursor + SpecKit 到 Vibe Coding：一次全新的开发体验
✨ 项目采用Zeabur部署， 感兴趣的可以点击查看，我用 Cursor + Spec Kit 仅用 5 小时就完成了一个智能学习分析平台
一、为什么会有这次尝试
在这次项目之前，我对"AI 辅助写代码"的印象还停留在自动补全、生成模板层面。
直到我接触到 Cursor + SpecKit 这一组合，才第一次体会到所谓 Vibe Coding（氛围式编程） 的感觉：
不再是「AI 帮我写」，而是「我和 AI 一起写」。
我不再孤立地写一段段逻辑，而是在和 AI 的来回对话中------让代码自然生成。
三、Cursor + SpecKit 是如何做到的
- Cursor 是一款新一代 AI IDE，支持智能对话式代码补全与上下文协作。
- Spec Kit 是一种 软件设计与开发方法论框架，尤其适合做快速原型、MVP 或 Demo 项目，同时保证团队在需求和实现上的一致性
两者结合，就像拥有一个"懂你想法"的搭档。
用结构化文档（类似 /speckit.constitution、/speckit.specify、/speckit.plan）指导开发流程，AI 就能实时把它变成数据结构、接口、页面组件。
💡 简单来说：写需求就像写故事，AI 负责把故事拍成电影。
四、项目实战：从 0 到 1 构建我们的「AI 学习助手」
在这次实践中，我用 Cursor + SpecKit 从零构建了一个小型 Web 应用：LearnMate ------ 一款 AI 学习助手。
目标是：构建一个帮助学习者提升学习效率、发现知识盲区、找到学习搭子的 AI 学习支持系统
Step 1. 先用自然语言定义需求
markdown
## /speckit.constitution
# 项目宪章：AI 学习伙伴雷达（AI StudyMate Radar）
# --------------------------------------------------
# 目标：构建一个帮助学习者提升学习效率、发现知识盲区、找到学习搭子的 AI 学习支持系统。
# 系统通过分析学习资料与用户行为，为用户提供个性化反馈与匹配。
#
# 核心使命：
# "让学习不再孤独、不再盲目。"
vision: |
通过 AI 驱动的「学习分析 + 知识抽取 + 匹配推荐」三合一机制，
帮助用户自动识别知识盲区、生成记忆卡笔记，并智能匹配最合拍的学习搭子。
target_users:
- 高中生、大学生、研究生等自学者
- 自主学习编程、语言、考证的个体学习者
- 希望提高学习效率或建立学习社群的小团队
...
markdown
## /speckit.specify
1. 学习文本分析模块（AI 知识盲区雷达）
description: |
用户上传学习内容（文本或截图 OCR），AI 自动识别主题结构与知识点，
并根据用户的过往学习记录或自测反馈标出"潜在盲区"。
inputs:
- 文本内容（text）
- 用户自评掌握度（可选）
outputs:
- 知识盲区报告 JSON
- 每个知识点的掌握评分
...
markdown
## /speckit.plan
architecture:
frontend:
- Next.js 14（App Router）
- 使用 shadcn/ui + TailwindCSS 构建界面
- Recharts.js 用于展示「知识盲区雷达图」
- API 调用通过 /api 路由代理到后端
backend:
- Next.js Server Actions / API Routes
- 集成火山引擎大模型（Ark API）
- 负责 Prompt 处理与 AI 响应
- Drizzle ORM 管理数据库访问（MySQL）
database:
- MySQL（本地或远程）
- 表结构包括：
- users（用户画像）
- learning_sessions（学习记录）
- blind_spots（知识盲区）
- flashcards（记忆卡）
- buddy_matches（学习搭子匹配结果）
...然后执行 /speckit.task 会自动生成可执行的任务，最后通过/speckit.implement生成代码
Step 2. 让 Cursor 实时帮我补完代码
在 Cursor 里，我打开 /api/plan.ts 文件，按下 ⌘ + K 输入：
"根据 spec.md 生成学习计划的接口逻辑，假设有 openai API 支持。"
几秒钟后，AI 自动写出了以下接口原型：
ts
export async function POST(req: Request) {
const { goal } = await req.json();
const plan = await generateLearningPlan(goal);
return Response.json(plan);
}更关键的是：当我修改 spec 文件中对「任务进度」的描述后，Cursor 会提示我：
"你的数据模型中新增了 progress 字段，是否同步更新接口和前端展示逻辑？"
我只需点击 ✅ 即可自动完成模型同步。
Step 3. 一次性生成 UI 组件
接着，我让 Cursor 直接帮我写出 UI：
"请用 shadcn/ui + Tailwind 写一个简洁卡片组件展示每日任务清单。"
AI 生成的组件几乎可直接运行，还自动引入了动画和进度条。稍作调整后就成了我们 Demo 的核心界面。
Step 4. 打磨细节：人类的价值在「调整 vibe」
这一步就是我最喜欢的部分。AI 已经解决了 80% 的机械活，而剩下 20% 的"感觉"工作 ------ 文案语气、动画流畅度、信息密度 ------ 才真正体现开发者的品味。
在 Cursor 里，我不断调试交互语气，让系统的提示更人性化，例如：
"今天也要加油哦 💪！完成任务后点这里更新进度。"
当代码与体验自然融合的一刻，整个项目的「vibe」就成型了。
最后展示下项目所用到的技术栈
前端：
- Next.js 15.1 (App Router) - React框架
- TypeScript 5 - 类型安全
- TailwindCSS 4 - 样式方案
- shadcn/ui - UI组件库
- Recharts - 数据可视化
- Framer Motion - 动画库
后端：
- Next.js API Routes - 服务端API
- Drizzle ORM - 数据库ORM
- MySQL - 关系型数据库 AI集成：
- 火山引擎API - LLM服务
- DeepSeek V3 - 模型引擎
工具链：
- Jest - 单元测试
- React Testing Library - 组件测试
- Drizzle Kit - 数据库迁移
最终生成的项目目录:
markdown
app/
├── analyze/ # 知识盲区分析页面
├── cards/ # 记忆卡片页面
├── buddies/ # 学习伙伴匹配页面
├── api/ # API路由
│ ├── analyze/
│ ├── generate-cards/
│ └── match/
└── auth/ # 认证页面
lib/
├── services/ # 业务逻辑层
│ ├── analyze.ts # 分析服务
│ ├── cards.ts # 卡片服务
│ ├── matching.ts # 匹配服务
│ └── ocr.ts # OCR服务
├── ai-client.ts # AI客户端封装
├── db/
│ ├── schema.ts # 数据库模型
│ └── connection.ts # 数据库连接
└── error-handler.ts # 错误处理
components/
└── ui/ # UI组件库五、写在最后：从「Coding」到「Co-creating」
这次体验让我非常直观地感受到：
"AI 并不是来写代码的，而是让我们重新定义写代码的意义。"
在传统的开发中，我们关注的是「正确实现」。
而在 Vibe Coding 中，我们更关注「实现背后的意图」。
有趣的是，当项目结束时，我回头看几乎所有文件------
它们看起来更像一份被 AI 共同书写的作品 ，
既保留了我的思考路径，又留下了 AI 的补全痕迹。
未来的代码协作，也许会像现在的音乐共创一样：
一个人出旋律，另一个人补和声，而 AI 帮我们编曲。
六、结语：如何开始你的 Vibe Coding 之旅？
如果你想尝试这种新的开发方式，可以从以下三步开始：
-
安装 Cursor 编辑器
下载地址：cursor.sh
-
去Spec Kit下载对应的包放在项目根目录下
然后编辑器中就会添加
/speckit.**相关的指令 -
放下对"完美代码"的执念
只需像讲故事一样写下你的需求，
让 AI 帮你从文字到代码自然流动。
✨ 最后一句话：
"Vibe Coding 不是一种技术，而是一种心态 ------
当你开始和 AI 合奏，而不是对抗，你就已经在路上了。"
📌 作者注
这篇文章是我在使用 Cursor + SpecKit 开发 AI 学习助手项目后的第一手体验。
如果你也在探索「AI 驱动开发」的新方式，欢迎留言交流。点击查看项目