Edited by us
UI design prompt — why screen mockups drift apart
You gave the colors and the font, and the mockups still disagree. Here is what a brand anchor cannot pin down.
By Mephify (operator)3 min read
What makes this hard
You provided brand colors and fonts, asked for three screens, and got three that disagree. Color, font, and corner radius held. What moved was spacing and type-size steps, re-decided on every screen. When screens of one brand drift, this blank is usually why.
The other easy omission is the screen's remaining states. Ask for one happy-path screen and loading, empty, and error vanish from the design. Those three are what users meet most often in a real product.
What to add to the request
1. Fix the token table on the first screen
Settle the spacing unit and type scale as values on the first screen, in a table, and have later screens cite only the table's names. If you don't know the values, take a widely used default (an 8-pt spacing grid, etc.). But values only you know, such as real brand hex codes or the logo file, are never 'recommended'. That is not recommendation, it is invention.
2. Make the three states required items
- Loading — what holds its place, what waits
- Empty — with no data, what is shown and what is the user invited to do
- Error — what went wrong and what the user does next
3. Make accessibility a requirement
Require keyboard-only operability and screen-reader labels as items. For public or education-facing services, name the applicable standard, WCAG or ADA where it applies, and have applicability confirmed rather than letting AI assert what the standard says.
What the finished instruction contains
- Screen list — which screens are being made
- Components per screen
- Behavior per state — loading, empty, and error for every screen
- Design tokens — color, type, spacing. Fixed as a table on the first screen; later screens cite the names only
Screen structure, states, and tokens are built by the target AI, while assets, imagery, and cutscenes come from a generation engine. This instruction carries both. The render part follows the same rules as every media prompt: values only, no tool names or flags.
Where recommending stops and asking begins
Spacing units and type scales have widely used conventions, so instead of asking, the instruction recommends a value with a one-line reason, written fresh for this screen's size and use. Values only you know, such as real brand hex codes or the logo file, are never recommended and stay as [FILL IN] slots — recommending those would be inventing facts.
If a design language (template) was chosen, surfaces, shadows, contrast, corners, and texture follow it consistently, and where it conflicts with the brand's color, font, or radius, the brand wins. The brand is your fact; the language is a directing choice. If none was chosen, nothing is invented: one language that fits the product is recommended with its reason, such as a dark, low-glare palette for a dashboard people stare at late at night.
Checklist for writing it yourself
- 1Did you separate what the brand has fixed (color, font, radius) from what it hasn't
- 2Did you require the spacing and type token table
- 3Did you require loading, empty, and error per screen
- 4Did you require keyboard operation and screen-reader labels
- 5Did you choose a design language, or take a justified recommendation with the brand winning any conflict
Reading helps; trying is faster.