【教程】一口氣教你用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透明度陰影"不說"温暖"，說"主色調暖黃色#FFF4E6，強調色淺棕#8B7355"當然，如果你實在不知道怎麼描述，最簡單的方式還是截圖。把你喜歡的設計截圖丟給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會：分析圖片的佈局結構寫一段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 C…
- 【教程】一口氣教你用AI做出被數千名用戶誇誇的UI設計
- 【教程】一口氣教你用AI做出被數千名用戶誇誇的UI設計｜重點 2
- 【教程】一口氣教你用AI做出被數千名用戶誇誇的UI設計｜重點 3
- 【教程】一口氣教你用AI做出被數千名用戶誇誇的UI設計｜重點 4
- 【教程】一口氣教你用AI做出被數千名用戶誇誇的UI設計｜重點 5
可記低 Prompt
我的「小貓相冊」app前兩週做了波UI的升級，在小紅書發出後，得到的評價是下面這樣的👇我之前在知識星球和公眾號裏也都說過，雖然看起來不像，但現在這套設計其實100%是由AI完成的，主要設計師是Claude Code + Nano Bana…
內容片段
生成一組app圖標，主角是一隻可愛的奶油色小貓。需要以下場景：
1. Security
- 小貓舉着盾牌，表情認真2. Full Control
- 小貓站在控制枱前操作按鈕3. Favorites
- 小貓抱着一顆閃閃發光的愛心4. Recoverable
- 小貓站在回收站旁邊，把文件撿回來...風格要求：3D卡通風格，柔和的莫蘭迪色調，背景透明。所有圖標的畫面比例、小貓大小、配色風格保持一致。整理版
我的「小貓相冊」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透明度陰影"不說"温暖"，說"主色調暖黃色#FFF4E6，強調色淺棕#8B7355"當然，如果你實在不知道怎麼描述，最簡單的方式還是截圖。把你喜歡的設計截圖丟給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會：分析圖片的佈局結構寫一段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揾幾個你鍾意嘅設計，cap圖保存低。然後話俾AI聽：「參考呢幾張cap圖嘅風格，幫我設計一個相冊App嘅主介面」。
Claude 4.5同Gemini 3嘅圖像理解能力都好強，佢哋可以「睇得明」你鍾意嘅設計風格，然後複製出類似嘅感覺。
第二步：減少開放性，講清楚你要嘅風格
「好睇」、「高級」、「簡潔」呢啲詞唔係唔用得，問題係佢哋開放性太強，留咗太多不確定性俾AI。AI唔知你講嘅「簡潔」係Apple嗰種簡潔，定係MUJI嗰種，定係北歐嗰種。
更好嘅做法係直接指明設計風格：
「Apple Human Interface Guidelines風格」 「MUJI無印良品風格」 「Dieter Rams極簡主義風格」 「Dribbble上流行嘅Glassmorphism風格」
呢啲「xx風格」本質上係大型語言模型對某類設計特徵嘅總結。當你講「Apple風格」，AI個腦會自動關聯到大圓角、SF Pro字體、淺色背景、微妙陰影呢啲元素。一個詞傳遞嘅信息量比「簡潔好睇」大得多。
再進一步，你可以瞭解一啲設計元素嘅專業表達：
當然，如果你真係唔識點樣描述，最簡單嘅方法就係截圖。將你鍾意嘅設計cap圖掉俾AI，等佢學習複製。Claude 4.5同Gemini 3嘅圖像理解能力都好強，可以「睇得明」你想要咩。
呢個就係我喺即刻講過嗰句：你貧乏嘅詞彙限制咗AI編程嘅設計審美。
總之，唔好令自己嘅語言能力同設計認知成為AI整出靚設計嘅障礙。
第三步：圖標先用系統圖標或者emoji暫代
早期版本唔好糾結圖標設計。SF Symbols（Apple嘅系統圖標庫）有超過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 轉載請註明出處