Design Review

What Is Design Review?

The Design Review skill is a specialized tool designed to evaluate the visual quality of web applications or pages. Unlike a UX audit, which focuses on usability, workflows, and user friction, the Design Review skill zeroes in on the visual aspects that define professionalism and polish. It systematically examines aspects such as layout, typography, spacing, color, visual hierarchy, consistency, interaction patterns, and responsive behavior. The primary goal is to answer the question: “Does this project look well-crafted to a design-conscious eye, or does it carry telltale signs of being developer-made?” This skill is particularly valuable for teams and individual contributors aiming to elevate the aesthetic quality of their digital products before client presentations, internal reviews, or public launches.

Why Use Design Review?

A web application’s visual design serves as the first point of contact with users, directly influencing perceptions of credibility, usability, and trustworthiness. Even if a product is functionally robust, subpar visual design can undermine its success. Design Review provides an objective, structured way to catch inconsistencies and shortcomings that may not be immediately apparent, especially to those without formal design training. It is especially useful:

• Before client or stakeholder demos: Ensures the product appears polished and professional.
• When something “looks off”: Pinpoints specific issues that might be causing unease.
• After implementing new features: Confirms visual integration with existing interface elements.
• During periodic quality checks: Maintains a consistently high design standard across product iterations.
• As a complement to UX audits: Addresses visual polish after usability concerns have been resolved.

How to Get Started

To utilize the Design Review skill, you must be working within a Claude Code-compatible environment. The tool operates by inspecting a live or deployed URL (avoiding localhost when possible), using browser automation tools such as Chrome MCP, Playwright MCP, or playwright-cli. This ensures an accurate evaluation of the page as it would appear to end users.

Example usage:

1. Ensure your web application is deployed to a staging or production URL.
2. Trigger the skill using one of its recognized prompts, such as:
   • “design review”
   • “review the design”
   • “is this polished?”
   • “visual review”
3. The skill will analyze the page, focusing on visual aspects, and generate a findings report. Screenshots are included for reference.

Sample command (for Playwright MCP):

playwright codegen --target=python https://your-app-url.com

This command can help you script interactions if needed for dynamic pages.

Key Features

The Design Review skill systematically evaluates several critical aspects of visual design:

• Layout and Spacing: Checks for consistent spacing, grid alignment, and proportional use of whitespace. For example, ensuring uniform padding between cards in a dashboard grid.
  css

  .card-grid {
    display: grid;
    grid-gap: 24px;
  }

• Typography: Examines font choices, sizes, hierarchy, and readability. Ensures that headings, body text, and labels follow a logical and visually pleasing scale.
  css

  h1 {
    font-size: 2.25rem;
    font-weight: 700;
  }
  p {
    font-size: 1rem;
    line-height: 1.6;
  }

• Color Palette: Evaluates the coherence of color schemes, contrast ratios, and accessibility. Verifies that primary, secondary, and accent colors are used purposefully.
  css

  :root {
    --primary: #2563eb;
    --accent: #f59e42;
  }
  button.primary {
    background: var(--primary);
    color: #fff;
  }

• Visual Hierarchy: Assesses whether important elements (CTAs, headers) stand out and that similar elements are styled similarly.
• Consistency: Checks for uniformity in component styles, iconography, and spacing rules.
• Interaction Patterns: Reviews the clarity and feedback of interactive elements (buttons, links, hover/focus states).
  css

  button:hover, button:focus {
    background: #1e40af;
    outline: 2px solid #f59e42;
  }

• Responsive Behavior: Ensures that the design gracefully adapts to various screen sizes.
  css

  @media (max-width: 600px) {
    .sidebar {
      display: none;
    }
  }

• Findings Report: Summarizes issues and strengths, providing annotated screenshots for clarity.

Best Practices

• Use on Deployed URLs: Always review the live or staging version to catch deployment-specific issues.
• Integrate into QA Workflow: Combine Design Review with functional and UX audits for a holistic quality process.
• Act on Findings: Address visual inconsistencies as soon as they are identified to prevent design debt.
• Leverage Screenshots: Use annotated screenshots from the report to communicate issues to designers and developers.
• Repeat Regularly: Apply Design Review after major updates, before launches, and during sprints to maintain standards.

Important Notes

• Design Review is not a UX audit: It focuses purely on visual quality, not user flows or navigational usability.
• Requires browser automation: Compatible only with Claude Code environments capable of running Chrome MCP or Playwright MCP.
• Works best with live URLs: Localhost reviews are discouraged due to potential environment differences.
• Does not replace designers: Use as a supplement to, not a substitute for, professional design input.
• Screenshots and reports are for visual reference: Always cross-check findings with actual design guidelines and accessibility standards.

By systematically applying the Design Review skill, teams can significantly enhance the visual professionalism of their web applications, ensuring that the product not only functions well but also looks and feels refined.