通俗易懂讲清楚，AI生成UI的应用逻辑

今天的主题是关于 AI 扫盲的，因为近期相关问题实在太多了，很多同学对它的理解非常的有限，导致走向不是过于吹捧就是完全抵制的两极分化。为了防止我们成为

，就有必要具体认识 AI 的应用逻辑，以及在行业中的相关使用场景。

本篇分享是入门扫盲，目标是以清晰简洁的方式来概述 AI 的行业应用框架，会使用尽量简单易懂的方式解释相关概念，不会涉及太多深奥的术语和理论。

谈论 AI 就绕不开大模型，它是 AI 技术应用的核心。

简单解释 AI 大模型，就是一个通过特定方法和大量数据训练出来的 “自主化程序”，这个程序可以根据用户输入的指令自己做出 “判断和思考” 后再进行回复。

传统程序虽然也可以执行用户的指令，但回复的内容和方式不会超出一开始预设的范围，非常有限。

而 AI 大模型则大大拓展了这个边界，我们不用提前预设各种条件和逻辑，它就会自己去理解问题再决定给出什么结果。

当然，这个边界只是放大了但不是无限的。任何大模型都不是全知全能的，都有自己的局限性。所以针对不同的应用领域，就开发了不同的模型类型。

最基础的模型分类包含两种，一种是

，能实现文字的对话或文案、代码、数据的整理和输出。另一种则是

，能在处理文字的基础上还处理图片、音频、视频等特殊对象。

比如深度求索开发的 DeepSeek 模型就是大语言模型，只能处理文字但不能生成图片(截止到2026年初)。而 Google 开发的 Gemini 大模型则是多模态模型，可以生成图片和视频等内容。

不同模型会有不同的表现和优劣，但因为大模型的开发需要尖端的技术和庞大的规模（训练），门槛极高，所以市面上主流的大模型数量并不多，可以简单分为国内和国外两个阵营。

国外的主流大模型包括 OpenAi 开发的 ChatGPT，Google 开发的 Gemini，Anthropic 开发的 Claude，xAI 的 Grok 等。

国内的主流大模型则包括字节开发的豆包，阿里开发的千问 Qwen，深度求索开发的 Deepseek，月之暗面开发的 Kimi 等。

因为前面说过大模型的局限性，所以为了应对不同的应用场景，团队就会将它们裂变出不同的版本。比如千问既有 Max 语言大模型，还有 Omni 全模态（文字、图片、音频、视频）大模型，针对处理问题的难易度又分成了 Max、Plus、Flash、Lite 等版本。

完整的大模型体积和参数都非常庞大，需要部署到专属的算力中心，并通过云服务来实现用户的访问和使用。也就是需要联网使用，但因为国内网络服务的限制（不可抗力），我们无法通过国内电信访问国外的主流大模型。

虽然说国内大模型的水平在这几年突飞猛进，但离国外的大模型还有一定的差距，在实际工作场景中多数应用的也是国外大模型，所以访问他们就需要大家自己发挥主观能动性解决了。

顺便再解释一个基础的问题，大模型除了远程访问以外，也可以在本地进行安装。部分团队（如千问）会在网上开源自己的大模型供其它人下载和使用，当我们下载到本地后就可以用 GPU 来运行它。但因为大模型对性能的要求极高（旗舰显卡起步），所以本地运行的效果要大打折扣。

而一些企业内部或行业专属的大模型，往往都是使用这些开源大模型进行二次训练和调试后的结果。还有一些针对特定硬件（如手机、眼镜）和特殊应用场景开发的小模型，就暂时不在我们的讨论范围之内。

前面讲过大模型可以类比成一种 “程序”，且它还是后端服务器上运行的程序。想要对这个程序实现命令的输入并返回它处理的结果，就需要应用前端的工具来实现。

比如我们打开豆包的官网，就可以使用这个网页对豆包大模型提出问题和要求，然后网页上就会返回它处理后的结果。这个网页就是使用大模型的工具，而这只是 AI 工具的其中一种形式，还可以是本地应用程序、手机 APP、小程序、硬件定制系统等等。

们大多数人开始接触 AI 大模型，都是从这些官方的工具开始，它们最基本的功能就是根据指令返回文字或图片信息，我们会把它们当成是一种可以对话的人工智能客服。

