【教程】一口氣教你用AI做出被數(shù)千名用戶夸夸的UI設(shè)計(jì)

我的「小貓相冊(cè)」app前兩周做了波UI的升級(jí)，在小紅書發(fā)出后，得到的評(píng)價(jià)是下面這樣的

我之前在知識(shí)星球和公眾號(hào)里也都說過，雖然看起來(lái)不像，但現(xiàn)在這套設(shè)計(jì)其實(shí)100%是由AI完成的，主要設(shè)計(jì)師是Claude Code + Nano Banana Pro，在這個(gè)設(shè)計(jì)過程中沒有任何人類設(shè)計(jì)師收到傷害...當(dāng)然，也沒有人類設(shè)計(jì)師的認(rèn)知努力體現(xiàn)在這套UI里。

其實(shí)，關(guān)于怎么用AI Coding工具做出更出色設(shè)計(jì)的網(wǎng)站，怎么做出出色的app原型設(shè)計(jì)我都寫過不少教程了，你可以翻翻之前的內(nèi)容去做一些了解，但這次做「小貓相冊(cè)」app的UI迭代，還是讓我多了不少新鮮的經(jīng)驗(yàn)，而且確實(shí)在工作流上使用了不同的邏輯。

為了幫助你更本質(zhì)的原理，我需要帶你看一下「小貓相冊(cè)」app更早版本的設(shè)計(jì)，我需要先談?wù)勗趺从肁I做出這套「還可以」的設(shè)計(jì)。

大言不慚地說，上面這個(gè)版本的設(shè)計(jì)我估計(jì)也已經(jīng)超過90%的人用AI Coding工具做出的設(shè)計(jì)了。你從中可以看出在界面布局，配色上是有一些細(xì)節(jié)的處理的，至少不是一眼AI，或者毫無(wú)設(shè)計(jì)的感覺。要達(dá)成這一步的設(shè)計(jì)其實(shí)直接使用Claude Code、Cursor、Trae，或者Google的AI Studio等AI Coding工具即可。

界面上所有的元素本質(zhì)上都是代碼，或者說都可以用代碼來(lái)描述。顏色是代碼，間距是代碼，圓角是代碼，陰影也是代碼。你用自然語(yǔ)言表達(dá)需求，它就能給你生成對(duì)應(yīng)的界面。

那為什么大多數(shù)人用AI Coding工具做出來(lái)的設(shè)計(jì)還是很丑呢？

問題不在AI，在于你給AI的指令太模糊了。以及，你的工作流組合可能完全搞錯(cuò)了。

第一層：讓AI寫出"還可以"的UI

之前我在星球群回復(fù)過一位同學(xué)關(guān)于UI設(shè)計(jì)的問題，我把核心邏輯分享一下：

第一步：不要從零開始，先有參考

很多人上來(lái)就跟AI說"幫我設(shè)計(jì)一個(gè)相冊(cè)App的UI"，這等于讓廚師做一道菜但不告訴他你想吃什么口味。

正確的做法是：先去App Store、小紅書、Dribbble上找?guī)讉€(gè)你喜歡的設(shè)計(jì)，截圖保存下來(lái)。然后告訴AI："參考這幾張截圖的風(fēng)格，幫我設(shè)計(jì)一個(gè)相冊(cè)App的主界面"。

Claude 4.5和Gemini 3的圖像理解能力都很強(qiáng)，它們能"看懂"你喜歡的設(shè)計(jì)風(fēng)格，然后復(fù)刻出類似的感覺。

第二步：減少開放性，明確你要的風(fēng)格

"好看"、"高級(jí)"、"簡(jiǎn)潔"這些詞不是不能用，問題是它們開放性太強(qiáng)，把太多不確定性留給了AI。AI不知道你說的"簡(jiǎn)潔"是蘋果那種簡(jiǎn)潔，還是MUJI那種簡(jiǎn)潔，還是北歐那種簡(jiǎn)潔。

更好的做法是直接指定設(shè)計(jì)風(fēng)格：

