Best AI Prompts for Web Design & UI (2026)

Prompts for web design and UI#

Act as a principal UI/UX architect. Write a design system specification for [DESCRIBE YOUR PRODUCT AND AUDIENCE] as a Tailwind CSS v4 `@theme` block: colour tokens with a stated contrast ratio for every text-on-background pair, a type scale, a spacing base, breakpoints, radii and shadows. Then list the components the first release needs and the states each one must handle.

Act as an expert frontend engineer. Build a responsive React component with Tailwind CSS for a frosted-glass navigation bar and a feature grid, using only the tokens in [PASTE YOUR @THEME TOKENS]. Include hover, focus-visible, active and disabled states, a solid fallback for browsers or user settings that remove transparency, and no dependencies beyond React and Tailwind.

Act as a product designer working to a platform's guidelines. Using [NAME THE GUIDELINES YOU FOLLOW, E.G. APPLE HIG OR MATERIAL DESIGN] and my screens [DESCRIBE OR PASTE YOUR SCREEN LIST], produce a component inventory for a dark-mode dashboard: component name, variants, states, where it appears, and which existing token it uses. Flag any component that needs a new token.

Act as a UX designer for conversion pages. Design the layout of a pricing page for [DESCRIBE YOUR PLANS AND AUDIENCE] for 360px and 1280px widths: visual hierarchy, section order, where each call to action sits, and its button label. State the colour pair for text, buttons and borders and the contrast ratio each must reach under WCAG 2.2 AA.

Act as a design systems lead. Convert [PASTE YOUR BRAND COLOURS AND FONTS] into a tokenised CSS variables stylesheet with light and dark values, one accent colour used for focus rings and links, and a card component built only from those variables. Return a table of every text and component colour pair with its contrast ratio.

What to add to any web design prompt#

• Your real tokens: colours, fonts, spacing base and breakpoints. Anthropic says to commit to a cohesive colour theme using CSS variables, and OpenAI's frontend guidance asks you to specify typography, colours, spacing and layout.
• The states each component needs. OpenAI lists interaction states such as hover, empty and loading, and accessibility, as things to specify.
• The accessibility target by number, for example WCAG 2.2 AA: 4.5:1 for text, 3:1 for interface components, a visible focus indicator and 24 by 24 CSS pixel pointer targets.
• The target stack and what not to add. Tailwind v4 turns each @theme variable into both a utility class and a plain CSS variable, so asking for @theme tokens keeps the output consistent.
• A design direction beyond adjectives. Anthropic says models drift to generic output and recommends naming typography, colour, motion and background treatment. One reference screenshot or brand rule beats "modern and clean".
• The output format: one file per component, or a table, as Google advises specifying the response format.

A worked example#

Act as an expert frontend engineer. Build a responsive React component with Tailwind CSS v4 for a frosted-glass navigation bar and a three-card feature grid for "Fieldnote", a note-taking app for field researchers. Use only these tokens: --color-ink: #0f1720; --color-paper: #f6f4ef; --color-accent: #1f6f5c; --font-sans: "Source Sans 3"; --spacing: 0.25rem; breakpoints at 40rem and 64rem. The bar sits over a photograph header, uses backdrop-filter blur, and must fall back to a solid --color-paper background when backdrop-filter is unsupported or the user prefers reduced transparency. Links and buttons need hover, focus-visible, active and disabled states. Every target is at least 24 by 24 CSS pixels. Text must reach 4.5:1 against what is behind it. Return one file, then a list of the contrast ratios you assumed.

A good result for this prompt:

• Uses only the tokens you gave, with no invented hex values scattered through the markup.
• Shows a solid fallback for the glass bar, and sets text colours against the worst-case part of the photograph, not the average.
• Has a visible focus style that is not hidden by the sticky bar itself.
• Collapses to one column at 320 CSS pixels wide without horizontal scrolling.
• Lists contrast ratios you can recompute, rather than a statement that it "meets AA".

Automated tools catch only part of this, so also test with the keyboard and a screen reader.

The full prompt library is on our prompt library page.

Limits of this guide#

This page covers how to brief a model for design tokens and components and which WCAG 2.2 Level AA numbers to test. It does not establish that any model produces accessible, on-brand output, and we did not test the prompts across models. We could not read Apple's Human Interface Guidelines page for materials in this pass, so we make no claim about it; the third prompt asks you to name the guidelines you follow instead. Legal accessibility requirements vary by country and are not covered.