AI product UI prompts

Write the states as a sequence

List what the user sees at each moment. The composer is empty with a hint. Text is entered and the send button becomes active. The message moves into the thread. A working indicator appears. Words arrive a few at a time. Actions appear under the finished answer. Give each state its look and how long the scripted version holds it.

Add the unhappy path: the request fails, or is stopped half way. Say what stays on screen and what the retry control is.

Show the work when an agent does more than answer

An agent that searches, reads files or books something should show its steps. Describe a step row: an icon, a short label in the present tense, a spinner while it runs and a check when it ends. Say whether finished steps collapse into one line.

If a step needs permission, design the approval: what is being asked, the two buttons, and what the thread shows after each answer. This is the moment users care about most, so it deserves real copy.

Give the product a character without a gimmick

Many AI interfaces share one look: a dark page, a violet glow and a sparkle icon. Choose a material and a single signal for thinking instead. It could be a line that draws itself, a small shape that breathes, or ink that spreads. Describe it in sizes, colours and seconds, and keep it to one place on the screen.

What an AI product UI prompt should contain

• The surface: composer only, a full thread, a canvas or a side panel.
• The states, in order, from idle to done, with timings for the scripted demo.
• The thinking signal: one element, described in numbers.
• Streaming: how text arrives and how the view scrolls with it.
• Steps and approval, if the product acts on the user's behalf.
• Failure and stop: what remains, and how to retry.

A prompt to start from

Build the chat surface for [product], an AI assistant that [what it does]. Use scripted mock responses with fixed timing. Do not call any model or API.

Stack: Vite + React + TypeScript, plain CSS with custom properties. No UI library.

Look: page #f6f4ef, text #191817, secondary #77736b, hairlines #e2ded5, one accent [#hex]. [Typeface]: messages 16px with 1.55 line height, labels 13px. The thread is a 720px column, centred.

Composer, fixed 24px from the bottom: a white panel, radius 22px, 1px border #e2ded5, shadow 0 8px 24px -12px rgba(0,0,0,0.18). A text area that grows from 1 to 6 lines, placeholder "[hint]". Left: an attach button. Right: a 36px round send button, #d9d5cc when empty, accent when there is text. Enter sends, Shift+Enter adds a line.

States, in order:
1. Idle: an empty thread with three suggestion chips above the composer: [three real prompts].
2. Sent: the user's message appears right-aligned in a #ebe7de bubble, radius 18px.
3. Working, 1.6s: a 14px accent dot that breathes between 0.6 and 1 scale every 1.2s, with the label "[Reading your files]". Then two step rows, each a label with a spinner that turns into a check: [step 1], [step 2].
4. Streaming: the answer appears with no bubble, about 3 words every 60ms. The thread stays scrolled to the newest line unless the user scrolls up. The send button becomes a stop button.
5. Done: under the answer, three quiet icon buttons: copy, retry, rate.
6. Failed: a one-line notice in #b3402f, "[error copy]", with a Retry button. Trigger it with the second suggestion chip.

Stop keeps the partial answer and adds "Stopped" in secondary text.

Phones: the column is full width with 16px margins and the composer sits above the keyboard. With prefers-reduced-motion, the dot is still and text appears a sentence at a time.

Run it. Send each chip, stop one answer half way, and check 390px and 1440px.

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.

Keep reading

• The anatomy of a design promptThe seven parts of a UI design prompt, from surface to motion, with an annotated skeleton you can fill in.
• 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.

• Dashboards
• Widgets
• Phone screens
• Buttons and controls
• Menus and navigation
• Glass UI
• Motion