如何用AI Vibe Coding自部署TTS在Vercel上实现部署？
摘要：这篇文章以我在 `word-cards` 项目中的真实开发节奏为主线：**先把“体验”做出来，再把“工程化”补齐**。重点讲三件事：
 1) AI vibe coding 的工作流怎么落地；2) 为什么要把 TTS 自己
用 AI “Vibe Coding” 把 word-cards 做到可上线：自部署 TTS + Vercel 部署实践
这篇文章以我在 word-cards 项目中的真实开发节奏为主线：先把“体验”做出来，再把“工程化”补齐。重点讲三件事：
AI vibe coding 的工作流怎么落地；2) 为什么要把 TTS 自己部署；3) 前端如何用 Vercel 稳定上线。
Demo: https://word-cards.blazorserver.com/
GitHub: https://github.com/neozhu/word-cards
0. 项目一句话介绍：word-cards 是什么？
word-cards 本质是一个“单词卡片”应用：给儿童/学习者展示单词、短句（phrase），并配合发音（TTS）提升记忆效率。
项目数据有非常直观的结构（例如 content.json）：
Key：卡片 id（如 dog、lion_face）
Value：word + phrase
这种结构非常适合：
快速迭代内容（只改 JSON 就能新增卡片）
用 AI 辅助批量生成/润色 phrase
与 TTS 天然对接：word 或 phrase 都可以直接读出来
1. 我怎么用 AI “Vibe Coding” 推进开发？
所谓 vibe coding，不是“全交给 AI”，而是把 AI 当成高频的结对搭档：
用最短路径把“可运行的体验”堆出来，再迭代到可维护、可部署。
我常用的节奏是 4 步循环：
1.1 先问“我想要什么感觉？”
不要一上来写架构文档，先定义体验目标，比如：
打开页面：立刻看到卡片
点击：立刻切下一张
点喇叭：立即播报（最好有缓存，不要每次生成）
手机上也顺畅（延迟、带宽都要考虑）
1.2 让 AI 给出“最小可行路径”（MVP）
典型产物是：
页面组件怎么组织
数据怎么读（content.json）
TTS 是走浏览器 Web Speech 还是后端生成音频
这一步的关键是：先能跑。哪怕方案不完美，但能验证“用户体验”是不是对的。
1.3 我负责约束：边界、成本、风险
AI 很容易“建议上全家桶”。我会明确约束：
Vercel Serverless 不适合重推理/长时任务
TTS 音频要缓存，否则成本和延迟爆炸
接口必须加限流/鉴权（至少防刷）
1.4 最后再让 AI 帮我补工程化
当体验跑通后，再补：
目录结构整理
环境变量与部署文档
API 错误处理
缓存策略（本地/对象存储/CDN）
2. 为什么我要“自部署 TTS”？（而不是全放在 Vercel）
2.1 纯浏览器 TTS（Web Speech）的问题
优点：零后端、最快上线。