How to Prompt AI for Better UI — The Right Way to Start
The quality of AI-generated UI is almost entirely determined by the quality of your prompt. Here's a starter prompt that consistently produces good results.
The Problem With Vague Prompts
"Make me a contact card."
This works — sort of. AI will generate something. But it might be bare HTML, or over-engineered CSS-in-JS, or a component that doesn't fit your design system, or typography choices that violate every principle of good UI.
Vague prompts produce vague outputs. The better your prompt, the better your starting point.
A Starter Prompt That Works
Here's one that consistently produces high-quality UI:
"Make a simple contact card UI, follow principles and techniques from the book 'Refactoring UI' by Adam Wathan. Make it in React and show a preview."
Try this in Claude or ChatGPT. The results are meaningfully better than a bare request.
Why This Prompt Works
"Simple" — Tells the AI not to over-engineer. AI loves adding complexity when it has room to. Constraining it to simple produces cleaner, more usable code.
"Follow principles from Refactoring UI" — This is a reference the model knows well. Refactoring UI teaches visual hierarchy, spacing, colour use, and contrast in a practical, opinionated way. Invoking it pulls in a coherent design philosophy.
"In React" — Specifies the output format. Without this, you might get plain HTML and CSS, which is harder to work with.
"Show a preview" — In tools that support code rendering (Claude's Artifacts, ChatGPT's Canvas), this triggers a live preview alongside the code.
Layering More Context
Once you have a base component, you can layer in more constraints:
- "Use Tailwind CSS for styling"
- "Use the IBM Carbon design system components"
- "Follow our design system — here are the token values: [paste tokens]"
- "Make it look like the Vercel dashboard aesthetic — clean, minimal, monochrome"
Each additional constraint narrows the AI's decision space and produces more targeted output.
Prompting for Iterations
After the first output, iteration prompts matter:
- "Make the avatar larger and move the name to sit beside it"
- "Change the button to be a ghost button with an outline"
- "Add a secondary line of text below the name for job title"
- "Make this responsive — stack vertically on mobile"
These are precise, visual descriptions. AI handles them well because they map closely to CSS properties and layout decisions.
What to Avoid
Describing what you want in abstract goals — "Make it feel premium" gives AI too much latitude. Describe specific visual properties instead: "Use more whitespace, a lighter font weight, and a subtle shadow."
Asking for too much at once — Break complex UIs into pieces. Build a card, then add interactivity, then add variants. One thing at a time produces more reliable results.
Forgetting to specify the framework — Always say "in React" or "using Tailwind" or both. The default output format varies between models.
The Iteration Loop
Good AI-assisted UI design is a loop:
- Write a clear, constrained prompt
- Review the output — does it match your intent?
- Identify what's off and write a specific correction
- Repeat
The prompt is your primary design tool. Treat it with the same care you'd give a brief.