自動化設計審查:用 Playwright MCP 跑 UI/UX/無障礙審查(design-review 子代理)
把 OneRedOak 的 design-review 工作流策展成可直接套用的版本:用 Playwright MCP 在真實瀏覽器環境裡,依 7 個階段(互動、響應式、視覺、無障礙、健壯性、程式碼健康)自動審查前端變更,並依 Blocker/High/Medium/Nitpick 分級回報。
前端 PR 的「設計品質」總是最後才被人眼掃過、又常漏掉無障礙與 RWD 問題?這個 design-review 子代理用 Playwright MCP 真的開瀏覽器、量斷點、截圖、看 console,照 7 階段幫你審查並分級回報。
[ Log in to see the full prompt ]Sign up free to see the full prompt, copy it, save it, and join the discussion. Free content unlocks on login; Pro content is a separate subscription.
## 這是什麼/解決什麼痛點 前端 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 的教學影片)見上方連結。
Suno Engineer's Mindset: 4 Steps to a Song That Doesn't Sound Like AI
A studio engineer's breakdown of Suno's fatal weaknesses (fried vocals, high-frequency artifacts), plus a 4-step DAW workflow and a Suno Studio cleanup prompt.
5 Claude Weekly Workflows That Stuck After 6 Months
Proposal generator / meeting processor / content repurposer / Friday review / shutdown reset — out of 40 I tried, only these 5 survived, each saving 30+ minutes per run.