Design Token 全站改版：AI 評分當不了門檻，先換 token 值一支 PR 換掉九成畫面

全站改版的設計稿交給 AI 評審打分，D2 這個設計方向評了七輪，分數一直卡在 6.2 到 6.4。

這次要一次換掉官網、儀表板、後台和 email 的視覺。我用 AI 評審替設計打分、用 Design Token（把顏色、字型這些設計決定存成具名變數）落地，學到兩件事：

• AI 評審的分數不能拿來當「到幾分才能過」的門檻，它每一輪列出的問題拿來當回歸清單才有用。
• 落地時第一支 PR 只換 token 的值，不動 class 和變數名，54 個檔案一行都不用改，九成畫面就換了皮。

2026 年 9 月這次改版，我把自己的產品換成一套工程藍圖風格的視覺。原本的視覺是深藍灰底加圓角卡片，我一直覺得它很平庸。

只換落地頁的話，app、後台和 email 還是舊識別，會跟首頁脫節，所以範圍是全站。

AI 評分當不了門檻

我沒有直接改程式，先在 Claude 的 Design 畫布上探索風格。第一輪四種方向收斂成兩個，各做第二版，再用 codex 拿固定的提示詞逐輪評分。

最後定案工程藍圖這個方向（D2），把全站 96 張畫板畫完。

D2 的分數卡住之後，為了校準，我拿同一個提示詞去評 Stripe 和 Linear 的網站。這個評審給知名產品的分數也就七分多。

評分對象	同一個 AI 評審、同一個提示詞的分數
Stripe	7.8
Linear	7.2
D2（評了七輪）	6.2 到 6.4

更麻煩的是，評審每一輪指出的頭號問題會互相矛盾。上一輪說權限核對圖太小，放大之後下一輪嫌它搶戲。

分數不會因為大改而明顯變動，當門檻沒有意義。

但每一輪列出的問題，照著一條一條修很有用。評分前也要先拿知名網站校準。

先換 token 的值，再逐區重排

D2 的規則寫得很死，每個顏色都有用途。紙色底、墨色字，鈷藍給連結和品牌，萊姆只給主要動作而且一頁最多一顆，琥珀只給資金流和極值。

形狀全部方角，1px 墨線，硬邊位移陰影。

現在的首頁：鈷藍首屏、一顆萊姆主按鈕，內容區是紙色底、方角墨線。

驗收條件裡另外有兩條可及性規則。亮暗兩版每個文字 token 的對比要 ≥ 4.5:1，這是 WCAG 對一般文字的最低對比；使用者開了 prefers-reduced-motion（系統設定要求減少動畫）時，不能有 transform 動畫。

落地的第一支 PR 只換 token 的值和字型，不動 .ez-* 的 class 和變數名。

九成畫面直接換了皮。之後的 PR 只需要處理重排：首頁、登入與 onboarding、儀表板外框、公開頁共用版型，最後是儀表板分頁、後台和 email。

重排是平行做的。主 checkout 加兩個 worktree，各自跑一個 next dev，一支 PR 交給一個 Claude Code agent。共同規則寫在一份 brief 裡，畫板截圖當設計來源。

衝突只出在 globals.css 的檔尾和幾份文件。後來規定新的 CSS 插在各自區塊的尾巴，不要插在檔尾，衝突就少了大半。

平行開 agent 的時候，共用檔案的寫入位置要先規定好。

codex 和真瀏覽器抓到的問題

每支 PR 都讓 codex review 一次，另外用真瀏覽器登入我自己的 STG 帳號做 QA。兩邊的發現合成一支修正 PR，例如：

• 通知抽屜沒有 focus trap，鍵盤焦點可以跑出抽屜。
• 背景 shader 離開視窗後，沒有停掉 rAF（每一幀跑一次的動畫迴圈）。
• 同一頁出現兩顆萊姆按鈕。

其中一條是我自己算錯的。

文件裡寫 --fg-dim 的對比是 4.6:1，codex 實際算出來是 3.81:1。

之後對比一律真的算，不憑感覺填。

另一條規則是不做假按鈕。畫板上有些功能後端其實沒有，例如「保持登入 30 天」或後台的角色邀請分頁，一律不做成假按鈕。

權限清單也一樣。畫板上畫的權限項目跟 onboarding 實際要求的不完全一樣，以 onboarding 為準。

這條規則後來還是漏了一句。儀表板改版時，設定頁的 2FA 提示寫了後端沒有做的保護，兩天後才修掉，經過寫在帳號安全上線後的三個修正。