Ronnie's Blog

一个人，15小时，用 Cursor 从零到部署一个 AI 语音记账应用

AI 实践 效率工具#Cursor #AI #记账 #运维

作者：程序员罗尼 ｜ 发布：2025-12-27 ｜ 原文：https://mp.weixin.qq.com/s/cBbEgA5lG8sS9kkJ5Pc12g

一个人，15小时，用 Cursor 从零到部署一个 AI 语音记账应用

这是一篇真实的开发记录，记录了我如何用 Cursor AI 助手，在不到一天的时间里，从零开始开发并部署了一个完整的 AI 语音记账应用。

前言：为什么选择 Cursor？

我是一个后端工程师，平时主要写 Java、Python、Node.js，对前端开发的经验不多。每次想做个小项目，总是卡在前端：React 怎么用？组件怎么设计？样式怎么写？移动端怎么适配？

直到我遇到了 Cursor，这个 AI 编程助手彻底改变了我的开发方式。它不仅能帮我写代码，更重要的是，它能教我写代码。

今天要分享的这个项目，就是一个完美的例子：AI 语音记账应用。用户只需要对着手机说"今天吃饭花了 50 块"，系统就能自动识别语音、解析内容，然后把数据插入到飞书多维表格里。

听起来很复杂？特别是前端部分，对后端工程师来说简直是噩梦。但用 Cursor，我一个人在 15 小时内就完成了从需求分析到生产部署的全过程，而且前端代码质量完全不输专业前端。

项目概览

项目名称：AI 语音记账

核心功能：

  • 🎤 语音录音（支持移动端和桌面端）
  • 🧠 AI 语音识别（通义千问 ASR）
  • 🤖 智能文本解析（通义千问 LLM）
  • 📊 自动插入飞书多维表格
  • ✏️ 结果可编辑，支持二次确认

技术栈：

  • 前端：React + TypeScript + Vite + Tailwind CSS
  • 后端：Node.js + Express + TypeScript
  • AI 服务：阿里云通义千问（ASR + LLM）
  • 数据存储：飞书多维表格

开发时间线：15 小时的奇迹

第 1 小时：需求确认和架构设计

一开始，我只是有个模糊的想法："能不能用语音记账？"

在 Cursor 的帮助下，我快速梳理了需求：

  • 录音功能怎么实现？
  • 语音识别用哪个服务？
  • 数据解析怎么处理？
  • 如何对接飞书 API？

Cursor 帮我快速生成了需求文档和开发计划，还给出了技术选型建议。原本需要半天的工作，1 小时就搞定了。

第 2-3 小时：项目初始化和环境搭建

有了计划，接下来就是搭建项目骨架。作为后端工程师，后端部分我轻车熟路，但前端就有点懵了。

前端项目：

# Cursor 帮我生成了完整的项目结构  
- React 18 + TypeScript  
- Vite 作为构建工具（启动超快）  
- Tailwind CSS（样式写起来飞快）  
- ESLint + Prettier（代码规范自动搞定）

说实话，我之前只知道 React 这个名字，具体怎么用完全不清楚。但 Cursor 不仅帮我搭建好了项目，还详细解释了：

  • 为什么选择 Vite 而不是 Webpack？（启动快、热更新快）
  • 为什么用 Tailwind CSS？（不用写 CSS 文件，直接在 HTML 里写类名）
  • TypeScript 在前端怎么用？（和后端差不多，但有些细节不同）

后端项目：

# 后端部分我比较熟悉，但 Cursor 还是帮我优化了很多细节  
- Node.js + Express  
- TypeScript（类型安全）  
- 环境变量管理  
- 错误处理中间件

Cursor 最厉害的地方是，它不仅能生成代码，还能解释为什么这样设计。每次我提问"为什么这样写？"，它都能给出详细的解释，让我真正理解了前端的开发方式。

第 4-5 小时：前端基础功能和录音

这是最挑战的部分，也是 Cursor 价值最大的地方。作为后端工程师，我对前端的状态管理、事件处理、浏览器 API 都不熟悉。

我需要实现：

  • 录音按钮（按住录音，松开停止）
  • 录音时长显示
  • 音频文件上传

