AI工具怎么用于UI设计？从分析到交付，6大神器全梳理！

一、全文速览图

上期回顾：

二、UI 设计中的 AI “切入点”

AI 在真实工作中的应用是先有需求，再找工具，而不是先找工具，再创造需求。所以认识 AI 工具在 UI 中的应用，就应该先搞懂我们有哪些工作要做。

UI 设计的工作概括起来就三个部分，分析、实施和交付。

1. 分析阶段

首先就是分析阶段，主要的工作内容包含下面这几点：

1. 了解项目基础信息，包括背景、目标、业务、限制等
2. 了解产品的具体需求，包括功能点、结构、逻辑、服务
3. 了解用户类型和特征，进行体验相关的调研和分析
4. 通过获取的信息进行决策，明确项目设计的方向和排期

对于设计师来说，分析阶段 AI 能够介入的部分不多，最多帮助我们回答一些基础的问题或是做资料的总结。

其中关键信息获取和消化只能由我们亲自完成，AI 无法替代我们开会以及和他人进行沟通。尤其在研究部分，我们研究分析的对象是真实用户，通过 AI 来模拟就只是自欺欺人。

再到设计的决策，是 AI 无法替代真人的核心禁区，因为 AI 只是工具，它可以提建议（必然有缺陷），但是最终决定使用什么方案要由我们自己决定，而不是让工具来替我们下决定。

2. 实施阶段

到了实施阶段，就是设计的实践操作阶段，我们主要的工作内容包含下面这几点：

1. 原型设计，确定项目的框架、布局、交互方式的设计
2. 界面设计，完成界面的视觉样式设计，并整理视觉规范
3. 图标设计，完成界面所需各类图标的图形样式设计
4. 动效设计，完成界面交互时所产生的动画效果设计
5. 其它设计，包括产品 IP 形象、运营图、活动页等内容的设计

实施阶段就是 AI 重点介入的部分，使用 AI 理论上可以帮助我们生成可交互原型，界面设计稿，复杂图标图形，成套 IP 形象和运营设计物料等。

因为设计对象有差异，不同 AI 工具的能力也有差距，所以我们想要完成不同设计就需要使用不同的工具，没办法直接使用一个工具覆盖整个设计实施阶段（起码目前没有）。

3. 交付阶段

交付阶段就是设计师配合程序员实现对界面的开发和落地，主要的工作内容包含下面几点：

1. 设计自查，交付前检查设计中存在的问题并做出改进
2. 标注切图，完成界面细节和参数的标记，以及导出切图文件
3. 设计走查，对前端完成的界面进行测试，找出不符合设计的地方

交付阶段是受 AI 影响最大的部分，因为 AI 对前端开发的影响远比设计还剧烈，直接使用 AI 来完成设计稿的开发已经逐渐成为行业的共识，这也让设计师的主要交付对象从前端工程师变成了 AI，要适配新的工作流。

除了设计的前端开发外，设计自查和设计走查，理论上也可以使用 AI 工具来完成。但核心限制还在那里，那就是产品做出来是给人用的，最终的检查也需要由人来判定。

了解完这些信息以后，下面就可以介绍具体的 AI 工具了。

三、文生文/图工具 ChatGPT、Gemini

这里 ChatGPT 和 Gemini 都是多模态大模型，既可以完成复杂的文字对话，也支持文生图的方式生成相关图形元素。

其中文字对话主要应用在分析阶段，帮助我们做行业信息的扫盲，并可以整理信息和数据，辅助我们完成一些初级的决策，想必大家对它们的作用都已经非常熟悉，不用多做介绍。

再到文生图部分，Gemini 的文生图模型叫 Nano Banana，ChatGPT 的叫 Image2，它们都是各自大模型生态中的一环，不是独立的大模型。

而图像生成大模型远不止这两个，还有老牌的 Midjounery、Grok 的 Aurora、字节的即梦等等。但之所以只提这两个，是因为它们的图形生成水平是最佳的（截止目前，其它的等于不能用），可控性也最强。

其中 Image2 在输出包含复杂文本信息的图像时，效果更佳，所以也成为 UI 设计师的第一选择，我们可以用它来生成原型图、UI 视觉界面、H5 页面等等。

除了使用文字外，它还能输入图片素材，比如用你手绘的原型手稿生成界面，或是对原图进行优化调整，还是参考案例的设计风格进行生成等，它的模型优势决定了我们可以用各种方式来指挥它，可以得到我们意想不到的结果。

但要注意的是，不管目前网上对它的评价有多高，它生成的 UI 界面依旧不够成熟，无法适配国内复杂的 C 端界面要求。同时，它只能生成静态的图片文件，这些图片不是设计文件，无法直接修改，也不能直接进行前端开发。

