兰亭妙微UI设计:UI/UX设计师怎么选AI工具?

2026-6-10    之晨 行业趋势

一、AI产品应该如何选择

现在 AI 产品这么多,作为 UIUX 设计师,我到底应该使用哪一款?

Figma Make、Gemini、Claude Code、Codex,每一款产品看上去都能生成内容、写代码、做页面。

但真正深度使用过后,你会发现:它们擅长解决的问题并不相同。

兰亭妙微UI设计:今天,我们就站在 UIUX 设计师的真实工作流程中,聊聊每一款产品的能力边界,以及究竟应该如何选择。AI 产品更新很快,后续能力仍然会不断变化。

二、先别急着选工具

在对比之前,我们需要先明确一件事:

AI 产品不是功能越多越好,而是要看它能否进入你的真实工作流程。

比如,我要写一篇公众号文章、整理用户访谈,这和我要搭建一个复杂的页面 Demo,完全是两种任务。

如果没有理解差别,我们就很容易陷入一个误区:

今天看到别人用 Claude Code,我就去折腾 Claude Code;明天发现 Figma Make 更新了,又把所有流程搬回 Figma。

工具收藏了一堆,最后真正工作时依旧不知道应该打开哪一个。

那对于 UIUX 设计师而言,我们应该重点关注哪些问题?

  1. 它最擅长解决什么任务?
  2. 使用门槛高不高?
  3. 我需要提供多少信息,它才能理解需求?
  4. 输出的是文案、原型、代码,还是完整工作流?
  5. 结果不满意时,能否快速修改?
  6. 它能否与 Figma、浏览器和其他软件进行协作?

接下来,我们逐个拆解。

三、Figma Make:最容易上手的原生设计入口

如果你本身就在使用 Figma,又不想折腾复杂配置,那么 Figma Make 应该是最容易开始的工具。

它最大的优势在于:距离设计师原本的工作环境足够近。

你只需要在 Figma Make 中通过对话,就可以创建交互原型、Web 页面和功能 Demo。

同时,它支持将现有设计稿、竞品截图、产品文档和图片素材作为参考内容。比如,你可以丢给它一张竞品截图,让它参考页面布局、颜色和内容结构,生成一个相近的页面。

image.png

如果公司已经有相对成熟的设计系统,还可以通过 Make Kits 引入组件、变量、样式和使用规则,让生成结果更接近团队规范。

不过,这里大家需要留意:

接入设计系统,不代表生成结果一定正确。

特别是复杂业务页面,仍然需要设计师反复检查信息结构、组件使用和交互逻辑。竞品截图也只能作为参考,并不等于可以像素级还原。

这里稍微多说一点,现如今很多设计师都非常依赖 AI 工具,根本不用自己去做设计,但从来没有思考过 AI 生成的结果是否正确。比如今天有同学来咨询一个小的问题,在AI生成的页面中,他没有做任何的思考,直接使用结果导致提案失败,所以我们现在是需要具备判断能力的。

所以,Figma Make 更适合:

  1. 已经深度使用 Figma 的设计师
  2. 需要快速验证页面想法
  3. 希望低门槛生成交互原型
  4. 暂时不想学习复杂代码工具

四、Gemini:更适合资料理解与表达润色

在我的日常使用中,Gemini 更多承担的是“内容助手”的角色。

它支持较长的上下文,也具备文本、图片、音频和视频等多模态理解能力。

因此,无论是阅读行业报告、分析竞品资料、整理访谈记录,还是拆解一段视频内容,它都非常合适。

image.png

在我自己的工作流里,无论是视频文案、公众号文章,还是课程资料,我都会使用 Gemini 做初步整理和润色。

从个人体验来看,它在表达层面会更自然一些,也更适合处理较长的文本内容。

不过,如果你的目标是直接修改 Figma 页面,或者搭建一套完整的设计工程化流程,它并不是第一选择。

Gemini 更适合:

  1. 阅读和总结大量资料
  2. 梳理用户访谈与竞品信息
  3. 润色报告、方案和 PRD
  4. 生成公众号文章与视频脚本

五、Claude Code:复杂工程逻辑的稳定选手

Claude Code 的定位相对明确:

它首先是一款面向工程任务的代码智能体。

如果你需要理解复杂项目、梳理代码结构、定位 Bug,或者将一个页面 Demo 做得更加稳定,那么 Claude Code 会是非常不错的选择。

它能够读取项目文件、执行命令、修改代码,也可以通过 MCP 连接 Figma、Google Drive、Slack 等外部工具。

所以,Claude Code 并不是不能接入 Figma,而是它的重心依旧偏向工程实现。

image.png

在我的使用体验中,如果任务涉及复杂代码逻辑、项目级修改和稳定落地,我会优先考虑 Claude Code。

但如果目标是生成图片素材、调整视觉风格,或者希望在设计工具之间快速往返,它就不是我的第一选择。

Claude Code 更适合:

  1. 需要处理复杂工程逻辑
  2. 希望深入理解项目结构
  3. 关注代码质量和稳定性
  4. 已经具备一定工程基础

六、Codex:串联设计师的完整 AI 工作流

最后,我们来聊聊 Codex。

目前在日常辅导中,我更建议 UIUX 设计师重点尝试 Codex。

原因不是它在每一个单点能力上都绝对领先,而是:

它能够把设计师原本割裂的工作流程串联起来。

首先,Codex 可以通过 Figma MCP 读取组件、变量、布局和设计上下文,也可以将代码页面重新传回 Figma,生成可编辑的设计图层。

这就意味着,设计稿与真实页面之间不再是单向交付,而是能够反复往返。

image.png

其次,Codex 支持图片生成和迭代修改。

比如页面缺少图标、插画、背景图或者产品素材,你可以直接让它生成,再根据页面效果反复调整。

然后,它还支持 Computer Use、应用内浏览器和插件。

这就让设计师可以进一步串联:

需求梳理 -> 页面生成 -> 素材补充 -> 浏览器验证 -> 设计走查 -> 继续优化

比如我们之前讲过的设计验收,就可以让 Codex 通过浏览器查看真实页面,再对照设计稿检查问题。

当然,功能多也意味着使用时需要先想清楚任务。

Codex 并不是一个“一句话解决所有问题”的魔法工具。你依旧需要明确自己的目标,逐步搭建适合自己的工作流。

Codex 更适合:

  1. 希望从想法快速推进到可运行 Demo
  2. 需要设计、代码和素材协同
  3. 想搭建设计验收与自动化流程
  4. 希望逐步掌握 Vibe Coding

七、究竟应该如何选择?

如果你只是想快速生成原型,可以优先使用 Figma Make。

如果你需要整理资料、理解长文本和润色表达,可以优先使用 Gemini。

如果你要处理复杂代码和工程逻辑,可以使用 Claude Code。

如果你希望进一步串联设计、代码、素材和验收流程,可以重点尝试 Codex。

image.png

八、写在最后

其实在我看来,设计师不需要强行选择唯一一款 AI 产品。

我自己更常用的方式是:

  1. 用 Gemini 梳理内容和表达
  2. 用 Figma Make 快速验证原生设计想法
  3. 用 Codex 串联完整工作流
  4. 遇到复杂工程问题,再使用 Claude Code 深入处理

工具永远会不断更新。

我们真正需要掌握的,不是某一个软件的固定操作,而是理解它们的能力边界。

当你面对一个新任务时,能够快速判断应该使用什么工具,把想法真正落地,这才是 AI 带给 UIUX 设计师最重要的价值。

转载自优设网

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档