我的困惑：

  • React Hooks 是什么？useState、useEffect 怎么用？
  • 浏览器录音 API 是什么？MediaRecorder 怎么用？
  • 移动端和桌面端的兼容性怎么处理？

Cursor 不仅帮我写好了代码，还详细解释了每个概念：

// Cursor 生成的代码，几乎可以直接用  
// 而且还解释了：这是一个自定义 Hook，封装了录音逻辑  
const { isRecording, duration, startRecording, stopRecording } = useAudioRecorder({  
  maxDuration: 60, // 最多录 60 秒  
  onStop: (blob) => {  
    // 自动上传  
  }  
})

Cursor 教我的东西：

  • React Hooks 的基本用法（useState 管理状态，useEffect 处理副作用）
  • 浏览器 MediaRecorder API 的使用方法
  • 移动端兼容性处理（Safari 的麦克风权限、iOS 的特殊处理）
  • 错误处理和用户提示

最让我惊喜的是，Cursor 还主动提醒我："Safari 浏览器需要特殊处理麦克风权限，而且必须在 HTTPS 环境下才能使用。"这些细节，如果我自己查文档，可能要花半天时间。

第 6-8 小时：后端 API 和语音识别

后端开发是我的强项，但 Cursor 还是帮了我很多。我需要：

  1. 接收音频文件（multer 中间件）
  2. 调用通义千问 ASR API 转文本
  3. 调用通义千问 LLM API 解析结构化数据

遇到的问题：

  • ES 模块导入路径问题（Node.js ES 模块需要 .js 扩展名，这个我之前不知道）
  • 时区问题（toISOString() 返回 UTC 时间，导致日期识别错误）
  • API 调用失败重试机制

每次遇到问题，我只需要把错误信息告诉 Cursor，它就能快速定位问题并给出解决方案。比如时区问题，Cursor 直接帮我改成了本地时间格式化，还解释了为什么：

// 之前：toISOString().split('T')[0] // 可能差一天（UTC 时间）  
// 之后：手动格式化本地时间  
const year = now.getFullYear()  
const month = String(now.getMonth() + 1).padStart(2, '0')  
const day = String(now.getDate()).padStart(2, '0')  
// 这样就能保证使用本地时区的时间

ES 模块的问题：这是我第一次用 Node.js 的 ES 模块，不知道相对路径需要加 .js 扩展名。Cursor 不仅修复了所有导入路径，还解释了 ES 模块和 CommonJS 的区别。

第 9-11 小时：飞书 API 集成

这是最复杂的部分。飞书 API 的文档虽然详细，但字段映射、Token 获取、错误处理等细节很多。

Cursor 帮我：

  • 理解了飞书 API 的认证机制
  • 实现了字段名称到字段 ID 的映射（后来发现可以直接用字段名）
  • 添加了完整的错误处理和重试机制
  • 处理了各种边界情况

最让我印象深刻的是，当我遇到 API 调用失败时，Cursor 不仅修复了代码，还帮我生成了详细的调试日志，让我能快速定位问题。

第 12-13 小时：UI 优化和 Bug 修复

功能基本完成后，就是各种细节优化。这部分对后端工程师来说是最难的：

  • 解析结果展示优化（置信度显示在标题中，用颜色区分）
  • 错误提示优化
  • 移动端适配（响应式设计）
  • 录音权限处理

我的困惑：

  • 怎么让 UI 看起来好看？（我只会写后端 API，UI 设计完全不懂）
  • 移动端适配怎么做？（Tailwind CSS 的响应式类名怎么用？）
  • 颜色怎么选？（什么颜色代表什么含义？）

Cursor 在 UI 优化上非常给力。比如我想把置信度显示在标题里，它直接帮我：

  1. 修改 Modal 组件支持 ReactNode 类型的 title（还解释了为什么需要改类型）
  2. 根据置信度值动态设置颜色（高≥80%绿色，中 50-79%黄色，低<50%红色）
  3. 处理 undefined 的情况（显示 0%）
  4. 还教了我 Tailwind CSS 的颜色类名：text-green-600、text-yellow-600、text-red-600

