Claude 作为AI原型设计助手，在心脏三维编辑软件项目中展现了惊人的效率——10分钟生成完整原型框架，但同时也暴露了逻辑漏洞和设计冗余。本文通过4轮真实迭代记录，揭示AI辅助设计中「跳转逻辑缺失」「功能重复」「边界情况忽视」三大典型问题，并给出「需求具体化」「版本控制」「专业补充」等实操建议，为产品经理提供人机协作的新范式。

一、为什么要试Claude？

画原型、写PRD这套流程，做产品经理这几年来，每次都要反复折腾。一个功能流程要想完整，少说也要画个五六张原型页面，在Axure里拖控件、对齐、调交互，半天时间就没了。

一直听说Claude的能力非常强，生成原型图也完全可以cover，抱着”能省点时间是点时间”的想法，我决定试一把。

这次测试的项目是一款心脏三维生成编辑软件——主要给医学院师生用的，把心脏CT的DICOM数据重建为3D模型，还能做标注、测量和导出。听起来有点专业，其实核心功能不算复杂。

我的想法很简单：把需求告诉Claude，让它用自然语言交互生成原型图，我看看能不能直接用，或者至少要改多少。

下面是完整的测试过程，有惊喜，也有坑，全部真实记录。

二、第一次交互：10分钟出原型，但问题不少

我给的初始提示词大概是这样：

“请根据我给出的项目核心需求，生成一款心脏三维生成编辑软件的原型图，包含DICOM导入、3D重建、模型查看、标注编辑、数据导出这些核心页面，标注清楚页面跳转逻辑和核心功能按钮。”

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

第一眼的感觉：挺快，结构也完整。

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

1. 有两个界面“凭空出现”——DICOM导入完成后，应该跳到哪个页面？原型里没说明。标注界面是从哪进去的？也找不到入口。
2. 功能按钮重复——标注管理面板里既有“编辑”按钮，右侧详情面板里还有一个“编辑标注”按钮，干的是同一件事，放两处干嘛？
3. 按钮名称不统一——有时候叫“确认”，有时候叫“保存”，有时候又叫“完成”，同一个操作三种说法。
4. 页面状态没讲清楚——“已重建”和“未重建”状态怎么切换？用户导入数据后系统处在什么状态？这些在原型里都是模糊的。
5. 缺少数据管理概念——导入的数据存在哪？如果我有10个患者，怎么管理？原型里完全没体现。

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

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

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

“请生成一个可以在浏览器中直接运行的HTML原型，支持页面切换和基本的交互操作。”

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

但这一版又冒出两个新问题：

问题1：标注列表溢出

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

我给Claude的反馈是：

“标注列表加个滚动条，不然标注多了会溢出。”

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

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

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

这个修复起来也简单：

“切片预览不要用JS动态生成，直接写死16个静态的div就行。”

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

第一版交互式原型

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

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

“当前原型缺少数据管理功能，需要增加DICOM数据库和心脏模型库两个页面，支持搜索、重建、删除这些操作。”

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

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

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

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

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

1. 重建完成没有自动跳转——用户点“生成3D模型”，进度条走完了，但还停留在主界面，得手动切换到模型库才能看到结果。
2. 标注编辑入口不统一——左侧标注列表项有✏️按钮，右侧详情面板里也有一个“编辑标注”按钮，功能完全重复。
3. 导出选项冗余——有个“模型报告”导出功能，实际场景中几乎没人用。

我继续反馈给Claude：

“重建完成后自动跳转到模型库，不然用户还得手动切换。”

“标注编辑入口统一一下，左侧列表里有了，右侧就别放了。”

“导出选项删掉’模型报告’，只保留STL和JSON两种就行。”

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

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

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

这一版彻底翻车了。

翻车的原型图

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

我当时的反馈原话是：

“当前这个原型图有非常大的问题！各个功能区全部错位了，完全没法正常浏览，比上一个版本差多了，请在上一个版本的基础上重新修改。”

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

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

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

“在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，我后续还打算试一个组合玩法：

先用ChatGPT规划需求文档和原型图提示词，再用Claude生成原型图。

思路是：ChatGPT在需求分析和结构化表达上可能更强，让它先把需求拆细、把提示词写好；Claude在代码生成和原型实现上表现不错，让它负责落地。看看这种方式能不能减少AI生成的逻辑和细节问题。

如果有进展，我再单独写一篇文章分享。

十、最后说两句

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

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

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

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