Bbasche/design-review ? reverse-engineered prompt

Reverse engineered prompt

Build me a Claude Code skill called design review that looks at a frontend page like a design director, not like a linter.

It should take a live page, screenshot it at desktop, tablet, and mobile, pull in the project’s design system from things like CSS variables, Tailwind config, DESIGN.md, and component patterns, then review the UI with opinionated taste rules. I want it to judge hierarchy, typography, color, spacing, consistency, and responsive behavior, and then give me a severity ranked report with clear file and line references, CSS selectors where useful, a score out of 10, and quick wins.

It should also have a quick mode for top findings only, focused modes for typography, color, spacing, responsive, and consistency, and an option to compare against a Figma link if one is provided. If it can use Chrome DevTools MCP for screenshots and computed styles, great, and if not, it should fall back gracefully. Please make it feel polished and practical, with strong visual opinions and helpful fix suggestions.

Are you gonna build this?

make sure you review the code using coderabbit

Try freeSponsored — opens CodeRabbit in a new tab