2026-6-10 之晨 行業(yè)趨勢(shì)
現(xiàn)在 AI 產(chǎn)品這么多,作為 UIUX 設(shè)計(jì)師,我到底應(yīng)該使用哪一款?
Figma Make、Gemini、Claude Code、Codex,每一款產(chǎn)品看上去都能生成內(nèi)容、寫代碼、做頁面。
但真正深度使用過后,你會(huì)發(fā)現(xiàn):它們擅長(zhǎng)解決的問題并不相同。
蘭亭妙微UI設(shè)計(jì):今天,我們就站在 UIUX 設(shè)計(jì)師的真實(shí)工作流程中,聊聊每一款產(chǎn)品的能力邊界,以及究竟應(yīng)該如何選擇。AI 產(chǎn)品更新很快,后續(xù)能力仍然會(huì)不斷變化。
在對(duì)比之前,我們需要先明確一件事:
AI 產(chǎn)品不是功能越多越好,而是要看它能否進(jìn)入你的真實(shí)工作流程。
比如,我要寫一篇公眾號(hào)文章、整理用戶訪談,這和我要搭建一個(gè)復(fù)雜的頁面 Demo,完全是兩種任務(wù)。
如果沒有理解差別,我們就很容易陷入一個(gè)誤區(qū):
今天看到別人用 Claude Code,我就去折騰 Claude Code;明天發(fā)現(xiàn) Figma Make 更新了,又把所有流程搬回 Figma。
工具收藏了一堆,最后真正工作時(shí)依舊不知道應(yīng)該打開哪一個(gè)。
那對(duì)于 UIUX 設(shè)計(jì)師而言,我們應(yīng)該重點(diǎn)關(guān)注哪些問題?
接下來,我們逐個(gè)拆解。
如果你本身就在使用 Figma,又不想折騰復(fù)雜配置,那么 Figma Make 應(yīng)該是最容易開始的工具。
它最大的優(yōu)勢(shì)在于:距離設(shè)計(jì)師原本的工作環(huán)境足夠近。
你只需要在 Figma Make 中通過對(duì)話,就可以創(chuàng)建交互原型、Web 頁面和功能 Demo。
同時(shí),它支持將現(xiàn)有設(shè)計(jì)稿、競(jìng)品截圖、產(chǎn)品文檔和圖片素材作為參考內(nèi)容。比如,你可以丟給它一張競(jìng)品截圖,讓它參考頁面布局、顏色和內(nèi)容結(jié)構(gòu),生成一個(gè)相近的頁面。
如果公司已經(jīng)有相對(duì)成熟的設(shè)計(jì)系統(tǒng),還可以通過 Make Kits 引入組件、變量、樣式和使用規(guī)則,讓生成結(jié)果更接近團(tuán)隊(duì)規(guī)范。
不過,這里大家需要留意:
接入設(shè)計(jì)系統(tǒng),不代表生成結(jié)果一定正確。
特別是復(fù)雜業(yè)務(wù)頁面,仍然需要設(shè)計(jì)師反復(fù)檢查信息結(jié)構(gòu)、組件使用和交互邏輯。競(jìng)品截圖也只能作為參考,并不等于可以像素級(jí)還原。
這里稍微多說一點(diǎn),現(xiàn)如今很多設(shè)計(jì)師都非常依賴 AI 工具,根本不用自己去做設(shè)計(jì),但從來沒有思考過 AI 生成的結(jié)果是否正確。比如今天有同學(xué)來咨詢一個(gè)小的問題,在AI生成的頁面中,他沒有做任何的思考,直接使用結(jié)果導(dǎo)致提案失敗,所以我們現(xiàn)在是需要具備判斷能力的。
所以,F(xiàn)igma Make 更適合:
在我的日常使用中,Gemini 更多承擔(dān)的是“內(nèi)容助手”的角色。
它支持較長(zhǎng)的上下文,也具備文本、圖片、音頻和視頻等多模態(tài)理解能力。
因此,無論是閱讀行業(yè)報(bào)告、分析競(jìng)品資料、整理訪談?dòng)涗?,還是拆解一段視頻內(nèi)容,它都非常合適。
在我自己的工作流里,無論是視頻文案、公眾號(hào)文章,還是課程資料,我都會(huì)使用 Gemini 做初步整理和潤(rùn)色。
從個(gè)人體驗(yàn)來看,它在表達(dá)層面會(huì)更自然一些,也更適合處理較長(zhǎng)的文本內(nèi)容。
不過,如果你的目標(biāo)是直接修改 Figma 頁面,或者搭建一套完整的設(shè)計(jì)工程化流程,它并不是第一選擇。
Gemini 更適合:
Claude Code 的定位相對(duì)明確:
它首先是一款面向工程任務(wù)的代碼智能體。
如果你需要理解復(fù)雜項(xiàng)目、梳理代碼結(jié)構(gòu)、定位 Bug,或者將一個(gè)頁面 Demo 做得更加穩(wěn)定,那么 Claude Code 會(huì)是非常不錯(cuò)的選擇。
它能夠讀取項(xiàng)目文件、執(zhí)行命令、修改代碼,也可以通過 MCP 連接 Figma、Google Drive、Slack 等外部工具。
所以,Claude Code 并不是不能接入 Figma,而是它的重心依舊偏向工程實(shí)現(xiàn)。
在我的使用體驗(yàn)中,如果任務(wù)涉及復(fù)雜代碼邏輯、項(xiàng)目級(jí)修改和穩(wěn)定落地,我會(huì)優(yōu)先考慮 Claude Code。
但如果目標(biāo)是生成圖片素材、調(diào)整視覺風(fēng)格,或者希望在設(shè)計(jì)工具之間快速往返,它就不是我的第一選擇。
Claude Code 更適合:
最后,我們來聊聊 Codex。
目前在日常輔導(dǎo)中,我更建議 UIUX 設(shè)計(jì)師重點(diǎn)嘗試 Codex。
原因不是它在每一個(gè)單點(diǎn)能力上都絕對(duì)領(lǐng)先,而是:
它能夠把設(shè)計(jì)師原本割裂的工作流程串聯(lián)起來。
首先,Codex 可以通過 Figma MCP 讀取組件、變量、布局和設(shè)計(jì)上下文,也可以將代碼頁面重新傳回 Figma,生成可編輯的設(shè)計(jì)圖層。
這就意味著,設(shè)計(jì)稿與真實(shí)頁面之間不再是單向交付,而是能夠反復(fù)往返。
其次,Codex 支持圖片生成和迭代修改。
比如頁面缺少圖標(biāo)、插畫、背景圖或者產(chǎn)品素材,你可以直接讓它生成,再根據(jù)頁面效果反復(fù)調(diào)整。
然后,它還支持 Computer Use、應(yīng)用內(nèi)瀏覽器和插件。
這就讓設(shè)計(jì)師可以進(jìn)一步串聯(lián):
需求梳理 -> 頁面生成 -> 素材補(bǔ)充 -> 瀏覽器驗(yàn)證 -> 設(shè)計(jì)走查 -> 繼續(xù)優(yōu)化
比如我們之前講過的設(shè)計(jì)驗(yàn)收,就可以讓 Codex 通過瀏覽器查看真實(shí)頁面,再對(duì)照設(shè)計(jì)稿檢查問題。
當(dāng)然,功能多也意味著使用時(shí)需要先想清楚任務(wù)。
Codex 并不是一個(gè)“一句話解決所有問題”的魔法工具。你依舊需要明確自己的目標(biāo),逐步搭建適合自己的工作流。
Codex 更適合:
如果你只是想快速生成原型,可以優(yōu)先使用 Figma Make。
如果你需要整理資料、理解長(zhǎng)文本和潤(rùn)色表達(dá),可以優(yōu)先使用 Gemini。
如果你要處理復(fù)雜代碼和工程邏輯,可以使用 Claude Code。
如果你希望進(jìn)一步串聯(lián)設(shè)計(jì)、代碼、素材和驗(yàn)收流程,可以重點(diǎn)嘗試 Codex。
其實(shí)在我看來,設(shè)計(jì)師不需要強(qiáng)行選擇唯一一款 AI 產(chǎn)品。
我自己更常用的方式是:
工具永遠(yuǎn)會(huì)不斷更新。
我們真正需要掌握的,不是某一個(gè)軟件的固定操作,而是理解它們的能力邊界。
當(dāng)你面對(duì)一個(gè)新任務(wù)時(shí),能夠快速判斷應(yīng)該使用什么工具,把想法真正落地,這才是 AI 帶給 UIUX 設(shè)計(jì)師最重要的價(jià)值。
蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.axaxx.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.axaxx.cn