What this prompt does
This prompt gives an AI assistant enough structured context to make real design decisions — not just list chart types, but argue why each one fits the specific data relationship you are showing. The template forces a top-to-bottom information hierarchy pass before touching any grid layout, which mirrors how skilled data product designers actually work: decide what the user needs to conclude first, then position it.
The eight-section breakdown (hierarchy → grid → per-chart spec → KPIs → filters → empty states → accessibility → code) mirrors a production dashboard spec. The explicit constraints — no 3D charts, no pie charts beyond five categories, honest scales — are wired directly into the template so the output enforces visualization hygiene without you needing to police it.
The code output is scoped to one [priority_chart] component rather than the whole dashboard, which keeps the generated code actually useful. Full dashboard codegen degrades into untestable boilerplate; one well-constructed chart component you can drop in and verify is far more valuable.
When to use it
- Building an ops dashboard for an engineering team tracking deployment frequency, error rates, and p99 latency from a mix of Datadog and a Postgres replica.
- Designing a revenue analytics view for a SaaS product where the audience is non-technical executives who need MRR, churn, and expansion at a glance.
- Planning a public-facing metrics page (uptime, usage stats) and needing responsive behavior specced out before writing any CSS.
- Evaluating which charting library (Recharts vs. Chart.js vs. Apache ECharts) fits your component structure — run the same variables through the prompt with a different
[chart_library]to compare the generated implementations. - Doing a dashboard audit: fill
[metrics]with what you currently show and[audience]with your actual users to get a hierarchy critique against what you built.
Example output
dashboard_type: SaaS revenue analytics
audience: Customer Success Managers
metrics: MRR, churn rate, expansion revenue, account health score
data_sources: Stripe webhook replica (Postgres), Salesforce API
refresh_rate: daily at 06:00 UTC
chart_library: Recharts
columns: 12
kpi_count: 4
priority_chart: MRR trend with churn overlay
Information Hierarchy:
1st — 4 KPI cards across top row: MRR (with sparkline), Churn Rate,
Expansion MRR, Accounts at Risk
2nd — MRR trend + churn overlay (ComposedChart, full width, center)
3rd — Account health score distribution (BarChart, right column)
Priority chart: MRR trend with churn overlay (Recharts ComposedChart)
import {
ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid,
Tooltip, Legend, ResponsiveContainer
} from 'recharts';
// Left Y-axis: MRR in USD (Bar, fill #3B82F6)
// Right Y-axis: Churn % (Line, stroke #EF4444, strokeDasharray="4 2")
// X-axis: ISO month labels (Jan 2025 … Dec 2025)
// Tooltip: custom formatter — MRR as $123,456, churn as 2.4%
// onClick: drills to account list filtered by selected month
// Mobile: ResponsiveContainer collapses legend below chart at <640px
Pro tips
- Set
[refresh_rate]honestly. If your data is daily, specifying "real-time" makes the AI suggest WebSocket patterns and streaming state managers you do not need — and will not build. - Name a real audience in
[audience], not "users." "Finance analysts who export to Excel" changes which interactivity the AI recommends versus "C-suite executives who glance at a TV display" — the former gets sortable tables and CSV export, the latter gets large-type KPI cards and no interactive filters. - Run the accessibility section output past your design system's contrast checker. The prompt requests a color-blind-safe palette, but the specific hex values generated depend on your
[chart_library]'s default color scale — verify the AA contrast ratio before shipping. - When comparing charting libraries, change only
[chart_library]between runs and hold all other variables constant. This gives you an apples-to-apples implementation comparison for the same chart, not a mix of different chart types across different libraries. - Pair this prompt with a follow-up asking for filter state management logic separately. Filter UX is where dashboard complexity explodes — React Context vs. URL params vs. Zustand is a non-trivial decision that deserves its own prompt context rather than being a footnote in section 5.
