V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

周末的时候尝试不写一行代码开发一个 Nano Banana Pro 图片生成工具，一方面是进一步体验 Vibe Coding IDE 的能力，另一方面，确实是觉得现在的 Nano Banana Pro 图片生成工具不好用。

实验结果已经上线了，希望这篇文章以及这个小工具都能对你有用：https://www.poshcam.app/

1. 一定要知道 AI 在干什么

如果这个产品不是一个一次性的脚本，你一定要对整体的方案是有所把控，知道 AI 在干什么。

不要把 AI 写的代码当成黑盒，不然会非常痛苦（至少目前是这样的），可以不细看每一行代码，但是一定要知道这一段代码在做什么事情。

不然的话，会遭遇按下葫芦起来瓢的尴尬境地，以至于难以继续修复问题和添加新的功能。

如果要对项目整体有所把控，让 AI 从写文档开始，是一个不错的选择，尤其是一个新的项目。

2. 让 AI 编写产品设计文档

写文档必然是枯燥的，但是让 AI 来写这个事情就变得简单很多了，而且只需要你跟 AI 对齐就可以了，不用考虑其他角色。

让 AI 编写需求文档只需要告诉用户我们想要实现的核心功能，例如在 PoshCam 中：

首页，可以免登录访问图片生成器
图片库页面，可以管理自己生成的图片
价格页面，供用户购买 Credits
个人详情页面，查看自己的个人信息、剩余 Credtis 对于一些非常细节的想法，可以通过比较粗略的描述生成的初版后，再给 AI 补充，说得太详细，很有可能会限制 AI 的想象力。

另外，AI 在写产品需求文档的时候，习惯直接在文档中编写示例代码，其实完全没有必要，可以直接在每个调整产品设计文档的 Thread 中告诉 AI ，或者直接写到 Claude.md 中。

3. 让 AI 编写技术方案文档

产品设计方案基本确定后，就可以让 AI 基于产品设计文档进行技术方案确定。

作为一个有开发经验的人，在架构设计、技术方案选型方面，一定会有自己的偏好，作为一个小项目，肯定不希望 AI 在实现的过程中过度设计（例如直接假设我在 AWS 上有全套的基础设施）同时也不希望他设计不足，例如生图片肯定还是个异步任务，就不能设计成同步的，基本的异步任务处理逻辑还是要有的。

可以告诉 AI 期望使用的框架和工具，例如再 PoshCam 中，有些我是明确要求的：nextjs ，tailwindcss ，antd ，supbase ，stripe 。至于异步任务的实现，我是不确定的，所以我会让 AI 帮我进行选型，我只告诉 AI ，我希望通过一些小型的 Saas 平台来低成本低实现，结果他给我结合我选的 nextjs ，推荐了 Inngest ，我还是非常不错的。

另外，需要补充一点，数据库的设计往往会在开发过程中频繁地修改，所以要告诉 AI 在调整数据库结构的时候，通过一个新的 SQL 文件来进行更新，而不是直接修改初始的 schema 文件，这样会让迭代过程更顺畅一些。

4. 设定基本的 UI 风格

我的感受是，当技术方案确定后，后端的业务逻辑代码基本上一次性就能实现得比较不错，有些地方代码风格可能糙了点，但又不是不能用，而且别人也看不见。

最关键的是前端的代码，不管是 UI 风格，还是交互逻辑的细节，毕竟直接与用户体验相关，不是能用就可以的，一定要做到好用。所以说，经验丰富的前端程序员相比于业务后端程序员，更不容易被 AI 所取代。

言归正传，在让 AI 编写前端代码的过程中，我一开始总是使用 “时尚”、“高级” 等词汇，希望不要限制 AI 的想象力，结果 AI 基本上会把这些词映射成：紫色 + 渐变风格 + 非常离谱的阴影。所以，要想有高级一点的的 UI 风格，可以直接在 Claude.md 中说明白：不要使用紫色和渐变效果，禁止使用荧光感的阴影效果。

5. 最后

以上，写得有点仓促，希望能对大家有所帮助，也欢迎大家体验 https://poshcam.app 。对于这个小东西，技术方面，如果大家还有什么细节想要了解的，欢迎评论区留言。产品方面，我还有一些小想法，例如把每一个模板做成一个可以独立访问的 mini app 页面，关于这方面大家有什么好的想法，也欢迎跟我交流。

如果大家确实觉得免费的积分不足以好好体验，可以评论留下你的账号邮箱，我可以免费再送一点。

Vibe Coding

产品设计

12 条回复 • 2025-12-04 23:25:14 +08:00