前言

前面做完了 money-note MVP 核心功能之後，畫面就這樣固定了嗎？

當然不可能，所以這邊我們就要來用 Anthropic 官方出的 Frontend Design plugin，把前面所製作的陽春畫面改造成一個比較有辨識度的、正式產品等級的畫面。

Note
Anthropic 官方也自己知道 AI 製作出來的畫面太過陽春不好看（笑）。

為什麼 AI 的預設畫面審美很平庸/普通？

其實這個最大問題是「AI 訓練來源」。

為什麼會牽扯到「AI 訓練來源」呢？因為 AI 在學習時，主要是透過大量的資料去訓練的，而當前的畫面就是這些訓練的「平均值」。

所以 AI 在預設狀況下，它的最佳思考策略就是當前你所看到的畫面。

所以我們該怎麼解決呢？其實在畫面設計中，非常講求一個東西，也就是 「個性」（不是《我的英雄學院》裡的個性）。

所以理解這件事情之後，我們就繼續往下吧！

安裝 Frontend Design Plugin

沒想到吧？昨天才剛介紹完 SKILL 裡面的 /plugin，今天就要直接用到它了。

接下來請你一樣輸入 claude 進入 Claude Code，然後輸入 /plugin 進入 plugin 管理頁面，接著在 Search 欄位輸入 frontend-design 搜尋，找到之後點擊 Install 安裝。

但這邊就允許我偷懶一下，我直接使用底下指令安裝：

/plugin install frontend-design@claude-plugins-official

在安裝之前，你可以看一下「frontend-design」的描述：

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

其實簡單來講，就是...

打造一個具有獨特特色且達到產品等級的前端畫面，減少 AI 生成的通用風格。 官方蓋章。

基本上你安裝完畢之後不會有什麼變化，畢竟它只會在你要求它幫你改畫面時才會跳出來。

改造實戰：講感覺，不講 CSS

那開始之前，我們先看一下當前的畫面，做一下 Before & After 的對比：

那這次改造我們會動到很多地方，畢竟是整個套版大改，所以會強烈建議你使用 Plan Mode，這樣就可以先把改造計畫列出來，等確認無誤之後再執行。

基本上我們在描述畫面時，你可以不提到 CSS，但你要把這些感覺翻成可驗收的設計限制，這樣 Frontend Design 才能幫你做出符合你想要的畫面，底下是我的一個參考 Prompt：

請呼叫並使用 frontend-design skill，請先讀取 SPEC.md 與了解目前元件，接著請你提出 UI 調整計畫。

產品方向：暖色紙本帳冊，安靜、俐落、數字優先，不做一般藍白後台。

設計限制：
- 頁面背景 #F3EFE7、卡片 #FFFDF8、文字 #1F2925、次要文字 #56625C
- 主要動作 #245C4A、重點 #9A4F20、錯誤 #962E2E
- 使用系統繁中字型，不載入遠端字型；不要漸層、玻璃效果、emoji 功能圖示或浮誇陰影
- 首頁要有標題區、本月總支出與筆數摘要、分頁、記帳表單、支出明細
- 統計頁除了圓餅圖，要有分類名稱、金額與百分比文字，不能只靠顏色
- 所有 input、select、button 至少 44px 高，有可見 label 與鍵盤 focus
- 375px 不得水平捲動；768px 以上內容最大寬 780px
- 支援 prefers-reduced-motion

邊界：保留現有資料結構與功能，只能調整標記結構與樣式且不要新增 UI 套件。

計畫請列出會動的檔案、每個檔案的目的，以及改完的功能與畫面驗收清單。

改完告訴我你做了哪些設計決定跟理由。

如果你是一個小白，可能看到這個 Prompt 的第一反應應該是：

「蛤？這也太複雜了吧，我怎麼可能寫得出這種東西？」

我知道這個 Prompt 看起來滿嚇人的，但如果把它拆開來看，其實就只是這五個問題的答案而已，而且這五個問題我相信你一定可以答出來：

• 你想要什麼感覺？： 就是開頭那句「暖色紙本帳冊，安靜、俐落、數字優先」，用你跟朋友描述的講法就好，像是「我要手寫帳本那種溫暖的感覺，不要長得像公司後台系統」。
• 畫面上一定要有什麼？： 把首頁跟統計頁「一定要出現的東西」一個一個點名出來，這樣 AI 改版的時候，才不會把重要的資訊給改不見。
• 你討厭什麼？： 這條反而是最重要的，因為 AI 的預設全家桶就是漸層、玻璃效果、浮誇陰影這些東西，你不明講「不要」，它就會當作你要。
• 多小的螢幕也要能用？： 給一個手機寬度（375px 大概就是 iPhone 的螢幕寬度）跟基本的可點性（按鈕不要小到點不到），做出來才不會電腦上美美的、手機上卻跑版。
• 什麼東西不准動？： 我們只是幫 App 換衣服，不是動手術，所以要講清楚資料跟功能都不能碰，免得畫面變漂亮了，記帳功能卻壞光光。

「那...這些顏色 #245C4A 呢？我怎麼知道這個呢？」

老實講，你可以不用跟我一樣這樣寫，你可以跟 AI 這樣講：

