{"id":"23fe4ceb-7d12-49f2-ae24-b57b4f52143d","slug":"design-review-skill","kind":"skill","name":"design-review-skill","summary":"A Claude Code skill that turns Claude into a design reviewer that SEES your page. Uses Playwright MCP to capture desktop/tablet/mobile screenshots, audit typography, contrast, rhythm, hierarchy — and","owner":"AslanMazhidov","repoUrl":"https://github.com/AslanMazhidov/design-review-skill","license":"MIT","licenseTier":"permissive","trust":"community","stars":3,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-05-13T17:50:18.000Z","addedAt":"2026-10-14T06:30:12.130Z","logoUrl":"https://avatars.githubusercontent.com/u/178040282?v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","browser-web","developer-tools"],"tags":["ai","anthropic","claude-code","design-review","design-system","playwright","playwright-mcp","ui-design"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-14T10:45:19.647Z","sample":false,"url":"https://conduits.dev/tools/design-review-skill","language":"","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Design Review — a Claude Code skill\n\n> Turns Claude Code into a design reviewer that **sees** your page instead of guessing from the code.\n\nA skill for [Claude Code](https://claude.com/claude-code) that opens an HTML file or URL in a real browser through [Playwright MCP](https://github.com/microsoft/playwright-mcp), captures desktop / tablet / mobile screenshots, audits typography, contrast, rhythm, spacing, hierarchy, color, and alignment by a structured checklist, and proposes (or applies) concrete fixes.\n\n## Why this exists\n\nMost AI design feedback is generic — *\"improve typography hierarchy\", \"add more whitespace\"* — because the model never actually *sees* the page. It reads the code and guesses. This skill enforces a visual step:\n\n1. Open the page in a real headless browser\n2. Screenshot at three breakpoints\n3. **Look at the pixels** through Claude's multimodal vision\n4. Audit by a structured checklist\n5. Produce specific findings with ready-to-apply CSS fixes\n\nThe result reads like feedback from a senior designer, not an autocomplete.\n\n## Prerequisites\n\nYou need **Playwright MCP** installed and connected to Claude Code:\n\n```bash\nclaude mcp add playwright -- npx -y @playwright/mcp@latest\n```\n\nVerify by running `/mcp` inside Claude Code — you should see `playwright` listed.\n\n## Installation\n\n### Option 1 — one-liner (recommended)\n\nEnglish version:\n\n```bash\nmkdir -p ~/.claude/skills/design-review\ncurl -fsSL https://raw.githubusercontent.com/AslanMazhidov/design-review-skill/main/SKILL.md \\\n  -o ~/.claude/skills/design-review/SKILL.md\n```\n\nRussian version:\n\n```bash\nmkdir -p ~/.claude/skills/design-review\ncurl -fsSL https://raw.githubusercontent.com/AslanMazhidov/design-review-skill/main/SKILL.ru.md \\\n  -o ~/.claude/skills/design-review/SKILL.md\n```\n\n### Option 2 — manual\n\n1. Clone the repo:\n   ```bash\n   git clone https://github.com/AslanMazhidov/design-review-skill.git\n   ```\n2. Copy `SKILL.md` (or `SKILL.ru.md`) to `~/.claude/skills/design-review/SKILL.md`\n\n### Verify\n\nStart a new Claude Code session. The skill should appear in your active skills list under the name `design-review`.\n\n## Usage\n\nInside Claude Code, just say:\n\n> Review the design of `./index.html`\n\nor invoke explicitly:\n\n> /design-review\n\nClaude will:\n\n1. Open the page in a headless browser\n2. Take screenshots at 1440 × 900, 768 × 1024, and 375 × 812\n3. Look at the screenshots\n4. Walk through a structured audit — typography → color → rhythm → composition → responsive → polish\n5. Hand you a report with specific findings and ready-to-apply CSS fixes\n6. Offer to apply them in place, then re-run the review to confirm the improvements\n\n## What you get back\n\n```\n## Design Review: index.html\n\n### What's working\n- Strong hierarchy in the hero section: h1 72 px, lead 22 px, body 18 px.\n- Consistent 8-pt spacing scale across all sections.\n\n### Critical issues (must fix)\n1. **Pricing cards — touch targets too small on mobile**\n   Why: CTA buttons are 36 × 36 px; below the 44 × 44 px accessibility minimum.\n   Fix:\n   ```css\n   .pricing-card__cta { min-height: 48px; padding: 12px 24px; }\n   ```\n\n2. **Footer contrast fails WCAG AA**\n   Why: #888 on #fff measures 3.1:1; required ≥ 4.5:1 for body.\n   Fix: bump the gray to `#595959` (4.6:1) or darker.\n\n### Recommended improvements\n1. Tighten the hero line-height from 1.3 to 1.1 for a punchier read.\n2. ...\n\n### Screenshots\n- Desktop: .design-review/desktop.png\n- Tablet: .design-review/tablet.png\n- Mobile: .design-review/mobile.png\n```\n\n## Languages\n\n- 🇬🇧 [SKILL.md](SKILL.md) — English\n- 🇷🇺 [SKILL.ru.md](SKILL.ru.md) — Russian (original)\n\n## License\n\n[MIT](LICENSE) — free to use, modify, and redistribute.\n\n## Author\n\nAslan Mazhidov · [github.com/AslanMazhidov](https://github.com/AslanMazhidov)\n\nIf this skill makes your day easier, a ⭐ on the repo is appreciated.\n"}