Vibe Coding 48小时：做几何可视化的踩坑记录
48 小时，尝试用 Claude Code + Gemini + Codex 做了一个几何可视化的小工具：
- 上传高中几何题图片 → AI 识别 → 生成可交互 3D 模型
- 自动生成讲解动画，带字幕，能导出 MP4
- 技术栈：React + Three.js + WebCodecs
Demo：https://mathviz3d.pages.dev/
说实话做得很粗糙，但过程中踩了不少坑，记录一下，希望对同样在摸索 AI 辅助开发的朋友有点参考价值。
大佬轻喷，欢迎指正。
最终效果
先放几张截图，让大家有个概念（别期待太高，真的很 MVP）。
交互模式：
左边上传题目，AI 识别后显示几何体类型、关键点、参数。右边是个能拖拽旋转的 3D 正方体，滑块控制动点位置。
视频模式：
左边是分步讲解大纲，底部有字幕。
视频导出：
用 Mediabunny + WebCodecs 在浏览器端编码，不依赖服务器。这个是现成轮子，我就是调用了一下。
第一个坑：8 小时白干
项目开始时我有点急。48 小时嘛，想快点出活。
写了一个「总方案文档」1200 多行，涵盖项目目标、AI 架构、前端布局、技术栈选型。自我感觉良好，直接让 Claude Code 开干。
结果翻车了：
- 基建层各种对不上，AI 输出的 JSON 格式和渲染引擎期望的格式不匹配
- 坐标计算有奇怪的依赖问题
- 想加个功能发现处处要改
- 8 小时过去，能用的东西约等于零
01-29 晚上决定推倒重来。
问题出在哪
回头看方案文档，问题是粒度不够细。
| 问题 | 文档写了什么 | 缺了什么 |
|---|---|---|
| AI 输出 | “AI 输出语义化定义” | JSON Schema 具体长什么样？点的类型有哪些？动点怎么表示？ |
| 模块接口 | “坐标计算模块负责转换” | 输入输出类型？动点参数怎么传递？ |
| UX 流程 | “有交互模式和视频模式” | 上传状态怎么显示？失败了怎么提示？ |
AI 执行的时候只能自己脑补，脑补的结果和其他模块对不上。
确实对文档的要求理解深入些了。
第二版：把文档拆细
换了策略：不是一个文档，是一组文档。
| 文档 | 内容 | 行数 |
|---|---|---|
| 系统架构 | 总纲、模块边界、数据流 | 2060 行 |
| AI 设计 | 三个 Agent 的输入输出 JSON Schema | - |
| 基建设计 | 各模块接口定义 | - |
| UX 设计 | 布局、配色、交互流程、状态流转 | 1280 行 |
| 测试设计 | 15 个测试图片、验收标准 | - |
核心思路：把细节都定义清楚，减少 AI 脑补的空间。
比如动点定义：
{
"id": "P",
"type": "onSegment",
"from": "B",
"to": "E",
"param": "p"
}
必须指定 from（起点）、to（终点）、param（参数名），还要在 params 数组里定义对应参数。
多家 AI 交叉验证
文档拆细之后需要更多的验证确保方案稳定
用的方法是让多家 AI 互相挑错（这个思路是从刘小排老师的一篇付费文章学的）：
- Claude Code 出方案
- 把方案发给 Gemini，让它挑错
- 把方案发给 Codex，让它挑错
- 汇总问题，让 Claude Code 改
- 重复
当三家的反馈变成「建议加个注释」这种锦上添花的意见，而不是「这里有逻辑矛盾」，就可以开始写代码了。
调研：搜索词很重要
在写方案之前做了点调研。发现搜索词选对了效率差很多。
错误示范：
- 搜「AI 生成视频」「AI 动画」
- 得到：Sora、Runway、Pika（生成式视频，不是我要的）
后来的做法：
- 先搜索术语和黑话
- 得到：程序化视频（Programmatic Video）、数学可视化（Math Visualization）
用这两个词搜索，找到了一些有用的项目：
| 项目 | 来源 | 借鉴点 |
|---|---|---|
| Code2Video | NeurIPS 2025 | 三 Agent 架构 |
| Remotion | 开源 20k stars | useCurrentFrame() 纯函数设计 |
| Mediabunny | 开源 | WebCodecs 硬件加速编码 |
把调研结果喂给 AI，让它参考这些设计出方案，算是站在巨人肩膀上吧。
AI 分工
这个项目用了三家 AI，说说我的体感，仅供参考：
Claude Code
用来讨论方案、写文档、调试。长文本和推理感觉还行。
Gemini
前端设计给我惊喜，很有灵气，甚至可以考虑到UX的设计。
但不适合写正式代码。 滑块注意力是纯shit，上下文长了会漏信息，前面定义的变量后面忘了。
Codex（xhigh）
用来写核心模块。慢但稳定，第一版基本能跑。
提示词迭代
提示词需要迭代，我的办法类似机器学习的办法：
prompts/
├── versions/
│ ├── v001-chinese-baseline/
│ └── v002-english-full/
├── test-runs/
│ └── ...
└── current -> versions/v002-english-full
准备了 15 张测试图片，跑一轮记录通过率，分析失败原因，改提示词，再跑。
最后英文版 75%，中文版 72%。说实话这个通过率不高，还有很多优化空间。48小时实验时间是不太够的，目前先这样。
主要失败原因是 Coder 引用了 Understander 没定义的点。加了个检查清单后有所改善，但没根本解决。
AI 做不好的事
有些事 AI 做不好，比如 LaTeX 转义。AI 有时会混用单反斜杠和双反斜杠：
"L \in [\frac{3\sqrt{2}}{4}, \frac{\sqrt{5}}{2}]"
↑ 单反斜杠（错误）
提示词里写规则没用，AI 经常忘。
最后用正则在前端兜底：
function fixLatexEscapes(raw: string): string {
const latexCommands = ['frac', 'sqrt', 'vec', 'sin', 'cos', ...]
const pattern = new RegExp(
`(?<!\\\\)\\\\(${latexCommands.join('|')})\\b`, 'g'
)
return raw.replace(pattern, '\\\\$1')
}
没做完的事
48 小时太短，很多想做的没做：
| 想法 | 状态 |
|---|---|
| COT 输出 | 没做 |
| 外挂几何公式库 | 没做 |
| Critic Agent 审查渲染结果 | 没做 |
| 添加完整组件供AI调用 | 没做 |
MVP 先跑通，后面慢慢加吧。
小结
记录几点个人体会：
- 方案要写细 - 粒度细到 AI 没有脑补空间，不然容易翻车
- 多家 AI 交叉验证 - 对新手挺有用，能发现自己看不出来的问题
- 搜索词选对 - 专业术语搜出来的东西质量高很多
- AI 做不好的事用代码兜底 - 不要死磕提示词
最后
这是 48 小时搓出来的 MVP，很粗糙，AI 识别不太稳定，bug 肯定不少。
欢迎试用吐槽：https://mathviz3d.pages.dev/
有经验的大佬如果有建议，非常欢迎指点。