移动端适配：Cursor 教了我 Tailwind 的响应式设计：

  • text-sm：小屏幕字体
  • md:text-base：中等屏幕及以上使用基础字体
  • flex flex-col md:flex-row：小屏幕垂直排列，大屏幕水平排列

整个过程就是：我说需求（"我想把置信度显示在标题里"），Cursor 实现并解释（"需要改 Modal 组件的类型，然后用条件渲染"），我确认，完成。我不仅完成了功能，还学会了前端开发的基本思路。

第 14-15 小时：Docker 部署和上线

最后一步是部署。我需要：

  • Docker 镜像构建
  • 阿里云容器镜像服务推送
  • 服务器部署脚本
  • Nginx 配置（子路径部署 + HTTPS）

遇到的挑战：

  1. Docker 构建失败：TypeScript 类型错误、ES 模块导入问题
  2. 部署后 404：前端 base path 配置、Nginx 路由规则
  3. HTTPS 配置冲突：服务器上已有其他服务的 Nginx 配置

每次遇到问题，Cursor 都能：

  • 快速定位问题根源
  • 提供多种解决方案
  • 生成诊断脚本帮助排查
  • 更新相关文档

比如 404 问题，Cursor 不仅修复了配置，还帮我生成了 debug-404.sh 脚本，可以一键诊断所有可能的问题。

Cursor 带来的价值

1. 速度提升 10 倍

传统开发方式，这个项目至少需要：

  • 需求分析：1 天
  • 架构设计：1 天
  • 前端开发：3 天
  • 后端开发：3 天
  • 集成测试：2 天
  • 部署上线：1 天

总计：11 天

用 Cursor，我只用了 15 小时（不到 2 天）。

2. 代码质量更高

Cursor 生成的代码：

  • ✅ 遵循最佳实践
  • ✅ 有完整的类型定义
  • ✅ 包含错误处理
  • ✅ 有清晰的注释

而且，Cursor 会主动提醒我：

  • "这里应该加错误处理"
  • "这个类型可能为 undefined，需要检查"
  • "移动端可能需要特殊处理"

3. 学习成本降低：从后端到全栈

作为一个后端工程师，我对前端开发几乎一窍不通。但 Cursor 帮我：

  • 学会了 React：Hooks、组件设计、状态管理
  • 掌握了 Tailwind CSS：响应式设计、颜色系统、布局
  • 理解了前端工程化：Vite 构建、TypeScript 配置、ESLint 规则
  • 学会了浏览器 API：MediaRecorder、权限管理、文件上传
  • 掌握了 DevOps：Docker 多阶段构建、Nginx 配置、HTTPS 设置

最让我印象深刻的是：每次 Cursor 生成代码，我都会问"为什么这样写？"，它都能给出详细的解释。比如：

  • "为什么用 useState 而不是直接赋值？" → "React 需要状态变化触发重新渲染"
  • "为什么用 useEffect？" → "处理副作用，比如组件挂载时获取数据"
  • "为什么用 Tailwind 而不是写 CSS？" → "更快的开发速度，不需要切换文件"

15 小时后，我不仅完成了项目，还真正理解了前端开发的基本思路。这比看教程、读文档快太多了。

4. 问题解决更快

开发过程中遇到的所有问题，Cursor 都能快速解决：

  • ES 模块导入错误：5 分钟定位并修复
  • 时区问题：10 分钟理解问题并给出方案
  • Nginx 配置冲突：20 分钟分析并解决
  • API 调用失败：15 分钟添加重试机制和错误处理

如果是传统方式，每个问题可能都需要：

  • 搜索文档：30 分钟
  • 尝试解决方案：1 小时
  • 调试和验证：30 分钟

总计：2 小时/问题

项目成果

功能完整性

✅ 录音功能（支持移动端和桌面端）
✅ 语音识别（通义千问 ASR）
✅ 智能解析（提取金额、类别、备注、人员）
✅ 数据验证和编辑
✅ 飞书多维表格自动插入
✅ 错误处理和重试机制
✅ 响应式设计（移动端适配）

代码质量

  • 40+ 个 commit，每个都有清晰的提交信息
  • 完整的 TypeScript 类型定义
  • ESLint + Prettier 代码规范
  • 详细的文档（需求、设计、部署指南）

