AI app UI templates

Name the moment the template shows

Each app template covers one moment, not an app. Say what it is in a few words: a sign-up form that reacts, a delivery being tracked, a voice assistant answering, a task being ticked off, an inbox being sorted. Then find the same moment in your product. The closer the match, the less the tool has to invent.

For AI product interfaces, look at how the template shows the machine at work. Listening, thinking, calling a tool, asking for approval and answering are separate states, and a good template gives each one its own look. Those states carry over to almost any AI product.

Decide between the film and the screen

Used as a film, a template needs your name, your copy and your sample content, and the loop stays. Used as the start of a real screen, the loop has to go: the same states must follow real taps and real responses, including slow ones and failed ones. Know which you want before you write the brief, because the work is different.

Check the character and the frame

Some app templates rest on a character or an object: a mascot that watches the form, a courier, an orb. Ask whether your product can carry one, and what yours would be. Check the frame as well. A screen drawn inside a phone model on a web page is a presentation. Inside a real app the frame goes and the device's own safe areas apply.

What to check in an AI app UI template

• The moment it shows, and the matching moment in your product.
• The states in the flow, in order, with how long each lasts.
• Film or screen: a loop to present, or the start of something interactive.
• Machine states, for AI products: listening, thinking, working, answering, failing.
• The character or object, and what yours would be.
• The frame: a phone drawn on a page, or a layout for a real device.

A prompt to start from

Adapt the app screen template above for [app name], a [what it does] app. Keep its visual language: type, colours, surfaces, radii, the phone frame and the timing of every transition.

Use: [A: a self-playing film for my launch page / B: an interactive prototype]. Follow only the matching block below.

A, film: keep the loop and its total length to within 0.5s. Replace every word and value with mine: [screen title], [labels], [sample content: names, amounts, messages]. Keep each string within 3 characters of the original's length so nothing wraps. The loop must restart with no visible jump.

B, prototype: remove the loop. Each state now follows input: [tap X leads to state 2; a typed value leads to state 3; a response arrives leading to state 4]. Fake responses with a 0.8s delay from one file, ./src/mock.ts. Add the states a loop leaves out: slow (after 3s show "[still working]"), failed ("[message]" with Retry), empty.

For AI moments, keep the template's separate looks for listening, thinking, working and answering, and add one for "[couldn't do that]".

Character or object: the template has [its mascot or orb]. Use [mine: described as ... / keep the same form in my accent #hex]. It reacts to the same events.

Stack: the template's own. From the prompt alone, Vite + React + TypeScript and plain CSS.

Frame: on screens 700px and wider, show the screen inside the phone frame at 390 x 844 on a ground of [#hex]. Below 700px, drop the frame, fill the viewport and respect safe-area insets.

With prefers-reduced-motion, cross-fade between states in 0.2s and stop any idle animation.

Run it. For A, watch three full loops. For B, reach every state by hand, including failed. Check 390px and 1440px.

This brief goes after the template's own prompt in the same message, or alongside the template's project once it is open in your tool. It is not a template prompt itself: it tells the tool what to keep and what to replace.

Keep reading

• Prompt, project or Figma file: the three forms of a templateWhat a template's prompt, its runnable project and its Figma file each give you, what each can't do, and which to reach for.
• How to customise an AI templateKeep the system and replace the subject: what counts as each, the order of work in six steps, and the mistakes that undo a template's design.

• Websites
• Landing pages
• Portfolios
• Dashboards
• Components
• Free templates