用AI绘制成套UI设计稿！10分钟搞定3版方案-技术圈

点击 ▲ 三分设关注，和 10 万设计师一起成长

三分设 x 58UXD

正文共：2113 字 22 图预计阅读时间：8 分钟

AI 的热度一直居高不下，AI 产出的图像、文本在经过设计师、内容创作者的完善与修改后，被应用在更多的场景中。即使面对更要求秩序感、更注重业务需求与用户体验的 UI 设计，AI 人工智能也能提供越来越多的帮助，让设计师的工作变得更简单、更快、更轻松！本文将介绍如何将 AI 技术应用于 UI 设计流程中，以及这种结合对业务和团队的价值。

首先要明确想让 AI 帮助完成 UI 设计整个流程中的哪些环节。如 Midjourney 那样直接产出完成度极高、略微修改就可以使用的图像不太现实。我们可以给绘画作品分类，规定风格、流派、类型，但无法给 UI 设计设定类似的规范。

从方案到最终成稿交付，环节中各个功能的设置、按钮的设计、交互的形式、动效的安排，都需要结合业务需求、考虑用户体验，具有极强的不确定性，不同类型产品之间也存在很大的差异。

如果我们尝试用 Midjourney 等绘图工具生成，画出来的东西只能看看布局、框架、情绪板，有时候还会画出一些过于炫酷，实际上根本没办法落地的效果。

所以目标是，让 AI 帮我们完成前中期的页面结构探索、框架搭建，并提供部分可参考的组件。

这次还是选择专注做“AI 生成 UI”的「即时 AI」工具，不仅能根据文字描述生成可编辑的 APP/Web 设计稿，还上线了“生成整套 APP/Web 界面”的新功能，妥妥满足快速出整套设计参考的需求。

「即时 AI」官网：https://jsai.cc/ai/create

先简单试一下“生成整套页面”的效果，选生成速度更快的 JS-UIbotics 模型。

输入描述语：生成一个出行 APP

等待几十秒就得到了如下 4 个页面：

首页：金刚位包含了多种出行方式，还展示了天气情况；
酒店预订：可以根据入住城市、时间查找房源，下面还有推荐的酒店；

行程列表：展示了推荐路线、用户评价、热门旅游目的地
行程详情：体现推荐路线的基本信息和亮点

简单输入一行字就能让 AI 根据“出行 APP”这个主题生成多个有关联的页面，比我自己用组件库搭建页面还快得多，又省去了绞尽脑汁思考包含哪些模块、具体都什么内容的时间。

同样的关键词再点几次【开始创作】，多套参考方案轻松到手。

而且这些都是可二次编辑的设计稿源文件，给甲方和领导看过方案、收集到反馈后，还可以在此基础上继续修改完善，减少前期方案探索的时间精力浪费。

用过 AI 绘画工具的都知道，需求描述的越详细，AI 生成的作品越细节，使用「即时 AI」这款文字生成 UI 设计稿的工具也是一样。

用即时 AI 生成简单方案，完成初期的设计沟通并收集到足够反馈后，节省下来的时间可以继续细化描述语，控制 AI 生成每个单页的内容与结构，提供更贴近目标方案、修改成本更低的设计初稿。

这次用的是风格与内容结构更多样的 JS-Inno 模型，以生成阅读 APP 为例：

生成一个阅读 APP，要求包括登录页、首页、阅读页、书籍详情页、我的页，共 5 个页面，蓝色主题：

登录页中登录方式包括手机号登录、微信登录

首页中包含推荐书籍、热门书籍等

阅读页中展示阅读器及阅读器操作按钮

书籍详情页中示例书籍为余华的《第七天》

我的页中展示阅读历史、订单、阅读数据统计等内容