30 Claude Prompts That Build Dashboards

You are a SaaS finance analyst who builds recurring-revenue dashboards. <context> I need an MRR growth dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, pre-filled with realistic sample data so the revenue movements render instantly as a previewable artifact. </context> <inputs> - Company name: [NAME] - Plan tiers: [E.G. STARTER, PRO, ENTERPRISE WITH PRICES] - Current MRR: [AMOUNT OR "INVENT"] - Period: [E.G. LAST 12 MONTHS] - Growth story: [E.G. STEADY, SPIKY, RECOVERING] </inputs> <task> Build a dashboard with: a KPI row (MRR, ARR, net new MRR this month, MRR growth rate); an MRR bridge chart breaking each month into new, expansion, contraction, and churned MRR; an MRR-over-time area chart; a plan-mix stacked bar; and a table of the largest expansions and downgrades. Generate sample MRR-movement data in labeled JS arrays and compute ARR and growth rate. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - The MRR bridge nets to the month-end MRR; churn and contraction shown as negatives. - ARR and growth rate computed from constants; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain the MRR bridge logic so I can feed in my real new/expansion/churn numbers. </format>

You are a subscription analyst who builds churn and retention dashboards. <context> I need a churn dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so churn rates and reasons render instantly as a previewable artifact. </context> <inputs> - Product name: [NAME] - Churn metrics: [E.G. LOGO CHURN, REVENUE CHURN, NET REVENUE RETENTION] - Churn reasons to break down: [E.G. PRICE, MISSING FEATURE, NO LONGER NEEDED] - Segments: [E.G. BY PLAN OR TENURE] - Period: [E.G. LAST 12 MONTHS] </inputs> <task> Build a dashboard with: a KPI row (gross logo churn %, gross revenue churn %, net revenue retention, customers lost); a line chart of churn rate over time with NRR overlay; a bar chart of churn reasons; a segment table showing churn by plan or tenure; and a callout of the highest-churn segment. Generate sample churn data in labeled JS arrays and compute all rates. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - NRR above 100% shown as healthy green; churn rates computed from constants. - Highest-risk segment flagged; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain how NRR is computed and which segment the data says to protect first. </format>

You are a SaaS operating analyst who builds executive north-star dashboards. <context> I need a north-star metrics dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, pre-filled with realistic sample data so every headline metric renders instantly as a previewable artifact. </context> <inputs> - Company name: [NAME] - North-star metric: [E.G. WEEKLY ACTIVE TEAMS] - Supporting metrics: [E.G. MRR, ACTIVATION RATE, NRR, CAC PAYBACK] - Targets for each metric: [VALUES] - Period: [E.G. THIS YEAR] </inputs> <task> Build a dashboard with: a hero card for the north-star metric (current value, target, progress, trend sparkline); a KPI grid of supporting metrics each with value, target, and on/off-track status; a main trend chart of the north-star metric over time; a small multiples row of mini charts for the supporting metrics; and an at-a-glance status banner (on track / at risk). Generate sample data in labeled JS arrays and compute on-track status against targets. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - On/off-track status is computed from value vs target; consistent status colors. - Executive-clean layout; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain how status is derived so I can set my own targets and thresholds. </format>

You are a unit-economics analyst who builds LTV and CAC dashboards. <context> I need an LTV/CAC dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so the unit economics render instantly as a previewable artifact. </context> <inputs> - Company name: [NAME] - Average revenue per account: [AMOUNT OR "INVENT"] - Gross margin: [E.G. 80%] - Average customer lifespan: [E.G. 30 MONTHS] - Acquisition channels and CAC: [E.G. PAID, ORGANIC WITH COSTS] </inputs> <task> Build a dashboard with: a KPI row (LTV, blended CAC, LTV:CAC ratio, CAC payback months); a bar chart of LTV:CAC by channel; a CAC-payback trend line; a table of channels with CAC, payback, and ratio; and a callout flagging any channel where LTV:CAC is below 3. Generate sample channel data in labeled JS arrays and compute LTV, ratio, and payback. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - LTV, ratio, and payback are computed from constants using a clearly commented formula. - Ratios below the threshold flagged red; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain the LTV and payback formulas so I can plug in my real margins and CAC. </format>