我们使用 Image2，更多是用它快速生成小样来讨论方案可行性，或是生成一些灵感参考图来协助我们完成设计，但不是直接用它生成最终的设计稿。

四、AI图像工作流 Lovart / Pencil

一般文生图工具对描述文案要求极高，需要事无巨细的描述图像内容，越复杂的界面要描述的文案就越多，文案越多准确率也就越低。

所以有了第三方推出了更专业的AI图像生成工具 Lovart / Pencil，通过创建一 个AI 工作流，独立生成其中的视觉元素，最终再组合成完整的图像。

比如一张 UI 界面，背景图、图标、用户头像等可以使用 Gemini 生成，UI 元素、组件使用 Image 生成，还可以自己创建和修改里面的文本信息，最后再组合这些元素形成最终的界面。Lovart 非常接近设计软件的操作思路，它可以更灵活的和准确的去生成我们想要的图像。

虽然它优化了文生图的效率，但底层的局限性依然存在，那就是生成的复杂组件也是普通图像，如果要做调整就还要使用文字描述，想要改出你想要的结果并不容易。

五、文生可交互界面 Figma Make / Codex

文生可交互界面就是使用文字描述，直接生成可以交互的 UI 界面（通常由网页组成），这类工具目前有不少，除了要介绍的 Figma Make 和 Codex 以外，还有 Stitch、Claude Design、Framer 等等。

这些工具各有优劣，且在非常快速的迭代，截止目前在UI设计领域用得最多的就是 Figma Make 和 Codex。

Figma Make 因为是 Figma 自带的，所以能最方便地接触到。通过在 Figma Make 界面内输入文案信息，它就能生成设计图，还可以为该设计图添加交互内容。生成结果可以导出成网页，也可以直接复制进 Figma 的设计文件内进行编辑，更加的灵活。

Codex 则是 OpenAI 推出的 AI 开发助手，同样也可以通过文案描述来生成可交互界面，但它的作用不止于此，它可以生成项目所需的完整代码（包含后端），还可以围绕项目文件夹读取需求文件和设计资源，以及实现一些本地自动化的操作。

虽然它们看起来比文生图工具更完善，从设计到前端一步到位，但因为要实现前端编程，生成的速度慢，修改慢，且生成的界面样式与复杂度有限，远没有 Image2 丰富和灵活。

所以直接使用它们生成界面就只局限于一些比较简单的项目，或是做一些项目前期的测试方案。

想要更好的发挥它们的价值和提高生成效率，设计师们就会先用 Image2 或Lovart 生成界面图，再导入 Codex 等工具让它们依据这个图例来生成可交互的结果。

六、AI 界面开发 Cursor

AI 界面开发工具其实就是 AI 编程工具，本质上是 IDE 编程工具，它们也可以像 Codex 一样用文本指令生成完整的前端界面，但区别是 Codex 倾向零代码完成任务，而 Cursor 需要用户看见代码并参与审核和编辑，是主要面向程序员使用的工具。

这类工具其实也有非常多，但出镜率最高的就是 Cursor，它的功能和拓展性最强，所以有些热衷专研的设计师也会用它来开发设计好的界面，即使自己看不懂代码，也能完成项目从设计到前端开发的交付环节。

Cursor 是过去两年最受欢迎的第三方 AI IDE 工具，但因为 Google、OpenAI 都陆续推出官方的 IDE 工具，使得它要面临越来越激烈的竞争，生存空间也越来越小，未来很有可能完全被官方工具取代。对于设计师而言，只要知道它的功能和性质即可，不用作为学习的对象。

而其它同类 AI IDE 工具如 Claude Code、Gemini Code Assist 等，就更不需要接触了。

以上就是 UI 设计师需要关注的 AI 工具类型，而目前AI工具处于百花齐放的状态，大模型每个月都在发布新版本，每过几天就会有新工具上线。

但实际上同类工具都大差不差，多数 AI 软件的规模也就是个小工具的水平，没有什么上手的门槛。就像今天你下载了 Winrar 解压工具，明天下载了好压 123，总不至于就不会用了吧……

难的不是怎么用 AI 工具，而是你要用它们做什么，怎么给他们具体的指令让他们实现你的想法。

所以决定 AI 大模型和工具水平上限的，是用它们的人，这点是有生之年都不会改变的。

七、结尾

本篇只对 AI 工具分类做了说明，后面还会有一篇，针对 AI 工具中一些更具体的通用概念进行扫盲，比如它们之间如何协作，AI 技能 Skill 是什么的说明。

有问题可以下方或社群留言。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」