Design prompts for dashboards

A great dashboard answers one question in about five seconds: how are we doing right now? It leads with the metric that matters, gives every number a comparison so you can tell good from bad at a glance, and keeps the raw rows one click away. The prompts below are the most-copied dashboard designs in the Superdesign library, from dark SaaS analytics to fintech and admin panels. 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 dashboard that looks designed, not generated

An AI design agent has a strong default for every part of a dashboard, and most of those defaults are wrong: a flat grid of equal cards, bare numbers, rainbow charts, the Inter typeface. 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 [dark or light] [type] dashboard for [who reads it] to [the one decision it supports].
Hero metric: [the number that matters], large and top-left, with its trend and a [vs last week or vs target] comparison.
Supporting KPIs: [2 to 3 more], each with a comparison and up or down color.
Charts: a line chart of [metric, time range, rough values]; a bar chart comparing [categories]. No pie, no 3D.
Table: [the records] with status badges and columns [...].
Layout: [sidebar or top] nav, KPI row up top, a two-thirds trend chart beside a one-third breakdown, table below.
Style: a neutral base with one [accent] color used only to flag status. Typeface [name], not the default.
States: include the empty, loading and error views.

Hierarchy

Default: It gives every metric the same weight, so you get a flat grid of equal cards with nothing to look at first.

Constrain it: Name one hero metric and say it leads: large, top-left, with everything else smaller.

Context on every number

Default: It prints bare numbers with no comparison, so you cannot tell whether any of them is good or bad.

Constrain it: Require a comparison on each KPI: versus last week or versus target, with up or down color.

Chart choice

Default: It reaches for decorative charts, often a pie or a 3D effect, and picks the type almost at random.

Constrain it: Name the chart per data: a line for trends, a bar for comparisons, a big number for one KPI. No pie, no 3D.

Color and type

Default: Left alone it defaults to Inter, a dark theme with a purple accent, and a rainbow palette used as decoration.

Constrain it: Name a typeface and one accent color on a neutral base, and reserve color for status: green up, red down.

Layout and density

Default: It centers a generic grid of cards with no real structure, navigation, or sense of who it is for.

Constrain it: Spell out the grid: sidebar nav, a KPI row up top, a two-thirds chart beside a one-third breakdown, a table below, dense for a power user.

The states

Default: It builds only the happy path and silently skips the empty, loading, and error views a real product needs.

Constrain it: Ask for them by name: the empty state before any data, a loading skeleton, and an error state.

Frequently asked questions

What makes a good dashboard UI?

It answers one question in about five seconds. Lead with the metric that matters, give every number a comparison so it reads as good or bad, group related metrics, and use one accent color for status. Restraint and a clear hierarchy do more than another widget ever will.

How many KPIs should a dashboard show?

Usually five to nine per view: the few that actually drive a decision. If the viewer cannot get the gist at a glance, there is too much on the screen. Push the rest into drill-downs instead of crowding the top level.

Why does my AI-generated dashboard look generic?

Because a vague prompt gets the model defaults: the Inter typeface, a dark theme with a purple accent, and a grid of equal cards with no hierarchy. Name the hero metric, the real data, one semantic accent color, a specific layout, and a non-default typeface, and it stops reaching for the average.

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

Describe the brief, not the vibe: who reads it, the one decision it supports, the hero metric, the real data and chart type for each panel, the layout grid, one accent color, and the empty, loading and error states. The template above walks through each part, and you can open any example here to see a full prompt that works.

Can I use my own data and brand colors?

Yes. Generate the layout first, then describe your metrics, columns and brand colors in plain language and branch a variant. Every design comes back as real, editable code, so wiring in your actual data happens in your own repo, not a rebuild from a picture. Stuck on something? Ping us and we will sort it out together.