自動化設計審查：用 Playwright MCP 跑 UI/UX/無障礙審查（design-review 子代理）

01PROMPT

前端 PR 的「設計品質」總是最後才被人眼掃過、又常漏掉無障礙與 RWD 問題？這個 design-review 子代理用 Playwright MCP 真的開瀏覽器、量斷點、截圖、看 console，照 7 階段幫你審查並分級回報。

[ 登入後可看完整內容 ]

02CONTEXT / 使用情境

## 這是什麼／解決什麼痛點 前端 PR 最容易被放掉的就是「設計品質」這一關：人眼最後掃一遍、心情好才認真看，於是 RWD 斷點破版、focus ring 不見、對比度不足、空狀態醜陋這類問題一路流到正式環境。design-review 把這道關自動化——它不是只讀 code，而是真的開一個瀏覽器、實際操作介面、量不同斷點、截圖、讀 console，再給你一份分級報告。 ## 為什麼這個來源值得用 這是 OneRedOak/claude-code-workflows 裡的 design-review 工作流（MIT 授權、可商用，Copyright 2025 Patrick Ellis）。它的設計水準對齊 Stripe／Linear／Airbnb 這類一線產品團隊的審查標準，並明確要求 WCAG 2.1 AA 無障礙合規。關鍵差異在於它接了 **Playwright MCP**：能「即時操作與測試真實 UI 元件，而不只是靜態 code 分析」。它由四個元件組成——design-review 子代理（subagent）、`/design-review` slash 指令、design-principles 範本、以及可放進 CLAUDE.md 的整合片段——能在 PR 上自動觸發、也能手動隨叫隨審。 ## 怎麼用（要點） 1. 先在 Claude Code 裝好 Playwright MCP server（讓 Claude 能操作瀏覽器）。 2. 把上方 full_prompt 存成一個子代理檔（Claude Code 的 subagent，放在 `.claude/agents/design-review.md`），或當成 `/design-review` slash 指令內容。 3. 觸發時提供：預覽／staging 網址、你的設計原則文件、本次變更範圍。 4. 子代理會依 7 階段跑：① 準備 → ② 互動與流程 → ③ 響應式（375／768／1440px）→ ④ 視覺細節 → ⑤ 無障礙 WCAG 2.1 AA → ⑥ 健壯性壓力測試 → ⑦ 程式碼健康，最後把問題分成 Blocker／High-Priority／Medium-Priority／Nit 四級，附截圖與修正方向。 ## 何時用 - 任何動到 UI 的 PR 合併前，想要一致、可重複的設計把關。 - 團隊重視無障礙與 RWD，但人工每次都查不齊。 - 你已經（或願意）在 Claude Code 接上 Playwright MCP，想讓審查「真的去點頁面」而非只看 diff。 📎 來源：OneRedOak/claude-code-workflows（design-review，作者 Patrick Ellis，MIT 授權）— 本篇為繁中改寫整理，原始 4 個元件與安裝說明（含 Patrick Ellis 的教學影片）見上方連結。