11. 使用AI辅助产品原型设计的技巧 ——今天内部产品评审的时候,发现很多产品小伙伴还没掌握 AI 出原型的精髓。分享三个小技巧,都是我自己在用的,希望能帮你提升 AI 做产品原型的效率。
## 技巧一:别只出一个 HTML 文件
AI 生成的单一 HTML 文件,功能超过 3 个以后就臃肿难维护了——改一个小地方要在几千行里找。
标准做法:反问 AI 一句"能不能帮我拆成项目结构",把 CSS 样式和 JS 交互拆成独立文件,HTML 只放主内容。这样做有两个好处:
- 维护性好,后续修改只需要动对应文件
- 代码接近真实的前端项目结构,可以直接移交研发
如果你的原型需要接真实数据,拿到研发的接口字段后,把原型里的假字段名替换成真的,整个原型就能变成可用的 demo。
## 技巧二:把共识写成 MD 文件
不要在对话框里来回改。因为上下文一长,AI 为了提升产出效率不会读全文,只读开头然后按逻辑推理——错误就这样反复出现了。
正确做法:按产品设计的环节分步走——先出需求概要、再出详细设计、最后出整体方案。每个环节确认后固化成 MD 文件,再让 AI 基于 MD 生成原型。好处:
- 后续精确度高,修改只改对应部分
- 切换会话不丢上下文,换模型也不影响
- 多人协作时 MD 文件可以直接共享
## 技巧三:反问 AI 让它帮你优化
原型做完以后,别急着定稿。反问 AI 几句:
- 这个项目还有哪些优化空间?
- 现在有什么问题?
- 哪些东西可以提取出来做公共组件?
- 还有哪些异常流程没考虑到?
- 我们还有哪些共识遗漏?
这几句话可以调动 AI 进入深度思考,它会主动帮你找出问题并给优化方案。
## 原型做完怎么协作?
本地 HTML 文件版本控制是问题,多人协同容易漏消息、版本不一致。
公司有内部 Git 的话,找研发帮你部署一个子空间,把项目上传上去。AI 就能帮你完成部署,不需要编程基础。一人公司或允许用 GitHub 的团队,直接发 GitHub 仓库,生成可访问链接方便分享。上了 Git 之后,代码直接移交研发,字段对齐就能用。
## 额外思路:原型先行
原来做需求是先写文档再做原型。现在完全可以反过来:先和 AI 对齐要点,直接出原型,再从原型反向提取结构化的需求文档。
这样做有三个好处:效率更高、结构更完整逻辑更严谨、原型改了文档自动同步——解决