Design prompts for modals

A modal earns its interruption or it annoys. The good ones show up only for a decision that truly has to be made now, name the object and the consequence in plain language, give you one clear action and an easy way out, and never grow past the screen. The prompts below are the most-copied modal and dialog designs in the Superdesign library, from destructive confirm dialogs and command palettes to image lightboxes, consent modals and form dialogs. Open any one to see the exact prompt behind it, then tweak the copy and generate your own editable version in seconds.

How to prompt a modal that looks designed, not generated

An AI design agent has a strong default for every part of a modal, and most of those defaults are wrong: a dark purple gradient, an "Are you sure?" title in Inter, three look-alike buttons, no way out, and a panel that grows past the screen. A good prompt is really a list of constraints that override those defaults. Here is each default you need to override, the words that do it, and a template that bakes them all in.

Design a modal dialog for [the one decision it forces, e.g. delete a project]. Use a modal only because this choice is high-stakes and has to be made now.
Title and body: a specific title that names the object ([the object]) and a one-line body that names the consequence ([what happens, e.g. removes 14 designs, cannot be undone]). No "Are you sure?".
Actions: one verb-named primary ([the action, e.g. Delete project]) and a quiet Cancel. Put them in the footer, primary on the right, and set keyboard focus on the primary. For a destructive action, color the primary as a warning.
Dismissal and accessibility: a visible close X, close on Escape and on a click outside, move focus into the dialog on open and back to the trigger on close, trap Tab inside, and add role="dialog" with aria-modal and aria-labelledby.
Size and scroll: cap the height around 85vh, keep the header and footer fixed, and let only the body scroll. Never scroll horizontally.
Style: a neutral surface ([light or dark]) with one accent color reserved for the primary action, a named typeface (not the default Inter), and left-aligned text. Dim the page behind with a scrim.
States: include the loading and error states for the action, not just the happy path.

When to interrupt

Default: It reaches for a modal for anything: a newsletter, a feature tour, a cookie banner, a non-urgent tip, each one blocking the page over something the user never asked about.

Constrain it: Name the high-stakes moment that justifies stopping someone, like deleting an account or confirming a payment. Everything else stays inline or in a toast.

Title and body

Default: It writes a vague "Are you sure?" with a generic "this action cannot be undone" line, so the user cannot tell what they are agreeing to.

Constrain it: Name the object in the title and the consequence in the body: "Delete the Q3 Launch project? This removes 14 designs and cannot be undone."

One clear action

Default: It drops three look-alike buttons such as Confirm, Yes and OK, all the same weight and none of them naming the action, so nothing says which one is safe.

Constrain it: Name one verb-named primary action and a quiet Cancel, put the primary on the right with keyboard focus, and color a destructive action as a warning.

Dismissal and focus

Default: It builds the happy path only: no close button or Escape, focus stays on the page behind, Tab leaks out, and there is no role for a screen reader.

Constrain it: Ask for a visible X, Escape and click-outside to close, focus that moves in and returns to the trigger, a Tab trap, and the dialog ARIA roles.

Size and scroll

Default: It lets the modal grow with its content, so a long dialog runs off the top and bottom of the screen and the action button sits out of reach.

Constrain it: Cap the height around 85vh, keep the header and footer fixed, and let only the body scroll. Never scroll horizontally.

Look and type

Default: Left alone it picks a dark purple gradient, the Inter typeface, and centered text: the look of every AI modal on the internet.

Constrain it: Name a neutral surface, one accent color reserved for the primary action, a real typeface, and left-aligned text, with the page dimmed by a scrim behind.

Frequently asked questions

What makes a good modal dialog?

It earns the interruption. A good modal shows up only for a decision that truly has to be made now, names the object and the consequence in plain language, gives one clear action plus an easy way out, and never grows past the screen. Restraint and clarity matter more than any animation.

When should you use a modal instead of a page?

Use a modal for a short, high-stakes decision the user must resolve before continuing, such as confirming a delete or a payment. Nielsen Norman Group recommends modals only in high-stakes situations, since they block everything else. If the task needs research, multiple steps, or content from the page behind it, give it a full page instead.

Why does my AI-generated modal look generic?

Because a vague prompt gets the model defaults: a dark purple gradient, an "Are you sure?" title in Inter, three look-alike buttons, and no real way out. Name the specific decision, a clear title and body, one verb-named primary action with a quiet Cancel, the close and focus behavior, and one accent color on a neutral surface, and it stops reaching for the average.

How do you make a modal accessible?

Move keyboard focus into the dialog when it opens and return it to the trigger when it closes, trap Tab inside while it is open, let Escape and a click outside close it alongside a visible close button, and add role="dialog" with aria-modal and an aria-labelledby that points at the title. The native HTML dialog element with showModal handles much of this for you.

How do you write a prompt to generate a modal UI?

Describe the brief, not the vibe: the one decision the modal forces, a title that names the object and a body that names the consequence, one primary action and a quiet Cancel, the close and focus behavior, the height cap with a scrolling body, and one accent color on a neutral surface. The template above walks through each part, and you can open any example here to see a full prompt that works.