Codex 五分钟出高保真产品原型的5个技巧

5分钟出产品原型​

初始提示词大概是这样：​

​

代码块​

Plain Text

请根据我给出的项目核心需求​

生成一款心脏三维生成编辑软件的原型图​

包含DICOM导入、3D重建、模型查看、标注编辑、数据导出这些核心页面​

标注清楚页面跳转逻辑和核心功能按钮。​

​

不到5分钟，Codex 生成了一份完整的原型图——而且是ASCII格式的静态图，包含9个界面：主界面、DICOM导入对话框、元数据预览、重建进度、点标注操作、线标注操作、标注列表管理、导出对话框、空白状态。​

​

​

​

​

33%

​

​

​

​

33%

​

​

​

​

34%

​

​

​

📌

但仔细核对之后，问题就来了：​

有两个界面“凭空出现”——DICOM导入完成后，应该跳到哪个页面？原型里没说明。标注界面是从哪进去的？也找不到入口。​

功能按钮重复——标注管理面板里既有“编辑”按钮，右侧详情面板里还有一个“编辑标注”按钮，干的是同一件事，放两处干嘛？​

按钮名称不统一——有时候叫“确认”，有时候叫“保存”，有时候又叫“完成”，同一个操作三种说法。​

页面状态没讲清楚——“已重建”和“未重建”状态怎么切换？用户导入数据后系统处在什么状态？这些在原型里都是模糊的。​

​

​

AI生成的东西，真不能直接复用。它能在短时间内给你一个”看起来完整”的框架，但细节和逻辑漏洞，还得人工来补。​

​

​

第一轮优化：让它改成可交互的HTML​

ASCII图虽然能看，但没法演示。我又提了个需求：​

​

代码块​

Plain Text

请生成一个可以在浏览器中直接运行的HTML原型​

支持页面切换和基本的交互操作​

​

Codex 很快给出了一个单文件HTML，页面能切换了，还能模拟拖拽导入DICOM文件，重建进度也有动画效果。​

问题1：标注列表溢出​

当我添加超过5个标注时，列表直接超出了边界，把3D视图给遮住了。​

我给Codex的反馈是：​

​

代码块​

Plain Text

标注列表加个滚动条​

不然标注多了会溢出​

​

​

​

它加了个overflow-y:auto，解决了。​

问题2：切片预览显示代码​

DICOM预览区域的切片网格，本应该显示16张切片的缩略图，结果直接显示了JavaScript模板代码。​

这个修复起来也简单：​

​

代码块​

Plain Text

切片预览不要用JS动态生成​

直接写死16个静态的div就行​

​

AI不会主动考虑边界情况。标注列表会溢出、JS代码在某些环境不执行——这些事它不会提前想到，得你试出来、它再改。​

​

​

第一版交互式原型​

第二轮优化：增加数据管理功能​

第一版交互式原型能看了，但缺了数据管理这块。我提了新需求：​

​

代码块​

Plain Text

当前原型缺少数据管理功能​

需要增加DICOM数据库和心脏模型库两个页面​

支持搜索、重建、删除这些操作。​

​

Claude生成了v2版本，加了两个新页面：​

-DICOM数据库——显示所有导入的DICOM数据，可以搜索、重建、删除​

-心脏模型库——显示所有生成的模型，可以搜索、标注、导出、删除​

​

​

增加了数据库和模型库的原型图​

这一版看起来已经挺像样了，但我仔细核对后又发现几个问题：​

重建完成没有自动跳转——用户点“生成3D模型”，进度条走完了，但还停留在主界面，得手动切换到模型库才能看到结果。 标注编辑入口不统一——左侧标注列表项有​

按钮，右侧详情面板里也有一个“编辑标注”按钮，功能完全重复。 导出选项冗余——有个“模型报告”导出功能，实际场景中几乎没人用。​

我继续反馈给Claude：​

​

代码块​

Plain Text

​

第三轮优化：一次失败的布局重构​

到这里，原型已经能用了。但我有点”贪心”，想着让界面更现代化一点，就提了个需求：​

​

代码块​