部署就绪

  • ✅ Docker 镜像构建
  • ✅ 一键部署脚本
  • ✅ 生产环境配置
  • ✅ HTTPS 支持
  • ✅ 子路径部署支持

一些有趣的细节

1. 自动判断说话人性别

最初的需求是让用户选择"男主人"或"女主人"。但 Cursor 建议："可以让 AI 根据语音识别结果自动判断性别。"

于是我在 Prompt 里加了一句："根据语音内容判断说话人是男主人还是女主人"，结果真的可以！现在用户说"我吃饭花了 50 块"，系统就能自动识别是"男主人"还是"女主人"。

2. 置信度可视化

解析结果有个置信度字段，最初是单独显示的。后来我想："能不能更直观一点？"

Cursor 建议："可以显示在标题里，用颜色区分。"于是就有了现在的效果：

  • 高置信度（≥80%）：绿色 ✅
  • 中置信度（50-79%）：黄色 ⚠️
  • 低置信度（<50%）：红色 ❌

3. 一键部署脚本

部署到阿里云时，我写了一个脚本，但每次都要手动输入密码。Cursor 帮我优化成：

  • 支持命令行参数传入密码
  • 支持环境变量
  • 自动读取 .env 文件
  • 详细的错误提示

现在部署只需要：

./scripts/deploy-to-aliyun.sh v1.0.0 your_password

总结：Cursor 改变了什么？

对后端工程师

  • **从"不敢做前端"到"敢做全栈"**：以前觉得前端太复杂，现在敢尝试了
  • **从"做不完"到"做得完"**：时间成本降低 10 倍，特别是前端部分
  • **从"不会做"到"会做"**：边做边学，15 小时学会了 React、Tailwind、前端工程化
  • **从"需要前端同事"到"一个人搞定"**：不再需要等前端资源，自己就能完成全栈项目

对开发流程

  • 需求分析：Cursor 帮你梳理思路，生成文档
  • 架构设计：Cursor 给出技术选型建议
  • 编码实现：Cursor 生成高质量代码
  • 问题排查：Cursor 快速定位和解决问题
  • 文档编写：Cursor 自动生成技术文档

对代码质量

  • 类型安全：TypeScript 类型定义完整
  • 错误处理：边界情况考虑周全
  • 最佳实践：遵循行业标准
  • 可维护性：代码结构清晰，注释完整

写在最后

这个项目让我深刻体会到，AI 编程助手不是要替代开发者，而是要放大开发者的能力。

Cursor 让我：

  • 一个人能做以前需要一个团队做的事：后端 + 前端 + DevOps，全部搞定
  • 快速学习新技术：15 小时从零学会 React、Tailwind、前端工程化
  • 打破技术栈壁垒：不再被"我是后端工程师"的身份限制，可以做任何想做的项目
  • 专注于业务逻辑：不用花时间查文档、调试样式、处理兼容性
  • 享受编程的乐趣：从"我不会前端"到"我也可以做前端"，这种成就感太棒了

如果你也是后端工程师，想尝试全栈开发，我建议：

  1. 从小项目开始：先做一个简单的功能，熟悉 Cursor 的工作方式
  2. 多问为什么：不要只是复制代码，要理解为什么这样写。这是学习的最佳方式
  3. 保持代码质量：虽然 Cursor 生成代码很快，但还是要 review 和测试。特别是前端部分，要理解代码逻辑
  4. 记录学习过程：每次解决问题，都是学习的机会。15 小时后，你会发现你已经掌握了前端开发的基本思路
  5. 不要害怕：前端没有想象中那么难，特别是有了 Cursor 的帮助。React、Tailwind、TypeScript，这些工具都很友好

最重要的是：不要被"我是后端工程师"的身份限制。有了 Cursor，你可以做任何想做的项目。

如果你也有用 AI 助手开发项目的经历，欢迎分享！让我们一起探索 AI 编程的无限可能。

最后请看 demo

▶️ 此处为 demo 演示视频，请见原文：https://mp.weixin.qq.com/s/cBbEgA5lG8sS9kkJ5Pc12g

END