1. 从“被AI吓到失眠”到“把AI当实习生”一个十年UI设计师的真实心路大概从2023年上半年开始我身边的设计师群里开始频繁出现一种焦虑有人发一张Midjourney生成的界面概念图配文“这玩意儿是不是要让我们失业了”有人转一篇“AI取代设计师”的爆款文章然后群里沉默半天没人说话。我自己也经历过那个阶段——凌晨两点刷着各种AI工具的新功能越刷越清醒脑子里反复转着一个问题我做了十年UI难道真要归零了现在两年多过去我的判断和当初完全不同。不是因为我看到了什么权威报告而是因为我在真实项目里把AI工具用了个遍——Midjourney出概念方向、Figma AI做组件变体、GitHub Copilot写前端代码、甚至试过用MCP协议把Figma和AI工具串起来。踩了无数坑之后我得出一个可能有点反直觉的结论AI设计工具不会取代UI设计师但它会取代“只会画图”的UI设计师。这两句话听起来差不多实际差别巨大。这篇文章我想聊的不是“AI好不好”这种空泛话题而是把我这两年多在真实工作流里使用AI工具的具体经验拆开来讲。包括Midjourney怎么和Figma配合、Figma AI哪些功能真正省时间哪些是噱头、GitHub Copilot在还原设计稿时到底靠不靠谱、以及那个被热炒的“MCP加Figma AI Bridge”到底能解决什么问题。如果你也是UI设计师或者正在考虑入行希望这些从实战里磨出来的判断能帮你少走一些弯路。2. Midjourney在UI工作流里的真实位置灵感加速器不是交付工具2.1 为什么我最终把Midjourney定位在“前期探索”阶段刚开始用Midjourney的时候我和很多人一样试图让它直接生成可用的UI界面。输入“mobile app login screen, clean design, blue theme”之类的提示词出来的图确实好看但仔细一看全是问题按钮大小不一致、文字是乱码、间距毫无规律、交互逻辑根本不存在。你没法把这些图直接交给开发甚至没法直接放进设计稿里用。后来我想明白了一件事Midjourney本质上是一个图像生成模型它不理解UI的栅格系统、组件复用、响应式断点这些概念。它擅长的是氛围、风格、色彩搭配、视觉冲击力这些恰恰是UI设计前期最需要探索的东西。所以我把它的位置调整了——不再让它“画界面”而是让它“定调性”。具体怎么操作比如接到一个金融类App的改版需求我会先用Midjourney跑一批情绪板。提示词大概是这样组织的先定风格关键词比如“minimal, trustworthy, professional”再加色彩倾向“deep blue and warm gray palette”再加参考媒介“inspired by Swiss typography”最后加技术参数“--ar 16:9 --style raw”。跑出二三十张图之后挑出四五张色彩和氛围最对味的导入Figma作为情绪板使用。注意Midjourney生成的图不要直接吸色。屏幕显示和实际设计系统的色值之间有偏差吸出来的颜色放到组件库里往往不协调。我的做法是参考它的色彩关系然后在自己建立的色板里找最接近的色阶。2.2 提示词工程在UI场景下的几个实用套路很多人觉得写Midjourney提示词是玄学其实在UI场景下有比较明确的套路可循。我总结了几个自己常用的模板风格探索型[产品类型] UI design, [风格关键词], [色彩描述], [参考设计体系], clean layout, high fidelity --ar 16:9组件灵感型[组件名称] design, [状态描述], [材质/风格], isolated on white background, UI kit style --ar 1:1插画辅助型empty state illustration for [场景], [风格], flat vector, [色彩], matching UI color palette --ar 4:3这里有个细节值得展开--style raw参数在UI场景下几乎必加。默认模式下Midjourney会加很多“艺术化”的处理比如夸张的光影、戏剧化的构图这些在UI里全是干扰。加上--style raw之后输出会更接近“设计稿”而不是“艺术画”。还有一个我踩过的坑不要在一开始就追求“完美提示词”。我的习惯是先跑四张低质量的快速预览--q 0.5看大方向对不对方向对了再跑高质量版本。这样一轮探索下来消耗的GPU时间大概只有直接跑高质量的三分之一。2.3 从Midjourney到Figma中间缺失的那一环怎么补Midjourney出图之后怎么把它变成Figma里可用的素材直接拖进去当参考图是最简单的但如果你想提取其中的视觉元素——比如某个渐变、某种阴影处理、某组配色关系——就需要一些中间步骤。我的工作流是这样的Midjourney出图后先在Photoshop里做一次“拆解”。把图中值得参考的部分裁出来用吸管工具取色然后在Figma里对照着重建。听起来很笨但这个过程恰恰是设计师价值所在——AI给的是“感觉”你需要把它翻译成“规范”。举个例子Midjourney生成了一张卡片式布局的图卡片有很微妙的投影。我吸色发现投影不是纯黑而是带了一点蓝紫色调。这个发现会直接影响到我设计系统里shadow token的定义。这种“从AI输出里提取设计决策”的能力是目前AI自己做不到的。3. Figma AI的实战评测哪些功能真省时间哪些纯粹是演示噱头3.1 Figma AI功能逐个拆从“第一眼惊艳”到“长期使用后的真实评价”Figma在2024年集中上线了一批AI功能我当时第一时间就开了测试。用了一年多下来我的评价是有亮点但远没有宣传片里那么神奇。下面逐个说我实际使用频率最高的几个功能。自动重命名图层这个功能我一开始觉得是刚需。做设计稿的人都知道图层命名混乱是常态交接给开发的时候经常被吐槽。Figma AI可以根据图层内容自动生成语义化的名称比如把“Rectangle 47”改成“Card Container”。实测下来准确率大概在70%左右。简单组件没问题复杂嵌套结构经常识别错误。我的用法是先让AI批量重命名然后手动过一遍把明显不对的改掉。比纯手动快但别指望一键搞定。自动生成组件变体这个功能让我又爱又恨。它的逻辑是你选中一个基础组件AI根据常见的使用场景自动生成hover、active、disabled等状态。听起来很美好对吧实际用的时候生成的变体经常不符合我的设计系统规范——圆角不对、间距不对、颜色不在色板里。后来我调整了策略先把自己的设计系统变量color token、spacing token配置好再让AI生成变体这样出来的结果可用率能提高到80%左右。内容填充功能是我用得最多的。做设计稿的时候经常需要填充假数据以前要么手动编要么用插件生成一堆“Lorem ipsum”。Figma AI可以根据上下文生成合理的占位内容比如在一个电商卡片里它会生成商品名称、价格、评分这些符合场景的文本。这个功能确实省时间而且生成的内容比随机字符串更有利于评估设计效果。3.2 那些宣传很猛但实际很鸡肋的功能AI生成完整页面这个功能我在发布会当天就试了。输入“一个电商首页包含轮播图、商品网格、底部导航”等了大概半分钟出来一个页面。第一眼看上去还行但仔细一看栅格系统是乱的、组件没有复用、响应式完全没考虑。你如果要把它改成可用的设计稿花的时间比从零开始画还多。AI配色方案也是类似的问题。它生成的配色单独看都挺好看但放到具体产品语境里经常不成立。比如一个医疗类产品它可能给你生成一套很潮的霓虹色视觉上很抓眼球但完全不符合医疗行业需要的“专业、可信赖”的调性。配色这件事AI可以给你灵感但最终决策必须基于对业务和用户的理解。AI生成图标这个功能我的评价是“能用但不好用”。生成的图标风格不统一线性图标和面性图标混在一起描边粗细也不一致。如果你只是需要一两个装饰性图标可以用但如果是构建图标系统还是老老实实找图标库或者自己画。3.3 把Figma AI用出价值的正确姿势用了一年多我总结出一个核心原则把Figma AI当成“加速器”而不是“替代者”。它最擅长的是那些重复性的、有明确规则的、不需要太多判断的工作。比如批量重命名、批量生成变体、填充占位内容。这些工作以前要花一两个小时现在可能二十分钟就搞定了。但涉及到设计决策的部分——比如这个页面的信息层级怎么排、这个交互流程怎么设计、这个视觉风格是否符合品牌调性——AI目前完全无法胜任。它没有业务上下文不理解用户需求不知道竞品在做什么。这些恰恰是UI设计师的核心价值。我现在的习惯是每天开始工作前先花十分钟把当天要做的重复性工作列出来看看哪些可以交给Figma AI。然后集中处理处理完再手动检查一遍。这样下来每天大概能省出两到三个小时这些时间我用来做设计评审、和产品经理对齐需求、研究竞品——这些才是真正拉开设计师差距的地方。4. GitHub Copilot还原设计稿前端代码生成的真实体验4.1 为什么我开始用Copilot写前端代码作为一个UI设计师我以前的工作流是Figma出稿 → 标注 → 交给开发 → 开发还原 → 走查 → 提bug → 开发修改。这个流程里最大的痛点是“走查”环节——开发还原出来的效果和设计稿总有偏差有时候是间距差了几个像素有时候是颜色不对有时候是交互状态没做。后来我开始尝试自己写前端代码。不是要抢开发的活而是想通过代码来验证自己的设计是否可行。比如一个复杂的卡片布局用Flexbox还是Grid响应式断点怎么设这些问题在Figma里想和在实际代码里写感受完全不同。GitHub Copilot在这个过程中帮了大忙。它可以根据注释和上下文自动补全代码对于我这种“懂一点前端但不算精通”的设计师来说大大降低了写代码的门槛。4.2 用Copilot把Figma设计稿转成代码的实操流程我的流程大概是这样第一步在Figma里整理好设计稿。确保所有组件都用了Auto Layout间距和颜色都引用了设计系统变量。这一步很关键因为Copilot生成的代码质量很大程度上取决于输入的“语义化程度”。如果你的设计稿里全是“Frame 123”、“Rectangle 456”Copilot也帮不了你。第二步导出设计稿的CSS信息。Figma可以选中元素后直接复制CSS代码我会把这些代码粘贴到编辑器里作为参考。第三步用注释引导Copilot生成代码。比如我会写这样的注释// 创建一个响应式卡片组件 // 使用CSS Grid布局桌面端3列平板2列手机1列 // 卡片包含图片、标题、描述、价格 // 使用设计系统变量--spacing-md, --color-primary, --radius-lg然后Copilot就会根据这些注释生成代码。实测下来注释写得越具体生成的代码可用率越高。如果只写“创建一个卡片”出来的代码基本没法用。第四步手动调整和验证。Copilot生成的代码从来不是直接能用的总有一些细节需要改。比如它可能用了固定的px值而不是rem可能忘了加hover状态可能响应式断点设得不对。但这些调整比起从零开始写已经省了太多时间。4.3 Copilot写UI代码的边界哪些能交给它哪些必须自己来用了一段时间之后我摸清了Copilot的能力边界任务类型Copilot表现我的做法基础布局Flex/Grid很好直接生成微调即可组件样式颜色、间距、圆角较好生成后对照设计稿检查交互逻辑hover、focus、transition一般生成后手动补充复杂动画较差自己写或找现成库响应式断点一般生成后根据实际设备测试调整无障碍属性aria-label等较差手动添加这个表格是我在实际项目中反复验证过的。简单来说结构性的、模式化的代码可以交给Copilot涉及具体业务逻辑和用户体验细节的代码必须自己来。还有一个心得Copilot对设计系统变量的支持取决于你的项目配置。如果你在项目里配置了Tailwind或者CSS变量Copilot会优先使用这些变量。所以花时间把设计系统配置好是一次投入长期受益的事情。5. MCP加Figma AI Bridge打通设计工具和AI工具的那座桥5.1 MCP协议到底是什么为什么UI设计师需要关心它MCP全称是Model Context Protocol简单理解就是一套让AI模型和外部工具“对话”的协议。你可以把它想象成一个翻译官——AI模型说一种语言Figma说另一种语言MCP负责在中间翻译让两边能互相理解。为什么UI设计师需要关心这个因为在此之前AI工具和设计工具是割裂的。你在Midjourney里生成的图要手动下载再导入Figma你在Figma里做的设计要手动导出再喂给AI工具分析。MCP出现之后这些步骤可以自动化了。具体到Figma AI Bridge它的作用是让AI模型能够直接读取Figma文件的结构化数据——图层、组件、变量、样式——然后基于这些数据做分析和生成。比如你可以让AI读取你当前的设计稿然后问它“这个页面的信息层级是否清晰”它会基于实际的图层结构给出分析而不是像以前那样只能看一张截图。5.2 配置MCP加Figma AI Bridge的完整步骤我把自己配置的过程完整记录一下供参考前置条件你需要一个支持MCP的AI客户端比如Claude Desktop一个Figma账号以及基本的命令行操作能力。第一步获取Figma的访问令牌。登录Figma后进入Settings → Account → Personal Access Tokens生成一个token。这个token需要包含读取文件的权限。第二步安装MCP服务器。在命令行里运行安装命令具体命令取决于你使用的MCP服务器实现。安装完成后在配置文件里填入Figma的token和你要连接的文件ID。第三步配置AI客户端。在Claude Desktop的配置文件里添加MCP服务器的地址和端口。重启客户端后你应该能看到Figma相关的工具已经加载进来了。第四步测试连接。在AI客户端里输入“读取我的Figma文件列出所有页面名称”如果配置正确AI会返回你Figma文件里的页面列表。注意Figma的API有速率限制频繁读取大文件可能会触发限流。我的做法是只在需要深度分析时才连接日常操作还是直接在Figma里完成。5.3 这套组合拳在实际项目中解决了什么问题配置好之后我在一个设计系统重构项目里用到了这套组合。当时的情况是设计系统里有三百多个组件我需要检查哪些组件没有使用设计变量、哪些组件的命名不符合规范、哪些组件的变体缺失了必要状态。以前做这种检查要么手动一个个看要么写Figma插件。手动看太慢写插件成本太高。用MCP加Figma AI Bridge之后我直接让AI读取整个文件然后问它“列出所有没有使用color token的组件”。AI在几秒钟内就给出了列表还按页面分组整理好了。这个效率提升是巨大的。但也要说清楚AI给出的结果需要人工复核。它有时候会把一些边缘情况误判比如某个组件用了变量但嵌套在另一个组件里AI可能识别不到。所以我的流程是AI初筛 → 人工复核 → 批量修改。6. 设计师的护城河在哪里AI替代不了的五件事6.1 从“画图的人”到“解决问题的人”角色定位的转变聊了这么多工具我想回到最核心的问题AI到底会不会取代UI设计师我的判断是会取代“只会画图”的设计师但会放大“会解决问题”的设计师的价值。这两类设计师的区别在哪里前者接到需求就开始画界面后者会先问“这个需求要解决什么问题”、“用户是谁”、“业务目标是什么”。举个例子。产品经理说“我们要加一个分享功能”。只会画图的设计师会直接画一个分享按钮放在页面右上角。会解决问题的设计师会先想用户为什么要分享分享给谁分享的内容是什么分享之后希望对方做什么这些问题想清楚之后可能发现根本不需要一个“分享按钮”而是需要在内容消费的关键节点嵌入分享引导。AI可以帮你画一百个分享按钮的样式但它无法替你回答上面这些问题。这些问题需要对人性的理解、对业务的理解、对场景的理解——这些是AI目前不具备的。6.2 那些AI学不会的设计判断力我在实际工作中总结了几类AI目前完全无法替代的设计判断第一类是“取舍判断”。设计本质上是一系列取舍信息多了还是少了、操作路径短了还是长了、视觉冲击强了还是弱了。这些取舍没有标准答案取决于具体的业务阶段、用户群体、竞争环境。AI可以给你十个方案但选哪个、为什么选需要人来判断。第二类是“跨部门沟通”。设计师的工作有很大一部分是沟通和产品经理对齐需求、和开发讨论实现方案、和运营协调上线节奏。这些沟通里充满了模糊地带和利益博弈AI目前完全无法参与。第三类是“设计系统维护”。设计系统不是画完就完了它需要持续维护新组件怎么加、旧组件怎么废弃、变量怎么命名、文档怎么写。这些工作需要对公司设计语言有深刻理解AI做不了。第四类是“用户研究”。做用户访谈、分析用户行为数据、提炼用户洞察——这些工作的核心是“理解人”而AI目前对人类的复杂情感和动机理解还很浅。第五类是“创意突破”。当所有人都用AI生成类似风格的设计时真正能脱颖而出的反而是那些“不像AI做的”设计。这种创意突破需要设计师有独特的审美积累和生活体验AI只能模仿已有的风格无法创造全新的视觉语言。6.3 我给自己定的三条职业发展策略基于以上判断我给自己定了三条策略也分享给正在读这篇文章的你策略一把AI工具用成“肌肉记忆”。不要抗拒不要观望直接上手用。Midjourney、Figma AI、GitHub Copilot、MCP这些工具我都在真实项目里用过。用多了之后你会形成一种直觉什么任务交给AI什么任务自己来。这种直觉是竞争力。策略二往“上游”走。不要只停留在“画界面”这个环节。往上游走参与需求分析、用户研究、产品策略往下游走了解前端实现、数据分析、增长实验。你的价值不在于你会用Figma而在于你能把Figma里的东西变成业务结果。策略三建立个人设计哲学。AI可以生成无数种风格但无法替你决定“你相信什么样的设计是好的”。这个判断需要你自己建立。我的设计哲学是“清晰优于巧妙一致优于新奇可用优于好看”。这个哲学指导我所有的设计决策也让我在面对AI生成的各种方案时能快速判断取舍。7. 我现在的日常工作流AI工具和传统设计流程的融合7.1 一个典型项目的完整流程拆解让我用一个最近做的项目来具体说明。这是一个B端数据看板的改版从接到需求到交付开发我大概用了两周时间。第一天需求理解和信息架构。和产品经理开了两个小时的会搞清楚了这个看板要解决什么问题、用户是谁、核心指标是什么。然后我用Figma的FigJam画了一个信息架构图。这一步完全没用AI因为需要和产品经理实时讨论、快速调整。第二天到第三天概念探索。用Midjourney跑了大概五十张情绪板探索不同的视觉方向。同时用Figma AI生成了几套配色方案作为参考。最终选定了三个方向做成简单的概念稿给产品经理看。第四天到第七天详细设计。这是工作量最大的阶段。我用Figma AI批量重命名了所有图层用自动变体功能生成了组件的各种状态用内容填充功能生成了表格和卡片的占位数据。这些重复性工作大概省了我一天半的时间。省下来的时间我用来打磨交互细节和响应式布局。第八天到第九天设计评审和修改。把设计稿发给团队评审收集反馈然后修改。这一步AI帮不上忙因为评审涉及大量的主观判断和业务讨论。第十天到第十二天前端还原验证。用GitHub Copilot把关键页面转成代码在浏览器里验证布局和交互。发现了一些在Figma里没注意到的问题比如某个表格在数据量大时的滚动行为、某个图表在移动端的显示效果。这些问题在代码里暴露出来之后我回到Figma做了调整。第十三天到第十四天交付和走查。整理设计规范文档标注关键参数和开发做交接。开发实现过程中我用MCP加Figma AI Bridge让AI帮我检查了实现效果和设计稿的差异生成了一份差异报告。7.2 哪些环节AI帮了大忙哪些环节必须亲力亲为回顾这个项目AI帮了大忙的环节是概念探索阶段的情绪板生成、详细设计阶段的重复性操作、前端还原阶段的代码生成、走查阶段的差异检查。必须亲力亲为的环节是需求理解、信息架构、设计决策、评审沟通、最终交付。这个分工比例大概是AI承担了30%的工作量但这30%恰恰是以前最枯燥、最耗时的部分。省下来的时间我投入到了那70%需要人类判断力的工作中整体产出质量反而提高了。7.3 给不同阶段设计师的实用建议如果你是刚入行的设计师我的建议是先把基本功练扎实。AI可以帮你画图但帮不了你理解栅格系统、色彩理论、排版原则。这些基础不牢你用AI生成的东西也只是“看起来还行”经不起推敲。如果你是有三到五年经验的设计师我的建议是尽快把AI工具融入你的工作流。你已经有了一定的设计判断力AI可以帮你放大这个判断力的影响范围。以前你只能服务一个项目现在你可以用AI快速探索多个方向服务更多项目。如果你是资深设计师或设计管理者我的建议是思考如何用AI重构团队的工作流程。哪些环节可以自动化、哪些角色需要重新定义、如何衡量AI工具带来的效率提升。这些问题比“AI会不会取代设计师”更值得花时间思考。8. 关于AI和UI设计我现在的真实心态写了这么多最后说点个人感受。两年前那个凌晨两点失眠的晚上我焦虑的是“我会不会失业”。现在我的焦虑变成了“我怎么才能把AI用得更好”。这个转变不是因为我看到了什么权威预测而是因为我在真实项目里反复验证了一个事实AI是一个能力放大器它放大的是你原本就有的能力。如果你原本就只会画图AI会让你画得更快但你的可替代性反而更高了——因为别人用AI也能画得一样快。如果你原本就擅长解决问题AI会帮你省下大量重复劳动的时间让你有更多精力去做那些真正创造价值的事。所以我的结论很简单不要问“AI会不会取代UI设计师”要问“我是不是那个只会画图的UI设计师”。如果是现在开始改变还来得及。如果不是AI是你最好的帮手。我现在的日常是早上到公司先花半小时刷一遍AI工具的新功能看看有没有能用到当前项目里的。然后打开Figma开始一天的工作。AI工具就像我团队里的实习生——能干、听话、偶尔犯傻需要我指导但确实帮我分担了很多。我不会担心实习生取代我同样我也不担心AI取代我。 AI设计工具实战：UI设计师如何用Midjourney和Figma AI提升效率
1. 从“被AI吓到失眠”到“把AI当实习生”一个十年UI设计师的真实心路大概从2023年上半年开始我身边的设计师群里开始频繁出现一种焦虑有人发一张Midjourney生成的界面概念图配文“这玩意儿是不是要让我们失业了”有人转一篇“AI取代设计师”的爆款文章然后群里沉默半天没人说话。我自己也经历过那个阶段——凌晨两点刷着各种AI工具的新功能越刷越清醒脑子里反复转着一个问题我做了十年UI难道真要归零了现在两年多过去我的判断和当初完全不同。不是因为我看到了什么权威报告而是因为我在真实项目里把AI工具用了个遍——Midjourney出概念方向、Figma AI做组件变体、GitHub Copilot写前端代码、甚至试过用MCP协议把Figma和AI工具串起来。踩了无数坑之后我得出一个可能有点反直觉的结论AI设计工具不会取代UI设计师但它会取代“只会画图”的UI设计师。这两句话听起来差不多实际差别巨大。这篇文章我想聊的不是“AI好不好”这种空泛话题而是把我这两年多在真实工作流里使用AI工具的具体经验拆开来讲。包括Midjourney怎么和Figma配合、Figma AI哪些功能真正省时间哪些是噱头、GitHub Copilot在还原设计稿时到底靠不靠谱、以及那个被热炒的“MCP加Figma AI Bridge”到底能解决什么问题。如果你也是UI设计师或者正在考虑入行希望这些从实战里磨出来的判断能帮你少走一些弯路。2. Midjourney在UI工作流里的真实位置灵感加速器不是交付工具2.1 为什么我最终把Midjourney定位在“前期探索”阶段刚开始用Midjourney的时候我和很多人一样试图让它直接生成可用的UI界面。输入“mobile app login screen, clean design, blue theme”之类的提示词出来的图确实好看但仔细一看全是问题按钮大小不一致、文字是乱码、间距毫无规律、交互逻辑根本不存在。你没法把这些图直接交给开发甚至没法直接放进设计稿里用。后来我想明白了一件事Midjourney本质上是一个图像生成模型它不理解UI的栅格系统、组件复用、响应式断点这些概念。它擅长的是氛围、风格、色彩搭配、视觉冲击力这些恰恰是UI设计前期最需要探索的东西。所以我把它的位置调整了——不再让它“画界面”而是让它“定调性”。具体怎么操作比如接到一个金融类App的改版需求我会先用Midjourney跑一批情绪板。提示词大概是这样组织的先定风格关键词比如“minimal, trustworthy, professional”再加色彩倾向“deep blue and warm gray palette”再加参考媒介“inspired by Swiss typography”最后加技术参数“--ar 16:9 --style raw”。跑出二三十张图之后挑出四五张色彩和氛围最对味的导入Figma作为情绪板使用。注意Midjourney生成的图不要直接吸色。屏幕显示和实际设计系统的色值之间有偏差吸出来的颜色放到组件库里往往不协调。我的做法是参考它的色彩关系然后在自己建立的色板里找最接近的色阶。2.2 提示词工程在UI场景下的几个实用套路很多人觉得写Midjourney提示词是玄学其实在UI场景下有比较明确的套路可循。我总结了几个自己常用的模板风格探索型[产品类型] UI design, [风格关键词], [色彩描述], [参考设计体系], clean layout, high fidelity --ar 16:9组件灵感型[组件名称] design, [状态描述], [材质/风格], isolated on white background, UI kit style --ar 1:1插画辅助型empty state illustration for [场景], [风格], flat vector, [色彩], matching UI color palette --ar 4:3这里有个细节值得展开--style raw参数在UI场景下几乎必加。默认模式下Midjourney会加很多“艺术化”的处理比如夸张的光影、戏剧化的构图这些在UI里全是干扰。加上--style raw之后输出会更接近“设计稿”而不是“艺术画”。还有一个我踩过的坑不要在一开始就追求“完美提示词”。我的习惯是先跑四张低质量的快速预览--q 0.5看大方向对不对方向对了再跑高质量版本。这样一轮探索下来消耗的GPU时间大概只有直接跑高质量的三分之一。2.3 从Midjourney到Figma中间缺失的那一环怎么补Midjourney出图之后怎么把它变成Figma里可用的素材直接拖进去当参考图是最简单的但如果你想提取其中的视觉元素——比如某个渐变、某种阴影处理、某组配色关系——就需要一些中间步骤。我的工作流是这样的Midjourney出图后先在Photoshop里做一次“拆解”。把图中值得参考的部分裁出来用吸管工具取色然后在Figma里对照着重建。听起来很笨但这个过程恰恰是设计师价值所在——AI给的是“感觉”你需要把它翻译成“规范”。举个例子Midjourney生成了一张卡片式布局的图卡片有很微妙的投影。我吸色发现投影不是纯黑而是带了一点蓝紫色调。这个发现会直接影响到我设计系统里shadow token的定义。这种“从AI输出里提取设计决策”的能力是目前AI自己做不到的。3. Figma AI的实战评测哪些功能真省时间哪些纯粹是演示噱头3.1 Figma AI功能逐个拆从“第一眼惊艳”到“长期使用后的真实评价”Figma在2024年集中上线了一批AI功能我当时第一时间就开了测试。用了一年多下来我的评价是有亮点但远没有宣传片里那么神奇。下面逐个说我实际使用频率最高的几个功能。自动重命名图层这个功能我一开始觉得是刚需。做设计稿的人都知道图层命名混乱是常态交接给开发的时候经常被吐槽。Figma AI可以根据图层内容自动生成语义化的名称比如把“Rectangle 47”改成“Card Container”。实测下来准确率大概在70%左右。简单组件没问题复杂嵌套结构经常识别错误。我的用法是先让AI批量重命名然后手动过一遍把明显不对的改掉。比纯手动快但别指望一键搞定。自动生成组件变体这个功能让我又爱又恨。它的逻辑是你选中一个基础组件AI根据常见的使用场景自动生成hover、active、disabled等状态。听起来很美好对吧实际用的时候生成的变体经常不符合我的设计系统规范——圆角不对、间距不对、颜色不在色板里。后来我调整了策略先把自己的设计系统变量color token、spacing token配置好再让AI生成变体这样出来的结果可用率能提高到80%左右。内容填充功能是我用得最多的。做设计稿的时候经常需要填充假数据以前要么手动编要么用插件生成一堆“Lorem ipsum”。Figma AI可以根据上下文生成合理的占位内容比如在一个电商卡片里它会生成商品名称、价格、评分这些符合场景的文本。这个功能确实省时间而且生成的内容比随机字符串更有利于评估设计效果。3.2 那些宣传很猛但实际很鸡肋的功能AI生成完整页面这个功能我在发布会当天就试了。输入“一个电商首页包含轮播图、商品网格、底部导航”等了大概半分钟出来一个页面。第一眼看上去还行但仔细一看栅格系统是乱的、组件没有复用、响应式完全没考虑。你如果要把它改成可用的设计稿花的时间比从零开始画还多。AI配色方案也是类似的问题。它生成的配色单独看都挺好看但放到具体产品语境里经常不成立。比如一个医疗类产品它可能给你生成一套很潮的霓虹色视觉上很抓眼球但完全不符合医疗行业需要的“专业、可信赖”的调性。配色这件事AI可以给你灵感但最终决策必须基于对业务和用户的理解。AI生成图标这个功能我的评价是“能用但不好用”。生成的图标风格不统一线性图标和面性图标混在一起描边粗细也不一致。如果你只是需要一两个装饰性图标可以用但如果是构建图标系统还是老老实实找图标库或者自己画。3.3 把Figma AI用出价值的正确姿势用了一年多我总结出一个核心原则把Figma AI当成“加速器”而不是“替代者”。它最擅长的是那些重复性的、有明确规则的、不需要太多判断的工作。比如批量重命名、批量生成变体、填充占位内容。这些工作以前要花一两个小时现在可能二十分钟就搞定了。但涉及到设计决策的部分——比如这个页面的信息层级怎么排、这个交互流程怎么设计、这个视觉风格是否符合品牌调性——AI目前完全无法胜任。它没有业务上下文不理解用户需求不知道竞品在做什么。这些恰恰是UI设计师的核心价值。我现在的习惯是每天开始工作前先花十分钟把当天要做的重复性工作列出来看看哪些可以交给Figma AI。然后集中处理处理完再手动检查一遍。这样下来每天大概能省出两到三个小时这些时间我用来做设计评审、和产品经理对齐需求、研究竞品——这些才是真正拉开设计师差距的地方。4. GitHub Copilot还原设计稿前端代码生成的真实体验4.1 为什么我开始用Copilot写前端代码作为一个UI设计师我以前的工作流是Figma出稿 → 标注 → 交给开发 → 开发还原 → 走查 → 提bug → 开发修改。这个流程里最大的痛点是“走查”环节——开发还原出来的效果和设计稿总有偏差有时候是间距差了几个像素有时候是颜色不对有时候是交互状态没做。后来我开始尝试自己写前端代码。不是要抢开发的活而是想通过代码来验证自己的设计是否可行。比如一个复杂的卡片布局用Flexbox还是Grid响应式断点怎么设这些问题在Figma里想和在实际代码里写感受完全不同。GitHub Copilot在这个过程中帮了大忙。它可以根据注释和上下文自动补全代码对于我这种“懂一点前端但不算精通”的设计师来说大大降低了写代码的门槛。4.2 用Copilot把Figma设计稿转成代码的实操流程我的流程大概是这样第一步在Figma里整理好设计稿。确保所有组件都用了Auto Layout间距和颜色都引用了设计系统变量。这一步很关键因为Copilot生成的代码质量很大程度上取决于输入的“语义化程度”。如果你的设计稿里全是“Frame 123”、“Rectangle 456”Copilot也帮不了你。第二步导出设计稿的CSS信息。Figma可以选中元素后直接复制CSS代码我会把这些代码粘贴到编辑器里作为参考。第三步用注释引导Copilot生成代码。比如我会写这样的注释// 创建一个响应式卡片组件 // 使用CSS Grid布局桌面端3列平板2列手机1列 // 卡片包含图片、标题、描述、价格 // 使用设计系统变量--spacing-md, --color-primary, --radius-lg然后Copilot就会根据这些注释生成代码。实测下来注释写得越具体生成的代码可用率越高。如果只写“创建一个卡片”出来的代码基本没法用。第四步手动调整和验证。Copilot生成的代码从来不是直接能用的总有一些细节需要改。比如它可能用了固定的px值而不是rem可能忘了加hover状态可能响应式断点设得不对。但这些调整比起从零开始写已经省了太多时间。4.3 Copilot写UI代码的边界哪些能交给它哪些必须自己来用了一段时间之后我摸清了Copilot的能力边界任务类型Copilot表现我的做法基础布局Flex/Grid很好直接生成微调即可组件样式颜色、间距、圆角较好生成后对照设计稿检查交互逻辑hover、focus、transition一般生成后手动补充复杂动画较差自己写或找现成库响应式断点一般生成后根据实际设备测试调整无障碍属性aria-label等较差手动添加这个表格是我在实际项目中反复验证过的。简单来说结构性的、模式化的代码可以交给Copilot涉及具体业务逻辑和用户体验细节的代码必须自己来。还有一个心得Copilot对设计系统变量的支持取决于你的项目配置。如果你在项目里配置了Tailwind或者CSS变量Copilot会优先使用这些变量。所以花时间把设计系统配置好是一次投入长期受益的事情。5. MCP加Figma AI Bridge打通设计工具和AI工具的那座桥5.1 MCP协议到底是什么为什么UI设计师需要关心它MCP全称是Model Context Protocol简单理解就是一套让AI模型和外部工具“对话”的协议。你可以把它想象成一个翻译官——AI模型说一种语言Figma说另一种语言MCP负责在中间翻译让两边能互相理解。为什么UI设计师需要关心这个因为在此之前AI工具和设计工具是割裂的。你在Midjourney里生成的图要手动下载再导入Figma你在Figma里做的设计要手动导出再喂给AI工具分析。MCP出现之后这些步骤可以自动化了。具体到Figma AI Bridge它的作用是让AI模型能够直接读取Figma文件的结构化数据——图层、组件、变量、样式——然后基于这些数据做分析和生成。比如你可以让AI读取你当前的设计稿然后问它“这个页面的信息层级是否清晰”它会基于实际的图层结构给出分析而不是像以前那样只能看一张截图。5.2 配置MCP加Figma AI Bridge的完整步骤我把自己配置的过程完整记录一下供参考前置条件你需要一个支持MCP的AI客户端比如Claude Desktop一个Figma账号以及基本的命令行操作能力。第一步获取Figma的访问令牌。登录Figma后进入Settings → Account → Personal Access Tokens生成一个token。这个token需要包含读取文件的权限。第二步安装MCP服务器。在命令行里运行安装命令具体命令取决于你使用的MCP服务器实现。安装完成后在配置文件里填入Figma的token和你要连接的文件ID。第三步配置AI客户端。在Claude Desktop的配置文件里添加MCP服务器的地址和端口。重启客户端后你应该能看到Figma相关的工具已经加载进来了。第四步测试连接。在AI客户端里输入“读取我的Figma文件列出所有页面名称”如果配置正确AI会返回你Figma文件里的页面列表。注意Figma的API有速率限制频繁读取大文件可能会触发限流。我的做法是只在需要深度分析时才连接日常操作还是直接在Figma里完成。5.3 这套组合拳在实际项目中解决了什么问题配置好之后我在一个设计系统重构项目里用到了这套组合。当时的情况是设计系统里有三百多个组件我需要检查哪些组件没有使用设计变量、哪些组件的命名不符合规范、哪些组件的变体缺失了必要状态。以前做这种检查要么手动一个个看要么写Figma插件。手动看太慢写插件成本太高。用MCP加Figma AI Bridge之后我直接让AI读取整个文件然后问它“列出所有没有使用color token的组件”。AI在几秒钟内就给出了列表还按页面分组整理好了。这个效率提升是巨大的。但也要说清楚AI给出的结果需要人工复核。它有时候会把一些边缘情况误判比如某个组件用了变量但嵌套在另一个组件里AI可能识别不到。所以我的流程是AI初筛 → 人工复核 → 批量修改。6. 设计师的护城河在哪里AI替代不了的五件事6.1 从“画图的人”到“解决问题的人”角色定位的转变聊了这么多工具我想回到最核心的问题AI到底会不会取代UI设计师我的判断是会取代“只会画图”的设计师但会放大“会解决问题”的设计师的价值。这两类设计师的区别在哪里前者接到需求就开始画界面后者会先问“这个需求要解决什么问题”、“用户是谁”、“业务目标是什么”。举个例子。产品经理说“我们要加一个分享功能”。只会画图的设计师会直接画一个分享按钮放在页面右上角。会解决问题的设计师会先想用户为什么要分享分享给谁分享的内容是什么分享之后希望对方做什么这些问题想清楚之后可能发现根本不需要一个“分享按钮”而是需要在内容消费的关键节点嵌入分享引导。AI可以帮你画一百个分享按钮的样式但它无法替你回答上面这些问题。这些问题需要对人性的理解、对业务的理解、对场景的理解——这些是AI目前不具备的。6.2 那些AI学不会的设计判断力我在实际工作中总结了几类AI目前完全无法替代的设计判断第一类是“取舍判断”。设计本质上是一系列取舍信息多了还是少了、操作路径短了还是长了、视觉冲击强了还是弱了。这些取舍没有标准答案取决于具体的业务阶段、用户群体、竞争环境。AI可以给你十个方案但选哪个、为什么选需要人来判断。第二类是“跨部门沟通”。设计师的工作有很大一部分是沟通和产品经理对齐需求、和开发讨论实现方案、和运营协调上线节奏。这些沟通里充满了模糊地带和利益博弈AI目前完全无法参与。第三类是“设计系统维护”。设计系统不是画完就完了它需要持续维护新组件怎么加、旧组件怎么废弃、变量怎么命名、文档怎么写。这些工作需要对公司设计语言有深刻理解AI做不了。第四类是“用户研究”。做用户访谈、分析用户行为数据、提炼用户洞察——这些工作的核心是“理解人”而AI目前对人类的复杂情感和动机理解还很浅。第五类是“创意突破”。当所有人都用AI生成类似风格的设计时真正能脱颖而出的反而是那些“不像AI做的”设计。这种创意突破需要设计师有独特的审美积累和生活体验AI只能模仿已有的风格无法创造全新的视觉语言。6.3 我给自己定的三条职业发展策略基于以上判断我给自己定了三条策略也分享给正在读这篇文章的你策略一把AI工具用成“肌肉记忆”。不要抗拒不要观望直接上手用。Midjourney、Figma AI、GitHub Copilot、MCP这些工具我都在真实项目里用过。用多了之后你会形成一种直觉什么任务交给AI什么任务自己来。这种直觉是竞争力。策略二往“上游”走。不要只停留在“画界面”这个环节。往上游走参与需求分析、用户研究、产品策略往下游走了解前端实现、数据分析、增长实验。你的价值不在于你会用Figma而在于你能把Figma里的东西变成业务结果。策略三建立个人设计哲学。AI可以生成无数种风格但无法替你决定“你相信什么样的设计是好的”。这个判断需要你自己建立。我的设计哲学是“清晰优于巧妙一致优于新奇可用优于好看”。这个哲学指导我所有的设计决策也让我在面对AI生成的各种方案时能快速判断取舍。7. 我现在的日常工作流AI工具和传统设计流程的融合7.1 一个典型项目的完整流程拆解让我用一个最近做的项目来具体说明。这是一个B端数据看板的改版从接到需求到交付开发我大概用了两周时间。第一天需求理解和信息架构。和产品经理开了两个小时的会搞清楚了这个看板要解决什么问题、用户是谁、核心指标是什么。然后我用Figma的FigJam画了一个信息架构图。这一步完全没用AI因为需要和产品经理实时讨论、快速调整。第二天到第三天概念探索。用Midjourney跑了大概五十张情绪板探索不同的视觉方向。同时用Figma AI生成了几套配色方案作为参考。最终选定了三个方向做成简单的概念稿给产品经理看。第四天到第七天详细设计。这是工作量最大的阶段。我用Figma AI批量重命名了所有图层用自动变体功能生成了组件的各种状态用内容填充功能生成了表格和卡片的占位数据。这些重复性工作大概省了我一天半的时间。省下来的时间我用来打磨交互细节和响应式布局。第八天到第九天设计评审和修改。把设计稿发给团队评审收集反馈然后修改。这一步AI帮不上忙因为评审涉及大量的主观判断和业务讨论。第十天到第十二天前端还原验证。用GitHub Copilot把关键页面转成代码在浏览器里验证布局和交互。发现了一些在Figma里没注意到的问题比如某个表格在数据量大时的滚动行为、某个图表在移动端的显示效果。这些问题在代码里暴露出来之后我回到Figma做了调整。第十三天到第十四天交付和走查。整理设计规范文档标注关键参数和开发做交接。开发实现过程中我用MCP加Figma AI Bridge让AI帮我检查了实现效果和设计稿的差异生成了一份差异报告。7.2 哪些环节AI帮了大忙哪些环节必须亲力亲为回顾这个项目AI帮了大忙的环节是概念探索阶段的情绪板生成、详细设计阶段的重复性操作、前端还原阶段的代码生成、走查阶段的差异检查。必须亲力亲为的环节是需求理解、信息架构、设计决策、评审沟通、最终交付。这个分工比例大概是AI承担了30%的工作量但这30%恰恰是以前最枯燥、最耗时的部分。省下来的时间我投入到了那70%需要人类判断力的工作中整体产出质量反而提高了。7.3 给不同阶段设计师的实用建议如果你是刚入行的设计师我的建议是先把基本功练扎实。AI可以帮你画图但帮不了你理解栅格系统、色彩理论、排版原则。这些基础不牢你用AI生成的东西也只是“看起来还行”经不起推敲。如果你是有三到五年经验的设计师我的建议是尽快把AI工具融入你的工作流。你已经有了一定的设计判断力AI可以帮你放大这个判断力的影响范围。以前你只能服务一个项目现在你可以用AI快速探索多个方向服务更多项目。如果你是资深设计师或设计管理者我的建议是思考如何用AI重构团队的工作流程。哪些环节可以自动化、哪些角色需要重新定义、如何衡量AI工具带来的效率提升。这些问题比“AI会不会取代设计师”更值得花时间思考。8. 关于AI和UI设计我现在的真实心态写了这么多最后说点个人感受。两年前那个凌晨两点失眠的晚上我焦虑的是“我会不会失业”。现在我的焦虑变成了“我怎么才能把AI用得更好”。这个转变不是因为我看到了什么权威预测而是因为我在真实项目里反复验证了一个事实AI是一个能力放大器它放大的是你原本就有的能力。如果你原本就只会画图AI会让你画得更快但你的可替代性反而更高了——因为别人用AI也能画得一样快。如果你原本就擅长解决问题AI会帮你省下大量重复劳动的时间让你有更多精力去做那些真正创造价值的事。所以我的结论很简单不要问“AI会不会取代UI设计师”要问“我是不是那个只会画图的UI设计师”。如果是现在开始改变还来得及。如果不是AI是你最好的帮手。我现在的日常是早上到公司先花半小时刷一遍AI工具的新功能看看有没有能用到当前项目里的。然后打开Figma开始一天的工作。AI工具就像我团队里的实习生——能干、听话、偶尔犯傻需要我指导但确实帮我分担了很多。我不会担心实习生取代我同样我也不担心AI取代我。