Plain Text

重新设计一下布局，采用更现代的卡片式设计​

​

这一版彻底翻车了。​

​

​

翻车的原型图​

Claude生成的v3版本，把整个布局结构都推倒重来了——功能区域位置错乱，3D查看区被压缩到角落，导航层级也乱了。​

我当时的反馈原话是：​

​

代码块​

Plain Text

​

这个教训我记住了：对AI提”优化”需求时，一定要说清楚”保持什么不变，只改什么”。你说”优化布局”，它理解成”推倒重来”，结果就是改坏了。​

第四轮优化：回到v2基础上精细化打磨​

v3废弃，回到v2的基础上继续改。这一轮我提的需求就非常具体了：​

​

代码块​

Plain Text

“在v2版本的基础上，做以下优化：​

1.重建完成后自动跳转到模型库​

2.所有子页面增加’返回主界面’按钮​

3.标注列表项增加内联的编辑和删除按钮​

4.删除冗余的’模型报告’导出选项​

5.统一标注编辑入口，只在左侧列表保留和️按钮”​

​

这一轮改完，终于得到了v4版本——也就是最终逻辑通顺的原型图。​

​

​

V4版原型图​

​

📄

最终版本的功能清单：​

•

数据导入模块：拖拽导入、点击选择、DICOM元数据读取、切片预览​

•

患者/模型管理：患者列表、DICOM数据库、模型库、状态标识​

•

3D重建模块：一键生成、进度条动画、5步流程显示、预计时间、完成自动跳转​

•

3D查看模块：模型显示、旋转缩放平移、6个视角快捷按钮​

•

标注编辑模块：点/线/区域标注、标注列表、编辑删除、自动保存​

•

数据导出模块：STL模型()导出、JSON标注导出​

•

导航模块：顶部导航栏、返回主界面按钮、页面状态切换​

​

经过4轮对话、近2个小时的反复调整，这个原型基本能用了。​

效率对比：快了，但还得盯着​

我简单算了一笔账：​

如果按传统方式，用Axure画这一套原型，少说也要10小时（还不包括反复修改的时间）。用Claude的话，从0到定稿大概用了1.5小时，效率提升大概是10-15倍。​

但这个”效率提升”有个前提：你得花时间去审查、去挑问题、去反馈修改。AI不会一次性给你完美答案，它像个干得挺快但经验不足的实习生，你得带、得教、得盯着。​

几点建议（给想尝试的产品经理）​

聊到这里，结合我这次测试，给大家几个具体的建议：​

1.别指望一次成型​

我第一次拿到原型时，还以为能直接用了。仔细一核对，五六个问题。所以别偷懒，AI生成的内容一定要自己过一遍，重点核对跳转逻辑、状态变化、边界情况。​

2.提需求要具体，别模糊​

“优化一下布局”这种话，AI理解不了。要说”在v2基础上，把标注编辑按钮统一放到左侧列表，右侧删掉”，越具体越好。​

3.保留历史版本​

我这次v3版本改坏了，幸好v2还在，能回退。每次修改前让AI帮你备份一下，或者直接自己存个档。​

4.专业内容自己补​

像DICOM兼容性、与模拟系统对接这些专业需求，Claude的理解很浅，得你自己补充。它擅长的是”快速实现”，不是”深度思考”。​

5.关注跳转逻辑​

这是我本次测试中发现的最容易出问题的地方——AI生成的原型，界面跳转和状态变化最容易漏。每一轮改完，自己把流程走一遍，看看有没有断点。​

九、最后​

这次用Claude生成原型图的体验，我的总结是：​

它是个高效的”初级原型设计师”——出活快、修改方便，但需要有人带、有人审查。​

它不能完全替代产品经理的思考，但可以把我们从重复的绘图工作中解放出来，把更多精力放在需求分析、逻辑梳理和用户体验上。​

你负责想清楚”做什么”和”为什么做”，Claude负责快速实现”做成什么样”，你负责审查”哪里有问题”，它再负责”修改优化”——这样的协作模式，可能是当前阶段AI辅助产品工作的最佳实践。​