Vibe Coding 48小时：做几何可视化的踩坑记录

在过去的48小时内，我尝试使用Claude Code、Gemini和Codex构建了一个几何可视化的工具。这个工具的主要功能是上传高中几何题图片，通过AI识别后生成可交互的3D模型，并能自动生成带有字幕的讲解动画，支持导出为MP4格式。技术栈主要包括React、Three.js和WebCodecs。虽然最终成品略显粗糙，但在开发过程中遇到了不少挑战和问题，因此决定记录下来，希望能为同样在探索AI辅助开发的朋友们提供一些参考价值。

在项目初期，我草拟了一份长达1200多行的总方案文档，涵盖了项目目标、AI架构、前端布局和技术栈选型等内容，但实际操作中发现很多细节无法准确传达给AI，导致8小时的工作几乎一无所获。后来我调整了策略，将文档细分为多个部分，详细定义了每个元素的属性和关系，从而减少了AI的猜测空间。

为了确保方案的稳定性，我采用了多家AI交叉验证的方法，让Claude Code、Gemini和Codex分别对方案进行评估和修正。当三家的反馈逐渐转变为建议添加注释等细微调整时，我判断方案已经足够成熟，可以开始编写代码了。

在调研阶段，我发现选择正确的搜索词对效率有极大的影响。通过搜索专业术语和黑话，我找到了一些相关的项目，并将这些信息提供给AI作为参考，使其能够站在巨人的肩膀上设计方案。

在AI分工方面，Claude Code负责讨论方案、编写文档和调试；Gemini在前端设计方面表现出色，但在编写正式代码时表现不佳；Codex则用于编写核心模块，虽然速度较慢，但稳定性高。

在提示词的迭代过程中，我采用了类似机器学习的方法，通过多次测试和调整来提高AI的识别准确率。虽然最终中文版的通过率只有72%，但相比英文版的75%已经有所改善。

尽管AI在某些方面表现不佳，如LaTeX转义问题，但我通过正则表达式在前端进行了兜底处理。此外，由于时间限制，很多功能未能实现，未来将继续完善。

通过这次项目，我总结了以下几点体会：方案要写细，多家AI交叉验证，选择正确的搜索词，以及对于AI无法处理的问题使用代码兜底。希望这些经验能够帮助到其他探索AI辅助开发的朋友们。