Back to blog
Matt Clannachan 8 min read

Five Signs Your Mockup Tool Misread the Brief

Signs that a product brief has been misread

The most dangerous kind of generation failure is not the one that looks obviously wrong. It is the one that looks plausible. A screen where a constraint from the brief has been silently ignored, a component variant that is visually close but structurally incorrect, or a layout that satisfies the rough description while violating a specific detail the brief included explicitly.

These failures do not surface during the generation step. They surface in dev review, in QA, or after a developer has built out a component based on the generated screen. By then, the cost of catching them is higher than if they had been caught during generation. Knowing what to look for, and where generation tools typically make silent mistakes, is how you keep the check at the cheapest point.

Sign one: the wrong component variant is used

Briefs often name component variants explicitly: "a destructive action button", "a ghost button for the secondary action", "a filled card, not an outlined one". Generation tools can fail to honor these variant specifications while producing output that looks generally correct at a glance.

The tell is subtle. A destructive button that is generated in the primary brand color rather than the warning/danger color token looks like a normal call-to-action button. It passes visual inspection unless you know the brief called for a destructive variant. A ghost button that gets filled because the generator defaulted to a more visually prominent style looks fine in isolation. In context, it breaks the visual hierarchy the brief was trying to establish.

How to catch it: after generation, compare every named component variant in the brief against the component classification in the output file. If the output is token-aligned, the token names will confirm whether the correct variant was used. If the output is a flat image, this comparison requires manual inspection against the design system's variant definitions.

Sign two: layout constraints are interpreted as suggestions

A brief that says "three columns, equal width, no sidebar" should produce exactly that. Generation tools sometimes produce a layout that approximates the described structure while making adjustments that the tool's internal layout preferences favor: adding a sidebar because the content fits naturally, using two wider columns instead of three equal ones, introducing a layout hierarchy the brief did not request.

The failure mode here is that the output feels reasonable. A two-wide-one-narrow column layout is a common and usable design pattern. It is just not what the brief asked for. If the brief was written by a PM who has already committed that layout to a stakeholder, the re-generation cost is not just a regenerate click. It includes the conversation about why the output diverged from the spec.

Structural constraints in a brief should be treated as binding, not as hints toward a reasonable interpretation. "Three columns, equal width" is a constraint, not a preference.

Sign three: token names from the brief appear in the output but map to wrong values

This failure is specific to token-aware generation tools, and it is the hardest to catch without inspecting the generated file directly. A tool might correctly use the token name --color-interactive-default on a button but resolve it against a default or example token set rather than the actual token file you provided. The result: the button looks like it uses the right token name, and technically it does, but the value it renders is not the value from your system.

The way this surfaces in practice is usually during a brand update. A team connects their design system, generates screens, and the screens look correct because their primary color and the default example color are similar. They proceed to implementation. Six months later, a rebrand updates the primary color token. The generated screens from before the rebrand are inspected, and it becomes clear that the token name was correct but the resolution chain was not attached to the live token file.

This is a resolution fidelity problem, not a naming problem. The only reliable check is inspecting the applied value against the expected value from the source token file, not just confirming that the right token name appears in the output.

Sign four: missing states

A brief that describes a form might say "an email input with a validation error state". A generation tool might produce the default state of that input and omit the error state entirely, because the default state is the visually prominent one and the error state requires knowing the design system's error styling to produce correctly.

Missing states are invisible if you only look at the generated screen in its default condition. Checking for them requires cross-referencing the brief's described states against what was actually produced. A brief that mentions three states, and an output that shows one, has missed two states. Those missing states will have to be designed separately, eliminating much of the efficiency gain from generation in the first place.

State coverage in a brief should be explicit. "An email input" invites a single-state generation. "An email input: default, focus, error, disabled" gives the generator a complete list to match against. The generator may still miss one, but the check is then mechanical: count states in the brief, count states in the output.

Sign five: the token context is consistent within the screen but inconsistent with the system

A generated screen can be internally consistent, where every use of a given color is the same hex value, while still being misaligned with the design system. A tool that does not have access to your token file can produce a screen where all the primary buttons are violet and all the secondary borders are grey. That is internal consistency. It is not the same as using the correct violet and the correct grey from your specific design system.

The check is not visual; it is structural. Does the hex value on that button match the value of --color-interactive-default in your token file? If the generation tool produced #7C3AED and your design system defines --color-interactive-default as #6D28D9, the screen looks close but is not aligned. A developer implementing from that screen will either hardcode the generated hex (misalignment) or recognize the discrepancy and look up the correct token value (extra step the generation was supposed to eliminate).

We are not saying every generation tool should be held to perfect token precision before it is useful. At early stages of a design, approximate token alignment can be good enough to communicate direction. The constraint is treating approximately-aligned output as precisely-aligned at the point of handoff. That is where the cost enters the workflow, not where it should.

A practical review checklist

After generating a screen, running through these checks takes less time than discovering the issues during dev review:

First, confirm each explicitly named component variant in the brief appears in the output as that variant, not as a visually similar but structurally different one. Second, verify structural constraints (column counts, layout type, presence or absence of sidebars) against the brief literally. Third, if the output is token-referenced, verify that at least the primary interactive token resolves to the correct value from your design system. Fourth, count states: check that every state described in the brief appears in the output. Fifth, for any token used in the output, spot-check the value against the source token file rather than trusting the token name alone.

None of these checks require tooling. They require a brief that is specific enough to check against, and ten minutes of structured comparison before the output leaves the generation step.

More from the blog

Turn your next brief into screens today.

Token-aligned screen generation, starting free. No card needed.

Start free