引言

倘若你曾使用过墨刀AI Agent，很大概率已然知晓其定位，并非是具备单一功能的工具，而是围绕产品经理工作流的智能体助手，它能够协助我们去生成原型图，完成调研报告，制作PRD文档等任务，甚至于还能够为你进行方案评审。

然而，绝大多数人于日常工作里使用频率最为多的，则是AI生成原型图此项能力，它能够直接为你在绘制原型图方面节省诸多时间，特别在你手头已然具备参考图或者草图之际。

比如，你有没有遇到过下面这几种情况：

处于这般时刻，众人的内心想法铁定是这个样子的：“要是这张图片能够直接转变成为一个能够编辑的原型图，那就会省事许多啦”。今儿个就来谈一谈怎样借助AI将你手上的图片直接转化为可编辑原型。

一、AI生成高保真原型的两种方式

1.第一种：文字描述生成原型

这同样是当下运用频率最为频繁的一类方式，输入一段或者几段表述，诸如：“帮我制作一个电商APP的商品详情页面，涵盖图片轮播、价格、规格挑选、购买按钮”，AI Agent会依据你的描述，径直缔造出一套具备高保真、结构完整特性的原型页面。

2.第二种：图片转原型

不少人于运用AI去生成高保真原型图之际，极易忽视另外一种更为直观的生成方式，那便是图片转原型。此项功能针对产品经理来讲颇为实用。无论你所截取的是竞品界面、设计参考图，抑或是随手绘制的草图，将图片上交予AI，它会自行拆解图片之中的布局、信息层级以及组件关系，进而生成一套能够进行编辑的原型界面。

通常不少时候，当你仍处于对着图片去判定该如何着手处理的状态时，，实际上原型结构已然被AI拆解出来了，，并且它具备能够进行编辑以及能够予以修改的特性。

二、AI竞品截图转原型实操流程

接下来，我们选取一个平常会遇见的场景来当作例子，实际操作上传竞争产品的手机应用截图，借助人工智能自动进行识别从而生成具有高保真效果的原型图。

第一步：上传截图（粘贴也行）

你能够直接进行截图ai图标 导入sketch，或者上传一张完整图片，又或者上传多于一张的完整图片，这些图片均为竞品页面的。并不需要裁剪得极其干净，因为AI能够自行分辨识别结构。打开对话框呀，直接通过Ctrl+V或者+V进行粘贴图片，又或者点击“图片转原型”进行上传。

小小的建议如下，在这里是以APP截图作为例子的。在实际进行使用的时候，倘若呈现的是列表页或者表单页，那么尽可能地去截取堪称完整的一屏，如此一来结构识别会更加准确。

第二步：输入详细指令

倘若想要全然复刻这张图片，可依照系统自带文案保持不变，即：“请尽可能精准地复刻所附图片里的界面”。然而要是你期望参考其中一部分，那就把详尽的需求写出来，而后AI将会结合参考图片以及指令，生成契合需求的原型图。在此处我们对这两种情形都进行了测试。

第三步：生成高保真原型图

当AI接收到参考图片以及指令之后，它会首先去识别页面的结构，接着按照组件的层级来生成高保真的原型图，在本次实测当中生成的过程仅仅只用了1分钟，下面呈现的是在两种情况之下所生成的原型效果：

1.尽可能复刻界面

在上传截图以后，会让AI 去复刻出截图里的界面原型，AI 能够自动识别并解析页面的布局、结构以及内容，进而生成还原度很高的原型页面。能够看到下图所呈现的效果，由此可见AI 的还原度确实是很高的。

2.结合需求指令生成

要是处于上传图片之后的情况，只是去参考图片的界面风格，或者是其功能逻辑，在需要结合实际产品需求来生成的状况下，能够输入像图里所展示的那样详细的指令，AI于生成原型图时，既留存了参考界面的优势，又可以跟实际需求相吻合。

不是一张图片，这一步由AI生成的原型，页面结构已拆分，文本、按钮、列表都变为真实组件，整个页面能直接继续编辑与调整。此时你所得到的，实际上是一个可继承的原型基础框架。当然，这个功能适用于参考页面的快速复现，或是作为设计灵感的起点。要是面对的是极其复杂、交互独特的页面，AI生成的框架或许仍需你手动去调整细节和逻辑。

三、关键点在于“可编辑原型”

有不少AI工具同样能够达成文生图、图生图的效果，然而仅仅生成一张原型图片，对于产品经理而言并没有太大的意义。重点在于，后续你能否进行修改。墨刀AI所生成的原型图是可以编辑的，存在这三种编辑方式：

1.AI对话编辑：全局修改or局部修改

你可以直接对AI说：

面对原有原型结构，AI会进行全局方面的调整，或者开展局部范畴的修改，如此一来方便又快捷的。

2.编辑模式：像普通原型一样手动改

若是AI生成的原型图存在一些细微的细节之处需要进行调整ai图标 导入sketch，那么与AI展开对话去修改的话可能成本会更高，倒不如在预览界面当中选择“编辑模式”。进入到编辑模式之后：

直接上手处理一些细节偏差，既省时间又省成本。

如有侵权请联系删除！