From a text description to a UI mockup
Lesson 10 of 12
10From a text description to a UI mockup
The big pictureThe assistant draws a first version in seconds, saving you from the blank page. But the result is only as good as the description, and the first version is rarely right for accessibility or for Arabic.
What the picture shows: From idea to mockup: a structured brief cuts the rounds, and checking turns the draft into something you can rely on.
Map of this part
The concepts in order, click any one to jump to it:
Two ways into the same idea
It is like describing a room to a designer: "a bedroom for a six-year-old with a small desk and a bookshelf, calm colours". The more specific you are, the closer the sketch. Then you look and say "make the desk bigger" until it is what you want.
An effective brief names: the user and their main task, the components in order with real content (not lorem ipsum), the states (empty, loading, error), the technical constraints (HTML/CSS only, no libraries, dir="rtl", logical properties, colour variables), and accessibility needs (AA contrast, labels, visible focus). Then iterate with small, specific changes rather than re-asking from scratch, and check with tools: Lighthouse, mobile emulation, and Tab navigation.
Before You Start
🧱HTML and CSS
The front-end track.
The Core Idea
1The structured brief
A template that covers what the model needs to hit the mark first time:
Screen: order tracking for a café app (Arabic, right-to-left). User: a customer who just paid and is waiting, usually on a phone. Main task: see at a glance where the order is and how long is left. Content, top to bottom: 1. Order number and time placed. 2. A 4-step progress bar: received, preparing, ready, collected. 3. The items (name, size, quantity). 4. A "call the café" button. States: preparing (default), ready (green highlight), cancelled (message + refund note). Constraints: one HTML file, inline CSS, no libraries, <html dir="rtl" lang="ar">, CSS logical properties only, colours as CSS variables, works at 360px wide. Accessibility: AA contrast, the progress bar readable by screen readers (aria-current on the active step), visible focus on the button.
2Iterating with small changes
After the first draft, do not rewrite the request. Give specific, checkable changes: "the progress bar starts on the left; flip it to start on the right using flex instead of left", "the call button has 3.1:1 contrast; make it at least 4.5:1".
margin-left and text-align: left on an Arabic page. It looks fine in one screenshot and breaks when the language switches. Ask for logical properties explicitly.3Check before you adopt
A quick checklist for every mockup: semantic structure (header, main, button), every image has alt, contrast ≥ 4.5:1, Tab reaches every element in a sensible order, it works at 360px wide with no sideways scroll, and dark mode if asked. Here is a progress bar that works for Arabic and screen readers:
<ol class="steps" aria-label="حالة الطلب">
<li class="done">استُلم</li>
<li class="current" aria-current="step">قيد التحضير</li>
<li>جاهز</li>
<li>تم الاستلام</li>
</ol>
<style>
.steps { display: flex; gap: .5rem; padding: 0; list-style: none; }
.steps li { flex: 1; padding-block: .5rem; border-block-start: 4px solid var(--line); }
.steps .done, .steps .current { border-color: var(--brand); }
.steps .current { font-weight: 700; }
</style>Worked example
Problem: the first mockup looks good, but Lighthouse gave 68 for accessibility: an icon-only button with no name, grey text at 2.8:1 contrast, and headings jumping from h1 to h4. Fixed in three changes: aria-label="Call the café" on the button, text colour #5b5b66, and corrected heading order. The score hits 100 without changing the look.
Myth vs Reality
| Myth | Reality |
|---|---|
| The assistant's mockup is production-ready. | It is a draft for discussion and testing. Production needs components, states and tests. |
| The longer the brief, the worse the output. | A long, structured brief beats a short, vague one. The problem is padding, not length. |
Test your understanding
Which detail cuts the editing rounds most?
The model hits the mark more when it knows the content, states and constraints.
The mockup uses margin-left on an Arabic page. What is the change?
The logical property follows the page direction automatically.
How do you make the current step in a progress bar clear to screen readers?
Colour is not read out; aria-current announces the state.
Quick review cards
Check Your Understanding
Why ask for states (empty, error)?
Because the assistant draws only the happy state unless asked, and users see the others often.
What is the quickest responsiveness check?
Emulating a 360px device in developer tools and checking there is no sideways scroll.
Who decides the mockup is acceptable?
You, after the checklist, not the assistant.