开源 AI 画布：我的 Vibecoding 实践历程
笔者：小槐花
开发故事：
1.Idea 来源：Datawhale之前有篇教如何用Nano banana做科研论文配图的文章
https://mp.weixin.qq.com/s/IG8cITKAESi-vomyQiobZg
当时文章里给了详细步骤和对应提示词
但我在想能不能让我一次配置，反复使用——那么就是工作流了于是我去尝试了一些工作流工具，在其中一个工作流产品实现了我的想法，但受限于其会员制及无法自定义API，加之其他成熟工作流软件文件过大（有些需要一两G)，劝退了我
后面有刷到了一个开源版某个影视创作工具的（我了解到其是用Gemini3开发的，然后我就动了这方面心思）
2.初步探索和群里请教得指点：
后面那天（12.10周三晚上）就开始使用Gemini3来开发，一开始我沿用了原先做简单项目时一步到位的习惯（比如AI做贪吃蛇、俄罗斯方块），试图让AI一次性实现所有复杂功能，但这种一步交付的思维导致了逻辑混乱（第一版），一开始我还比较开心，以为可以逐步完善，结果那天折腾到了次日凌晨四点（八点多还有早八要上），得到的结果越来越乱，我意识到不对劲
12.11号（周四）
中午我在WhaleAI应用发烧友交流群提问：
[Image]
后面得到了答疑，告诉我要分步迭代并且做记录和版本保存以及把功能分开来做
当晚我调整了策略：优先使用 Gemini 3 将需求提炼为详尽的开发文档，而非直接生成代码。再把这些详细的分步开发文档（分版本）和对应提示词喂给Gemini3，效果立竿见影，因为分步和做了版本记录，很容易检查单个功能是否实现，如果没实现，也方便回溯版本（因为受影响不大）。 我开始用这种方式，一次只聚焦于一个模块的开发，比如先实现基础的界面布局，再实现图片上传功能，接着是提示词的输入和管理模块。
3.Gemini API协议格式千层套路
接上面，更改了工作方式后，我逐渐增加了不少功能，实现了OpenAI 格式的文本和图片生成api调用，于是我开始尝试增加nanobanana生图的api，结果发现不行（后面我了解到，OpenAI 的 API比较兼容，许多api平台调用也是兼容了这个格式协议，但是Gemini它不一样！首先是它的url就写了模型（唯一指向性），然后官方和中转站的格式可能也有不一样于是折腾到了12.14下午（我把所有报错发给了一个api平台的技术），它告诉我它家gemini生图是base64格式的并给了我请求命令示例，于是和ai聊了几轮，才搞了一个比较兼容的方案
4.设计理念
①为啥纯前端和html？因为年初DeepSeek爆火后，很多人在追求本地部署，但是发现自己硬件不够。这个硬件不足对学生更加难受，因为大部分学生不可能为了本地部署就去升级自己的电脑，然后只能转向一些在线AI 平台，或者使用一些api自己配置到ai本地聊天软件里，比如cherry studio，所以我觉得api比较友好，
然后自己搓这个还有一点也是因为（我攒了不少平台api额度，然后现在用画布ai工作流比较多，所以也希望有个可以物尽其用的软件来使用上
选择纯前端也是为了让大家能‘即开即用’再者，纯前端的实现也意味着部署简单。目前项目已开源，大家觉得下一个版本最该加入什么功能？欢迎在评论区给我留言！