产品原型不用从零画 -GPT 出图，Gemini 生成 HTML
很多小白做产品原型，第一步就容易卡住：
不会画 UI、不懂交互、不知道怎么把脑子里的想法变成一个可以看的页面。
最近我在重构一个 HarmonyOS 应用「朋友圈文案」时，刚好试了一套比较省事的流程：先让 GPT 生成原型图，再让 Gemini 读取图片生成 HTML，最后通过对话继续打磨。
这套方法对小白比较友好，因为你不需要一开始就会设计，也不需要马上写代码。先把一个能看的版本跑出来，再慢慢优化。
为什么我先从原型开始
这个项目基本由我自己来把控，而且我也有企业资质，所以产品方向和功能取舍都可以自己决定。
我的想法很简单：先按照 MVP 的思路来做。
也就是先把最核心的功能做出来，不一开始就追求大而全。后面根据实际体验和反馈，再决定要不要继续投入资源。
所以在正式开发前，我先做了一版原型。原型的价值不是为了好看，而是为了尽快回答几个问题：
- 这个产品的核心页面长什么样？
- 用户第一眼能不能看懂？
- 功能入口是否清晰？
- 后面要不要继续做下去？
以前做这一步，可能需要会 Figma、懂一点产品设计，还要掌握不少 UI 设计术语。但现在借助 GPT 和 Gemini，门槛确实低了很多。
我的整体流程
这次我大概是按 3 步 来做的：
- 用 GPT 直接生成产品原型图
- 用 Gemini 读取原型图，并生成 HTML 页面
- 继续和 Gemini 对话，逐步修改页面细节
这个过程其实也能看出 AI 工具使用方式的变化：
从以前强调「提示词工程」，到后来强调「上下文工程」，再到现在更像是「驾驭工程」。
过去我们需要把需求描述得非常专业，AI 才可能给出一个 80 分的结果。现在模型能力上来以后，只要方向说清楚，再配合多轮反馈，小白也能比较快地做出一个可看的原型。
第一步：用 GPT 生成原型图
我先让 GPT 根据产品方向生成一版原型图。
这里的关键不是把提示词写得多复杂，而是把 产品背景、核心功能和页面范围 说清楚。
GPT 生成出来的原型图大概能达到 90% 的初稿完成度。它未必完全符合最终需求，但已经足够拿来讨论和继续优化。
第二步：用 Gemini 生成 HTML 版本
有了原型图以后，我再把图片丢给 Gemini，让它读取页面结构，并生成 HTML 版本。
这个步骤很有用，因为图片只能看，HTML 才能真正预览和修改。
这样生成出来以后，就可以得到一个能在浏览器里打开的原型页面。
第三步：继续对话打磨细节
第一版 HTML 出来后，一般不会马上完美。
但这没关系，因为这时候我们已经有了一个可以修改的基础版本。接下来要做的，就是继续和 Gemini 对话，把不满意的地方一点点改掉。
这样来回几轮以后，原型就会越来越接近你想要的效果。
最后我得到的 HTML 页面 大概是这样的：
这套方法适合谁
我觉得这套流程特别适合这几类人：
- 有产品想法，但不会画原型的人
- 想做独立产品，但前期不想投入太多设计成本的人
- 想快速验证一个功能是否值得做的人
- 对 AI 工具感兴趣，想把它用到真实项目里的人
它最大的价值不是让你一步到位做出完美设计，而是让你更快得到一个「能看的版本」。
很多时候，产品想法一直停留在脑子里，就会越来越虚。只要能先变成页面，你就能更具体地判断：这个功能对不对，页面顺不顺，用户能不能理解。
小结
如果你也有一个产品想法，但一直卡在原型阶段，可以先别急着学 Figma，也别急着找设计师。
可以先试试这个流程：
- 用 GPT 生成一版原型图
- 用 Gemini 把原型图转成 HTML
- 继续通过对话修改细节
对小白来说，最重要的不是第一版做得多完美，而是先让想法变成一个看得见、能讨论、能继续修改的东西。
先跑出来，再慢慢打磨。
