上一篇講到我從 Gemini 棄坑、投奔 Claude Code，然後打包成 APK 裝到手機上打開的那一刻，體會到「已知用火」的震撼。

但老實說⋯⋯那個第一版，能動歸能動，UI 真的是慘不忍睹。

這一篇就來聊聊，我這個文組腦是怎麼把一個「一看就知道是AI做的」陽春 App，慢慢磨成我想要讓它看起來的樣子。

先承認一下，第一版有多AI感？

因為所做所學，我雖然不會coding，但我對美學有一定標準。腦中除了好用，對「好看」還是有要求，但要我自己刻出來實在太花時間。

平常要上班，下班又要顧小孩，剩下那一點點時間還要自己雕琢UI真是太累人了！

所以第一版做出來的時候，問題一籮筐：

顏色搭配陰陽怪氣、明暗對比不協調，看起來就是很「工程 demo」；功能是有啦，該有的取色、數值都在，但介面就是陽春到不行，一種「我只是要證明這功能可以動」的粗糙感；最要命的是——整個 App 完全沒有統一的設計語言，這一頁長這樣、那一頁長那樣，像是三個不同的人各做各的。

（就是一種很AI感，深色系、高對比、螢光色…等語言，你自己看了都覺得「嗯⋯⋯這個我大概不會想下載」。）

但至少，它會動。而在 Vibe Coding 的世界裡，「會動」就是一個可以往上疊的地基了。

我會設計，但我更會「指」設計

這裡是我覺得整個過程最有趣的地方。

我會 Figma但我沒時間排版、更懶得自己畫 UI。但我發現——我不需要會做，我只需要會「指」。

我的做法是：上網找我喜歡的設計風格參考圖，然後把「風格關鍵字」丟給 Claude Code。

我試了很多方向，最後鎖定在幾個我很愛的詞：“Liquid Glass（液態玻璃）"、“水晶質感”、“暖色系”、“柔和中性”。我把這些關鍵字加上參考圖一起餵給 Claude Code，跟它說「我要這種感覺」。

然後神奇的事情發生了——它真的懂。

它不只是把顏色換一換，而是真的建立起一套"設計語言”：統一的圓角、一致的間距、柔和的陰影、玻璃般的半透明質感⋯⋯我腦中那個模糊的「我想要這種感覺」，被它翻譯成了具體的介面。

我最滿意的部分：暖色系 + 柔和中性

如果要我挑一個最得意的地方，那絕對是"整體的配色調性"。

新版走的是一種暖色系、柔和中性的路線。背景不是死白也不是純黑，而是帶點溫度的米色調；色卡跟數值的呈現乾淨俐落，但又不會冷冰冰。整個 App 拿在手上，有一種「這是個有在好好設計的產品」的感覺。

尤其我認為這是一款針對有美學底蘊的人會使用的app，UI若是讓人看不下去或是一種濃厚的工程感，絕對無法說服這一群人認為我的app可以在設計上幫上忙。

這中間的來回，才是真正的「Vibe」

我要強調一件事：新 UI “不是一次到位的”。

它是我跟 Claude Code 一來一往「vibe」出來的。我丟關鍵字跟參考圖，它產出一版；我看了覺得「這裡太重」「那個間距怪怪的」「這個顏色再暖一點」，再回饋給它；它再改。

這個循環跟我 part 1 講的「問→報錯→截圖→貼上」很像，但層次完全不同——part 1 是在解決「能不能動」，part 2 是在雕琢「好不好看、順不順手」。

從一個看功能的階段，進化到一個看質感的階段。我覺得這個轉變本身，就是 Agentic Coding 最迷人的地方：它讓一個沒有技術背景的人，可以專注在「我想要什麼」，而不是「我要怎麼做出來」。

順便，它連名字都幫我想清楚了

喔對，這一版還有一個大改動——App 從「TrueHue 拾光」正式改名成「HuePort」。

（改名的過程其實有個小插曲，我學到「取名字前一定要先上網查有沒有撞名」這個血淚教訓，不然辛苦做好的品牌可能踩到別人的地雷。這個之後有機會再細講。）

新的名字、新的圖示（一個發光的滴管，我超愛）、新的設計語言，整個 HuePort 終於有了一個完整的樣貌。