Skip to content

Design review

You will produce a comprehensive design review of the artifact provided in $ARGUMENTS. The artifact may be a screenshot, Figma link, live URL, or HTML/code snippet.

Steps

  1. Identify the artifact, the user goal it serves, the platform (web / mobile / responsive), and the audience.

  2. Spawn three reviews in parallel as subagents:

  3. agents/design-critic.md — hierarchy, craft, decisions, top recommendation.
  4. agents/a11y-reviewer.md — WCAG 2.½.2 AA pass, keyboard, focus, contrast, semantics.
  5. Apply skills/ux-audit/PLAYBOOK.md directly — UX best-practice issue catalog.

For non-Claude-Code agents that can't spawn subagents, run the three sections sequentially in the same prompt.

  1. Combine the three outputs into one report:
# Design review: <artifact>

> Goal: <one sentence>
> Platform: <platform>
> Reviewer: design-review skill (critic + a11y + ux)

## Top recommendation
<single sentence — the design-critic's top recommendation>

## Critical (a11y + UX combined, n)
<all 🔴 issues from a11y-reviewer + ux-audit>

## High (n)
...

## Medium (n)
...

## Low (n)
...

## Hierarchy walk
<from design-critic>

## Craft notes
<from design-critic>

## Things that work well
<combined praise from all three>

  1. Deduplicate: if a11y and ux both flag the same issue (e.g., "no focus indicator on button"), merge into one entry citing both severity rationales.

  2. Sort within each severity: a11y issues first (legal/baseline), then UX, then craft. Surface the issues most blocking to the user goal at the top of each severity.

Done when

  • One report file produced.
  • All three lenses are reflected.
  • Top recommendation is a single sentence at the top.
  • No duplicate issues.
  • Praise section keeps the report constructive.