【教程】一口氣教你用AI做出被數千名用戶夸夸的UI設計

我的「小貓相冊」app前兩周做了波UI的升級，在小紅書發出后，得到的評價是下面這樣的

我之前在知識星球和公眾號里也都說過，雖然看起來不像，但現在這套設計其實100%是由AI完成的，主要設計師是Claude Code + Nano Banana Pro，在這個設計過程中沒有任何人類設計師收到傷害...當然，也沒有人類設計師的認知努力體現在這套UI里。

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

為了幫助你更本質的原理，我需要帶你看一下「小貓相冊」app更早版本的設計，我需要先談談怎么用AI做出這套「還可以」的設計。

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

界面上所有的元素本質上都是代碼，或者說都可以用代碼來描述。顏色是代碼，間距是代碼，圓角是代碼，陰影也是代碼。你用自然語言表達需求，它就能給你生成對應的界面。

那為什么大多數人用AI Coding工具做出來的設計還是很丑呢？

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

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

之前我在星球群回復過一位同學關于UI設計的問題，我把核心邏輯分享一下：

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

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

正確的做法是：先去App Store、小紅書、Dribbble上找幾個你喜歡的設計，截圖保存下來。然后告訴AI："參考這幾張截圖的風格，幫我設計一個相冊App的主界面"。

Claude 4.5和Gemini 3的圖像理解能力都很強，它們能"看懂"你喜歡的設計風格，然后復刻出類似的感覺。

第二步：減少開放性，明確你要的風格

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

更好的做法是直接指定設計風格：

• "蘋果Human Interface Guidelines風格"

• "MUJI無印良品風格"

• "Dieter Rams極簡主義風格"

• "Dribbble上流行的Glassmorphism風格"

這些"xx風格"本質上是大語言模型對某類設計特征的濃縮。當你說"蘋果風格"，AI腦子里會自動關聯到大圓角、SF Pro字體、淺色背景、微妙陰影這些元素。一個詞能傳遞的信息量比"簡潔好看"大得多。

更進一步，你可以了解一些設計元素的專業表達：

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

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

• 不說"溫暖"，說"主色調暖黃色，強調色淺棕"

當然，如果你實在不知道怎么描述，最簡單的方式還是截圖。把你喜歡的設計截圖丟給AI，讓它學習復刻。Claude 4.5和Gemini 3的圖像理解能力都很強，能"看懂"你要什么。

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

總之，不要讓自己的語言能力和設計認知成為AI做出出色設計的障礙。

第三步：圖標先用系統圖標或emoji占位

早期版本不要糾結圖標設計。SF Symbols（蘋果的系統圖標庫）有4000多個圖標，基本夠用；或者直接用emoji占位，比如用代表相冊、?代表刪除。

后面再統一換成定制圖標也不遲。

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

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

"這個按鈕再大一點"、"卡片圓角改成20px"、"列表間距改成16px"...每次改動都很小，但累積起來差距就大了。

AI Coding工具最大的優勢就是迭代成本幾乎為零。以前改一個按鈕大小要打開Figma調半天，現在一句話的事。

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

真正讓用戶"哇"出來的設計，需要再往前走一步。

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

回到開頭那個讓用戶驚艷的版本。

區別在哪？

你仔細對比一下這兩個版本：

老版本：

新版本：

發現了嗎？最大的區別不是布局，不是配色，而是圖標。

老版本的底部tab欄用的是標準的SF Symbols——愛心、對話框、星星、人形圖標。這些圖標很"iOS"，很"規范"，但也很"通用"。用戶一看就知道這是一個標準的iOS app，沒有個性。

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

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

• "我的動態"頂部是一只趴在書上的小貓

• "智能整理"頁面里，每個功能都有對應的小貓圖標：App保存是小貓抱著相框，截圖是小貓舉著手機，安全保障區域里的"完全掌控"是小貓拿著控制桿，"隱私優先"是小貓舉著盾牌

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

這就是為什么用戶會覺得"好可愛"、"設計好精致"。

不是布局多復雜，不是動效多炫酷，就是這一套統一風格的定制圖標，讓整個app的氣質完全不一樣了。

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

我來分享一下具體的操作流程。

Step 1：先做一個圖標，確定風格

這一步很關鍵，不要一上來就想著批量生成。

先用Nano Banana Pro做一個單獨的圖標，目的是確定風格方向。

怎么做呢？多嘗試：

• 同一個提示詞多抽幾次，看看不同的結果

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

• 試試不同的風格關鍵詞：3D卡通、扁平化、手繪、像素風...

這個階段就是在"抽獎"，多試幾次，直到你看到一個讓你眼前一亮的風格。

一旦你得到一個滿意的圖標，保存下來作為后續的墊圖。

后面再生成其他圖標時，把這張圖上傳給Nano Banana Pro，讓它"參考這個風格"來生成。這樣才能保證整套圖標的風格統一。

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

接下來要生成一整套圖標了。

但這里有個問題：每個圖標需要描述"小貓在做什么"，一個一個寫prompt太累了。

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

先讓它梳理app需要哪些圖標：

"幫我梳理一下這個app需要哪些圖標，列一個清單出來"

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

"根據這個圖標清單，幫我寫一段Nano Banana Pro的生圖提示詞。主角是一只奶油色的小貓，每個圖標是小貓在做不同的事情。風格參考我上傳的這張圖。"

Claude Code會幫你寫出類似這樣的prompt：

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


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

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

Nano Banana Pro會一次性生成一張大圖，包含所有圖標。像這樣：

Step 3：讓Claude Code切圖

這一步很關鍵。

AI生成的是一張大圖，但你需要的是每個獨立的小圖標。怎么辦？

讓Claude Code寫代碼幫你切圖。

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

"這張圖里有12個圖標，按網格排列。幫我把每個圖標單獨切出來，保存成獨立的背景透明的png文件，按照圖標的用途命名（比如security.png、favorites.png）"

Claude Code會：

1. 分析圖片的布局結構

2. 寫一段Python腳本

3. 自動把每個圖標切出來

4. 保存成你需要的格式

整個過程可能就幾分鐘。當然，也可能會遇到切圖不準確的情況，你可以讓CC審查它切出來的圖的完整性和清晰度，持續調整，直到達標位置。

Step 4：應用到app里

最后，告訴Claude Code："把這些圖標應用到對應的位置上"。

它會自動把security.png放到設置頁的安全選項上，把favorites.png放到收藏夾入口...

完事。

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

AI生圖工具（Nano Banana Pro）負責"創造"，AI Coding工具（Claude Code）負責"執行"。

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

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

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

為什么這套方法有效？

回到一個更本質的問題：為什么有些人用AI做的設計好看，有些人做的就很丑？

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

有審美 + AI = 高級UI

沒審美 + AI = 還是平庸UI

之前我寫過一篇《AI時代，設計審美是唯一護城河》，核心觀點是：當AI讓"會做設計"變成商品化能力，"知道該做什么設計"成為真正稀缺的技能。

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

怎么培養這個能力？沒有捷徑，就是多看。

總結一下這篇文章的核心要點：

第一層（60分→80分）

• 有參考圖再開始

• 用具體詞匯描述設計

• 圖標先用系統圖標占位

• 反復迭代

第二層（80分→95分）

• 用Nano Banana Pro生成定制圖標

• 讓Claude Code切圖和集成

• 形成"生成→切圖→應用"的完整工作流

底層邏輯

• 審美決定上限

• AI只是執行者

• 多看、多試、多迭代

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

注：本文首發于我的「AI編程」知識星球：https://t.zsxq.com/BFTPI 轉載請注明出處