实战：10分钟 Claude 5个直出高保真原型的skills

画原型、写PRD，一个功能流程要想完整，少说也要画个五六张原型页面，在Axure里拖控件、对齐、调交互，半天时间就没了。把需求告诉Claude，让它用自然语言交互生成原型图。​

​

​

先出大致原稿​

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

​

代码块​

Plain Text

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

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

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

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

​

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

​

📌

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

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

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

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

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

缺少数据管理概念——导入的数据存在哪？如果我有10个患者，怎么管理？原型里完全没体现。​

​

它能在短时间内给你一个”看起来完整”的框架，但细节和逻辑漏洞，还得人工来补。​

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

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

​

代码块​

Plain Text

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

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

​

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

问题1：标注列表溢出​

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

​

代码块​

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

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

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

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

​

​

第三轮优化：在v2基础上精细化打磨​

在v2的基础上继续改：​

​

代码块​

Plain Text

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

​

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

​

​

V3版原型图​

​

📄

最终版本的功能清单：​

•

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

•

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

•

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

•

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

•

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

•

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

•

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

​

​

效率对比：​

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

​

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

​

​

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

1.别指望一次成型​

AI生成的内容一定要自己过一遍，重点核对跳转逻辑、状态变化、边界情况。​

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

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

3.保留历史版本​

每次修改前让AI帮你备份一下，或者直接自己存个档。​

4.专业内容自己补​

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

5.关注跳转逻辑​

AI生成的原型，界面跳转和状态变化最容易漏。每一轮改完，自己把流程走一遍，看看有没有断点。​

​

说在最后​

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

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

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