proof·of·prompt

← all exhibits

EXH-02sample entry — swap with a real artifact

Tidewatch

A terminal-styled analytics dashboard that renders 90 days of traffic as tide charts — static HTML, data baked at build time.

  • dataviz
  • astro
  • cli-aesthetic
A terminal window with amber and blue tide-like bar charts
Model
Claude (Fable 5)
Iterations
2
Time to ship
5h
Shipped
May 2, 2026

open demo ↗

The prompt · verbatim

Build a single-page analytics dashboard that looks like a beautifully typeset terminal session. Data source: a JSON file of daily pageviews (90 days), read at build time. No client-side fetching, no chart library — bars are styled divs, sparklines are inline SVG generated in the template.

DESIGN CONSTRAINTS: monospace throughout. A single accent color for rising trends; falling trends stay muted — color should carry meaning, not decoration. Column alignment must be perfect: this is typesetting, not a chart dump.

ACCESSIBILITY: every chart needs a text equivalent — a <caption> or visually-hidden summary with the actual numbers. A screen reader user should learn more from this page, not less.

QUALITY BAR: zero JavaScript shipped to the client. Lighthouse 100 across the board. If the JSON is missing at build time, fail the build loudly with a helpful message — never render an empty dashboard.

Why it works

  • “No chart library” forces craft. Styled divs and template-generated SVG keep the page at zero client JS — and the constraint is visible in the result, which is the point of the exhibit.
  • Color is given a semantic job (“rising gets the accent, falling stays muted”), which is what separates a designed dashboard from a default one.
  • Failure behavior is specified. “Fail the build loudly” turns a silent placeholder bug into a build error — prompts that specify the unhappy path produce production-grade output.