AI 做的介面很醜怎麼辦？六句品味回饋，把看板從及格調到 Stripe 等級
我請 Claude 做一個跨專案任務看板，第一版能動但很醜。我沒有講任何設計術語，只丟了六句口語回饋——「不好看」「老花眼友善」「要太陽月亮切換」——每一句它就調研一輪頂尖產品再改一版。這篇記錄六次迭代各學到什麼。
葛飾北齋《神奈川沖浪裏》（約 1830–32 年），木刻版畫、紙本設色，紐約大都會藝術博物館典藏。畫面主題為巨浪與舟船。北齋在《富嶽三十六景》系列中反覆錘鍊同一座富士山的畫法——與本文「同一個看板改六版」的精神相通。
背景：一個能動但很醜的看板
我平常在超過一百個 git repo 之間切換工作，常常想不起來「哪件事最急」。所以我請 Claude 做一個類似 Asana「My Tasks」的跨專案任務看板：把散在各 repo 的進行中任務彙成一條清單，依輕重緩急排序。
第一版（v0）功能都對——25 條任務、逾期的排最前面、附上「為什麼排這裡」的理由。但我看了一眼就知道：這個東西我不會想每天打開。
我的提問：我覺得不好看，好看才會想工作
我的原話是：
我覺得不好看 好看 才會想工作 ＸＤ 你上網查 這類頂尖樣式 舉例像 monday app or stripe web … 你多跳推理 調研至少三個案例好嗎？
注意我沒有講任何設計術語。我只說了「不好看」，然後指了兩個我覺得好看的參照物。
Claude 的回答：四個頂尖產品，各偷一招
Claude 調研了四個案例，並且明確說出 v0 醜在哪、每家教了什麼（來源見文末）：
- Linear（暗色介面的天花板）：深度靠「表面階梯＋髮絲線」表現，不用陰影；全頁只留一個彩色重點色，省著用;標題用負字距做出精工感。v0 的病是半透明彩色徽章糊成一團、每張卡都塞彩色說明框——等於全頁都在喊。
- Stripe：每個元素都要「掙得自己的位置」。改法是只有第一名任務配完整推薦卡，其餘降為乾淨的單行列表。
- Monday：彩色是「狀態語言」——飽和色小膠囊配對比字色，只出現在狀態上，底盤保持中性。
- Asana：關鍵資訊（期限、負責人）固定位置永遠可見，不埋在內文裡。
改完之後是完全不同檔次。這一輪還有個插曲：新版一開始整頁空白，查下來是 JavaScript 頂層宣告了 const top，撞上瀏覽器保留的全域變數 window.top，整段程式一行都沒執行。Node 模擬測不出這種錯，真瀏覽器的 console 一秒現形——這條也被記成了跨專案的 learning。
我又追問：我需要老花眼友善，無論白天黑夜
第二句回饋還是很口語：
我需要老花眼友善 無論白天黑夜都友善閱讀
Claude 的回答：字級放大＋日夜雙主題，對比是關鍵
- 本文從 15px 放大到 17px，全站最小字不低於 13px；重要資訊靠「加粗加大」呈現，不再用「縮小變灰」表達次要。
- 新增亮色主題，跟著系統日夜自動切換。
- 亮色模式的陷阱是低對比：金色重點色在白底上要加深（#e3b341 → #8f6f13），不然會糊掉。
我又追問：我要太陽月亮切換的 SVG 動畫
系統自動切換不夠，因為「晚上想看亮的」只有我自己知道：
你上網找 svg 動畫 有太陽月亮可以切換那種好不好 讓我可以切換色系主題……你或許可以參考 diel 那款設計
Claude 的回答：經典變形配方＋記住偏好
太陽月亮切換鈕的主流做法不是換兩張圖，而是同一顆 SVG 圓形變形：遮罩圓滑入「咬」出月牙、八道光芒旋轉收合，全程 GPU transform，零套件。交互邏輯則沿用我們之前做打卡工具的做法：即點即換、localStorage 記住選擇——點過之後就以人的選擇為準，系統的日夜切換只在從沒點過時生效。
我又追問：更智慧的排序，我記得我在某個 repo 留過設計
比方說 同一個 repo 下可能是手風琴收合接關任務 我可以按下紅燈任務 就直接跨專案顯示 紅燈優先權 因為我印象中，我有在某一個 repo 留下這個討論想像的設計 你也可以查一下
Claude 的回答：舊設計找到了，再對上 Linear 的三件套
它先用索引工具找到我兩天前留在測試報告 repo 的 learning——「手風琴心智模型：用原生 <details> 零 JS、看完能收合＝閱讀進度感」。再對照 Linear 官方文件，頂尖 issue tracker 收斂成三件套：Group by（分組）＋ Filters（篩選）＋ Saved views（記住視圖）。我描述的兩個想像正好各對應一件：
- 統計數字格變成按鈕，按「逾期」＝跨專案只看紅燈，再按一次解除。
- 「依 repo」模式下每個 repo 一列手風琴，含紅黃燈的預設展開、其餘收合。
- 視圖選擇存進 localStorage，補上第三件。
我又追問：FastAPI 的介面很友善，你可以取什麼經？
我最近在讀 FastAPI 的 Swagger 文件介面，覺得它的收合、圖示、配色都比看板好：
比放說收合icon 現在你用很隱晦很小的三角形就不夠好 他的配色邏輯 更直覺
Claude 的回答：Swagger 的祕密是「一色三用」
它直接逆向了 swagger-ui.css，挖出具體配方：每個方法色同時出現在三個地方——實心徽章（白粗字、固定寬度）＋整塊邊框＋整塊底色（同色 10% 透明度）。所以掃一眼，色彩就是分類本身，不用讀字。收合箭頭則是 20×20 的粗筆畫 SVG，比原本的 13px 細三角大三倍。
最妙的是四個燈號直接繼承 Swagger 四個方法色：紅（DELETE）＝逾期、橙（PUT）＝死線內、藍（GET）＝留意、綠（POST）＝進行中。綠燈＝健康進行中，正好貼合紅綠燈的直覺。
我最後追問：沒有 emoji 才專業，Stripe 也這樣嗎？
我覺得沒有 emoji 才專業……但是我很困惑 stripe 也會這樣嗎？ 我印象中他要用都會用 符號 或 svg 或動畫 svg 椰
Claude 的回答：你的印象是對的
Stripe 和 Linear 的產品介面裡都不用 emoji，理由有三個：emoji 在 Mac、Windows、Android 上長得不一樣（設計師控制不了）；顏色粗細無法融入設計系統；正式感掉檔。它們一律用自製 SVG 圖示、插畫和微動畫。
於是看板最後一顆 🎉 被換成 Stripe 式的空狀態：綠色線條打勾圓圈，用 stroke-dasharray 做描邊動畫——圈先畫 0.6 秒、勾接著補上。這條也升級成我的跨專案規則：介面禁 emoji，狀態用 SVG。
我學到的
給 AI 品味回饋，不需要專業術語。六個版本的推進器就是六句口語：「不好看」「老花眼友善」「要太陽月亮」「要手風琴和紅燈按鈕」「跟 FastAPI 取經」「不要 emoji」——每一句配一個參照物（Stripe、Diel、Swagger），AI 就能去調研、逆向、移植。人負責裁決好壞，AI 負責找出「好」背後的具體配方。讀到 Swagger「一色三用」那段時我特別有感：原來直覺的介面背後，是可以被逆向出來的規則。
來源歸因：本文的設計分析由 Claude 協助調研與逆向整理。Linear 設計細節出自 VoltAgent awesome-design-md 的 Linear 逆向文件與 Linear 官方文件（Display options／Filters／Custom views）；Swagger 配色數值逆向自 swagger-ui 的公開 CSS；太陽月亮切換手法參考 CodePen 社群的 SVG morph 範例。封面畫作資料來自 大都會藝術博物館開放 API。