Automated Design Review: UI/UX/Accessibility Audits via Playwright MCP

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

[ Log in to see the full prompt ]

## What This Is / What Problem It Solves Design quality is the check most easily skipped in frontend PRs: it only gets a final human glance, and only when reviewers are in the mood, so responsive breakpoints break, focus rings go missing, contrast falls short, and empty states look ugly — and all of it flows straight through to production. design-review automates that check — it doesn't just read code, it actually opens a browser, operates the interface, measures different breakpoints, takes screenshots, reads the console, and hands you back a graded report. ## Why This Source Is Worth Using This is the design-review workflow from OneRedOak/claude-code-workflows (MIT licensed, commercially usable, Copyright 2025 Patrick Ellis). Its design bar matches the review standards of first-tier product teams like Stripe, Linear, and Airbnb, and it explicitly requires WCAG 2.1 AA accessibility compliance. The key differentiator is that it plugs into **Playwright MCP**: it can 'actually operate and test real UI components live, rather than just doing static code analysis.' It's made up of four components — the design-review subagent, the `/design-review` slash command, a design-principles template, and an integration snippet you can drop into CLAUDE.md — and it can trigger automatically on a PR or be run manually on demand. ## How to Use It (Key Points) 1. First install the Playwright MCP server in Claude Code (so Claude can operate a browser). 2. Save the full prompt above as a subagent file (a Claude Code subagent, placed at `.claude/agents/design-review.md`), or use it as the content of the `/design-review` slash command. 3. When triggering it, provide: the preview/staging URL, your design-principles document, and the scope of this change. 4. The subagent runs through 7 stages: ① preparation → ② interaction and flow → ③ responsiveness (375/768/1440px) → ④ visual detail → ⑤ WCAG 2.1 AA accessibility → ⑥ robustness stress testing → ⑦ code health, then sorts issues into four grades — Blocker / High-Priority / Medium-Priority / Nit — with screenshots and suggested fixes. ## When to Use It - Before merging any PR that touches the UI, when you want a consistent, repeatable design check. - When your team cares about accessibility and responsiveness but manual review keeps missing things. - When you've already connected (or are willing to connect) Playwright MCP in Claude Code and want reviews that actually click through the page rather than just reading the diff. 📎 Source: OneRedOak/claude-code-workflows (design-review, by Patrick Ellis, MIT License) — this piece is a Traditional Chinese adaptation and summary; see the four original components and installation instructions (including Patrick Ellis's tutorial video) at the link above.