You are a billing-operations analyst who builds subscription billing dashboards. <context> I need a subscription billing dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, pre-filled with realistic sample data so billing health renders instantly as a previewable artifact. </context> <inputs> - Company name: [NAME] - Billing intervals: [E.G. MONTHLY, ANNUAL] - Metrics to show: [E.G. ACTIVE SUBSCRIPTIONS, FAILED PAYMENTS, REFUNDS, DUNNING] - Plans: [TIERS WITH PRICES] - Period: [E.G. THIS MONTH] </inputs> <task> Build a dashboard with: a KPI row (active subscriptions, collected revenue, failed payment %, refund rate); a bar chart of revenue by plan and interval; a line chart of failed payments and recovered (dunning) over time; a table of at-risk subscriptions in dunning with retry status; and a renewals-this-week list. Generate sample billing data in labeled JS arrays and compute failure and refund rates. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Failure and recovery rates computed from constants; at-risk rows flagged. - Currency formatting consistent; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain how to wire the at-risk table to a real billing provider's webhook data. </format>

You are a marketing analytics specialist who builds campaign performance dashboards. <context> I need a marketing campaign dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so every channel and KPI renders instantly as a previewable artifact. </context> <inputs> - Brand or company name: [NAME] - Channels to track: [E.G. PAID SEARCH, PAID SOCIAL, EMAIL, SEO] - Goal metric: [E.G. SIGNUPS, PURCHASES, LEADS] - Budget for the period: [AMOUNT] - Period: [E.G. LAST 30 DAYS] </inputs> <task> Build a dashboard with: a KPI row (total spend, conversions, blended CAC, ROAS); a stacked area chart of conversions over time by channel; a bar chart of spend vs conversions per channel; a channel-performance table with CTR, conversion rate, cost per result, and ROAS; and a best/worst channel callout. Generate sample campaign data in labeled JS arrays and compute CAC and ROAS. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - ROAS, CAC, and conversion rate computed from constants, not hardcoded. - Top performer highlighted green, underperformer flagged; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain which channel the data says to scale and how to import real ad-platform exports. </format>

You are a social-media analytics designer who builds multi-platform dashboards. <context> I need a social media dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, pre-filled with realistic sample data so follower growth and engagement render instantly as a previewable artifact. </context> <inputs> - Brand or creator name: [NAME] - Platforms: [E.G. INSTAGRAM, X, LINKEDIN, TIKTOK] - Metrics to track: [E.G. FOLLOWERS, ENGAGEMENT RATE, REACH, POSTS] - Top posts to feature: [3-6 OR "INVENT REALISTIC ONES"] - Period: [E.G. LAST 30 DAYS] </inputs> <task> Build a dashboard with: a KPI row (total followers, net new followers, average engagement rate, total reach); per-platform cards with follower count and growth %; a follower-growth line chart per platform; an engagement-rate bar chart by platform; and a top-performing-posts table with platform, type, reach, and engagement. Generate sample data per platform in labeled JS arrays and compute engagement rates. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Engagement rate computed from interactions over reach; consistent platform color coding. - Responsive and accessible; growth arrows colored green/red. </constraints> <format> Return the full HTML as an artifact, then explain which platform deserves more attention and how to wire in real platform-API exports. </format>

You are an SEO analyst who builds organic-search performance dashboards. <context> I need an SEO dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so rankings and traffic render instantly as a previewable artifact. </context> <inputs> - Site name: [NAME] - Metrics to track: [E.G. ORGANIC CLICKS, IMPRESSIONS, AVG POSITION, CTR] - Keywords to monitor: [6-12 KEYWORDS OR "INVENT REALISTIC ONES"] - Top landing pages: [4-8 PATHS] - Period: [E.G. LAST 90 DAYS] </inputs> <task> Build a dashboard with: a KPI row (clicks, impressions, average position, average CTR); a line chart of clicks and impressions over time; a keyword table with current position, change, search volume, and CTR; a top-pages table by organic clicks; and a position-distribution bar chart (how many keywords rank 1-3, 4-10, 11+). Generate sample SEO data in labeled JS arrays and compute CTR and position buckets. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Position improvements shown as green (lower number is better); CTR computed from clicks over impressions. - Responsive and accessible; clear movement indicators. </constraints> <format> Return the full HTML as an artifact, then explain the position-bucket logic and how to import a Search Console export. </format>

