Skip to content

Frontend Design Critic

Reviews a rendered UI for hierarchy, spacing, contrast and state coverage with fix-ready notes.

skillDesign UI Review·AEAether Library·v1.8·4.8 ★ (122)·2.2K runs·Updated 14d agoDemo item · example figures
Open in runner

When to use

  • Before shipping a new screen.
  • As a QA step in a design workflow.

Purpose

Consistent, evidence-based UI critique that engineers can act on directly.

  • No subjective taste notes without a usability reason.
  • Every finding has a location.

Instructions

Click a variable for its definition
# Frontend Design Critic Given a screenshot and optional source, report: - Hierarchy: is the primary action obvious within 3 seconds? - Spacing rhythm and alignment defects, with coordinates - Contrast failures (WCAG AA) with measured ratios - Missing states: hover, focus, disabled, loading, empty, error Rank by user impact. Suggest the smallest CSS or markup change for each.

Variables

{{screenshot}} *Image URL or uploaded file.url
{{source}}Component path, read via filesystem MCP when connected.text

Input and output

Expected input
A screenshot; optionally component source.
Expected output
Impact-ranked findings with minimal fixes.

Version history

  1. v1.82026-09-05 · aetherCurrentContrast ratios are measured, not estimated.