# AI Prompts for UI Design: Patterns for Screens, Forms and Dashboards

Source: https://chat2.design/guides/ai-prompts-for-ui-design/
Updated: November 6, 2026
Category: AI Design

> A good UI prompt names the screen, the user, the content, the structure and the style limits, in that order. Add exact values where they matter, such as a hex color or a pixel width, and ask for one change per revision. The examples here are written by us to show patterns, not outputs from any tool.

## What should a UI prompt contain?

Most weak prompts describe a category ("a landing page for a SaaS") and leave the tool to guess everything else. A stronger prompt reads like a short design brief. Use these five parts, in this order:

1. **Screen:** what it is and what it is for.
2. **User:** who sees it and what they want to do.
3. **Content:** real headlines, labels and numbers where you have them.
4. **Structure:** what appears from top to bottom, and what must be left out.
5. **Style limits:** colors, type feel, density, mode (light or dark), and any hard values.

Every example below is a pattern we wrote for this guide. None of them is an output from a tool, and results will differ between tools and between runs.

## How do I prompt for a hero section?

A hero section carries one message and one action. Say which, and what visual support it gets.

**Hero section** (suits: Text-to-UI generators)

```text
Hero section for a budgeting app for freelancers. Headline: "Know what you can
spend this month". Subheadline in one line. One primary button "Start free" and
one text link "See how it works". Right side: abstract card UI showing a simple
balance chart, not a photo of people. Style: futuristic but calm, dark navy
background #0B1220, accent #7DD3FC, large sans-serif headline.
```

The words "not a photo of people" are a useful kind of constraint. Saying what to avoid steers results better than adding more adjectives.

## How do I prompt for a form?

Forms succeed or fail on fields, labels and error handling. List them.

**Sign-up form** (suits: Text-to-UI generators and prompt-to-prototype tools)

```text
Sign-up form for a project management app. Fields: name, work email, password
with a show/hide toggle. One primary button "Create account". Below it, a small
link "Already have an account? Log in". Single column, centered, max width 400px,
labels above inputs, 16px body text. Show the error state for an invalid email.
Minimalist, white background, one accent color #1A4FA0.
```

Asking for specific states (error, focus, disabled) gets you closer to a usable component than asking for the default state alone.

## How do I prompt for a dashboard?

Dashboards need a hierarchy, or everything shouts equally. Say what matters most.

**Analytics dashboard** (suits: Text-to-UI generators and prompt-to-prototype tools)

```text
Analytics dashboard for an online store owner checking performance each morning.
Top row: four stat cards (revenue, orders, conversion rate, average order value),
each with a small change indicator. Below: a line chart of revenue over 30 days,
taking two thirds of the width, and a ranked list of top five products on the
right. Left sidebar navigation, 240px wide. Calm, high-contrast, light mode,
neutral grays with one accent #0F7A52. Use realistic placeholder numbers.
```

"Realistic placeholder numbers" matters. Otherwise tools may fill cards with round numbers that hide layout problems such as long values wrapping.

## How do I prompt for a mobile layout?

Name the device size and the interaction constraints, because defaults are often desktop-shaped.

**Mobile checkout screen** (suits: Text-to-UI generators and prompt-to-prototype tools)

```text
Mobile checkout screen for a coffee ordering app, 390px wide. Order summary at the
top with three line items, a tip selector with three options, a payment method row,
and a sticky bottom button "Place order". Tap targets at least 44px high.
Thumb-friendly spacing, 16px side margins, light mode, warm neutral palette
with accent #B45309.
```

Notes on the specifics:

- A **390px width** is a common phone design width, not a rule. Use the size you design for.
- A **44px minimum tap target** matches WCAG 2.2 success criterion 2.5.5 (Target Size, Enhanced), a Level AAA recommendation. Confirm against the platform guidelines you target.

## How should I use hex colors and dimensions?

Treat hard values as constraints, not decoration.

| Value | When to state it | Example |
| --- | --- | --- |
| Hex color | Brand colors and accents that must match | accent #1A4FA0 |
| Width | Forms, cards and content columns | max width 400px |
| Spacing | When density is part of the style | 16px gutters |
| Type size | Body text and minimum sizes | 16px body text |
| Mode | Always, if it matters | light mode |

State two or three of these, not twenty. A prompt that pins every value leaves nothing for the tool to solve, and the result often looks stiff.

## How do I iterate on a prompt?

Change one thing per revision. If you alter the layout, the colors and the copy at once, you cannot tell which change caused which difference. A useful loop is:

1. Generate two or three variants from the same prompt.
2. Choose the strongest structure, not the prettiest surface.
3. Ask for one change, for example "make the primary button larger and move the secondary link below it".
4. Repeat until the structure is right, then adjust style last.

When you are happy, move the work into your design tool and rebuild it with your own components. Our guide on [text-to-UI design](/guides/text-to-ui-design-with-ai/) covers exports, and the one on [design systems](/guides/ai-design-tools-vs-design-systems/) explains how to keep results consistent.

## What mistakes should I avoid?

- **Stacking adjectives.** "Modern, clean, sleek, futuristic" means little. One concrete constraint beats four vague words.
- **Skipping real content.** Lorem ipsum hides layout problems. Use real or realistic text.
- **Forgetting accessibility.** A prompt cannot guarantee contrast or focus order. Check the output against the WCAG guidelines.
- **Prompting for a whole product.** Ask for one screen or one section at a time.

The history of one early prompt-driven tool is on our [page about the original Chat2Design tool](/legacy/chat2design/), and the [AI Design hub](/category/ai-design/) lists everything we have published on the topic.

## Sources

- [W3C: Understanding Success Criterion 2.5.5, Target Size (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) (checked 28 October 2026)
- [W3C: Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/)
- [Figma Help: Create a Figma Make file](https://help.figma.com/hc/en-us/articles/31304485164695-Create-a-Figma-Make-file) for how one vendor describes prompting and attaching designs

The example prompts are our own illustrations of a pattern, so they have no external source.

## Frequently asked questions

### What makes a good AI prompt for UI design?

A good prompt states the screen's purpose, audience, content, structure and style limits. It uses exact values such as hex colors and widths where they matter and leaves everything else open.

### Should I put hex codes and pixel sizes in a prompt?

Yes, when you need them. Brand colors, a maximum width or a minimum tap target are worth stating. Overspecifying every value tends to produce stiff layouts, so keep the rest loose.

### Why do my prompts give generic results?

Usually because the prompt describes a category (a landing page) rather than a situation. Add the audience, the real content and one or two constraints, and say what to avoid.

### Do these prompts work in every tool?

The structure does, because it mirrors how people brief a designer. Syntax, supported controls and results differ by tool, so adapt the wording and test it in the tool you use.