强！推荐一款提升效率的AI工具！测试得懂！

全民ai时代，怎么还能不会使用ai做设计呢？！虽然你可能只是一个开发人员，或者一个测试人员，更或者是一个产品经理，在工作交流中难免会遇到需要动手“画几笔“的场景（例如：我觉得的设计或交互应该是这样的，xxx），可碍于笔画不够丰富，难以将你真实的想法跃然纸上。

这个时候，你是不是想过：要是能一键将自己的想法和线图设计出来就好了。有这样的工具吗？答案当然是肯定的——Uizard，你值得尝试！

Uizard 是一款基于人工智能开发的UI原型设计工具。

Uizard 易于使用的拖放式编辑器及其 AI功能，能轻松的将手绘草图、文字说明和图片转化为高级设计原型和前端代码。

重点来了：一键绘图，生成前端代码。这么听来，是不是兴趣来了？！可能有的人还是会问：我又不是ui设计师，我了解这个干嘛？想一想，如果你想自己开发一个网页，或者开发一个app，但又不会设计，又不会编写前端代码，有了这个工具的加持岂不是如虎添翼？！

• 先入为主

如下图1所示，为Uizard官网的设计模板图。该图由Uizard设计生成，发布后可供他人修改和使用。仅此一眼，有无惊艳？！

图1 Uizard设计模板图

• 使用方法

访问Uizard官方网站（https://uizard.io/ai-design/?ref=aihh.cn），使用邮箱或其他方式登录（若没有账号，可免费注册）。然后，你尽可体验Uizard的丰富功能。

为了方便介绍Uizard的优点，我们选择三个不同的设计场景，让Uizard帮我们实现——选择线框设计图，让Uizard一键生成app设计图；选择线框设计图，让Uizard一键生成web设计图；输入指令，让Uizard一句话生成设计图。

那么，接下来让我们开始吧~

1） 一键生成app设计图

首先，在个人主页点击“New blank project“，选择”Mobile“类型，如下图2所示； 

图2 Uizard新建项目

其次，进入“Mobile“设计界面后，点击“Scan wireframe sketch”，上传设计线框图，导入即可。如下图3、图4所示。

图3 Uizard mobile类型设计页面

图4 Uizard mobile类型线框图导入页面

接着，等待Uizard处理线框设计图，完成设计即可。Uizard处理界面如下图5所示。

图5 Uizard mobile类型线框图处理页面

最后，Uizard生成的设计图，如下图6所示。

图6 Uizard mobile类型设计结果图

同原线框图相比（可见图5），生成的设计图保证了线框图大部分的保真，但仍存在局部的细节偏差。

此时，我们可以通过Uizard的设计功能（左侧的功能菜单和右侧的快捷菜单，如下图7所示）二次修改设计图。

通过二次简单设计，最终设计效果图可见图8。图8左侧图为原始线框设计图，中间为Uizard生成的设计图，右侧为二次简单修改后的设计图。由此可见，通过人为修正，使得设计图更加贴合原有线框图。

图7 Uizard功能面板图

图8 Uizard设计结果对比图

除此之外，生成的设计图，如何获得它的前端代码呢？点击图7中的“Handoff”功能，打开窗口后，再次点击设计图中的元件（如下拉框），即可展示React和CSS的相关代码，如下图9所示。

图9 Uizard设计图生成前端代码

2） 一键生成web设计图

看过了如何使用线框图一键生成app设计图后，我们再来看看如何生成web设计图。

步骤基本类似，只是在“Create blank project”选择“web”类型，然后同样的通过“Scan wireframe sketch”导入线框图。最终，生成的web设计图如下图9所示。

同样的，左侧图为原始线框设计图，中间为Uizard生成的设计图，右侧为二次简单修改后的设计图。如图可见，最终二次修改后的设计图和原线框图的还原度还是比较高的。

图9 Uizard web类型设计图

3） 一句话生成设计图

在个人主页，点击“Generate with Autodesigner”卡片（如下图10所示），在弹出的页面中（如图11）选择设计的设备类型（如，web），以及项目信息和设计风格。

完成后，点击“Generate my project”等待创作完成即可。

图10 Uizard个人主页Autodesigner入口

图11 Uizard Autodesigner页面

创作完成后，生成的设计图如下图12所示。与线框图设计功能有不同的时，Uizard的Autodesigner功能，可以一句话生成多个设计图，并且各个设计图之间具有关联性，大大提高了设计效率。

图12 Uizard Autodesigner设计结果图

• 再说一说

通过上面的案例展示，我们可以发现：借助Uizard，即使是一个设计小白也能快速设计出比较专业的设计图，很大地提高了设计效率。

那么，再来说说，这对于我们非设计工作的人员来说，真的有用吗？——有！如果你作为一个不懂前端代码的测试开发人员，想要快速上手完成前端基础功能编辑，这是一个不错的可选方法；如果你想转换产品经理或者ui设计人员，这是一个快速上手的捷径；如果你想多积累知识，那更是一

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】