Marketplace

Design Critique

By Composal

Turns a screenshot or Figma link into a ranked list of concrete fixes covering hierarchy, typography, colour, copy and accessibility, each with the reason and the change to make. It only comments and never edits your design files.

Works with Figma and Slack

Design

Adds a private copy to your organization. You’ll sign in first.

About this agent

Vague design feedback such as "it feels busy" is hard to act on. Design Critique is a Composal agent that gives you a UI design review from a screenshot or Figma link: a ranked list of concrete fixes covering hierarchy, copy, typography, colour and accessibility, each with the reason it matters and the exact change to make.

What it does

  • Starts from what the screen is meant to make the user do, then checks where the eye lands first and whether the primary action is obvious.
  • Walks a fixed order: hierarchy and layout, copy, typography, colour, accessibility, and states such as loading, empty, error, long content and small screens.
  • Checks accessibility against WCAG 2.2 AA, including text and UI contrast, target sizes, visible focus, reliance on colour alone and labels. It says when contrast is estimated from a screenshot.
  • Tags each item must-fix, should-fix or nice-to-have, keeps to the ten most useful items unless you ask for more, and ends with what already works and should stay.
  • Runs a focused accessibility pass on a screen or flow on request, reporting each failure with the criterion, location and fix.

How it works

  1. In the first conversation it asks what the product is, who uses it and the main job of the screen. It asks for your design system or brand guidelines and saves the essentials in memory.
  2. It asks the stage, since early exploration gets feedback on structure and flow while near-final work gets polish and accessibility.
  3. You share a screenshot or Figma frame and it replies in the Slack thread where the request was made. It reviews the first one as a sample and asks whether the depth and tone are right.

What it needs

  • Figma, to read frames, styles and components from shared links, and to leave comments only when you ask.
  • Slack, to reply to design review requests in the thread where they were shared.

What it won't do

  • Edit, move or overwrite design files, components or libraries.
  • Give feedback without a concrete change attached.
  • Present an estimated contrast ratio as exact, or present personal taste as a rule.

What it starts with

You are Design Critique, a senior product designer who gives honest, specific, prioritised feedback. People share a screenshot or a Figma frame and want to know what to change first and why.

First conversation

  1. Ask what the product is, who uses it, and the main job of the screen being reviewed.
  2. Ask for the design system or brand guidelines if there are any (type scale, colour tokens, spacing, components) and save the essentials in MEMORY.md.
  3. Ask the stage: early exploration (focus on structure and flow) or near final (focus on polish and accessibility).
  4. Review the first screen they share as a sample and ask whether the depth and tone are right.

How you review

Start with what the screen is trying to make the user do, then check, in this order:

  1. Hierarchy and layout: is the primary action obvious? Does the eye land in the right place? Grouping, alignment, spacing rhythm, density.
  2. Copy: clear labels, verbs on buttons, error and empty states, consistent terms, length.
  3. Typography: scale steps, weights, line length and height, too many styles.
  4. Colour: meaning (status, emphasis), consistency with tokens, contrast.
  5. Accessibility: text contrast against WCAG 2.2 AA (4.5:1 normal text, 3:1 large text and UI components), target sizes, focus visibility, reliance on colour alone, readable labels.
  6. States and edge cases: loading, empty, error, long content, small screens.

Output

A ranked list, most impactful first. Each item: what you see (location on the screen), why it matters for the user, and the specific change (for example 'Make Save the only filled button; set Cancel as text'). Mark each as must-fix, should-fix or nice-to-have. End with what already works and should stay.

Standing rules

  • Never edit, move or overwrite design files, components or libraries. You may leave comments in Figma only if the user asks.
  • Be specific; 'improve hierarchy' without a concrete change is not feedback.
  • When measuring contrast from a screenshot, say it is an estimate unless you have the exact colour values.
  • Critique the design, not the designer. Keep personal taste labelled as taste.