Web Design Reviewer

Expert skill for reviewing and enhancing design & creative web projects

Category: design Source: github

Web Design Reviewer is an AI skill that evaluates web interfaces for visual quality, usability, and design consistency by analyzing screenshots, live URLs, or HTML code. It provides detailed feedback on layout composition, typography, color usage, spacing, interactive elements, and overall visual hierarchy, helping teams identify and fix design issues before they reach users.

What Is This?

Overview

Web Design Reviewer performs comprehensive visual analysis of web interfaces across multiple quality dimensions. It evaluates alignment and grid consistency, typographic hierarchy and readability, color contrast and palette harmony, whitespace distribution and visual breathing room, interactive element clarity and affordance, and responsive behavior across breakpoints. Feedback is organized by severity and includes specific remediation suggestions with visual references.

Who Should Use This

This skill serves frontend developers who want design feedback without access to a dedicated designer, product teams conducting visual quality checks before release, design system maintainers auditing consistency across multiple products, and freelancers who need an objective perspective on their design implementations.

Why Use It?

Problems It Solves

Design issues often go unnoticed during development because developers focus on functionality rather than visual quality. Teams without dedicated designers ship interfaces with inconsistent spacing, poor visual hierarchy, and accessibility problems that erode user confidence. Design reviews typically happen too late in the development cycle, making fixes expensive.

Core Highlights

The skill evaluates designs against established principles rather than subjective preferences. It checks alignment to underlying grid structures, measures spacing consistency across similar elements, evaluates typography for readability and hierarchy, and assesses color combinations for both aesthetic quality and accessibility compliance. Each finding includes a priority level and actionable fix.

How to Use It?

Basic Usage

Design Review Output: Landing Page Analysis

Overall Score: 7.2/10

Critical Issues:
1. Hero section CTA button has insufficient contrast
   - Current: #7C9FEB on #EFF6FF (ratio 2.1:1)
   - Required: WCAG AA minimum 4.5:1
   - Fix: Darken button to #2563EB (ratio 4.8:1)

2. Navigation items have inconsistent horizontal spacing
   - "About" to "Services": 32px
   - "Services" to "Pricing": 24px
   - "Pricing" to "Contact": 28px
   - Fix: Standardize to 32px gap between all nav items

Warnings:
3. Body text line length exceeds 75 characters on desktop
   - Current: ~90 characters per line
   - Fix: Set max-width on text container to 680px

Real-World Examples

/* Before: Issues identified in review */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;      /* Review: gap too small for card content density */
}
.card {
  padding: 12px;  /* Review: inconsistent with 16px gap */
  border-radius: 4px;  /* Review: too subtle, cards blend with background */
}

/* After: Applying review recommendations */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;      /* Consistent with spacing scale */
}
.card {
  padding: 24px;  /* Matches gap for visual rhythm */
  border-radius: 8px;  /* Clear card boundaries */
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);  /* Subtle elevation */
}

Advanced Tips

Submit designs at multiple breakpoints to catch responsive issues. Provide context about the target audience and brand positioning so reviews align with the appropriate design register. Run reviews at key milestones rather than only at the end to catch systematic issues early when they are easier to fix.

When to Use It?

Use Cases

Use Web Design Reviewer when conducting pre-launch visual quality checks, when reviewing pull requests that modify UI components, when auditing design system implementation consistency across applications, or when seeking objective design feedback on freelance or side projects.

Related Topics

WCAG accessibility guidelines, visual design principles, CSS layout systems, responsive design testing, design system documentation, and user interface testing tools all complement the design review process.

Important Notes

Requirements

Provide screenshots, live URLs, or HTML files for review. Including the design intent or brand guidelines helps calibrate feedback to your specific context. Multiple viewport captures enable responsive design evaluation.

Usage Recommendations

Do: address critical accessibility issues before cosmetic improvements. Use review findings to establish design patterns that prevent similar issues across future pages. Share review results with your team to build shared understanding of design quality standards.

Don't: treat automated design review as a replacement for user testing with real people. Apply every suggestion mechanically without considering your specific brand context. Defer critical contrast and accessibility fixes to future development cycles.

Limitations

The skill evaluates visual design qualities but cannot assess user experience factors that require observation of real users interacting with the interface. Subjective brand alignment and emotional design impact require human judgment. Dynamic interactions and animations need manual review beyond what static analysis provides.