Build Guide: Dashboard

Step-by-step: how we built the Churn Prediction Dashboard using a single prompt. Follow along to understand the pattern, then build your own.

Understand the data

Before writing any prompt, know what data is available.

Every dashboard starts with a question: what data do we have, and what do we want to see? For churn prediction, we need subscriber data and marketing automation data.

Open the API stubs in your browser to see the raw data:

urls/api/subscriptions?resource=subscribers   → 40 subscribers with churn_risk, skipped_charges, payment_method
/api/subscriptions?resource=metrics      → MRR, total_subscribers, churn_risk_high, skip_rate
/api/subscriptions?resource=events       → payment_failed, charge_skipped, subscription_cancelled
/api/marketing?resource=flows            → Klaviyo flows including winback and dunning

Tip: Click any API URL to see what the response looks like. Understanding the field names (churn_risk, skipped_charges, payment_method) is key to writing a good prompt.

Decide on the layout

Sketch the sections before writing the prompt.

A good dashboard has 3-4 sections that tell a story. For churn prediction:

Section 1

Stats bar

5 KPIs at the top. Active Subscribers, MRR, High Risk count, Skip Rate, Payment Failures. Quick health check.

Section 2

Churn risk table

All subscribers sorted by risk level. Shows who to focus on. Color-coded badges make it scannable.

Section 3

Risk factor breakdown

Cards counting each risk signal: 3+ skips, payment method, paused, payment failures. Shows the "why" behind churn.

Section 4

Events timeline

Recent events (cancelled, skipped, failed). Gives context on what is happening right now.

Pattern: Numbers at the top (stats bar), details in the middle (table), context at the bottom (timeline). This is the most common dashboard pattern.

Write the prompt

One structured prompt is all you need.

The prompt has four parts: design rules, data sources, layout description, and styling details. Be specific about colors, badge mappings, and column names.

promptBuild a single-page HTML dashboard called "Churn Prediction Dashboard" for the the lab. DESIGN: - Light background (#f6f6f7), Bricolage Grotesque font - Topbar: dark (#1a1c1e) with coral accent (#e8594f) - Cards with white background, 1px #dfe3e8 border, 12px radius - Source badges per data field (Recharge = coral, Klaviyo = green, BigQuery = blue) DATA: Fetch from these local API endpoints: - GET /api/subscriptions?resource=subscribers - GET /api/subscriptions?resource=metrics - GET /api/subscriptions?resource=events - GET /api/marketing?resource=flows LAYOUT: 1. Stats bar: Active Subscribers, MRR, High Churn Risk count, Skip Rate, Payment Failures (last 7d) 2. Churn Risk Table: all subscribers sorted by churn_risk (high first) 3. Risk Factor Breakdown: count by risk signals (3+ skips, payment method, paused, payment failures) 4. Recent Events Timeline: last 10 events with type badges BADGES: active=green, paused=yellow, cancelled=red, high=red, medium=yellow, low=green Include workshop-topbar div and load /nav.js and /workshop.css at the end. No frameworks, vanilla HTML/JS only.

Key things to include in the prompt:

Exact hex colors so the output matches the design system
API endpoints with field names so the AI knows what to fetch
Column names for tables so the layout is precise
Badge color mappings so statuses are visually correct
Boilerplate instructions (topbar, nav.js) so it fits the workshop site

What the AI generates

Understanding the output.

The AI produces a single HTML file with three parts:

1. Inline CSS at the top, defining the full design system:

css/* Stats bar grid */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
/* Badge colors */
.bg { color: #008060; background: #e3f1df }  /* green */
.by { color: #b98900; background: #fff5d6 }  /* yellow */
.br { color: #d72c0d; background: #fce8e5 }  /* red */

2. HTML structure with placeholder containers:

html<div class="stats" id="stats"></div>
<div id="churn-table"></div>
<div class="risk-grid" id="risk-factors"></div>
<div class="timeline" id="timeline"></div>

3. JavaScript that fetches data and renders everything:

javascriptasync function init() {
  var [metrics, subscribers, events, flows] = await Promise.all([
    fetch('/api/subscriptions?resource=metrics').then(r => r.json()),
    fetch('/api/subscriptions?resource=subscribers').then(r => r.json()),
    fetch('/api/subscriptions?resource=events').then(r => r.json()),
    fetch('/api/marketing?resource=flows').then(r => r.json()),
  ]);

  // Sort subscribers by churn risk
  var sorted = subscribers.sort((a, b) =>
    riskOrder[a.churn_risk] - riskOrder[b.churn_risk]
  );

  // Render stats, table, risk cards, timeline...
}
init();

Save the file

Drop it into the project and it works.

The output is a standalone HTML file. Save it in the project:

emberloom-lab/ ├── gui/ │ └── dashboards/ │ ├── subscription-health.html │ ├── order-erp.html │ ├── customer-360.html │ └── churn-prediction.html ← new ├── api/ │ ├── subscriptions.js │ └── marketing.js └── nav.js

No build step, no compilation, no dependencies. The file fetches data from the API stubs and renders everything client-side. Refresh the browser and it works.

Why vanilla HTML? For prototyping dashboards and command centers, you do not need React or Next.js. A single HTML file with fetch() calls is faster to create, easier to understand, and simpler to iterate on. The AI can generate the entire file in one go.

Iterate and refine

The first version is a starting point.

After the first generation, refine with follow-up prompts:

follow-upAdd source badges showing which system each data field comes from. Recharge = coral badge, Klaviyo = green, BigQuery = blue.

follow-upAdd a section showing Klaviyo winback and dunning flows related to churn. Fetch from /api/marketing?resource=flows and filter for flows triggered by subscription_cancelled or charge_skipped.

follow-upChange the events section from a table to a timeline layout with the event type badge on the left and detail text on the right.

Each follow-up prompt adds or changes one thing. Small, specific changes are easier for the AI to get right.

See the result

The finished dashboard.

The Churn Prediction Dashboard we built in this guide is live on this workshop site:

Open Churn Prediction Dashboard →

It shows:

5 KPI cards with source badges (Recharge, BigQuery)
Full subscriber table sorted by churn risk
Risk factor breakdown with counts
Klaviyo winback and dunning flows with performance metrics
Recent events timeline

Total time from prompt to working dashboard: under 2 minutes.

Now build your own

Pick a use case from the list below, or come up with your own. Use the Build Prompts page for ready-made prompts and the template.

Customer 360 view Order-to-ERP flow Marketing campaign performance CX ticket triage Data pipeline health Payment reconciliation