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