You are an email-marketing analyst who builds campaign and list-health dashboards. <context> I need an email marketing dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, pre-filled with realistic sample data so open and click trends render instantly as a previewable artifact. </context> <inputs> - Brand or newsletter name: [NAME] - List size: [NUMBER OR "INVENT"] - Metrics to track: [E.G. OPEN RATE, CTR, UNSUBSCRIBE RATE, LIST GROWTH] - Recent campaigns: [4-8 CAMPAIGN NAMES OR "INVENT"] - Period: [E.G. LAST QUARTER] </inputs> <task> Build a dashboard with: a KPI row (subscribers, average open rate, average CTR, unsubscribe rate); a list-growth line chart (gained vs lost); a per-campaign table with sends, opens, clicks, and unsubscribes; a bar chart comparing open and click rates across campaigns; and a best-send-time heat strip. Generate sample campaign data in labeled JS arrays and compute all rates. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Open, click, and unsubscribe rates computed from the constants, not hardcoded. - Underperforming campaigns flagged; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain which campaign won and how to import a CSV export from my email tool. </format>

You are a content-marketing analyst who builds content performance dashboards. <context> I need a content performance dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so article metrics render instantly as a previewable artifact. </context> <inputs> - Brand or blog name: [NAME] - Metrics to track: [E.G. PAGEVIEWS, AVG TIME ON PAGE, CONVERSIONS, SHARES] - Articles to feature: [6-12 TITLES OR "INVENT REALISTIC ONES"] - Content types: [E.G. GUIDE, NEWS, CASE STUDY] - Period: [E.G. LAST 6 MONTHS] </inputs> <task> Build a dashboard with: a KPI row (total pageviews, average time on page, content-driven conversions, top traffic source); a pageviews-over-time line chart; a top-articles table with views, time on page, conversions, and conversion rate; a bar chart of performance by content type; and a callout of the single best converting article. Generate sample content data in labeled JS arrays and compute conversion rates. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Conversion rate computed from conversions over views; sortable article table. - Responsive and accessible; best performer highlighted. </constraints> <format> Return the full HTML as an artifact, then explain which content type to double down on and how to feed in analytics export data. </format>

You are a front-end engineer who builds interactive kanban project boards. <context> I need a kanban board as one self-contained HTML file with inline CSS and vanilla JS, pre-filled with realistic sample tasks and drag-and-drop between columns, so it works the moment I preview it as an artifact. </context> <inputs> - Project name: [NAME] - Columns in order: [E.G. BACKLOG, TODO, IN PROGRESS, REVIEW, DONE] - Task fields to show: [E.G. TITLE, ASSIGNEE, PRIORITY, DUE DATE] - Team members: [3-6 NAMES OR "INVENT"] - Number of sample tasks: [E.G. 15] </inputs> <task> Build a board with: a header showing the project name and a count of tasks per column; columns rendered side by side with task cards showing the chosen fields; native HTML5 drag-and-drop so cards move between columns and counts update; priority shown with a color tag; and a small summary bar (total tasks, done %, overdue count). Generate sample tasks in a labeled JS array and render from it. </task> <constraints> - One self-contained HTML file; pure vanilla JS, no frameworks. - Drag-and-drop updates the underlying data array and the per-column counts live. - Overdue tasks flagged; responsive (columns scroll horizontally on mobile); accessible. </constraints> <format> Return the full HTML as an artifact, then explain how the task array drives the board and how to persist moves to localStorage or an API. </format>

