Checklist Design

Design review grounded in Checklist Design's own checklists. Two modes: audit for a systematic item-by-item check, critique for quick honest feedback. Work out which one is wanted, then follow that mode's reference file.

What you're looking at

First, work out what you're actually assessing, and say so at the start of your response:

1. An image is in the conversation — a screenshot, a pasted mockup, a Figma export. Use it.
2. A Figma file, frame, or selection is referenced, and Figma MCP tools are available in this session — "critique this frame," "audit what I've got selected," a figma.com link. (No Figma MCP tools available? A figma.com link falls through to case 3 below like any other URL.)
   • Critique calls get_screenshot. Same rule as always: no screenshot, no critique.
   • Audit calls get_design_context (if the selection is large, or the response comes back truncated, call get_metadata first and re-fetch just what's needed) and get_variable_defs, alongside get_screenshot. Use the structured data for what it's actually good for — a hardcoded hex where a variable should be bound, a missing variant, a structural gap pixels alone can't show — not as a substitute for the screenshot.
3. A URL or local address is mentioned — a live site, or something running locally (e.g. localhost:3000). If a browser tool is available, open it and take a screenshot first. If the address isn't stated but is clearly implied, ask which one rather than guessing.
4. A file or folder of source is pointed at — a page, a component, a template. Audit can work from this. See references/audit.md, which covers what source can and can't tell you.
5. Nothing to look at at all — ask for a screenshot, a URL, or a file.

Critique always needs to see the rendered design. A page can look fine in the code and be broken on screen, or the other way round, so judging layout, spacing or type from markup isn't honest. If source is all there is, say so and ask for a screenshot rather than guessing.

Say what you ended up looking at — "Reviewing the screenshot you shared," "Reviewing the Figma frame you selected," "Reviewing a capture of localhost:3000," "Reading about.html," or "I can't see this yet — could you share a screenshot?"