Product analytics dashboard
Generate an information-dense dashboard that still feels calm, legible, and useful on smaller screens.
Build prompt
Copy as-is, then replace the variables
Create a responsive product analytics dashboard for [PRODUCT TYPE]. The primary user is [USER ROLE], and their most important daily decision is [DECISION]. Build the interface around that decision instead of filling the screen with unrelated metrics. Include: - A collapsible sidebar with Overview, Acquisition, Activation, Retention, and Settings. - A top bar with workspace switcher, date range, comparison period, and export action. - Four KPI summaries for [KPI 1], [KPI 2], [KPI 3], and [KPI 4], each showing current value, change, and a short interpretation. - One primary trend visualization and one supporting breakdown visualization using realistic sample data. - A sortable table for [CORE ENTITY] with search, filters, pagination, and a row detail interaction. - A small insight panel that explains the most meaningful change in plain language. Interaction and states: - Filters must visibly change the displayed sample data. - Add useful loading skeletons, an empty state, and a recoverable error state. - On mobile, prioritize KPIs and the main trend; move secondary controls into a clear drawer. - Provide keyboard-visible focus and descriptive labels for chart controls. Visual direction: [VISUAL DIRECTION]. Use color to communicate status and data, not as decoration. Avoid a wall of identical cards. Use spacing, dividers, typography, and alignment to establish hierarchy. Finish by checking that totals, percentages, trends, chart labels, and table values are internally consistent.
Expected outcome
A working analytics interface with realistic data, filters, charts, drill-down behavior, and complete UI states.
Why it works
- Anchors the dashboard to a real decision rather than a list of fashionable charts.
- Requests consistent data and working filters, which exposes shallow mockups quickly.
- Specifies mobile prioritization instead of asking the desktop grid to merely shrink.
[PRODUCT TYPE]Example: subscription-based writing assistant[USER ROLE]Example: growth product manager[DECISION]Example: which onboarding step needs improvement[KPI 1–4]Example: Activation, WAU, D30 retention, Paid conversion[CORE ENTITY]Example: acquisition channel[VISUAL DIRECTION]Example: editorial, neutral, high-density but calmMethod sources
Traceable, not copied blindly
This prompt is an original editorial adaptation. The references below informed its structure and review criteria; their text is not presented as our own.
Awesome GitHub Copilot
GitHub · 38k+ GitHub stars · MIT
Used for prompt structure, explicit inputs, output contracts, guardrails, and validation steps.
Prompt Engineering Guide
DAIR.AI · 70k+ GitHub stars · MIT
Used for task decomposition, prompt chaining, and evaluation patterns.
v0 Text Prompting Guide
Vercel · Official product documentation · Reference only
Used for the component-first, specific, incremental workflow behind these build prompts.
Keep building
Launch
High-converting SaaS landing page
Turn a product idea into a focused landing page with clear hierarchy, credible proof, and a deliberate conversion path.
Open promptPortfolio
Distinctive developer portfolio
Create a portfolio that communicates engineering judgment through case studies rather than skill-logo wallpaper.
Open promptApp
Habit tracker with useful motivation
Build a habit tracker around reflection and recovery—not streak anxiety or decorative charts.
Open prompt