閱讀站

我的「小貓相冊」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 轉載請註明出處

完成