• "蘋果Human Interface Guidelines風(fēng)格"

• "MUJI無(wú)印良品風(fēng)格"

• "Dieter Rams極簡(jiǎn)主義風(fēng)格"

• "Dribbble上流行的Glassmorphism風(fēng)格"

這些"xx風(fēng)格"本質(zhì)上是大語(yǔ)言模型對(duì)某類設(shè)計(jì)特征的濃縮。當(dāng)你說"蘋果風(fēng)格"，AI腦子里會(huì)自動(dòng)關(guān)聯(lián)到大圓角、SF Pro字體、淺色背景、微妙陰影這些元素。一個(gè)詞能傳遞的信息量比"簡(jiǎn)潔好看"大得多。

更進(jìn)一步，你可以了解一些設(shè)計(jì)元素的專業(yè)表達(dá)：

• 不說"留白多"，說"間距24px以上，信息密度低"

• 不說"有質(zhì)感"，說"低飽和度配色、無(wú)邊框卡片、0.1透明度陰影"

• 不說"溫暖"，說"主色調(diào)暖黃色，強(qiáng)調(diào)色淺棕"

當(dāng)然，如果你實(shí)在不知道怎么描述，最簡(jiǎn)單的方式還是截圖。把你喜歡的設(shè)計(jì)截圖丟給AI，讓它學(xué)習(xí)復(fù)刻。Claude 4.5和Gemini 3的圖像理解能力都很強(qiáng)，能"看懂"你要什么。

這個(gè)就是我之前在即刻說的那句話：你貧瘠的詞匯量限制了AI編程的設(shè)計(jì)審美。

總之，不要讓自己的語(yǔ)言能力和設(shè)計(jì)認(rèn)知成為AI做出出色設(shè)計(jì)的障礙。

第三步：圖標(biāo)先用系統(tǒng)圖標(biāo)或emoji占位

早期版本不要糾結(jié)圖標(biāo)設(shè)計(jì)。SF Symbols（蘋果的系統(tǒng)圖標(biāo)庫(kù)）有4000多個(gè)圖標(biāo)，基本夠用；或者直接用emoji占位，比如用代表相冊(cè)、?代表刪除。

后面再統(tǒng)一換成定制圖標(biāo)也不遲。

第四步：反復(fù)迭代，不要期望一步到位

我做小貓相冊(cè)早期版本的UI，大概改了十幾次。

"這個(gè)按鈕再大一點(diǎn)"、"卡片圓角改成20px"、"列表間距改成16px"...每次改動(dòng)都很小，但累積起來(lái)差距就大了。

AI Coding工具最大的優(yōu)勢(shì)就是迭代成本幾乎為零。以前改一個(gè)按鈕大小要打開Figma調(diào)半天，現(xiàn)在一句話的事。

靠這套方法，你已經(jīng)能做出比大多數(shù)人更好的UI了。但說實(shí)話，這還只是"能用"的水平。

真正讓用戶"哇"出來(lái)的設(shè)計(jì)，需要再往前走一步。

第二層：從"還可以"到"被用戶夸"

回到開頭那個(gè)讓用戶驚艷的版本。

區(qū)別在哪？

你仔細(xì)對(duì)比一下這兩個(gè)版本：

老版本：

新版本：

發(fā)現(xiàn)了嗎？最大的區(qū)別不是布局，不是配色，而是圖標(biāo)。

老版本的底部tab欄用的是標(biāo)準(zhǔn)的SF Symbols——愛心、對(duì)話框、星星、人形圖標(biāo)。這些圖標(biāo)很"iOS"，很"規(guī)范"，但也很"通用"。用戶一看就知道這是一個(gè)標(biāo)準(zhǔn)的iOS app，沒有個(gè)性。

新版本呢？底部tab欄換成了四只可愛的小貓，每只小貓都在做不同的事情：看書、寫字、拿畫筆、看身份證。不只是底部導(dǎo)航，整個(gè)app里的功能圖標(biāo)都換成了小貓系列——

