AI 設計品質量化檢測

AI 生成設計最大的問題不是「不好看」，而是使用者很難說清楚哪裡壞。與其反覆要求「再好看一點」，更穩的做法是建立一套可重跑的檢測閉環：先把明顯壞偏離抓出來，修完再跑一次。

這是 Claude-Code-前端設計工作流 的反向切角：前者處理「怎麼生出設計」，這篇處理「怎麼檢測 AI 生出的設計哪裡壞」。

最小可用閉環

實作上不需要一開始追完整研究工具鏈。最有價值的是能讓 AI 在每次改版後自己重跑、自己修正、再重跑確認的檢測：

1. CSS token / 視覺一致性統計

   • 用 Playwright 讀實際頁面，統計顏色、字級、圓角、陰影、按鈕樣式。
   • 抓「同一語意卻有多套樣式」：太多灰階、太多 font size、CTA 樣式不一致、頁與頁之間設計 token 漂移。
   • 這是最值得先做的部分，因為它便宜、可自動化、能做 regression。

2. axe-core / WCAG 基礎檢查

   • 跑對比、alt、label、link name、button name 等基礎可及性規則。
   • 目的不是把 a11y 當設計總分，而是先排除明顯會傷害閱讀與操作的問題。

3. Playwright 任務模擬

   • 給任務，例如「找到 Pro 方案月費」、「完成加入購物車」、「找到聯絡方式」。
   • 觀察 agent 或腳本卡在哪：CTA 被藏太深、彈窗遮擋、導航層級過多、文字不清楚。
   • 這比單看截圖更接近真實使用。

4. 截圖式人工 / LLM 評估

   • 對 Playwright 截圖做最後檢查：視覺階層是否清楚、首屏重點是否明確、是否仍有 AI slop。
   • 這層適合當 review 輔助，不適合當唯一判準。

Agent 自動循環

這套流程不需要先產出給人看的文件。比較好的做法是讓 agent 把檢測結果當成工作回饋，直接進入循環：

1. 跑檢測：CSS token 統計、axe-core、任務模擬、截圖檢查。
2. 判斷最值得先修的 1-3 個問題。
3. 做最小修改，不順手重設整個設計方向。
4. 重跑檢測，確認問題有改善且沒有引入新問題。
5. 還有明顯問題才繼續；沒有就停。

重點不是把檢測包成文件，而是讓 AI 不再靠「看起來怪怪的」猜修法。檢測結果只要能回饋給 agent 決策即可；人只需要在最後看變更是否符合產品方向。

邊界

量化檢測只能幫忙移除壞偏離，不能直接產生品味。它會把設計推向更一致、更清楚、更不容易出錯，但不會決定品牌應該冷峻、活潑、粗獷或高級。

真正的判斷仍然是人做：

• 哪些偏離是錯誤，應該修掉
• 哪些偏離是記憶點，應該保留
• 這個產品要給誰用、希望對方感受到什麼

所以這套閉環適合當 AI 設計 review 工具，不適合取代設計方向本身。

相關

• Claude-Code-前端設計工作流 — 生成設計的工作流，與本檢測切角互補