像DeepSeek这样广为人知的AI大语言模型，不仅具备出色的语义理解能力，还能生成文案和代码。许多产品经理在使用过程中也会冒出这样的想法：既然AI能写代码，能不能顺便帮忙“画”原型图呢？目前像DeepSeek、豆包等类的AI工具，虽然都能轻松生成代码，但要想直接输出可视化的原型图暂时还无法现实。不过，有一种“变相实现”的方法——AI生成HTML代码再转化为可编辑的原型图，本文就来分享一下具体操作。
如果你想让DeepSeek画出一个产品原型图，它通常给出的答案会是：“我将用文字描述+关键界面元素说明的方式为您呈现”。虽然逻辑完整，但并不是一张真正的原型图。关键在于一个小技巧：让DeepSeek生成HTML网页代码。操作步骤很简单，把产品需求告诉DeepSeek，并要求它以HTML代码的形式输出界面原型。得到代码后运行，就能生成一个可视化的原型页面。更方便的是，你还可以继续和AI对话，告诉它修改需求，它会不断调整代码。这样几乎只靠对话就能产出较高保真的原型效果：
虽然通过HTML可以看到界面，但距离产品经理日常使用的“可编辑原型”还有一定差距。要解决这个问题，可以借助一些支持HTML转原型的工具，把AI生成的HTML页面代码转为真正可编辑的原型文件。这里以DeepSeek和原型设计工具墨刀为例演示操作流程，也有其他原型设计工具支持此功能，可以自由选择哦：
1. DeepSeek生成HTML：将需求告诉DeepSeek让其生成HTML网页代码，例如“请你设计一个电商管理后台首页原型图，需要XXX，生成HTML代码”，运行后查看是否符合需求，如需调整继续对话直至满意，然后将HTML代码一键复制；
2. 打开墨刀HTML转原型：在原型编辑界面左侧菜单栏中，“工具”中找到“HTML转原型”功能，粘贴刚才复制的HTML代码；
3. 转为可编辑原型图：HTML代码导入成功后，在画布中便出现了完整的原型图，并且每个组件元素都是支持编辑的，这时可以通过原型编辑区的各类功能，替换组件或者修改元素、布局等等。
这是DeepSeek生成的APP原型图，三个APP页面平铺，复制HTML代码后导入原型工具中，即可对页面自由编辑调整。
这是DeepSeek生成的网页原型图，整体结构和布局都十分出色，导入原型设计工具中也可以编辑替换一些细节。
这是DeepSeek生成的数据可视化大屏，针对于物业管理系统设计的可视化大屏，图表内容可以替换成原型设计工具中的图表，导入真实数据。
这些原型虽然是AI生成的仍有一些瑕疵，但是逻辑性和整体结构框架都是相对完整的，足以作为原型参考或初稿，后续通过人工编辑调整，形成一份完整的原型图。
如果你也想用DeepSeek画原型，或者其他AI工具来制作产品原型，可以尝试这样的工具组合，通过“HTML转原型”这个小技巧实现。不过要注意，AI工具生成效果与人工制作还是有一定差距的，可以合理运用工具作为辅助，不要本末倒置过度依赖哦。