前言

这两周我在几个产品群里基本天天能看到Claude Design，有人拿它做原型，有人拿来出PPT，讨论频率高了不少。不光是Claude，这种AI大模型，它们所谓“生成原型”，其实都是代码生成。你给它一句话，它生成产品界面，甚至带有交互逻辑，背后是一套代码在运行。

这类AI大模型用起来确实顺手，可有一个很辣手的问题。产品经理实际工作里，很少是“一次画完就结束”的，哪个不是天天改需求？还得跟开发、设计、运营对齐。所以方便修改编辑的原型图才是刚需，而AI大模型生成的页面，编辑起来有些局限。虽然有的平台带一些简单的修改功能，但它背后毕竟不是专业的原型设计工具，会有一些缺失。

要想真正把它落到工作流里，需要把代码转成可以编辑的原型。说直白点，我们需要一种方式把大模型生成的原型导入到专业原型设计工具里。尝试了一圈，发现目前最靠谱的解法是：用主流AI大模型写代码，再通过「HTML转原型」导入到专业的原型工具里还原。

我们就来实测一下AI生成代码转原型的整个跑通链路，看看到底好不好用。

 

实操流程：从AI生成代码到可编辑原型

第一步：找个大模型提需求

这里其实不用纠结，目前主流的大模型，Claude 3.5、谷歌的Gemini，或者是咱们国内最近爆火的DeepSeek等，写前端代码的能力都已经完全够用了。非要说区别：Claude写结构比较稳，Gemini在视觉上会更“像UI一点”，DeepSeek的话中文理解更顺，提示词不用太绕。

这里我用Gemini 3.1 Pro做个测试，Claude也可以，需求不要太复杂，也别太简单。

我在对话框输入指令：

“你是一个资深产品经理。请帮我写一个SaaS后台的数据看板页面代码，包含左侧导航栏、顶部的用户头像，以及中间的三个数据卡片和一个折线图占位。要求使用单文件HTML，内联CSS或者引入Tailwind，样式要现代、简约。”

基本十几秒左右，完整代码就出来了。

 

第二步：把HTML代码拽出来

AI大模型给出的代码，通常自带一个运行的按钮，可以点击运行预览一下原型生成效果。这里运行后，可以看到AI生成的SaaS后台数据看板页面，再结构、内容和布局上都还不错。那么接下来，我们直接把HTML代码复制下来。

如果你懂点代码，还能继续发布一些指令调整界面。调整到比较满意的程度后，再导出代码，会省去后期的很多事儿。

 

第三步：导入原型工具，见证HTML转可编辑原型

但代码只是第一步，接下来才是关键：怎么把它变成能拖拽编辑的原型。我目前手头用的是墨刀，他们的AI功能里有个导入代码转原型的口子。这里就以它为例测一下。

打开AI界面或者新建项目文件，找到对应的导入入口（HTML转原型）。接着把你刚才从Gemini复制的代码直接粘贴进去，点击生成。

 

大概等个几秒钟进度条。刚才那堆干巴巴的代码，在画布上直接渲染成了带图层、带组件界面的原型。这时就可以在原型画布中继续手动编辑，调整原型图，和原有的一系列产品原型界面保持一致规范了。

实测下来，用Gemini或Claude写HTML，再通过墨刀这类“HTML转原型”生成可编辑图层，是目前最快能把AI代码变成可拖拽原型的路径。

HTML转原型的客观优缺点分析

说实话，第一次跑通这套流程的时候，还是挺有成就感的。但作为实测，咱得客观说说它的好用和不好用。

先说好用在哪：还原度确实高，而且是真正的“可编辑原型”。页面上的每个组件和元素都是可以编辑调整的，比如左侧的导航栏是独立的矩形图层、文字可以直接修改字号和文案等等。当AI大模型帮你完成了最枯燥的搭框架的工作，你就可以随时在专业的工具里去微调细节，加交互，做页面连线。这是真正在工作里能用的东西，非常方便。

缺点也有，毕竟是跨维度的转换，不是100%完美。在实测中我也发现了几个小毛病：

• 复杂动画和非常规的CSS属性会丢失。比如AI如果写了一个非常炫酷的悬浮渐变特效，转进原型工具后，大概率就只剩下一个静态的色块了，毕竟原型工具不是真实的浏览器引擎。
• 图层嵌套偶尔会有冗余。AI为了实现某种布局（比如Flex），可能会多写几层div，转成原型后，你会发现为了挪动一个icon，可能要双击点开好几个编组。稍微有点烦，需要手动解组整理一下。
• 灵动图表变为占位图片。比如B端后台会有一些折线图、饼图等图表，转成可编辑原型后会发现它们变成了图片，需要重新换成可编辑的图表组件，这一点是目前AI还未能解决的问题。

总结

别指望AI现在就能给你一套直接交付开发的原型——技术还没到那一步。而且说实话，真到了那天，咱们产品经理第一个下岗。

如果你转变思路，利用“AI大模型生成代码” + “HTML转原型”的功能，把它作为你画原型的起点，再自己手动拖拽修修补补，半小时搞定一个原本要画半天的活儿，还是很香的。