計工具實戰(zhàn):UI設(shè)計師如何用Midjourney和Figma AI提升效率)
1. 從“被AI嚇到失眠”到“把AI當(dāng)實習(xí)生”一個十年UI設(shè)計師的真實心路大概從2023年上半年開始我身邊的設(shè)計師群里開始頻繁出現(xiàn)一種焦慮有人發(fā)一張Midjourney生成的界面概念圖配文“這玩意兒是不是要讓我們失業(yè)了”有人轉(zhuǎn)一篇“AI取代設(shè)計師”的爆款文章然后群里沉默半天沒人說話。我自己也經(jīng)歷過那個階段——凌晨兩點刷著各種AI工具的新功能越刷越清醒腦子里反復(fù)轉(zhuǎn)著一個問題我做了十年UI難道真要歸零了現(xiàn)在兩年多過去我的判斷和當(dāng)初完全不同。不是因為我看到了什么權(quán)威報告而是因為我在真實項目里把AI工具用了個遍——Midjourney出概念方向、Figma AI做組件變體、GitHub Copilot寫前端代碼、甚至試過用MCP協(xié)議把Figma和AI工具串起來。踩了無數(shù)坑之后我得出一個可能有點反直覺的結(jié)論AI設(shè)計工具不會取代UI設(shè)計師但它會取代“只會畫圖”的UI設(shè)計師。這兩句話聽起來差不多實際差別巨大。這篇文章我想聊的不是“AI好不好”這種空泛話題而是把我這兩年多在真實工作流里使用AI工具的具體經(jīng)驗拆開來講。包括Midjourney怎么和Figma配合、Figma AI哪些功能真正省時間哪些是噱頭、GitHub Copilot在還原設(shè)計稿時到底靠不靠譜、以及那個被熱炒的“MCP加Figma AI Bridge”到底能解決什么問題。如果你也是UI設(shè)計師或者正在考慮入行希望這些從實戰(zhàn)里磨出來的判斷能幫你少走一些彎路。2. Midjourney在UI工作流里的真實位置靈感加速器不是交付工具2.1 為什么我最終把Midjourney定位在“前期探索”階段剛開始用Midjourney的時候我和很多人一樣試圖讓它直接生成可用的UI界面。輸入“mobile app login screen, clean design, blue theme”之類的提示詞出來的圖確實好看但仔細(xì)一看全是問題按鈕大小不一致、文字是亂碼、間距毫無規(guī)律、交互邏輯根本不存在。你沒法把這些圖直接交給開發(fā)甚至沒法直接放進設(shè)計稿里用。后來我想明白了一件事Midjourney本質(zhì)上是一個圖像生成模型它不理解UI的柵格系統(tǒng)、組件復(fù)用、響應(yīng)式斷點這些概念。它擅長的是氛圍、風(fēng)格、色彩搭配、視覺沖擊力這些恰恰是UI設(shè)計前期最需要探索的東西。所以我把它的位置調(diào)整了——不再讓它“畫界面”而是讓它“定調(diào)性”。具體怎么操作比如接到一個金融類App的改版需求我會先用Midjourney跑一批情緒板。提示詞大概是這樣組織的先定風(fēng)格關(guān)鍵詞比如“minimal, trustworthy, professional”再加色彩傾向“deep blue and warm gray palette”再加參考媒介“inspired by Swiss typography”最后加技術(shù)參數(shù)“--ar 16:9 --style raw”。跑出二三十張圖之后挑出四五張色彩和氛圍最對味的導(dǎo)入Figma作為情緒板使用。注意Midjourney生成的圖不要直接吸色。屏幕顯示和實際設(shè)計系統(tǒng)的色值之間有偏差吸出來的顏色放到組件庫里往往不協(xié)調(diào)。我的做法是參考它的色彩關(guān)系然后在自己建立的色板里找最接近的色階。2.2 提示詞工程在UI場景下的幾個實用套路很多人覺得寫Midjourney提示詞是玄學(xué)其實在UI場景下有比較明確的套路可循。我總結(jié)了幾個自己常用的模板風(fēng)格探索型[產(chǎn)品類型] UI design, [風(fēng)格關(guān)鍵詞], [色彩描述], [參考設(shè)計體系], clean layout, high fidelity --ar 16:9組件靈感型[組件名稱] design, [狀態(tài)描述], [材質(zhì)/風(fēng)格], isolated on white background, UI kit style --ar 1:1插畫輔助型empty state illustration for [場景], [風(fēng)格], flat vector, [色彩], matching UI color palette --ar 4:3這里有個細(xì)節(jié)值得展開--style raw參數(shù)在UI場景下幾乎必加。默認(rèn)模式下Midjourney會加很多“藝術(shù)化”的處理比如夸張的光影、戲劇化的構(gòu)圖這些在UI里全是干擾。加上--style raw之后輸出會更接近“設(shè)計稿”而不是“藝術(shù)畫”。還有一個我踩過的坑不要在一開始就追求“完美提示詞”。我的習(xí)慣是先跑四張低質(zhì)量的快速預(yù)覽--q 0.5看大方向?qū)Σ粚Ψ较驅(qū)α嗽倥芨哔|(zhì)量版本。這樣一輪探索下來消耗的GPU時間大概只有直接跑高質(zhì)量的三分之一。2.3 從Midjourney到Figma中間缺失的那一環(huán)怎么補Midjourney出圖之后怎么把它變成Figma里可用的素材直接拖進去當(dāng)參考圖是最簡單的但如果你想提取其中的視覺元素——比如某個漸變、某種陰影處理、某組配色關(guān)系——就需要一些中間步驟。我的工作流是這樣的Midjourney出圖后先在Photoshop里做一次“拆解”。把圖中值得參考的部分裁出來用吸管工具取色然后在Figma里對照著重建。聽起來很笨但這個過程恰恰是設(shè)計師價值所在——AI給的是“感覺”你需要把它翻譯成“規(guī)范”。舉個例子Midjourney生成了一張卡片式布局的圖卡片有很微妙的投影。我吸色發(fā)現(xiàn)投影不是純黑而是帶了一點藍紫色調(diào)。這個發(fā)現(xiàn)會直接影響到我設(shè)計系統(tǒng)里shadow token的定義。這種“從AI輸出里提取設(shè)計決策”的能力是目前AI自己做不到的。3. Figma AI的實戰(zhàn)評測哪些功能真省時間哪些純粹是演示噱頭3.1 Figma AI功能逐個拆從“第一眼驚艷”到“長期使用后的真實評價”Figma在2024年集中上線了一批AI功能我當(dāng)時第一時間就開了測試。用了一年多下來我的評價是有亮點但遠(yuǎn)沒有宣傳片里那么神奇。下面逐個說我實際使用頻率最高的幾個功能。自動重命名圖層這個功能我一開始覺得是剛需。做設(shè)計稿的人都知道圖層命名混亂是常態(tài)交接給開發(fā)的時候經(jīng)常被吐槽。Figma AI可以根據(jù)圖層內(nèi)容自動生成語義化的名稱比如把“Rectangle 47”改成“Card Container”。實測下來準(zhǔn)確率大概在70%左右。簡單組件沒問題復(fù)雜嵌套結(jié)構(gòu)經(jīng)常識別錯誤。我的用法是先讓AI批量重命名然后手動過一遍把明顯不對的改掉。比純手動快但別指望一鍵搞定。自動生成組件變體這個功能讓我又愛又恨。它的邏輯是你選中一個基礎(chǔ)組件AI根據(jù)常見的使用場景自動生成hover、active、disabled等狀態(tài)。聽起來很美好對吧實際用的時候生成的變體經(jīng)常不符合我的設(shè)計系統(tǒng)規(guī)范——圓角不對、間距不對、顏色不在色板里。后來我調(diào)整了策略先把自己的設(shè)計系統(tǒng)變量color token、spacing token配置好再讓AI生成變體這樣出來的結(jié)果可用率能提高到80%左右。內(nèi)容填充功能是我用得最多的。做設(shè)計稿的時候經(jīng)常需要填充假數(shù)據(jù)以前要么手動編要么用插件生成一堆“Lorem ipsum”。Figma AI可以根據(jù)上下文生成合理的占位內(nèi)容比如在一個電商卡片里它會生成商品名稱、價格、評分這些符合場景的文本。這個功能確實省時間而且生成的內(nèi)容比隨機字符串更有利于評估設(shè)計效果。3.2 那些宣傳很猛但實際很雞肋的功能AI生成完整頁面這個功能我在發(fā)布會當(dāng)天就試了。輸入“一個電商首頁包含輪播圖、商品網(wǎng)格、底部導(dǎo)航”等了大概半分鐘出來一個頁面。第一眼看上去還行但仔細(xì)一看柵格系統(tǒng)是亂的、組件沒有復(fù)用、響應(yīng)式完全沒考慮。你如果要把它改成可用的設(shè)計稿花的時間比從零開始畫還多。AI配色方案也是類似的問題。它生成的配色單獨看都挺好看但放到具體產(chǎn)品語境里經(jīng)常不成立。比如一個醫(yī)療類產(chǎn)品它可能給你生成一套很潮的霓虹色視覺上很抓眼球但完全不符合醫(yī)療行業(yè)需要的“專業(yè)、可信賴”的調(diào)性。配色這件事AI可以給你靈感但最終決策必須基于對業(yè)務(wù)和用戶的理解。AI生成圖標(biāo)這個功能我的評價是“能用但不好用”。生成的圖標(biāo)風(fēng)格不統(tǒng)一線性圖標(biāo)和面性圖標(biāo)混在一起描邊粗細(xì)也不一致。如果你只是需要一兩個裝飾性圖標(biāo)可以用但如果是構(gòu)建圖標(biāo)系統(tǒng)還是老老實實找圖標(biāo)庫或者自己畫。3.3 把Figma AI用出價值的正確姿勢用了一年多我總結(jié)出一個核心原則把Figma AI當(dāng)成“加速器”而不是“替代者”。它最擅長的是那些重復(fù)性的、有明確規(guī)則的、不需要太多判斷的工作。比如批量重命名、批量生成變體、填充占位內(nèi)容。這些工作以前要花一兩個小時現(xiàn)在可能二十分鐘就搞定了。但涉及到設(shè)計決策的部分——比如這個頁面的信息層級怎么排、這個交互流程怎么設(shè)計、這個視覺風(fēng)格是否符合品牌調(diào)性——AI目前完全無法勝任。它沒有業(yè)務(wù)上下文不理解用戶需求不知道競品在做什么。這些恰恰是UI設(shè)計師的核心價值。我現(xiàn)在的習(xí)慣是每天開始工作前先花十分鐘把當(dāng)天要做的重復(fù)性工作列出來看看哪些可以交給Figma AI。然后集中處理處理完再手動檢查一遍。這樣下來每天大概能省出兩到三個小時這些時間我用來做設(shè)計評審、和產(chǎn)品經(jīng)理對齊需求、研究競品——這些才是真正拉開設(shè)計師差距的地方。4. GitHub Copilot還原設(shè)計稿前端代碼生成的真實體驗4.1 為什么我開始用Copilot寫前端代碼作為一個UI設(shè)計師我以前的工作流是Figma出稿 → 標(biāo)注 → 交給開發(fā) → 開發(fā)還原 → 走查 → 提bug → 開發(fā)修改。這個流程里最大的痛點是“走查”環(huán)節(jié)——開發(fā)還原出來的效果和設(shè)計稿總有偏差有時候是間距差了幾個像素有時候是顏色不對有時候是交互狀態(tài)沒做。后來我開始嘗試自己寫前端代碼。不是要搶開發(fā)的活而是想通過代碼來驗證自己的設(shè)計是否可行。比如一個復(fù)雜的卡片布局用Flexbox還是Grid響應(yīng)式斷點怎么設(shè)這些問題在Figma里想和在實際代碼里寫感受完全不同。GitHub Copilot在這個過程中幫了大忙。它可以根據(jù)注釋和上下文自動補全代碼對于我這種“懂一點前端但不算精通”的設(shè)計師來說大大降低了寫代碼的門檻。4.2 用Copilot把Figma設(shè)計稿轉(zhuǎn)成代碼的實操流程我的流程大概是這樣第一步在Figma里整理好設(shè)計稿。確保所有組件都用了Auto Layout間距和顏色都引用了設(shè)計系統(tǒng)變量。這一步很關(guān)鍵因為Copilot生成的代碼質(zhì)量很大程度上取決于輸入的“語義化程度”。如果你的設(shè)計稿里全是“Frame 123”、“Rectangle 456”Copilot也幫不了你。第二步導(dǎo)出設(shè)計稿的CSS信息。Figma可以選中元素后直接復(fù)制CSS代碼我會把這些代碼粘貼到編輯器里作為參考。第三步用注釋引導(dǎo)Copilot生成代碼。比如我會寫這樣的注釋// 創(chuàng)建一個響應(yīng)式卡片組件 // 使用CSS Grid布局桌面端3列平板2列手機1列 // 卡片包含圖片、標(biāo)題、描述、價格 // 使用設(shè)計系統(tǒng)變量--spacing-md, --color-primary, --radius-lg然后Copilot就會根據(jù)這些注釋生成代碼。實測下來注釋寫得越具體生成的代碼可用率越高。如果只寫“創(chuàng)建一個卡片”出來的代碼基本沒法用。第四步手動調(diào)整和驗證。Copilot生成的代碼從來不是直接能用的總有一些細(xì)節(jié)需要改。比如它可能用了固定的px值而不是rem可能忘了加hover狀態(tài)可能響應(yīng)式斷點設(shè)得不對。但這些調(diào)整比起從零開始寫已經(jīng)省了太多時間。4.3 Copilot寫UI代碼的邊界哪些能交給它哪些必須自己來用了一段時間之后我摸清了Copilot的能力邊界任務(wù)類型Copilot表現(xiàn)我的做法基礎(chǔ)布局Flex/Grid很好直接生成微調(diào)即可組件樣式顏色、間距、圓角較好生成后對照設(shè)計稿檢查交互邏輯hover、focus、transition一般生成后手動補充復(fù)雜動畫較差自己寫或找現(xiàn)成庫響應(yīng)式斷點一般生成后根據(jù)實際設(shè)備測試調(diào)整無障礙屬性aria-label等較差手動添加這個表格是我在實際項目中反復(fù)驗證過的。簡單來說結(jié)構(gòu)性的、模式化的代碼可以交給Copilot涉及具體業(yè)務(wù)邏輯和用戶體驗細(xì)節(jié)的代碼必須自己來。還有一個心得Copilot對設(shè)計系統(tǒng)變量的支持取決于你的項目配置。如果你在項目里配置了Tailwind或者CSS變量Copilot會優(yōu)先使用這些變量。所以花時間把設(shè)計系統(tǒng)配置好是一次投入長期受益的事情。5. MCP加Figma AI Bridge打通設(shè)計工具和AI工具的那座橋5.1 MCP協(xié)議到底是什么為什么UI設(shè)計師需要關(guān)心它MCP全稱是Model Context Protocol簡單理解就是一套讓AI模型和外部工具“對話”的協(xié)議。你可以把它想象成一個翻譯官——AI模型說一種語言Figma說另一種語言MCP負(fù)責(zé)在中間翻譯讓兩邊能互相理解。為什么UI設(shè)計師需要關(guān)心這個因為在此之前AI工具和設(shè)計工具是割裂的。你在Midjourney里生成的圖要手動下載再導(dǎo)入Figma你在Figma里做的設(shè)計要手動導(dǎo)出再喂給AI工具分析。MCP出現(xiàn)之后這些步驟可以自動化了。具體到Figma AI Bridge它的作用是讓AI模型能夠直接讀取Figma文件的結(jié)構(gòu)化數(shù)據(jù)——圖層、組件、變量、樣式——然后基于這些數(shù)據(jù)做分析和生成。比如你可以讓AI讀取你當(dāng)前的設(shè)計稿然后問它“這個頁面的信息層級是否清晰”它會基于實際的圖層結(jié)構(gòu)給出分析而不是像以前那樣只能看一張截圖。5.2 配置MCP加Figma AI Bridge的完整步驟我把自己配置的過程完整記錄一下供參考前置條件你需要一個支持MCP的AI客戶端比如Claude Desktop一個Figma賬號以及基本的命令行操作能力。第一步獲取Figma的訪問令牌。登錄Figma后進入Settings → Account → Personal Access Tokens生成一個token。這個token需要包含讀取文件的權(quán)限。第二步安裝MCP服務(wù)器。在命令行里運行安裝命令具體命令取決于你使用的MCP服務(wù)器實現(xiàn)。安裝完成后在配置文件里填入Figma的token和你要連接的文件ID。第三步配置AI客戶端。在Claude Desktop的配置文件里添加MCP服務(wù)器的地址和端口。重啟客戶端后你應(yīng)該能看到Figma相關(guān)的工具已經(jīng)加載進來了。第四步測試連接。在AI客戶端里輸入“讀取我的Figma文件列出所有頁面名稱”如果配置正確AI會返回你Figma文件里的頁面列表。注意Figma的API有速率限制頻繁讀取大文件可能會觸發(fā)限流。我的做法是只在需要深度分析時才連接日常操作還是直接在Figma里完成。5.3 這套組合拳在實際項目中解決了什么問題配置好之后我在一個設(shè)計系統(tǒng)重構(gòu)項目里用到了這套組合。當(dāng)時的情況是設(shè)計系統(tǒng)里有三百多個組件我需要檢查哪些組件沒有使用設(shè)計變量、哪些組件的命名不符合規(guī)范、哪些組件的變體缺失了必要狀態(tài)。以前做這種檢查要么手動一個個看要么寫Figma插件。手動看太慢寫插件成本太高。用MCP加Figma AI Bridge之后我直接讓AI讀取整個文件然后問它“列出所有沒有使用color token的組件”。AI在幾秒鐘內(nèi)就給出了列表還按頁面分組整理好了。這個效率提升是巨大的。但也要說清楚AI給出的結(jié)果需要人工復(fù)核。它有時候會把一些邊緣情況誤判比如某個組件用了變量但嵌套在另一個組件里AI可能識別不到。所以我的流程是AI初篩 → 人工復(fù)核 → 批量修改。6. 設(shè)計師的護城河在哪里AI替代不了的五件事6.1 從“畫圖的人”到“解決問題的人”角色定位的轉(zhuǎn)變聊了這么多工具我想回到最核心的問題AI到底會不會取代UI設(shè)計師我的判斷是會取代“只會畫圖”的設(shè)計師但會放大“會解決問題”的設(shè)計師的價值。這兩類設(shè)計師的區(qū)別在哪里前者接到需求就開始畫界面后者會先問“這個需求要解決什么問題”、“用戶是誰”、“業(yè)務(wù)目標(biāo)是什么”。舉個例子。產(chǎn)品經(jīng)理說“我們要加一個分享功能”。只會畫圖的設(shè)計師會直接畫一個分享按鈕放在頁面右上角。會解決問題的設(shè)計師會先想用戶為什么要分享分享給誰分享的內(nèi)容是什么分享之后希望對方做什么這些問題想清楚之后可能發(fā)現(xiàn)根本不需要一個“分享按鈕”而是需要在內(nèi)容消費的關(guān)鍵節(jié)點嵌入分享引導(dǎo)。AI可以幫你畫一百個分享按鈕的樣式但它無法替你回答上面這些問題。這些問題需要對人性的理解、對業(yè)務(wù)的理解、對場景的理解——這些是AI目前不具備的。6.2 那些AI學(xué)不會的設(shè)計判斷力我在實際工作中總結(jié)了幾類AI目前完全無法替代的設(shè)計判斷第一類是“取舍判斷”。設(shè)計本質(zhì)上是一系列取舍信息多了還是少了、操作路徑短了還是長了、視覺沖擊強了還是弱了。這些取舍沒有標(biāo)準(zhǔn)答案取決于具體的業(yè)務(wù)階段、用戶群體、競爭環(huán)境。AI可以給你十個方案但選哪個、為什么選需要人來判斷。第二類是“跨部門溝通”。設(shè)計師的工作有很大一部分是溝通和產(chǎn)品經(jīng)理對齊需求、和開發(fā)討論實現(xiàn)方案、和運營協(xié)調(diào)上線節(jié)奏。這些溝通里充滿了模糊地帶和利益博弈AI目前完全無法參與。第三類是“設(shè)計系統(tǒng)維護”。設(shè)計系統(tǒng)不是畫完就完了它需要持續(xù)維護新組件怎么加、舊組件怎么廢棄、變量怎么命名、文檔怎么寫。這些工作需要對公司設(shè)計語言有深刻理解AI做不了。第四類是“用戶研究”。做用戶訪談、分析用戶行為數(shù)據(jù)、提煉用戶洞察——這些工作的核心是“理解人”而AI目前對人類的復(fù)雜情感和動機理解還很淺。第五類是“創(chuàng)意突破”。當(dāng)所有人都用AI生成類似風(fēng)格的設(shè)計時真正能脫穎而出的反而是那些“不像AI做的”設(shè)計。這種創(chuàng)意突破需要設(shè)計師有獨特的審美積累和生活體驗AI只能模仿已有的風(fēng)格無法創(chuàng)造全新的視覺語言。6.3 我給自己定的三條職業(yè)發(fā)展策略基于以上判斷我給自己定了三條策略也分享給正在讀這篇文章的你策略一把AI工具用成“肌肉記憶”。不要抗拒不要觀望直接上手用。Midjourney、Figma AI、GitHub Copilot、MCP這些工具我都在真實項目里用過。用多了之后你會形成一種直覺什么任務(wù)交給AI什么任務(wù)自己來。這種直覺是競爭力。策略二往“上游”走。不要只停留在“畫界面”這個環(huán)節(jié)。往上游走參與需求分析、用戶研究、產(chǎn)品策略往下游走了解前端實現(xiàn)、數(shù)據(jù)分析、增長實驗。你的價值不在于你會用Figma而在于你能把Figma里的東西變成業(yè)務(wù)結(jié)果。策略三建立個人設(shè)計哲學(xué)。AI可以生成無數(shù)種風(fēng)格但無法替你決定“你相信什么樣的設(shè)計是好的”。這個判斷需要你自己建立。我的設(shè)計哲學(xué)是“清晰優(yōu)于巧妙一致優(yōu)于新奇可用優(yōu)于好看”。這個哲學(xué)指導(dǎo)我所有的設(shè)計決策也讓我在面對AI生成的各種方案時能快速判斷取舍。7. 我現(xiàn)在的日常工作流AI工具和傳統(tǒng)設(shè)計流程的融合7.1 一個典型項目的完整流程拆解讓我用一個最近做的項目來具體說明。這是一個B端數(shù)據(jù)看板的改版從接到需求到交付開發(fā)我大概用了兩周時間。第一天需求理解和信息架構(gòu)。和產(chǎn)品經(jīng)理開了兩個小時的會搞清楚了這個看板要解決什么問題、用戶是誰、核心指標(biāo)是什么。然后我用Figma的FigJam畫了一個信息架構(gòu)圖。這一步完全沒用AI因為需要和產(chǎn)品經(jīng)理實時討論、快速調(diào)整。第二天到第三天概念探索。用Midjourney跑了大概五十張情緒板探索不同的視覺方向。同時用Figma AI生成了幾套配色方案作為參考。最終選定了三個方向做成簡單的概念稿給產(chǎn)品經(jīng)理看。第四天到第七天詳細(xì)設(shè)計。這是工作量最大的階段。我用Figma AI批量重命名了所有圖層用自動變體功能生成了組件的各種狀態(tài)用內(nèi)容填充功能生成了表格和卡片的占位數(shù)據(jù)。這些重復(fù)性工作大概省了我一天半的時間。省下來的時間我用來打磨交互細(xì)節(jié)和響應(yīng)式布局。第八天到第九天設(shè)計評審和修改。把設(shè)計稿發(fā)給團隊評審收集反饋然后修改。這一步AI幫不上忙因為評審涉及大量的主觀判斷和業(yè)務(wù)討論。第十天到第十二天前端還原驗證。用GitHub Copilot把關(guān)鍵頁面轉(zhuǎn)成代碼在瀏覽器里驗證布局和交互。發(fā)現(xiàn)了一些在Figma里沒注意到的問題比如某個表格在數(shù)據(jù)量大時的滾動行為、某個圖表在移動端的顯示效果。這些問題在代碼里暴露出來之后我回到Figma做了調(diào)整。第十三天到第十四天交付和走查。整理設(shè)計規(guī)范文檔標(biāo)注關(guān)鍵參數(shù)和開發(fā)做交接。開發(fā)實現(xiàn)過程中我用MCP加Figma AI Bridge讓AI幫我檢查了實現(xiàn)效果和設(shè)計稿的差異生成了一份差異報告。7.2 哪些環(huán)節(jié)AI幫了大忙哪些環(huán)節(jié)必須親力親為回顧這個項目AI幫了大忙的環(huán)節(jié)是概念探索階段的情緒板生成、詳細(xì)設(shè)計階段的重復(fù)性操作、前端還原階段的代碼生成、走查階段的差異檢查。必須親力親為的環(huán)節(jié)是需求理解、信息架構(gòu)、設(shè)計決策、評審溝通、最終交付。這個分工比例大概是AI承擔(dān)了30%的工作量但這30%恰恰是以前最枯燥、最耗時的部分。省下來的時間我投入到了那70%需要人類判斷力的工作中整體產(chǎn)出質(zhì)量反而提高了。7.3 給不同階段設(shè)計師的實用建議如果你是剛?cè)胄械脑O(shè)計師我的建議是先把基本功練扎實。AI可以幫你畫圖但幫不了你理解柵格系統(tǒng)、色彩理論、排版原則。這些基礎(chǔ)不牢你用AI生成的東西也只是“看起來還行”經(jīng)不起推敲。如果你是有三到五年經(jīng)驗的設(shè)計師我的建議是盡快把AI工具融入你的工作流。你已經(jīng)有了一定的設(shè)計判斷力AI可以幫你放大這個判斷力的影響范圍。以前你只能服務(wù)一個項目現(xiàn)在你可以用AI快速探索多個方向服務(wù)更多項目。如果你是資深設(shè)計師或設(shè)計管理者我的建議是思考如何用AI重構(gòu)團隊的工作流程。哪些環(huán)節(jié)可以自動化、哪些角色需要重新定義、如何衡量AI工具帶來的效率提升。這些問題比“AI會不會取代設(shè)計師”更值得花時間思考。8. 關(guān)于AI和UI設(shè)計我現(xiàn)在的真實心態(tài)寫了這么多最后說點個人感受。兩年前那個凌晨兩點失眠的晚上我焦慮的是“我會不會失業(yè)”?,F(xiàn)在我的焦慮變成了“我怎么才能把AI用得更好”。這個轉(zhuǎn)變不是因為我看到了什么權(quán)威預(yù)測而是因為我在真實項目里反復(fù)驗證了一個事實AI是一個能力放大器它放大的是你原本就有的能力。如果你原本就只會畫圖AI會讓你畫得更快但你的可替代性反而更高了——因為別人用AI也能畫得一樣快。如果你原本就擅長解決問題AI會幫你省下大量重復(fù)勞動的時間讓你有更多精力去做那些真正創(chuàng)造價值的事。所以我的結(jié)論很簡單不要問“AI會不會取代UI設(shè)計師”要問“我是不是那個只會畫圖的UI設(shè)計師”。如果是現(xiàn)在開始改變還來得及。如果不是AI是你最好的幫手。我現(xiàn)在的日常是早上到公司先花半小時刷一遍AI工具的新功能看看有沒有能用到當(dāng)前項目里的。然后打開Figma開始一天的工作。AI工具就像我團隊里的實習(xí)生——能干、聽話、偶爾犯傻需要我指導(dǎo)但確實幫我分擔(dān)了很多。我不會擔(dān)心實習(xí)生取代我同樣我也不擔(dān)心AI取代我。