我想要暖色紙本帳冊的感覺，請給我一些顏色配色作為參考

這也是一種技巧與方式，最終還是回歸到你只需要回答「這是我要的感覺」或者「這個顏色太冷色系，需要再暖一點」就好，剩下的交給 AI 幫你挑出來。

所以需要很懂 CSS 或是設計嗎？基本上不需要，因為你只要回答上面五個問題就好，剩下的設計知識交給 Frontend Design 補上就好。

Note
這並不代表你可以完全不懂 CSS 或設計，你還是會需要具備一定程度的基本功夫，不然你怎麼知道 AI 做出來的東西好不好看？不過這邊的意思是說，你不需要花時間設計也能夠有機會做出好看的畫面。

如果 Plan Mode 沒有問題，接下來就可以開始執行改造計畫，等它跑完後也別忘了請 AI 打開伺服器讓你看一下畫面，我這邊也提供一個改造後的截圖給你參考：

統計頁面呢？當然也被調整了：

迭代微調：對話式設計

儘管修改後的畫面已經比原本好看很多，但...通常第一版的畫面都還是會需要做一些調整，畢竟「美感」這種東西是主觀的，你可能會覺得有些地方看了心裡癢癢的，像是...

• 這個數字怎麼這麼小？
• 這個按鈕怎麼長這樣？

那這時候就需要進入「迭代微調」的階段啦～

其實這個階段很單純，就是先把畫面改到大致滿意之後，再慢慢磨小細節。

但微調的時候不要只講「我要精緻一點」這種模糊的話，因為 AI 不知道你說的精緻是什麼，你要清楚是哪個東西、想要它變怎樣，像是...

「本月總支出」的數字再放大一點，它是整頁最重要的資訊。
分類標籤的顏色沿用現在的就好，不要再多出新顏色。
刪除按鈕大小不要動，滑鼠移上去的時候再變成警告紅就好。

一次不要講一大堆，通常微調保持幾個重點：

• 講 2~3 個點就好
• 講完之後先看結果
• 再決定要不要再調整

接著就一路改到你滿意為止，這個過程就像是跟設計師來回改稿一樣，只是這位設計師不會給你巴洛克式的白眼就是了（笑）。

但如果今天的狀況是，你覺得「好像哪邊看起來怪怪的」，但又講不出所以然的時候，其實這邊有一個技巧可以分享給你試試看，也就是

將畫面截圖丟回去給 AI，請它協助分析看看。

不過，丟給 AI 的時候，你還是要跟它提到幾個重點：

這是目前的畫面，請你使用設計師的角度檢查這個畫面，並分成「重要資訊夠不夠明顯」、「間距會不會太擠」、「手機上好不好按」這幾個面向去分析，分析完畢後跟我說你的建議跟理由就好，不要急著修改。

上面的 Prompt 重點建立於幾點：

• 你要先告訴它你想要它幫你做什麼，像是「檢查畫面」。
• 你要告訴它你想要它用什麼角度去分析，像是「設計師的角度」。
• 你要告訴它你想要它分析的面向，像是「重要資訊夠不夠明顯」、「間距會不會太擠」、「手機上好不好按」。
• 避免它雞婆直接改畫面，因為你不一定每個建議都認同。

整個過程其實依然圍繞在「建立可以驗收的設計限制」這件事情上，因為你要先知道畫面怪在哪裡，才能決定要改哪裡。

假的，全都是假的

那畫面改完之後就可以安心了嗎？不，不對。

這次的調整其實動到滿多檔案，你必須記住一個大原則：

當畫面有變動時，那麼功能就有可能壞掉。

基於這個大原則，你必須要請 AI 進行一件事情，也就是回歸測試（Regression Testing）。

什麼意思呢？其實很簡單，就是把原本的功能重新測試過一輪，確定沒有東西因為這次的版面調整而改壞。

方法有很多種，你可以自己手動點一輪：

• 新增一筆記帳
• 故意輸入錯誤的資料
• 刪除一筆
• 重新整理頁面
• 看統計有沒有跟著更新

當然，你也可以請 AI 協助你基於上述跑一輪，這時候就可以使用 claude in chrome 來協助我們操作瀏覽器進行整體的操作測試。

整體確認沒問題之後，你才可以跟 AI 說以下這段話，請它幫你 commit：

幫我 commit，訊息說明這次是 UI 優化，功能沒有變動。

結語

那這邊時間也差不多了，我們也一樣來做一點結論吧。

• AI 畫面有 AI 味的原因在於你沒給方向時，它就會依照訓練資料的平均值去產生畫面。
• 善加利用 SKILL 擴充功能，像是 Frontend Design。
• Prompt 不用會 CSS，但你要回答的出這五個問題：
  1. 想要什麼感覺
  2. 畫面上一定要有什麼
  3. 討厭什麼
  4. 多小的螢幕也要能用
  5. 什麼東西不准動
• 微調要講清楚，不知道該怎麼講就截圖請 AI 幫忙給建議
• 畫面大改後必須做回歸測試，把功能重新操作一遍確認沒被改壞。

那麼今天差不多就到這邊結束，我們明天見～