产品原型不用从零画 - GPT 出图，Gemini 生成 HTML 原型模板
很多人在进行产品原型设计时，第一步就容易陷入停滞：
不懂界面设计、不熟悉交互逻辑、不知道如何将脑海中的想法转化为一个可预览的页面。
最近我在重构一款 HarmonyOS 应用「朋友圈文案」时，恰好总结出一套高效的原型制作流程：先让 GPT 生成产品原型图，再借助 Gemini 识别图片输出 HTML 代码，最后通过对话不断迭代细节。
为什么先做产品原型
这个项目主要由我自己把控，且具备企业资质，因此产品方向与功能优先级都能自主决策。
从实践经验来看，这个思路其实很简单：遵循 MVP（最小可行性产品）原则。也就是优先实现最核心的功能，不必一开始就追求大而全。后续根据真实使用反馈，再决定是否追加资源。
所以在正式开发之前，我们先输出一版产品原型。原型的真正价值不在于外观多精致，而在于它能快速回答几个关键问题：
- 该产品的核心页面结构是什么样的？
- 用户首次进入能否快速理解功能？
- 操作入口是否直观清晰？
- 这个方向是否值得继续投入？
过去完成这一步，通常需要熟练使用 Figma、具备产品设计基础，以及掌握不少 UI 专业术语。但如今借助 GPT 和 Gemini，入门门槛确实大幅降低。
整体流程概览
这次主要分为三个步骤：
- 用 GPT 直接生成产品原型图
- 用 Gemini 读取原型图并转化为可交互的 HTML 页面
- 继续与 Gemini 对话，逐步调整页面布局与交互细节
这个流程也反映出 AI 工具使用方式的演变：从早期强调“提示词工程”，到后来重视“上下文工程”，再到现在的“驾驭工程”。
过去需要将需求描述得非常专业，AI 才有可能输出接近 80 分的结果。如今模型能力大幅提升后，只要把方向说清楚，再通过多轮反馈，即使是新手也能较快制作出一个可用的原型。
第一步：用 GPT 生成原型图
首先让 GPT 根据产品方向输出一版原型图。关键不在于把提示词写得多复杂，而是清晰交代产品背景、核心功能以及页面范围。
GPT 生成的图大约能达到 90% 的初稿完成度。它未必完全贴合最终需求，但足以作为讨论和优化的起点。
第二步：用 Gemini 生成 HTML 版本
有了原型图之后，将图片提交给 Gemini，让它解析页面结构并输出对应的 HTML 代码。这一步非常实用，因为静态图片无法操作，而 HTML 版本才能真正在浏览器中预览并修改。
生成后，你就能得到一个可直接在浏览器中打开的原型页面。
第三步：继续对话打磨细节
第一版 HTML 通常不会一蹴而就。不过这没关系，因为我们已经拥有一个可修改的基础版本。接下来只需持续与 Gemini 对话，将不满意之处逐一优化。
经过多轮迭代，原型会越来越接近你预期的效果。
最终得到的 HTML 页面效果大致如下：
这套方法适合哪些人
该流程特别适合以下人群：
- 有产品创意但缺乏原型设计经验的人
- 想做独立产品但前期不愿投入过多设计成本的人
- 想快速验证某个功能是否值得开发的人
- 对 AI 工具感兴趣，并希望将其应用到真实项目中的人
它最大的价值并非让你一步到位做出完美设计，而是让你更快获得一个“可看的版本”。很多时候，产品想法一直停留在脑海中会逐渐模糊。只要先转化为页面，你就能更具体地判断：这个功能是否合理，页面布局是否顺畅，用户是否能够理解。
小结
如果你也有一个产品想法，却一直卡在原型阶段，不妨先别急着学 Figma，也别急着找设计师。可以尝试这套流程：
- 用 GPT 生成一版产品原型图
- 用 Gemini 将原型图转换为 HTML 页面
- 继续通过对话修改细节，逐步完善
先跑出可预览的版本，再慢慢打磨优化。
