【教程】一口氣教你用AI做出被數千名用戶誇誇的UI設計
整理版優先睇
用AI設計UI嘅關鍵：審美同工作流，由參考風格到自訂圖標逐步提升
作者以自己嘅「小貓相冊」app為例，兩星期前做咗一次UI升級，上載小紅書後得到大量用戶讚賞。雖然個設計睇落好似好專業，但其實成套UI都係100%用AI完成——主要設計師係Claude Code同Nano Banana Pro，過程入面冇任何人類設計師受傷。作者想分享今次迭代嘅新鮮經驗，特別係工作流上嘅新邏輯，幫大家理解點樣用AI做出更好嘅設計。
第一層係做出「仲可以」嘅UI，方法包括：先揾參考圖（唔好從零開始），然後用具體風格詞彙（例如「蘋果Human Interface Guidelines風格」）代替模糊詞（好似「簡潔」），再用系統圖標或者emoji佔位，最後反覆迭代。呢套方法已經可以超越九成人用AI Coding工具做出嘅設計。
第二層係從「仲可以」去到「俾用戶讚」嘅關鍵——用Nano Banana Pro生成自訂小貓圖標系列，再由Claude Code幫手切圖同整合。呢個「生成→切圖→應用」嘅工作流令整個app氣質完全不同。核心信息係：AI只係放大器，你嘅審美決定上限；如果唔知道自己想要咩，AI都幫你唔到。
- 結論：AI UI設計嘅質素取決於用戶嘅審美，AI只係放大器，唔係創造者。
- 方法：先揾參考圖，用具體風格詞彙（例如「蘋果風格」）取代模糊詞（例如「簡潔」），減少開放性。
- 差異：第一層做出「仲可以」嘅UI（靠參考圖、具體描述、迭代），第二層透過自訂圖標令用戶驚艷（靠生成、切圖、應用）。
- 啟發：AI Coding工具（Claude Code）同AI生圖工具（Nano Banana Pro）分工：創造vs執行，形成完整工作流。
- 可行動點：先用Nano Banana Pro生成一個風格圖標作墊圖，再讓Claude Code幫你寫prompt批量生圖，最後自動切圖整合。
內容片段
生成一組app圖標，主角是一隻可愛的奶油色小貓。需要以下場景：
1. Security
- 小貓舉着盾牌，表情認真2. Full Control
- 小貓站在控制枱前操作按鈕3. Favorites
- 小貓抱着一顆閃閃發光的愛心4. Recoverable
- 小貓站在回收站旁邊，把文件撿回來...風格要求：3D卡通風格，柔和的莫蘭迪色調，背景透明。所有圖標的畫面比例、小貓大小、配色風格保持一致。點解AI設計好唔好睇取決於你點用？
作者以「小貓相冊」app為例，指出雖然啲人以為設計好專業，但其實成個UI都係用AI整嘅，主要用Claude Code同Nano Banana Pro。佢發現關鍵唔係AI本身，而係你俾AI嘅指令同工作流組合。
小貓相冊
作者將設計過程分為兩層：第一層係做出「仲可以」嘅UI，第二層係做到「俾用戶讚」嘅UI。兩層嘅方法同著眼點好唔同。
第一層：由零到「仲可以」嘅UI
呢一層嘅目標係令AI寫出超越九成人嘅UI。具體步驟如下：
- 第一步：先有參考圖。上去App Store、小紅書、Dribbble揾幾個你鍾意嘅設計，截圖存低，然後同AI講「參考呢幾張截圖嘅風格」。
- 第二步：減少開放性，明確要嘅風格。唔好用「簡潔」、「高級」呢啲模糊詞，改為直接指定「蘋果Human Interface Guidelines風格」或者「MUJI無印良品風格」。
- 第三步：圖標先用系統圖標或emoji佔位。早期唔好糾結圖標設計，用SF Symbols或者emoji頂住先，後期先換。
- 第四步：反覆迭代，唔好期望一步到位。每次改少少，例如「呢個按鈕再大啲」、「卡片圓角改成20px」，累積效果就好大。
參考圖
蘋果Human Interface Guidelines風格
系統圖標佔位
反覆迭代
第二層：由「仲可以」到「俾用戶誇」
對比老版本同新版本，最大嘅分別唔係佈局或者配色，而係圖標。老版本用標準嘅SF Symbols，好通用；新版本底部tab欄換成四隻做緊唔同嘢嘅小貓，成個app即刻有個性咗。
定製圖標
具體工作流分四步：
- 1 Step 1：先用Nano Banana Pro做一個圖標，確定風格方向。試唔同提示詞，直到見到一個令你眼前一亮嘅風格，保存做墊圖。
- 2 Step 2：讓Claude Code幫你寫生圖提示詞。俾佢梳理app需要嘅圖標清單，然後佢會自動寫好Nano Banana Pro嘅prompt，一次過生成大圖。
- 3 Step 3：讓Claude Code切圖。將大圖丟畀佢，佢會分析佈局，寫Python腳本自動切出每個獨立圖標。
- 4 Step 4：應用到app。叫Claude Code將啲圖標放到對應位置，佢會自動換曬。
Nano Banana Pro
Claude Code
切圖
生成→切圖→應用
總結：審美決定上限，AI係執行者
總結兩層方法嘅核心要點：
- 第一層（60分→80分）：有參考圖、用具體詞彙、系統圖標佔位、反覆迭代。
- 第二層（80分→95分）：用Nano Banana Pro生成定製圖標、Claude Code切圖同集成、形成「生成→切圖→應用」工作流。
- 底層邏輯：審美決定上限，AI只係執行者。
審美決定上限
唔好將AI當成魔法棒，佢幫你由0到1創造審美。但如果你知道自己想要咩，AI可以將你嘅想法變成現實嘅速度提升10倍。
我嘅「小貓相冊」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字體、淺色背景、微妙陰影呢啲元素。一個詞可以傳遞嘅信息量比「簡潔好睇」大得多。
再進一步，你可以瞭解嚇一啲設計元素嘅專業表達：
當然，如果你真係唔知點樣描述，最簡單嘅方式都係截圖將你鍾意嘅設計截圖掉俾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：
叫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會：
分析圖片嘅佈局結構 寫一段Python腳本 自動將每個圖標切出嚟 保存成你需要嘅格式
成個過程可能就得幾分鐘。當然，都可能會遇到切圖唔準確嘅情況，你可以叫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 轉載請註明出處
我的「小貓相冊」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字體、淺色背景、微妙陰影這些元素。一個詞能傳遞的信息量比"簡潔好看"大得多。
更進一步，你可以瞭解一些設計元素的專業表達：
當然，如果你實在不知道怎麼描述，最簡單的方式還是截圖。把你喜歡的設計截圖丟給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：
讓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會：
分析圖片的佈局結構 寫一段Python腳本 自動把每個圖標切出來 保存成你需要的格式
整個過程可能就幾分鐘。當然，也可能會遇到切圖不準確的情況，你可以讓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 轉載請註明出處