Skip to content

Before / After / Why review

Turns a vague 'this looks off' into a ranked table of concrete edits with the reason for each.

  • Any model
Prompt
Review this interface as a senior design engineer.

Present every finding as one row in a single markdown table with the columns Before | After | Why. One issue per row. "Before" names what is there now, "After" names the exact change, "Why" gives the one-line reason a designer would give.

Rank rows by how much they hurt. Do not list principles; list edits. Do not soften findings. If something is right, do not mention it.

Cover, in order: hierarchy, spacing and container width, typography, color and contrast, interaction states, motion, copy.

When to use it

Paste it with a screenshot or the component source when a screen feels wrong and you cannot say why. It forces the model to commit to specific edits instead of listing principles.

Why the shape works

A single table with one row per issue keeps the reasoning short and comparable. Stacked "Before:" and "After:" paragraphs invite hedging.