Getting useful UI from ChatGPT isn't about asking nicely — it's about giving the model a precise mental model of the layout before it writes a single line of code. Dashboards are one of the most requested UI types, and also one of the most likely to come out wrong without a good prompt. Here's how to do it right.
Why Generic Prompts Produce Generic Dashboards
Ask ChatGPT to "build a SaaS dashboard" and you'll get a plausible-looking page that isn't actually useful. It'll have a sidebar, a header, some cards — but the structure will be arbitrary. The nav items won't match your product. The metrics will be invented. The component hierarchy will be flat.
The problem is that ChatGPT has no context about your product's information architecture. It defaults to pattern-matching against the average dashboard it has seen — which produces average output.
The fix is to describe the layout explicitly, section by section, before asking for code.
The Anatomy of a Good Dashboard Prompt
A high-quality dashboard prompt has four parts:
1. Layout structure — describe the top-level grid: sidebar width, header behavior, main content area. Be explicit about whether the sidebar is collapsible, whether the header is sticky, and how many columns the main area uses.
2. Navigation items — list every top-level nav link by name. Don't leave this to the model's imagination. If your product has "Overview", "Reports", "Users", and "Billing", say so.
3. Content sections — describe each section in the main area: what kind of component it is (metric card, chart, table, feed), what data it shows, and roughly how wide it is.
4. Component states — mention loading states, empty states, or interactive elements like date pickers or filter dropdowns if they matter to your implementation.
Here's a minimal example:
Create a SaaS analytics dashboard using React and Tailwind CSS.
Layout: Fixed 240px sidebar on the left, sticky 64px header, scrollable main content area.
Sidebar nav items: Overview, Reports, Users, Billing, Settings. Active item is "Overview".
Header: Logo on the left, search bar in the center, notification bell and user avatar on the right.
Main content:
- Row of 4 KPI cards: MRR ($42,500), Active Users (1,240), Churn Rate (2.1%), NPS (64)
- Full-width line chart: "Revenue over time", last 12 months
- Two-column row: a bar chart ("New signups by channel") and a recent-activity feed
Use shadcn/ui components where appropriate.
That prompt will produce something you can actually use.
Using Mockdowns to Pre-Structure the Layout
A mockdown is a text-based layout sketch that you include before your code request. It uses bracket notation to describe each component and its position. Think of it as a wireframe written in plain text.
Before asking for code, paste in a mockdown like this:
[Header: Logo | Search | Notifications | Avatar]
[Sidebar: Nav links — Overview, Reports, Users, Billing, Settings]
[Main Content]
[KPI Cards: MRR | Active Users | Churn Rate | NPS]
[Chart: Revenue over time (line, 12 months)]
[Two Columns]
[Chart: New signups by channel (bar)]
[Feed: Recent activity log]
Then follow it with: "Generate the React + Tailwind code for this layout."
The mockdown anchors ChatGPT to a specific layout contract. It reduces hallucinated components, improves hierarchy, and makes it much easier to iterate — you just edit the mockdown and re-prompt.
You can find a ready-to-use version of this layout in our SaaS Analytics Dashboard entry, including a full prompt and mockdown you can copy directly.
Iterating from the First Draft
Even with a great prompt, the first output won't be perfect. The most effective iteration strategy is to point to specific sections rather than asking for a full rewrite:
- "Update the KPI card section to use a 2x2 grid on mobile"
- "Make the sidebar collapsible with a toggle button"
- "Replace the line chart with a shadcn AreaChart"
Specific, scoped requests produce specific, scoped changes. Asking to "improve the dashboard" produces unpredictable rewrites.
Applying the Same Pattern to Settings Pages
The same prompt structure works for settings panels. Describe the sidebar tabs, the form sections in each tab, and any save/cancel behavior you need. Our Account Settings Panel entry has a full worked example.
The key insight is the same: AI tools don't need creativity help. They need structural clarity. Give them a layout contract and they'll fill it in. That's what mockdowns are for.