guide
The anatomy of a design prompt
Answer in brief
A design prompt for UI has seven parts: surface, type, colour, spacing, radius, states and motion. Each one is a decision a designer makes on every interface. Any part the prompt leaves out is filled by the model's default, and the defaults are what make generated UI look alike.
1. Surface
What the interface is made of and how its layers are told apart. Give the page colour, the panel colour and the way a panel is separated from the page: a border, a shadow or a step in tone. Pick one method. A design that uses borders in one place and shadows in another looks unplanned.
2. Type
One typeface, named, and a short scale: three to five sizes with their weights. Add line height for running text and tabular figures wherever numbers sit in columns. Type does more for the character of an interface than any other part, and it costs two lines of prompt.
3. Colour
Give each colour a job and a hex value: page, panel, text, secondary text, hairline, one accent. Add status colours only if the interface shows status. Say where the accent may appear. An accent used on one element per view reads as intent. The same accent on every icon and link reads as a theme.
4. Spacing
A base step and the values built from it: a 4px step giving 8, 12, 16, 24 and 32, for example. Then the few places it matters most: padding inside a panel, the gap between panels, the height of a row. Spacing that comes from one step is the quiet reason a screen looks ordered.
5. Radius
One radius for containers and one for the controls inside them, with the inner one smaller. A 16px panel holding 10px buttons looks deliberate. The same radius on everything looks soft, and random radii look broken. For pills and round buttons, say so by name.
6. States
Every interactive element at rest, on hover, pressed, focused and disabled. Every data element when loading, empty and failed. This is the part that separates a picture of an interface from an interface, and a tool builds each state well once it is listed. Button and control prompts shows the level of detail.
7. Motion
What moves, on which trigger, for how long, with which curve, and a line saying nothing else moves. Add the reduced-motion version. Motion design prompts covers how to write a beat.
Two practical parts sit around these seven: the stack at the top, so the tool does not reach for a component library, and a check at the end, so it runs the result and looks at it.
The seven parts as a skeleton
Build [one screen / one component / one widget set] for [product]: [what it shows or does, in one line].
[Stack] Vite + React + TypeScript. Plain CSS with custom properties. No UI library, no icon pack: inline SVG icons, 1.5px stroke.
[1 Surface] Page [#hex]. Panels [#hex], separated from the page by [a 1px border #hex / a shadow / a tone step]. Use that one method everywhere.
[2 Type] [Typeface]. Sizes: 32/600 title, 20/600 heading, 15/400 body, 12/500 label. Line height 1.5 on body. Tabular figures on numbers.
[3 Colour] Text [#hex], secondary [#hex], hairline [#hex], accent [#hex]. The accent appears on [the primary action and the active item] only.
[4 Spacing] 4px step. Panel padding 20px, gap between panels 16px, row height 44px, page margin 24px.
[5 Radius] Panels 16px, controls 10px, pills fully round.
[6 States] Controls: rest, hover, pressed (down 1px), focus-visible (2px accent ring, 2px offset), disabled (40% opacity). Data: loading skeleton, empty message "[copy]", error with Retry.
[7 Motion] Only this moves: [element] on [trigger], [0.2]s, cubic-bezier(0.2, 0.8, 0.2, 1). With prefers-reduced-motion, changes are instant.
[Content] [The real labels, values and rows.]
[Phones] Below 720px: one column, 16px margin, targets at least 44px.
[Check] Run it. Look at 390px and 1440px. Fix overflow, uneven padding and any text under 4.5:1 contrast.Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.
Questions and answers
Do I need all seven parts for a single button?
Yes, in a line each. A button still has a surface, a label size, colours, padding, a radius, states and a transition. The prompt is short because the thing is small, not because parts are missing.
What if I do not know which values to choose?
That is the design work, and it is the hard part. Either take values from an interface you admire and adjust them, or start from a prompt written from a finished design, which is what the templates in our library provide.
Keep reading
- How to describe a visual style to an AI toolThe vocabulary a model acts on when building UI (materials, light, density, edges) and the adjectives it ignores, with a style block to copy.
- One look across many screensHow to keep several AI-built screens in one design system: write the tokens once, give them to every prompt, and take the look from a family of pieces, not one.
- Design prompts for code tools vs image generatorsA design prompt means two different things: a brief for a tool that writes a working interface, or a description for a tool that makes a picture. What each is for.
Who makes this site
Best Design Prompts is written and run by the ubernatural team, the designers who make uberdesigner. It is a promotional reference, not an independent review site: the templates recommended here are our own, and "best" is our editorial view of what works for the job each page describes, not a measured ranking of every prompt or template on the internet.
Cite this page: Best Design Prompts, “The anatomy of a design prompt”. Reviewed 11 November 2026. https://bestdesignprompts.com/guides/anatomy-of-a-design-prompt/