James Chang

James Chang / Projects / Aleph / Dashboard

Aleph · Product · Last Updated

Admin Dashboard

From a question to dozens of iterations to one final prompt. This is what AI-assisted product engineering looks like.

No wireframe. No Figma file. No PRD. This dashboard started with a question — “what does an importer need to see first?” — and evolved through dozens of iterations with Claude Code: researching patterns, prototyping layouts, testing data shapes, refining the insight engine. The prompt below is the final artifact — the distilled specification that produces this dashboard from scratch. It’s the same process I use across all my projects.

Aleph admin dashboard — compliance coverage hero metric, 6 stat tiles with sparklines and AI insights, conversion funnels
aleph — admin dashboard — click to expand
Aleph admin dashboard — expanded view
aleph-dashboard-prompt.md

claude "Build an executive compliance dashboard for Aleph"

Design process

  • 12 parallel research agents analyzed architecture, performance, security, TypeScript, data integrity, UX
  • Stripe/Linear "hero + tile grid" over tabbed explorers — executives decide in 5 seconds; tabs bury the signal
  • Every metric has 3 layers: the number, the context (delta + sparkline), the AI insight
  • Okabe-Ito colorblind-safe palette
  • Rule-based insight engine (zero cost) + Claude API enrichment (weekly)

Layout

  • Hero: "Compliance Coverage" — 81% big number, progress bar, inline AI insight
  • 6 Stat Tiles (3-col grid): big number + delta + sparkline + AI insight + drill-through
  • Est. MRR: $290 · Users: 48 · Activation: 24%
  • Products: 106 · Alerts: 298 · Doc Risk: 16
  • 3 Funnels: Onboarding (-76% drop) · Compliance · Retention

Key decisions

  • "Hero + tiles" not tabs — executives decide in 5 seconds
  • Inline insights — context right where you need it
  • Rule-based + AI hybrid — 80% value at zero cost
  • Coalescing cache — 871ms cold, <10ms warm
  • tabular-nums everywhere — no layout shift
  • Gray-first, color for meaning — Okabe-Ito for colorblind safety

Stack

  • React 18 + TypeScript + Vite + shadcn/ui
  • Tailwind + Recharts (sparklines, isAnimationActive=false)
  • TanStack Query (staleTime: 5min)
  • Express + PostgreSQL + Drizzle ORM
  • InsightEngine (6 rules) + AIInsightService (Claude, weekly)