You are a project-management analyst who builds portfolio status dashboards. <context> I need a project status dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample projects so health and timelines render instantly as a previewable artifact. </context> <inputs> - Team or program name: [NAME] - Projects to track: [4-10 PROJECTS WITH STATUS, OWNER, % COMPLETE, DUE DATE] - Status categories: [E.G. ON TRACK, AT RISK, DELAYED] - Metrics to summarize: [E.G. ON-TIME RATE, OVERDUE COUNT] - Period: [E.G. THIS QUARTER] </inputs> <task> Build a dashboard with: a KPI row (total projects, on track, at risk, overdue); a status-distribution donut; a projects table with owner, status badge, progress bar, and due date; a simple gantt-style timeline bar per project; and a callout of projects due this week. Generate sample project data in labeled JS arrays and compute the summary counts. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Status badges color-coded; progress bars and the timeline reflect % complete and dates. - Overdue and at-risk projects clearly flagged; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain how the timeline bars are positioned so I can paste in my real project list. </format>

You are a full-stack engineer who builds clean admin-panel dashboards. <context> I need an admin panel as one self-contained HTML file with inline CSS and vanilla JS, pre-filled with realistic sample data so the management views render instantly as a previewable artifact. </context> <inputs> - App or product name: [NAME] - Entities to manage: [E.G. USERS, ORDERS, PRODUCTS] - Overview metrics: [E.G. TOTAL USERS, ACTIVE TODAY, REVENUE, PENDING ITEMS] - Table to feature: [E.G. RECENT USERS WITH NAME, EMAIL, PLAN, STATUS] - Sidebar sections: [E.G. DASHBOARD, USERS, ORDERS, SETTINGS] </inputs> <task> Build an admin panel with: a fixed sidebar nav with the listed sections (visual routing), a top bar with search and a user menu, a metrics overview row of stat cards, a small trend chart, and a feature-rich data table with search, sortable columns, status badges, and row actions (view/edit/delete that update the data array). Generate sample records in a labeled JS array and render the table from it. </task> <constraints> - One self-contained HTML file; pure vanilla JS, charting library from CDN optional. - Table search and column sort work client-side against the data array; actions mutate it. - Clean SaaS-admin aesthetic; responsive (sidebar collapses on mobile); accessible. </constraints> <format> Return the full HTML as an artifact, then explain the table's search/sort logic and where to connect each row action to a real API. </format>

You are a BI analyst who builds one-screen executive KPI scorecards. <context> I need an executive KPI scorecard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, pre-filled with realistic sample data so every KPI renders instantly as a previewable artifact on a single screen. </context> <inputs> - Company name: [NAME] - KPIs to show: [6-10 KPIS WITH CURRENT VALUE AND TARGET] - Reporting period: [E.G. THIS MONTH VS LAST] - Owners per KPI: [NAMES OR TEAMS] - RAG thresholds: [E.G. GREEN >= 95% OF TARGET, RED < 80%] </inputs> <task> Build a scorecard with: a clean grid of KPI cards, each showing the metric name, current value, target, percent-to-target, a red/amber/green status dot, an up/down trend vs prior period, and a tiny sparkline; an overall health banner summarizing how many KPIs are green/amber/red; and an owner column or label per card. Generate sample KPI data in a labeled JS array and compute RAG status from the thresholds. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - RAG status computed from value vs target against the threshold constants. - Fits one screen on desktop without scrolling where possible; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain the RAG threshold logic so I can adjust it and swap in my real KPIs. </format>

You are a customer-support operations analyst who builds helpdesk dashboards. <context> I need a support ticket dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample tickets so volume and SLA health render instantly as a previewable artifact. </context> <inputs> - Company or team name: [NAME] - Ticket metrics: [E.G. OPEN TICKETS, FIRST RESPONSE TIME, RESOLUTION TIME, CSAT] - Channels: [E.G. EMAIL, CHAT, PHONE] - Categories: [E.G. BILLING, BUG, HOW-TO] - Agents: [3-6 NAMES OR "INVENT"] </inputs> <task> Build a dashboard with: a KPI row (open tickets, average first-response time, average resolution time, CSAT); a line chart of ticket volume (created vs resolved) over time; a bar chart of tickets by category and by channel; an SLA-breach watchlist table of tickets past their response target; and an agent table with tickets handled, average resolution, and CSAT. Generate sample tickets in labeled JS arrays and compute SLA breaches and averages. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - SLA breaches computed from response time vs a target constant; breached rows flagged red. - Created-vs-resolved backlog visible; responsive and accessible. </constraints> <format> Return the full HTML as an artifact, then explain how SLA breaches are detected and how to feed in a helpdesk export. </format>