最近社區(qū)里討論“用 GPT-Image-2 生成 UI 圖然后直接拿去切圖開發(fā)”的聲音越來越多。很多人第一次看到 AI 生成的高保真前端設(shè)計(jì)圖時(shí)第一反應(yīng)是“這還要設(shè)計(jì)師干嘛”第二反應(yīng)才是問題這張圖好看是好看但我要怎么做成頁面圖標(biāo)在哪一層按鈕怎么按字體能不能復(fù)制出來更現(xiàn)實(shí)的是開發(fā)提測(cè)時(shí)設(shè)計(jì)圖根本沒法交付。這篇文章就想把這件事講透AI 生成 UI 圖之后到底能不能切圖怎么切圖切出來的資源是直接扔給前端還是要經(jīng)過中間層處理Vibe Coding 和 UI 設(shè)計(jì)師在這條鏈路里分別承擔(dān)什么角色先給一個(gè)明確判斷從當(dāng)前生態(tài)看AI 生成 UI 設(shè)計(jì)圖的能力已經(jīng)接近可用的水平但從“圖”到“前端代碼資源”的最后一公里仍然要靠一套規(guī)范的工程化流程來補(bǔ)足。真正拉開工作效率差距的不是生成圖片那一刻而是切圖、標(biāo)注、命名、導(dǎo)出和落地接入這個(gè)環(huán)節(jié)。讀這篇文章你會(huì)搞明白 AI 生成 UI 圖的邊界在哪傳統(tǒng)切圖和 AI 場(chǎng)景下的切圖有什么不同以及從一張?jiān)O(shè)計(jì)圖到前端可用的多倍率資源完整鏈路應(yīng)該怎么搭。順手也會(huì)解決幾個(gè)高頻坑切出來的圖不清晰、命名亂、邊緣毛刺、圖標(biāo)不能改色、自動(dòng)生成代碼沒法用等等。1. 這篇文章真正要解決的問題如果你最近在刷 Vibe Coding 相關(guān)的內(nèi)容一定見過這種場(chǎng)景開發(fā)者打開一個(gè) AI 編程平臺(tái)輸入一句話AI 直接生成一個(gè)界面。左邊聊天右邊預(yù)覽全程不寫一行代碼頁面就出來了?？雌饋砬岸碎_發(fā)好像要被 AI 取代了。但真實(shí)工程里事情沒有這么簡單。Vibe Coding 這個(gè)詞強(qiáng)調(diào)“用感覺寫代碼”讓 AI 根據(jù)自然語言描述生成應(yīng)用界面和交互。對(duì)內(nèi)部工具、Demo、原型驗(yàn)證、個(gè)人項(xiàng)目來說這套打法效率極高?？梢坏┻M(jìn)入正式產(chǎn)品開發(fā)尤其是多端上線、品牌視覺統(tǒng)一、組件庫復(fù)用、性能和可訪問性有要求的項(xiàng)目AI 直接生成的整頁代碼通常并不夠用。原因很多比如生成結(jié)果不穩(wěn)定、沒有走設(shè)計(jì)規(guī)范、和現(xiàn)有項(xiàng)目結(jié)構(gòu)對(duì)不上。不過這些都是代碼層的問題不是本文的核心。本文想解決的是另一個(gè)被低估的環(huán)節(jié)如果你手里只有一張 AI 生成的 UI 圖片比如用 GPT-Image-2 生成的高保真界面圖如何把它轉(zhuǎn)成前端真正可用的切圖資源哪些部分可以直接切哪些部分必須重繪或重做UI 設(shè)計(jì)師拿到 AI 圖之后應(yīng)該改什么、留什么前端開發(fā)拿到 AI 圖之后先做什么、后做什么這個(gè)問題的核心是AI 一次生成的是一張像素圖而不是一套可編輯的設(shè)計(jì)源文件。切圖本質(zhì)上是從“平面視覺”到“界面資源”的工程轉(zhuǎn)換中間夾著圖層拆解、尺寸規(guī)范、資源命名、多倍率導(dǎo)出、格式選擇等一連串決策。很多新手踩的坑就是把 AI 生成圖直接當(dāng)成設(shè)計(jì)稿拿 PS 一格格摳最后要么切出來是毛邊要么圖標(biāo)和背景粘連要么導(dǎo)出 1 倍圖在 Retina 屏幕上糊成一片。這些問題都不是靠“更仔細(xì)摳圖”能解決的而是流程設(shè)計(jì)問題。所以這篇文章不是要教你怎么用 GPT-Image-2 生成 UI 圖而是重點(diǎn)講生成之后的事。從概念、工具、流程到前端接入一條線跑通。2. 基礎(chǔ)概念A(yù)I 生成 UI、切圖、Vibe Coding到底各指什么2.1 AI 生成 UI 圖AI 生成 UI 圖目前主流做法是直接用文生圖模型生成界面視覺稿。GPT-Image-2 這類模型在生成界面時(shí)已經(jīng)能在一定程度上理解布局、配色、卡片、按鈕、導(dǎo)航欄等界面元素生成結(jié)果很像真實(shí) App 截圖或者 Web 頁面。注意它生成的本質(zhì)上是一張位圖。這個(gè)“位圖”意味著什么意味著圖片上每一個(gè)像素都是獨(dú)立的顏色值沒有圖層概念。你看到的一個(gè)按鈕在圖像數(shù)據(jù)里并不是一個(gè)“按鈕”只是一堆像素的集合。你不能像打開 Figma 源文件那樣點(diǎn)一下按鈕然后修改它的文字顏色。這是理解后續(xù)所有切圖痛點(diǎn)的基礎(chǔ)。2.2 切圖傳統(tǒng) UI 切圖就是把設(shè)計(jì)稿中的圖標(biāo)、按鈕、背景、插圖等切分成獨(dú)立圖片文件供前端在頁面中引用。切圖不只是“摳圖”它還包含確定切片范圍保證不留白、不切破選擇合適的格式圖標(biāo)用 PNG/SVG照片用 JPEG/WebP導(dǎo)出 1x、2x、3x 等多倍率資源規(guī)范化命名方便開發(fā)和維護(hù)標(biāo)注尺寸、間距、顏色等設(shè)計(jì)信息。過去UI 設(shè)計(jì)師在 Sketch、PS、Figma 里切完圖交給開發(fā)現(xiàn)在 AI 生成圖沒有現(xiàn)成的圖層結(jié)構(gòu)切圖就從“設(shè)計(jì)稿導(dǎo)出”變成了“圖像識(shí)別 重建 導(dǎo)出”的組合任務(wù)。2.3 Vibe Coding 與切圖的關(guān)系Vibe Coding 本身不依賴切圖因?yàn)?AI 編程工具生成的是代碼不是圖片資源。但在實(shí)際工作流里Vibe Coding 生成前端頁面時(shí)通常也需要視覺參考要么是用戶上傳一張參考圖要么是 AI 自己生成一張界面圖再照著實(shí)現(xiàn)。這里就出現(xiàn)了資源缺口AI 編程工具雖然能“照著圖片”寫出相似布局的代碼但它很難把圖片里的圖標(biāo)、紋理、特殊字體精確切出來并應(yīng)用到代碼里。真到了要精確還原品牌視覺、使用特定插畫、貼入某個(gè)背景素材時(shí)開發(fā)還是需要一張張切好的資源圖。所以Vibe Coding 工作流里切圖的角色沒有消失而是變成了“按需生成”的思路AI 負(fù)責(zé)搭骨架人為切圖負(fù)責(zé)補(bǔ)血肉。3. AI 生成 UI 圖的適用邊界哪些能切哪些必須重畫不少 UI 設(shè)計(jì)師第一次接觸 AI 生成圖時(shí)心態(tài)很矛盾一方面覺得 AI 生成的界面很有靈感另一方面覺得這東西根本沒法進(jìn)入生產(chǎn)流程。更穩(wěn)妥的判斷是AI 生成圖更適合作為高保真概念稿、靈感參考、組件風(fēng)格探索而不是直接作為交付稿。下面按元素類型分析切圖難度。3.1 適合直接切圖的部分背景紋理、漸變背景、噪點(diǎn)、光效這類元素對(duì)像素精度要求不高切成整圖后前端直接鋪底即可插畫、3D 渲染圖、裝飾性圖形這些本來就以圖片形式存在切出來直接用沒有太大問題通欄橫幅、卡片封面、運(yùn)營位配圖它們本身是“內(nèi)容圖片”而不是“界面控件”切圖邊界明確非標(biāo)準(zhǔn)形狀的異形按鈕背景在 CSS 難以實(shí)現(xiàn)的紋理質(zhì)感場(chǎng)景下切圖是合理方案特殊字體渲染效果如藝術(shù)字標(biāo)題如果產(chǎn)品設(shè)計(jì)要求必須用位圖保證效果也可以切圖兜底。3.2 不適合直接切圖必須重繪或重建的部分按鈕、輸入框、導(dǎo)航欄等基礎(chǔ)控件。這類元素用代碼實(shí)現(xiàn)更容易維護(hù)如果切成圖片尺寸一變就糊換主題色就得重新切圖標(biāo)。AI 生成的圖標(biāo)通常邊緣不干凈且只有單一尺寸。正確做法是找到或重繪成 SVG或者從圖標(biāo)庫替換需要響應(yīng)用戶交互的控件狀態(tài)hover、active、disabledAI 圖只有靜態(tài)一態(tài)必須由設(shè)計(jì)師補(bǔ)做包含可選中、可復(fù)制的文字。AI 生成圖里的文字是像素不能被搜索引擎索引、不能被屏幕閱讀器讀取、不能復(fù)制生產(chǎn)環(huán)境必須用真實(shí)文字替換需要多語言適配的界面。圖片上的文字無法做國際化必須重建為代碼文本。這里有一個(gè)很實(shí)用的判斷公式如果這個(gè)元素在未來產(chǎn)品中可能是“活”的要變化、要交互、要適配、要替換就不要切圖如果是“死”的純視覺、不變化、可整圖替換才考慮切圖。3.3 一個(gè)例子假設(shè)你用 GPT-Image-2 生成了一張音樂 App 播放頁。頁面里有封面圖、遮罩層、進(jìn)度條、控制按鈕、歌詞文字。正確切圖思路是封面圖切成一張方圖遮罩層用半透明漸變實(shí)現(xiàn)進(jìn)度條和控制按鈕用代碼實(shí)現(xiàn)歌詞用真實(shí)文本排版唱片機(jī)中心的裝飾紋理可以切圖。錯(cuò)誤做法是整個(gè)播放頁截成一張大圖然后在一張圖上覆蓋透明按鈕。這種方案看似省事實(shí)際上會(huì)讓整個(gè)頁面失去動(dòng)態(tài)性和可訪問性任何微調(diào)都牽一發(fā)動(dòng)全身。4. 從 AI 生成圖到前端切圖資源的完整流程下面給出一個(gè)工程上可行的 AI UI 圖轉(zhuǎn)切圖流程。這套流程不需要你是一個(gè)資深 UI 設(shè)計(jì)師但它要求你具備基本的圖像處理和前端資源管理常識(shí)。4.1 第一步整理 AI 生成圖先用工具對(duì) AI 生成圖做預(yù)處理。如果原圖包含多余邊框、水印、文字說明先裁掉如果圖片分辨率過低先升分辨率再做后續(xù)步驟。清晰的原圖是切圖質(zhì)量的前提。預(yù)處理建議使用圖片編輯工具如 Photoshop、GIMP、Figma裁掉多余區(qū)域降噪、提高對(duì)比度讓邊緣更清晰如果需要放大可以使用支持超分能力的開源工具但不要盲目依賴放大的同時(shí)要檢查細(xì)節(jié)是否失真。4.2 第二步按“活/死”原則拆分界面在 Photoshop、Figma 或在線設(shè)計(jì)工具里把 AI 生成圖拆成多個(gè)獨(dú)立的圖層或畫板。這里建議手動(dòng)拆分而不是依賴一鍵 AI 摳圖。為什么因?yàn)榻缑媲袌D不只要摳出元素還要確定元素之間的相對(duì)位置、尺寸、間距。手動(dòng)拆分時(shí)你可以順便記下這些信息。拆分時(shí)按以下維度背景層整圖背景、漸變、紋理圖片位封面、頭像、插畫、運(yùn)營圖圖標(biāo)與控件按鈕、輸入框、Tab 欄、開關(guān)、圖標(biāo)文字層標(biāo)題、正文、按鈕文字需要替換為真實(shí)文本裝飾層光效、投影、特殊形狀。每個(gè)獨(dú)立元素都要放在單獨(dú)的圖層或畫板里元素之間不要互相粘連。4.3 第三步命名切片很多團(tuán)隊(duì)的前端資源命名混亂根源是切圖階段就不規(guī)范。建議從一開始就建立命名規(guī)則。常用規(guī)則示例模塊_元素_狀態(tài)_倍率.png player_btn_play_normal2x.png nav_icon_back_normal3x.png命名要滿足小寫字母、數(shù)字、下劃線或連字符不允許中文不允許空格狀態(tài)寫在最后面方便批量替換倍率后綴跟在文件名末尾。如果項(xiàng)目里已經(jīng)存在組件庫和資源規(guī)范直接沿用團(tuán)隊(duì)現(xiàn)有命名規(guī)則別自創(chuàng)一套。4.4 第四步導(dǎo)出多倍率資源移動(dòng)端開發(fā)中1x、2x、3x 是最常見的設(shè)計(jì)倍率。如果 AI 生成圖尺寸本身較大可以從高分辨率版本逐級(jí)縮放導(dǎo)出。注意不要從低分辨率放大寧可重新生成或重繪關(guān)鍵元素。導(dǎo)出工具方面Figma 可以直接按切片導(dǎo)出多倍率Photoshop 可以靠“導(dǎo)出為”或插件批量導(dǎo)出如果用的是在線一鍵切圖工具注意檢查導(dǎo)出結(jié)果是否包含透明通道、是否有白底、命名是否符合規(guī)則。導(dǎo)出后前端項(xiàng)目里通常按以下結(jié)構(gòu)組織資源assets/ images/ common/ module-a/ module-b/4.5 第五步生成前端接入代碼切圖完成后前端工作反而簡單了。典型的接入方式有兩種一種是直接寫 CSS/HTML把切圖作為背景或 img 標(biāo)簽引用另一種是放入組件庫封裝成 UI 組件供頁面調(diào)用。在 Vibe Coding 場(chǎng)景下可以讓 AI 編程工具根據(jù)你提供的資源目錄和設(shè)計(jì)說明自動(dòng)生成頁面代碼再人工微調(diào)。這樣 AI 負(fù)責(zé)效率和骨架切圖負(fù)責(zé)視覺還原精度兩邊各干各擅長的。5. 環(huán)境準(zhǔn)備與前置條件為了跑通本文的完整流程建議準(zhǔn)備以下環(huán)境。注意版本以實(shí)際項(xiàng)目為準(zhǔn)下面只列用途和一般選擇不捆綁具體版本號(hào)。5.1 硬件與系統(tǒng)一臺(tái)可運(yùn)行圖像處理軟件的電腦操作系統(tǒng)不限Windows、macOS、Linux 均可8GB 以上內(nèi)存16GB 更穩(wěn)妥對(duì)本地運(yùn)行 Comfy UI 等圖像工作流的讀者建議具備獨(dú)立顯卡顯存越大越好。5.2 圖像處理工具必須有至少一款支持圖層、切片、導(dǎo)出的工具。推薦優(yōu)先級(jí)Figma在線免費(fèi)版夠用團(tuán)隊(duì)協(xié)作方便Photoshop功能最強(qiáng)適合精細(xì)化摳圖即時(shí)設(shè)計(jì)或 MasterGo國產(chǎn)替代操作邏輯貼近 FigmaGIMP開源免費(fèi)適合不依賴商業(yè)軟件的場(chǎng)景。5.3 前端開發(fā)環(huán)境Node.js 環(huán)境建議 LTS 版本包管理器 npm 或 pnpm一個(gè)前端項(xiàng)目腳手架Vite 或 Webpack 都可以代碼編輯器VS Code 足夠。5.4 輔助腳本后面會(huì)給出一個(gè) Python 批處理腳本用來批量生成多倍率資源。需要 Python 環(huán)境版本 3.8 以上即可依賴 Pillow 庫。安裝依賴pip install Pillow6. 完整示例從 AI UI 圖到前端資源下面用一個(gè)最小示例把整個(gè)流程走一遍。假設(shè)我們有一張 AI 生成的音樂播放頁 UI 圖現(xiàn)在需要把封面圖、播放按鈕、進(jìn)度條切片、背景切片取出來接入到前端項(xiàng)目里。6.1 目錄結(jié)構(gòu)先規(guī)劃項(xiàng)目資源目錄project/ public/ images/ player/ bg_dark.png album_cover.png progress_bar.png progress_thumb.png btn_play2x.png btn_play3x.png src/ components/ Player.vue App.vue6.2 在 Figma 中切片在 Figma 中把 AI 生成圖拖入畫布選中需要導(dǎo)出的元素點(diǎn)擊右側(cè) “Slice”切片按鈕框選區(qū)域。命名切片時(shí)按模塊_元素_狀態(tài)規(guī)則填寫。Figma 的切片面板會(huì)顯示每個(gè)切片的導(dǎo)出選項(xiàng)。勾選 1x、2x、3x選擇 PNG 格式點(diǎn)擊導(dǎo)出就會(huì)生成一組多倍率資源。這個(gè)過程本質(zhì)上和傳統(tǒng)設(shè)計(jì)稿切圖沒有區(qū)別區(qū)別只在于傳統(tǒng)設(shè)計(jì)稿有矢量圖層導(dǎo)出的資源邊緣是純矢量光滑的AI 位圖切片則需要觀察邊緣是否有白邊、鋸齒必要時(shí)在導(dǎo)出前手動(dòng)清理。6.3 使用 Python 腳本批量縮放生成多倍率資源如果手上的工具不方便按倍率導(dǎo)出可以用腳本批量生成。下面這個(gè)腳本會(huì)把當(dāng)前目錄下的source文件夾里的原始 PNG 文件按 1x、2x、3x 比例縮放到output文件夾。# 文件路徑scripts/generate_multiplier_images.py from PIL import Image from pathlib import Path BASE_SCALE 1.0 MULTIPLIERS [1, 2, 3] SOURCE_DIR Path(source) OUTPUT_DIR Path(output) def main(): OUTPUT_DIR.mkdir(exist_okTrue) for img_path in SOURCE_DIR.glob(*.png): name img_path.stem for multiplier in MULTIPLIERS: with Image.open(img_path) as img: new_width int(img.width * multiplier * BASE_SCALE) new_height int(img.height * multiplier * BASE_SCALE) resized img.resize((new_width, new_height), Image.LANCZOS) output_file OUTPUT_DIR / f{name}{multiplier}x.png resized.save(output_file) print(fGenerated: {output_file} ({new_width}x{new_height})) if __name__ __main__: main()使用方式mkdir -p source output # 把原始切圖放入 source 目錄 python scripts/generate_multiplier_images.py腳本說明讀取source下的全部 PNG 文件依次按 1 倍、2 倍、3 倍縮放輸出文件名帶1x、2x、3x后綴使用Image.LANCZOS插值算法縮放質(zhì)量相對(duì)更好。注意這個(gè)腳本假設(shè)原始圖片已經(jīng)是最佳質(zhì)量。如果原始圖片本身就不清晰縮放只是把同樣的模糊放大到更多像素并不能恢復(fù)細(xì)節(jié)。6.4 前端組件接入示例切圖資源準(zhǔn)備好后前端組件代碼很直接。下面是一個(gè) Vue 3 組件的示例演示如何引用多倍率圖標(biāo)和背景切圖。!-- 文件路徑src/components/Player.vue -- template div classplayer div classplayer-bg/div img classplayer-cover src/images/player/album_cover.png alt專輯封面 / div classplayer-progress div classplayer-progress-bar/div div classplayer-progress-thumb/div /div button classplayer-play aria-label播放 img src/images/player/btn_play2x.png srcset/images/player/btn_play2x.png 2x, /images/player/btn_play3x.png 3x alt播放按鈕 / /button /div /template script setup // 播放邏輯省略本文只演示切圖資源接入方式 /script style scoped .player { position: relative; width: 375px; height: 667px; overflow: hidden; border-radius: 16px; } .player-bg { position: absolute; inset: 0; /* 背景切圖 */ background: url(/images/player/bg_dark.png) center / cover no-repeat; } .player-cover { position: absolute; top: 80px; left: 50%; width: 240px; height: 240px; transform: translateX(-50%); border-radius: 12px; /* 封面切圖 */ } .player-progress { position: absolute; left: 32px; right: 32px; bottom: 120px; height: 4px; } .player-progress-bar { width: 60%; height: 100%; border-radius: 2px; background-color: #ff5a5f; } .player-progress-thumb { position: absolute; top: -6px; left: calc(60% - 8px); width: 16px; height: 16px; border-radius: 50%; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .player-play { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); border: none; background: none; cursor: pointer; } .player-play img { width: 56px; height: 56px; } /style6.5 啟動(dòng)前端項(xiàng)目驗(yàn)證在項(xiàng)目根目錄執(zhí)行npm install npm run dev瀏覽器打開本地地址檢查播放頁是否按預(yù)期渲染。重點(diǎn)檢查背景是否鋪滿、是否變形封面圖是否清晰播放按鈕在不同 DPR 屏幕下是否模糊控件和切圖邊緣有沒有毛刺。7. 運(yùn)行結(jié)果與效果驗(yàn)證7.1 如何判斷切圖質(zhì)量合格判斷切圖質(zhì)量不能只看“圖能不能顯示”。建議按以下清單逐項(xiàng)檢查檢查項(xiàng)合格標(biāo)準(zhǔn)不合格現(xiàn)象清晰度在目標(biāo)設(shè)備 DPR 下邊緣銳利圖標(biāo)模糊、文字發(fā)虛透明通道PNG 透明區(qū)域干凈有白底、灰底、黑邊切片范圍內(nèi)容居中四邊無多余留白圖標(biāo)偏上、留白過多命名規(guī)范符合約定狀態(tài)和倍率清晰亂碼、無狀態(tài)、無倍率尺寸一致性同模塊圖標(biāo)視覺大小一致視覺大小忽大忽小色彩還原和原設(shè)計(jì)保持一致色差明顯、偏暗或偏亮7.2 用瀏覽器校驗(yàn)多倍率資源打開瀏覽器開發(fā)者工具把設(shè)備模擬切換到 iPhone 類設(shè)備查看Network面板中btn_play的請(qǐng)求記錄。如果加載的是btn_play3x.png說明srcset生效如果只加載了btn_play2x.png說明當(dāng)前模擬設(shè)備的 DPR 是 2屬正?，F(xiàn)象。在普通電腦顯示器上有時(shí)候 DPR 是 1這時(shí)候即使提供了 2x、3x 資源瀏覽器也會(huì)優(yōu)先加載 1x 資源的匹配 URL。這是預(yù)期行為不代表資源配錯(cuò)。7.3 失敗時(shí)先看哪里如果頁面切圖顯示異常按以下順序排查先看瀏覽器 Network 面板資源是否請(qǐng)求成功路徑是否存在再檢查生成的文件名和后綴2x前的名稱是否和代碼引用一致檢查切片時(shí)是否選了錯(cuò)誤的畫板導(dǎo)致導(dǎo)出空白或?qū)С龀叽鐬?0檢查圖片格式透明背景需要 PNG如果誤用 JPG 會(huì)顯示白底檢查 CSS 中是否錯(cuò)誤設(shè)置了固定寬高比例導(dǎo)致圖片被拉伸變形。8. 常見問題與排查思路問題現(xiàn)象可能原因排查方式解決方案切出的圖標(biāo)有白邊AI 生成圖自帶背景未正確摳出透明通道在圖像編輯器里放大檢查邊緣用魔棒或鋼筆工具清理或重繪該圖標(biāo)切圖放大后模糊原圖分辨率不足放大過程只是插值查看原圖實(shí)際像素尺寸重新生成高分辨率圖或改為矢量重繪導(dǎo)出文件名為亂碼設(shè)計(jì)工具未正確識(shí)別 AI 生成圖的圖層名稱檢查圖層面板和切片命名統(tǒng)一使用英文小寫命名手動(dòng)重命名頁面背景變形CSS 背景設(shè)置了固定寬高未使用 cover檢查 background-size 屬性改為background-size: cover多倍率資源沒生效只導(dǎo)出了 1x 圖沒有生成 2x、3x檢查資源目錄文件列表用腳本或設(shè)計(jì)工具補(bǔ)充導(dǎo)出前端引用不到圖片路徑錯(cuò)誤或文件未放到公共目錄查看 Network 面板 404 請(qǐng)求修正路徑或移動(dòng)文件到正確目錄AI 生成圖的文字在代碼里沒法編輯文字被柵格化成像素觀察設(shè)計(jì)稿中文字是否為圖片格式用真實(shí)文本替換并重排樣式切圖邊緣有鋸齒原圖邊緣未做抗鋸齒處理放大查看邊緣像素在圖像編輯器中模糊邊緣或用矢量路徑重繪9. 最佳實(shí)踐與工程建議9.1 能矢量就矢量能代碼就代碼位圖只做最后兜底AI 生成 UI 圖最大的誤區(qū)是把它當(dāng)成唯一的視覺真源。更合理的定位是用 AI 圖做概念探索和靈感參考進(jìn)入開發(fā)前把界面拆成代碼結(jié)構(gòu) 少量位圖切片的組合。按鈕、輸入框、導(dǎo)航欄這類高頻控件優(yōu)先用代碼實(shí)現(xiàn)只有背景紋理、復(fù)雜插畫、運(yùn)營配圖這類“內(nèi)容型圖片”才考慮切圖使用。這樣做的收益非常直接代碼可控、體積更小、易于響應(yīng)式適配、方便換膚和國際化。9.2 建立自己的資源命名規(guī)范建議每個(gè)團(tuán)隊(duì)都有一套切圖命名約定。沒有規(guī)范的團(tuán)隊(duì)資源目錄會(huì)隨時(shí)間迅速腐化。一個(gè)好的約定至少包含模塊前綴如nav_、player_、profile_元素名稱如btn_、icon_、bg_、cover_狀態(tài)后綴如_normal、_pressed、_disabled倍率后綴如2x、3x。命名不規(guī)范后期維護(hù)成本非常高尤其是當(dāng)多個(gè)開發(fā)同時(shí)在改同一頁面時(shí)。9.3 自動(dòng)化切圖流程如果你經(jīng)常需要處理 AI 生成的 UI 圖建議把“切圖 導(dǎo)出 重命名 壓縮”做成半自動(dòng)化腳本。Python 腳本可以處理重復(fù)性縮放任務(wù)Figma 插件可以用來導(dǎo)出多倍率資源Git 管理資源變更可以保證協(xié)作可追溯。還可以考慮在項(xiàng)目里配置圖片壓縮工具如 TinyPNG API 或本地壓縮庫在打包時(shí)自動(dòng)壓縮位圖資源減小產(chǎn)物體積。9.4 高風(fēng)險(xiǎn)操作注意事項(xiàng)在切圖過程中如果要對(duì)原始生成圖做縮放、裁剪、顏色調(diào)整請(qǐng)保留一份原始未修改文件。不要直接在原圖上反復(fù)覆蓋保存否則之后想重新切圖會(huì)找不到干凈素材。涉及到公開上線的產(chǎn)品要確認(rèn) AI 生成素材是否符合項(xiàng)目的版權(quán)與合規(guī)要求。部分模型和服務(wù)對(duì)生成內(nèi)容的使用范圍有約定團(tuán)隊(duì)在正式商用前需要核實(shí)不清晰的引用場(chǎng)景寧可聯(lián)系設(shè)計(jì)團(tuán)隊(duì)重做。9.5 和 Vibe Coding 結(jié)合時(shí)給 AI 一個(gè)“資源清單”如果你在用 AI 編程工具輔助開發(fā)不要把 AI 生成的整張 UI 圖直接丟給工具讓它生成代碼。更高效的做法是先人工完成切片把切圖放到項(xiàng)目資源目錄然后在給 AI 的指令里寫清楚資源文件路徑、命名規(guī)則和設(shè)計(jì)要點(diǎn)。例如使用 /public/images/player/bg_dark.png 作為播放頁背景 封面圖使用 /public/images/player/album_cover.png 播放按鈕使用 /public/images/player/btn_play2x.png并提供 2x/3x 適配。 布局結(jié)構(gòu)參考音樂播放器底部放置播放控制條。這樣 AI 生成的代碼會(huì)更可控而不是自己從圖片里“猜”一堆并不存在的圖層然后寫出一堆偏離目標(biāo)的 CSS。9.6 UI 設(shè)計(jì)師的新工作方式對(duì) UI 設(shè)計(jì)師來說AI 生成 UI 圖不一定是沖擊反而可以是提效工具。設(shè)計(jì)師可以把 AI 生成圖當(dāng)成高保真草稿直接在 Figma 里臨摹結(jié)構(gòu)、重建組件、補(bǔ)狀態(tài)、做標(biāo)注。AI 負(fù)責(zé)快速產(chǎn)出視覺靈感設(shè)計(jì)師負(fù)責(zé)把它變成真正可交付的工程稿。這種模式下設(shè)計(jì)師的核心能力從“從零畫圖”轉(zhuǎn)向“判斷 重構(gòu) 規(guī)范化”。這也解釋了為什么很多人說AI 時(shí)代設(shè)計(jì)師的價(jià)值不在于能不能畫出來而在于能不能把一張好看的圖變成一套能維護(hù)的設(shè)計(jì)系統(tǒng)。10. 總結(jié)與后續(xù)學(xué)習(xí)方向?qū)懙阶詈蟀殃P(guān)鍵判斷再強(qiáng)調(diào)一遍AI 生成的 UI 圖很好用但它只是起點(diǎn)不是終點(diǎn)。把 AI 圖轉(zhuǎn)成切圖資源靠的不是某個(gè)神奇的“一鍵切圖”工具而是一套包含元素拆分、活死判斷、命名規(guī)范、多倍率導(dǎo)出和前端接入的完整工程流程。在這條鏈路里Vibe Coding 解決的是“怎么寫代碼更高效”的問題AI 圖像生成解決的是“怎么快速得到視覺參考”的問題切圖解決的是“怎么把視覺變成真實(shí)運(yùn)行資源”的問題。三者不是替代關(guān)系而是疊加關(guān)系。如果你是 UI 設(shè)計(jì)師下一步可以嘗試在 Figma 里把自己的 AI 生成稿重構(gòu)成組件庫看看哪些元素被抽象成設(shè)計(jì)變量哪些元素必須保留為位圖資源。如果你是前端開發(fā)者建議先拿一個(gè)自己負(fù)責(zé)的頁面做實(shí)驗(yàn)把現(xiàn)有頁面截圖反推到 AI 生成圖再走一遍本文的切圖流程你會(huì)直觀感受到兩種工作流之間的差異。以后看到“AI 一分鐘生成 UI前端要失業(yè)”這類說法不用急著焦慮也不用急著反駁。你只要追問一句那切圖呢這個(gè)看似不起眼的問題往往能區(qū)分出誰在跟風(fēng)討論 AI誰在真的用 AI 做工程。