From Vibe Coding in Design
Prompting Interfaces into Shape
What makes a good interface prompt?
Foundation / 6 min
After this reading, you can write an interface prompt that works as a design brief and improve the result one decision at a time.
Ask an AI for “a modern, clean dashboard” and you will get one quickly. It will also look much like every other dashboard the tool has made. Words like modern, clean and minimal describe a mood, not a design, and when a prompt says little, the model fills the gaps with whatever is most common in what it learned from.
Anthropic, which makes the Claude models, calls this distributional convergence: left unguided, models choose the safest, most frequent patterns—in its own example, the Inter typeface and purple gradients on a white background. The remedy is not a cleverer adjective. It is a better brief.
A prompt is a design brief
Anthropic’s prompting guidance offers a useful test: show your prompt to a colleague who knows nothing about the task. If they would be confused, the model will be too. A colleague asked to design a screen would want to know the same things a model needs.
| Part | What to say | Example |
|---|---|---|
| Purpose | Who uses it, and what they must be able to do | A Class 12 student logging thirty minutes of daily sketching practice |
| Content | The real text, data and states, or clearly marked placeholders | Today’s prompt, a timer, the last seven days, a note field |
| Structure | What matters most, and the order of the screen | Today’s practice first; history below; settings out of the way |
| Behaviour | What happens on each action, and in empty, loading and error states | On the first day, show how to begin rather than an empty chart |
| Constraints | Device, accessibility and any system to follow | Phone first; text contrast of at least 4.5:1; use only these type sizes |
| Direction | References, and what to take from each | The calm of a paper notebook; one accent colour; no gradients |
| Reasons | Why each choice matters | Students use it late at night, so it should be quiet and dark-friendly |
The last row is easy to leave out and the most useful. Anthropic’s guidance notes that explaining the reason behind an instruction gives the model more to go on about your goal, and a more targeted result. “No gradients” is a rule; “it should feel like a paper notebook” is a reason the model can reason from.
Vague and specified prompts
| Vague prompt | Specified prompt | |
|---|---|---|
| What it says | Make a beautiful, modern sketching practice app | A phone screen for a Class 12 student logging daily sketching practice: today’s prompt and a 30-minute timer at the top, the last seven days as small marks below, and a first-day state that explains how to begin |
| What it leaves to the model | Audience, content, structure, behaviour and look | Details within a clear frame |
| Typical result | A generic landing page with a gradient hero and three feature cards | A screen that can be judged against what you asked for |
Direct with references, not adjectives
References work better than adjectives when you say what to take from them. “Like a railway timetable” could mean the type, the grid, the density or the colour; “the dense, aligned columns of a railway timetable” means one of them. Examples are among the most reliable ways to steer a model, Anthropic notes, and the same is true of visual references: two or three, each with its reason, are clearer than ten.
It also helps to name what to avoid, especially the defaults you can predict. But avoiding one default can lead straight to the next—Anthropic’s own frontend guidance warns that models steered away from Inter tend to settle on another popular face instead. A positive direction, with its reason, is stronger than a list of bans.
Iterate one decision at a time
The first result is a draft. Review it against the brief, not against your first impression, and change one thing at a time so you can see what each change did. A request like “make it better” hands the judgment back to the model; “the history is louder than today’s prompt—reduce it to small grey marks” keeps it with you.
- Write the brief: purpose, content, structure, behaviour, constraints, direction and reasons.
- Ask for two or three distinct directions, not one, so you have something to choose between.
- Choose one for reasons you can state, and note what you are keeping from the others.
- Name the most important problem specifically, and ask for that one change.
- Check the empty, error and longest-content states, not only the ideal one.
- Keep a short log of what you asked and why, so the next session starts where this one ended.
A worked example
Here is the specified prompt from the table above, written out in full as a brief.
Design one phone screen for a sketching practice app. Purpose: a Class 12 student preparing for a design entrance exam logs thirty minutes of sketching every day. They open it late at night, often tired. Content: today’s prompt (“Draw your school bag from three angles”), a 30-minute timer with start and pause, the last seven days, and a short note on what went well. Structure: today’s prompt and the timer first; the last seven days below; settings behind an icon in the corner. Behaviour: on the first day there is no history, so explain how to begin instead of showing an empty chart. When the timer ends, ask for the note. Constraints: phone first; text contrast of at least 4.5:1; three type sizes only. Direction: the calm of a paper sketchbook, one accent colour, no gradients. It is used late at night, so it should be quiet and work in a dark theme.
Here is an illustrative first result, of the kind such a brief typically gets. It follows most of the brief, and because the brief is specific, it can be judged against it rather than against taste. Read it part by part:
- Purpose and content: all four pieces are there, and today’s prompt is the first thing on the screen.
- Structure: the last seven days are drawn as a bar chart with a heading and a weekly total. It is the largest thing on the screen, so the past outweighs today.
- Behaviour: the first-day state explains how to begin, and the note appears only when the timer ends, as asked.
- Direction: one accent colour and no gradients, but the accent fills the timer button and every bar, so the screen is louder than a sketchbook.
That is two problems, and one matters more: the history competes with today’s practice, which is the purpose of the screen. The revision names that one problem, says what to change and why, and leaves everything else alone.
The seven-day history is louder than today’s prompt. Reduce it to seven small grey marks in one row, filled for the days practised, with no heading or total. Keep everything else as it is. The screen is for today’s practice; the history is only a reminder that the habit is building.The accent colour waits for the next round. Changing both at once would make it hard to see which change did what. Note the change and its reason in your log, so the history stays quiet when a later session adds to the screen.
Prompting does not replace design; it is a way of writing design down precisely enough for something else to build it. The clearer your intent, the less of the result is decided by the defaults.
Takeaway