SaaS Dashboard Layout Architect

What this prompt does

This prompt generates a complete dashboard layout specification for B2B SaaS products, not just a vague wireframe description. It enforces opinionated design rules directly inside the template — no neon palettes, no decorative illustrations, no bubbly radii — so the AI cannot drift into consumer-app aesthetics that kill enterprise credibility. The framework variable targets actual component code for the primary dashboard view, though output quality varies by framework (see FAQ).

The "story structure" instruction at the end — what happened, why, what to do next — is the key differentiator. It forces the AI to think about information hierarchy as a user journey, not a grid of boxes. That single constraint produces dashboards where the KPI row answers "what happened," the charts answer "why," and the empty states and notifications answer "what to do next."

When to use it

• Starting a new SaaS product and need to align the team on a dashboard baseline before writing a single component
• Auditing an existing dashboard that feels cluttered or lacks a clear data hierarchy
• Building a white-label analytics panel where the layout must be credible to B2B buyers on first load
• Pitching a product to investors and need a high-fidelity layout mockup quickly
• Onboarding a junior frontend dev — the output serves as a spec document with code
• Switching frameworks (e.g., Vue to React) and want a consistent layout rewrite, not a line-by-line translation

Example output

For product_type = "subscription analytics platform", user_persona = "SaaS founders and growth leads", key_metrics = "MRR, churn rate, trial-to-paid conversion, ARR growth", nav_pattern = "left sidebar with collapsible sections", framework = "React + Tailwind CSS", columns = "12", kpi_count = "4":

Layout: 12-col CSS Grid, collapses to 1-col below 768px, sidebar becomes bottom tab bar on mobile.

KPI Row (4 cards):

• MRR: $42,800 ▲ 8.3% vs last month | sparkline: 30-day trend
• Churn Rate: 2.1% ▼ 0.4pp | sparkline: 90-day trend, red threshold line at 3%
• Trial → Paid: 18.6% ▲ 1.2pp | cohort bar sparkline
• ARR: $513.6K ▲ projected end-of-year line overlay

Data Table: Subscribers table — columns: Account, Plan, MRR, Status, Next Renewal. Sortable by MRR and renewal date. Row expansion reveals payment history. Bulk action: export to CSV, cancel selected.

Charts section:

• MRR growth: Area chart (cumulative, best for subscription revenue)
• Churn by plan: Stacked bar (reveals which tier is bleeding)
• Trial funnel: Horizontal funnel (shows drop-off stages, not just end conversion)

Empty state (new account): "No subscribers yet — import your Stripe data to unlock this view" with a single CTA button, no illustration.

Notification system: Toast appears bottom-right, z-index above sidebar. Badge indicators on the Alerts nav item increment on failed payment events. No persistent banner — only toasts and badges.

Pro tips

• Set kpi_count to 4 or fewer. Beyond four KPI cards, the AI generates a metrics dumping ground. If your product has eight core metrics, split them across two dashboard views — use this prompt twice with different user_persona values.
• Name the nav_pattern precisely. "Left sidebar" is vague. "Left sidebar with collapsible section groups and a pinned Recent Items footer" tells the AI exactly what to generate and prevents it from inventing a top-nav hybrid.
• Note that columns and kpi_count are not in the top variables block — add them manually. The template header lists five variables, but the generate section references two more. Fill them in before running: columns = 12 and kpi_count = 4 are safe defaults for most B2B SaaS products.
• Pair with a color token prompt after. This prompt deliberately omits specific hex values. Once you have the layout, run a separate prompt to generate a design token file (--primary, --surface, --muted) and wire it into the component code.
• Use framework = "Figma component spec" if you are not coding yet. The template works as a design specification generator, not just a code generator. The output becomes a Figma frame description your designer can build directly.
• The anti-patterns block is the trust signal. If you remove the "DO NOT" rules to shorten the prompt, the AI will default to whichever dashboard aesthetic it has seen most often in training data — which trends toward rounded, colorful, consumer-facing UI. Keep the constraints in.