Frontend Design Review Expert

Problem

When a frontend page works but feels visually inconsistent—colors applied ad hoc, spacing set by feel, and the same button rendered differently across routes—the issue is usually design consistency, not a functional bug. frontend-design-expert targets that problem: it reviews a single page, multiple pages, or the gap between a design file and the implementation, then turns vague polish issues into actionable design checks.

How It Works

The skill focuses on both the visual layer and the code layer. Its core capabilities include:
- Visual analysis: identifies colors, typography, spacing, layout, and component styles such as buttons, forms, and cards
- Consistency checks: verifies primary colors, type hierarchy, an 8px spacing baseline, and whether similar components match
- Aesthetic evaluation: assesses visual balance, alignment, text contrast, and whitespace
- Optimization suggestions: produces issue locations, design directions, and copyable CSS examples

The workflow starts from the input. A clear screenshot, key HTML/CSS snippets, or a design file is preferred. If only a screenshot is available, the review leans toward visual judgment; if only code is available, it focuses on CSS variables, naming, reuse, and component encapsulation. For multi-page reviews, it first extracts shared patterns and then compares differences, which helps catch inconsistencies in colors, fonts, and components across pages.

Boundaries And Caveats

It fits page design quality review, design consistency checks, design-to-implementation comparison, and Design System suggestions for new projects. It does not replace performance optimization, SEO, deep accessibility, backend API design, or copywriting. It can check basic contrast, but it should not be treated as a full ARIA or screen-reader audit. CSS suggestions should include concrete values so they can be applied directly; if the goal is simply to get a polished button, explicitly skip the review and request component code.