Critiquing what AI designs

What

Getting a model to produce a screen is easy now. The hard part is what you judge it by: hierarchy, typography, interaction, accessibility. This is the record of fixing AI output against criteria set in advance.

Why

AI-made screens are usually plausible. Plausible passes a review; it does not pass use. So the conditions for passing have to be numbers and rules.

Process

The criteria, and where each was used.

• Tokens first, screens second – Reevl – 140 Figma variables and 23 components are the reference. When generated screens stepped outside them, the tokens were fixed, not the screen.
• What a machine can check – SAI – 32 Playwright tests and axe (WCAG 2.1 AA) as pass conditions. Colours that failed contrast (secondary text 4.49, white on the accent 3.88) became 5.05 and 4.77. Both had looked fine.
• Designing the hallucination away – Commit – a database lookup at runtime instead of a model call. Removing the place where it can be wrong costs less than correcting wrong answers.
• Machine-checked output – GLIO Works – typesetting is checked by rules rather than by eye.

Result

• "Plausible" is not a criterion. It has to become something checkable — contrast, focus order, a value outside the component — before it can be fixed.
• The fix usually belongs to the system, not the screen. The third time the same note came up, a token or a component changed.
• Deciding not to use AI is also a result. Some places are better off without a model at runtime.