• "月度回顧"旁邊是一只抱著日歷的小貓

• "我的動(dòng)態(tài)"頂部是一只趴在書上的小貓

• "智能整理"頁(yè)面里，每個(gè)功能都有對(duì)應(yīng)的小貓圖標(biāo)：App保存是小貓抱著相框，截圖是小貓舉著手機(jī)，安全保障區(qū)域里的"完全掌控"是小貓拿著控制桿，"隱私優(yōu)先"是小貓舉著盾牌

• "時(shí)光書架"里的相冊(cè)封面也從普通卡片變成了3D風(fēng)格的精美書本，每本書上還站著一只戴皇冠的小貓

這就是為什么用戶會(huì)覺得"好可愛"、"設(shè)計(jì)好精致"。

不是布局多復(fù)雜，不是動(dòng)效多炫酷，就是這一套統(tǒng)一風(fēng)格的定制圖標(biāo)，讓整個(gè)app的氣質(zhì)完全不一樣了。

具體工作流：怎么讓AI幫你做出這種效果

我來(lái)分享一下具體的操作流程。

Step 1：先做一個(gè)圖標(biāo)，確定風(fēng)格

這一步很關(guān)鍵，不要一上來(lái)就想著批量生成。

先用Nano Banana Pro做一個(gè)單獨(dú)的圖標(biāo)，目的是確定風(fēng)格方向。

怎么做呢？多嘗試：

• 同一個(gè)提示詞多抽幾次，看看不同的結(jié)果

• 換不同的提示詞，看看能得到什么不同的效果

• 試試不同的風(fēng)格關(guān)鍵詞：3D卡通、扁平化、手繪、像素風(fēng)...

這個(gè)階段就是在"抽獎(jiǎng)"，多試幾次，直到你看到一個(gè)讓你眼前一亮的風(fēng)格。

一旦你得到一個(gè)滿意的圖標(biāo)，保存下來(lái)作為后續(xù)的墊圖。

后面再生成其他圖標(biāo)時(shí)，把這張圖上傳給Nano Banana Pro，讓它"參考這個(gè)風(fēng)格"來(lái)生成。這樣才能保證整套圖標(biāo)的風(fēng)格統(tǒng)一。

Step 2：讓Claude Code幫你寫生圖提示詞

接下來(lái)要生成一整套圖標(biāo)了。

但這里有個(gè)問題：每個(gè)圖標(biāo)需要描述"小貓?jiān)谧鍪裁?，一個(gè)一個(gè)寫prompt太累了。

我的做法是讓Claude Code幫我寫。

先讓它梳理app需要哪些圖標(biāo)：

"幫我梳理一下這個(gè)app需要哪些圖標(biāo)，列一個(gè)清單出來(lái)"

然后讓它根據(jù)清單，幫我寫Nano Banana Pro的提示詞：

"根據(jù)這個(gè)圖標(biāo)清單，幫我寫一段Nano Banana Pro的生圖提示詞。主角是一只奶油色的小貓，每個(gè)圖標(biāo)是小貓?jiān)谧霾煌氖虑椤ｏL(fēng)格參考我上傳的這張圖。"

Claude Code會(huì)幫你寫出類似這樣的prompt：

生成一組app圖標(biāo)，主角是一只可愛的奶油色小貓。
需要以下場(chǎng)景：
1. Security - 小貓舉著盾牌，表情認(rèn)真
2. Full Control - 小貓站在控制臺(tái)前操作按鈕
3. Favorites - 小貓抱著一顆閃閃發(fā)光的愛心
4. Recoverable - 小貓站在回收站旁邊，把文件撿回來(lái)
...


 風(fēng)格要求：3D卡通風(fēng)格，柔和的莫蘭迪色調(diào)，背景透明。
所有圖標(biāo)的畫面比例、小貓大小、配色風(fēng)格保持一致。

讓AI幫你寫AI的提示詞，這本身就是一種效率技巧。