但实际上它们可以发挥的作用远不至于此，比如帮你整理本地的文件夹清理重复的文件，帮你自动修图并完成动态相片的剪辑，帮你编写程序并自己运行和检测等等。想要实现对话以外的其它功能，就需要借助特定的工具才能实现。

所以除了最基础的对话工具外，行业还衍生出了很多激发大模型潜力的 AI 工具。它们可以借助大模型完成程序开发、视频剪辑、操作托管、热点整理、消息推送等等。

到这里我们就要清楚，AI 大模型是大模型，工具是工具，大模型是基座，而工具是大模型的具体表现和应用形式。

我们更进一步认识 AI 工具，就可以把AI工具分成官方工具和第三方工具两个种类。

官方工具就是 OpenAI、Google 等大模型企业自己开发并绑定自家大模型的产品，而第三方工具则是其它团队开发，再接入到大模型进行使用的工具。

比如本地聊天机器人 Cherry Studio，它本身只是个简单的聊天对话工具，可以自己创建对话角色/助手，但需要接入大模型以后才能进行对话。还有著名的AI编程工具 Cusror，只有接入大模型以后，它才可以实现 AI 编程和代码管理。还有前阵子火遍全球的龙虾 Openclaw，也只是个本地工具，需要接入大模型后才能识别本地的文件和执行命令。

官方能提供的 AI 工具与服务往往很有限，所以在真实项目流程中，我们就会混合使用多种工具来完成工作。就像以前做一套项目除了用 FIgma以外，还要结合使用 Adobe PS、AI、C4D、AE 等软件。

而第三方工具和官方不同的是，官方工具默认连接自家的大模型，用户直接登录就能使用。而第三方工具要接入大模型，就需要进行额外的配置，也就是添加大模型的 —— 

。

API 就是接口，是前端工具连接后端服务器的通道，而这个通道默认是上锁的，还需要提供对应的密钥（API Key）才能正常访问。

部分工具会自己接入各大模型的 API，用户只能选择它提供的模型，并只需要对这个工具进行付费即可。

另一部分工具则需要用户自己选择模型和配置 API，需要我们访问大模型的 API 开放平台进行申请，然后再将它们生成的 API Key 填入到工具中完成连接。

API Key 就像是一个电话号码，当我们申请完并进行使用，就会产生一定的 “流量”，而 AI 产生的流量用专业术语形容叫

。

使用 API 完成的任意 AI 服务，都会消耗 Token，且因为 AI 的计算成本极高，所以主流大模型都会针对 Token 消耗量进行收费。就像电信运营商一样，既有包月服务附带一部分流量，超出部分还要按量计费。

在实际的 AI 工具使用过程中，Token 的消耗是极其巨大的，往往会造成沉重的成本，而这个市场也遵循一分钱一分货的真理，越好的大模型价格就越贵。以最适合编程的大模型 Claude Opus 为例， 一个程序员高频使用的消耗的 Token 账单可以从数千到数万元不等。所以我们也会从性价比的角度出发，来搭配不同的模型进行使用。

总结我们应用 AI 的本质，

。而工具的作用不同，大模型本身的特性和价格也不同，就导致我们在面对一个复杂的任务时，需要选择多种 AI 工具和不同大模型来实现。

学习使用 AI，和传统的单一软件教学不同，不是只学会某个工具的功能和操作方法，而是了解不同的 AI 工具以及大模型的特性，通过组合它们来实现自己目标的方式。这不是设计或产品思维，而是工程思维的具体应用。

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

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

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

，AI 无法替代我们开会以及和他人进行沟通。尤其在研究部分，我们研究分析的对象是真实用户，通过 AI 来模拟就只是自欺欺人。

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

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

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

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

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

交付阶段是受 AI 影响最大的部分，因为 AI 对前端开发的影响远比设计还剧烈，直接使用 AI 来完成设计稿的开发已经逐渐成为行业的共识，这也让

，要适配新的工作流。

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

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

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

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

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

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

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

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

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

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

。

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

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

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

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

文生可交互界面就是使用文字描述，直接生成可以交互的 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 界面开发工具其实就是 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 工具，而是你要用它们做什么，怎么给他们具体的指令让他们实现你的想法。