Dashboard UI prompts

Choose the figure the screen is about

Every good dashboard has a centre: a balance, a live count, a map, a model of the thing being measured. Name it and give it the most room, in pixels or in grid columns. Then say what the supporting panels are and that they stay smaller. A model treats all panels as equal unless the prompt ranks them.

If the centre is an object and not a number, such as a floor plan or a body scan, say how it is drawn and what a hover or a click on part of it does to the panels around it.

Fix the grid and the number style

Give the column count, the gutter and the panel padding. Twelve columns with a 16px gutter and 20px of padding inside each panel is enough to stop panels drifting to odd widths.

Then set how numbers look, because a dashboard is mostly numbers. Ask for tabular figures so digits line up in columns, one size for the main value, one for secondary values, and a rule for units: smaller, lighter and after the number. Say how a change is shown, for example a signed percentage in a tinted pill, and which colours mean up and down.

Supply data and the states around it

Paste a small real data set or describe its shape: twelve months of revenue, eight rows of transactions with these fields. Invented data hides layout problems, since a model picks values that fit its own design.

A data screen also has states a mock-up skips: loading, empty, an error on one panel, a very long name, a number with seven digits. Ask for each by name. They are where a generated dashboard usually breaks when real data arrives.

What a dashboard UI prompt should contain

• The main figure and how much of the screen it takes.
• The grid: columns, gutter, panel padding, panel radius.
• The panels, each with what it shows and its size in columns.
• Number style: tabular figures, sizes, units and how change is shown.
• Data: a real sample, or its exact shape and ranges.
• States: loading, empty, error, long values, and the phone layout.

A prompt to start from

Build one dashboard screen for [product], which tracks [what] for [who]. This is a single screen with mock data, not an app: no routing, no login.

Stack: Vite + React + TypeScript, plain CSS with custom properties. Draw charts as inline SVG. No UI or chart library.

Surface: page #0e1013, panels #16191e with a 1px border #23272e, radius 14px, no shadows. Text #eceef1, secondary #8b93a1. One accent [#hex]. Up is #3ecf8e, down is #f0616d, used only on change values.

Type: [typeface] for everything, with tabular figures on every number. Main value 56px/600. Panel values 28px. Labels 12px uppercase, tracking 0.06em. Body 14px.

Grid: 12 columns, 16px gutter, 24px page margin, 20px padding in each panel.
- Row 1: the main figure, 8 columns, 320px tall: "[label]" with its value, a signed change against last period in a tinted pill, and an area chart of 30 daily points below it. Beside it, 4 columns: [three secondary values] stacked, each with a 60px sparkline.
- Row 2: a table, 7 columns: [fields], 8 rows, right-aligned numbers, 44px rows, hairline dividers. A breakdown, 5 columns: [five categories] as horizontal bars with values.

Data: put it in ./data.ts using [describe the real shape and ranges]. Include one long name and one seven-digit value.

States: a skeleton for each panel on first load (0.8s), an empty table message, and an error state for the breakdown panel with a Retry button. Hovering the chart shows a vertical guide and the value for that day.

Motion: values count up over 0.6s once on load. Nothing else moves. With prefers-reduced-motion, show final values at once.

Phones: below 720px everything is one column, the main figure first, and the table scrolls sideways inside its panel.

Run it and check 390px, 1024px and 1440px wide. Fix any overflow or misaligned digits.

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.
• One look across many screensHow to keep several AI-built screens in one design system: write the tokens once, give them to every prompt, and take the look from a family of pieces, not one.

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