Nano Banana Pro會(huì)一次性生成一張大圖，包含所有圖標(biāo)。像這樣：

Step 3：讓Claude Code切圖

這一步很關(guān)鍵。

AI生成的是一張大圖，但你需要的是每個(gè)獨(dú)立的小圖標(biāo)。怎么辦？

讓Claude Code寫代碼幫你切圖。

把Nano Banana Pro生成的那張大圖丟給Claude Code，告訴它：

"這張圖里有12個(gè)圖標(biāo)，按網(wǎng)格排列。幫我把每個(gè)圖標(biāo)單獨(dú)切出來(lái)，保存成獨(dú)立的背景透明的png文件，按照?qǐng)D標(biāo)的用途命名（比如security.png、favorites.png）"

Claude Code會(huì)：

1. 分析圖片的布局結(jié)構(gòu)

2. 寫一段Python腳本

3. 自動(dòng)把每個(gè)圖標(biāo)切出來(lái)

4. 保存成你需要的格式

整個(gè)過程可能就幾分鐘。當(dāng)然，也可能會(huì)遇到切圖不準(zhǔn)確的情況，你可以讓CC審查它切出來(lái)的圖的完整性和清晰度，持續(xù)調(diào)整，直到達(dá)標(biāo)位置。

Step 4：應(yīng)用到app里

最后，告訴Claude Code："把這些圖標(biāo)應(yīng)用到對(duì)應(yīng)的位置上"。

它會(huì)自動(dòng)把security.png放到設(shè)置頁(yè)的安全選項(xiàng)上，把favorites.png放到收藏夾入口...

完事。

這套工作流的核心邏輯是：

AI生圖工具（Nano Banana Pro）負(fù)責(zé)"創(chuàng)造"，AI Coding工具（Claude Code）負(fù)責(zé)"執(zhí)行"。

Nano Banana Pro擅長(zhǎng)生成有創(chuàng)意、有美感的視覺元素，但它生成的是一張"死圖"——沒法直接用到app里。

Claude Code擅長(zhǎng)處理代碼和文件操作，它能把那張"死圖"變成可用的素材，然后集成到你的項(xiàng)目里。

兩者配合，才能形成完整的工作流。

為什么這套方法有效？

回到一個(gè)更本質(zhì)的問題：為什么有些人用AI做的設(shè)計(jì)好看，有些人做的就很丑？

答案可能很殘酷：AI只是放大器，它放大的是你本來(lái)就有的審美。

有審美 + AI = 高級(jí)UI

沒審美 + AI = 還是平庸UI

之前我寫過一篇《AI時(shí)代，設(shè)計(jì)審美是唯一護(hù)城河》，核心觀點(diǎn)是：當(dāng)AI讓"會(huì)做設(shè)計(jì)"變成商品化能力，"知道該做什么設(shè)計(jì)"成為真正稀缺的技能。

你不需要會(huì)Figma、Sketch、PS，但你需要知道什么是好看的。

怎么培養(yǎng)這個(gè)能力？沒有捷徑，就是多看。

總結(jié)一下這篇文章的核心要點(diǎn)：

第一層（60分→80分）

• 有參考圖再開始

• 用具體詞匯描述設(shè)計(jì)

• 圖標(biāo)先用系統(tǒng)圖標(biāo)占位

• 反復(fù)迭代

第二層（80分→95分）

• 用Nano Banana Pro生成定制圖標(biāo)

• 讓Claude Code切圖和集成

• 形成"生成→切圖→應(yīng)用"的完整工作流

底層邏輯

• 審美決定上限

• AI只是執(zhí)行者

• 多看、多試、多迭代

最后說一句：不要把AI當(dāng)成魔法棒，它不能幫你從0到1創(chuàng)造審美。但如果你知道自己想要什么，AI能幫你把想法變成現(xiàn)實(shí)的速度提升10倍。

注：本文首發(fā)于我的「AI編程」知識(shí)星球：https://t.zsxq.com/BFTPI 轉(zhuǎn)載請(qǐng)注明出處