3.2 Build your dashboard

Info
⏱ Duration: ~40 min · 🎯 Goal: build —from a single prompt— an HTML dashboard that reads kpis-elektra.csv, shows KPI cards with traffic-light indicators and a detail table, and verify it in the Browser pane. This is the session’s star exercise.
Note
3 terms you’ll see today: CSV = a plain-text table, like a simple Excel. diff = the list of changes Claude proposes, like Track Changes in Word. HTML = the format of a web page.

You’re the director; today you don’t wait on IT. You’ll build an executive Elektra Rewards dashboard with your own fictitious data. All from the Code tab, in Manual mode.

Step 1 — Give the request

In the chat pane, type (or paste) this prompt. Make sure datos/kpis-elektra.csv is in the folder you selected.

Create an HTML page that reads datos/kpis-elektra.csv and shows KPI cards
with traffic-light indicators, plus a detail table with all rows. The CSV
includes meta_ columns per KPI (meta_churn_pct, meta_redencion_pct,
meta_nps, meta_roi_campanas_pct). Apply the traffic light per KPI: green if
the value meets its meta_, amber if it's within 15% of missing it, red if it
misses it. Open it in the browser to verify.
Tip
Notice how the request asks to build an artifact (a page you open and verify), not a text answer. That’s Code’s job.

Step 2 — Review the diff, file by file

When Claude proposes changes, a diff indicator like +N −M appears (lines added/removed). In the diff pane:

  1. Open each proposed file and read it.
  2. Comment on specific lines if you want a tweak before accepting.
  3. Decide Accept or Reject for each change.

In Manual, nothing is written to your folder until you accept. You’re in control.

Step 3 — Verify in the Browser pane

Claude opens your page in the Browser pane and self-verifies: it takes screenshots, clicks, and checks the cards and table look right. Confirm yourself:

  • The KPI cards show the correct traffic light (green/amber/red) based on each value vs its target.
  • The red KPIs (high churn in Feb/Mar and dropped ROI in Feb/Mar) stand out. Redemption is rising, so it never turns red.
  • The detail table lists all rows from the CSV.

Step 4 — Iterate with context

Refine without rewriting everything. Two powerful ways to give context:

  • @file mentions: type @kpis-elektra.csv to point exactly at which file to look at.
  • Drag mockups or screenshots: drop a reference image or a screenshot of the layout you want.
Sort the cards by severity (red first) and add a header
"Elektra Rewards · Executive dashboard" with today's date.
Warning
Stay in Manual: review each iteration’s diff before accepting. Don’t accept blindly just because it “looks good.”
Warning
If something goes wrong: (1) Blank or broken page → copy the error message and paste it back into the chat asking Claude to “fix it”. (2) The Browser pane won’t open → open the file from the file pane, or double-click it in Finder/Explorer. (3) Read-only folder → pick a writable folder, such as the Desktop.

✅ Checkpoint

You have a working HTML dashboard, open in the Browser pane, with KPI cards showing correct traffic lights and a detail table. You accepted changes by reviewing the diff, and refined at least once with an @mention or an iteration.

Got it? — 2 questions

1. What does the +N −M in the diff indicate and what do you do with it? The lines added/removed for a proposed change. You review it file by file and decide Accept or Reject; in Manual nothing is saved until you accept.

2. What is the Browser pane for in this exercise? It previews the dashboard and lets Claude self-verify (screenshots/clicks); you confirm the traffic lights and table look correct.