How to Prompt AI for Better UI Design

Overview

Give the same model a lazy prompt and a sharp one and you get two completely different designers. The models are good enough now that the bottleneck is rarely the tool; it's how you brief it. Here's the approach I keep coming back to after a year of prompting these tools daily for real work.

None of this is about magic words. It's about giving the model the same things you'd give a good freelancer: references, constraints, and specific feedback.

Give it references, not adjectives

"Make it modern and clean" means nothing to a model, the same way it means nothing to a human designer. Adjectives are where generic output comes from. Instead, point at real examples: a product whose UI you admire, a specific screen, a style you want to echo.

The strongest version of this is letting the model look at real shipped screens directly, which is what reference tooling like the Mobbin MCP is for: Mobbin MCP: 600,000+ Real Design References Inside Claude Code

Describe the job, not just the screen

Before you ask for a layout, tell the model what the screen is for and who's using it. "A dashboard" produces a generic dashboard. "The first screen a warehouse manager sees at 6am to spot which orders are late" produces something with a point of view: the right thing is big, the noise is gone.

Design decisions fall out of purpose. Give the model the purpose and it makes better decisions on its own.

Constrain the visual system up front

Ambiguity is where AI slop lives. Hand the model your system before it starts: one accent color and its job, a type scale, a spacing unit, whether it's light or dark. Constraints don't limit quality, they're the reason the output looks intentional instead of like a template.

The prompting approach that gets genuinely beautiful output, in detail: Claude Fable 5 for UI Design: How to Get Beautiful Output Every Time

Iterate in small, specific passes

The instinct is to write one giant prompt and hope. Better to get a rough version, then fix one thing at a time: "tighten the spacing in the header," "the primary button should be the only red element," "reduce the heading to 32px." Small, specific edits are the whole game, and they're how a real design review works too.

Big vague rewrites make the model change everything, including the parts that were right. Small edits preserve what's working.

Name the anti-patterns

Models have default habits, and for UI most of them are the tells of generic output: decorative gradients, oversized headings, low-contrast gray text, using color for emphasis instead of size. Call them out explicitly. A short "avoid" list in your prompt (or your AGENTS.md) does more for quality than any positive instruction.

For the full map of which tools to prompt for which job, start here: AI Design Tools for Designers (2026): The Complete Guide

FAQ