Build a Comparison Dashboard with Claude Code

Prerequisites

• Claude Code installed (claude in your terminal)
• A browser
• (Optional) Vercel CLI for deployment: npm i -g vercel

Milestone 1: Dark Theme Foundation

We're building the page skeleton — a dark theme design system and a header.

Prompt:

Create a file called comparison.html — a single-page dark-themed dashboard for comparing two vendors. Set up CSS custom properties for colors: dark navy background (#0b1120), card background (#172033), blue accent (#4d8cf5), amber accent (#f0b429), green (#34d399), red (#f87171), and text colors (primary #e8ecf4, muted #647490). Add a centered header with the title "Vendor Comparison" in a gradient text style, a subtitle "Choosing between Option A and Option B", and two small metadata chips showing dates. No JavaScript. No frameworks.

What Claude Code does: It generates a complete HTML file with a <style> block defining CSS custom properties (variables) in :root. Every color, border radius, and spacing value lives in one place. This is the same pattern professional design systems use — change --blue once, and every button, card, and link updates automatically.

Try it: Open comparison.html in your browser. Dark background, gradient title, styled chips. Resize the window — it should already look decent on mobile.

Milestone 2: Verdict Hero + Vendor Cards

A hero banner declaring the winner, plus two side-by-side cards comparing the vendors.

Prompt:

Add two sections to comparison.html. First, a "verdict hero" banner with a green-tinted border showing "Option A is 25% cheaper" as a headline, with a large "25%" stat on the right side. Second, two side-by-side vendor cards. Option A: "Acme Services", quote date Dec 2025, total $15,000, blue color stripe on top. Option B: "Beta Corp", quote date Feb 2026, total $19,500, amber color stripe. Cards should have a subtle lift on hover and stack vertically on screens under 900px.

What Claude Code does: It builds a CSS Grid layout — two columns that collapse to one on mobile via a @media query. The verdict hero uses radial-gradient for a subtle glow. The cards get a 4px color stripe at the top — a pattern used by Stripe and Linear. The hover uses transform: translateY(-2px) with box-shadow for polish.

Try it: Two cards side by side with different color accents. Hover — they lift. Squeeze your browser narrow — they stack. The verdict banner makes the winner obvious at a glance.

Milestone 3: Comparison Table

Break down the numbers with a table that makes differences impossible to miss.

Prompt:

Add a comparison table to comparison.html. Columns: Category, Option A, Option B, Difference, Notes. Rows: Design ($3,000 vs $4,200), Development ($7,500 vs $8,800), Testing ($2,000 vs $2,500), Support ($2,500 vs $2,000 — B is cheaper here), Infrastructure ($0 vs $2,000 — only in B). Add a total row with bold styling. Color the difference: green when A is cheaper, red when B is cheaper. Add small rounded tags in Notes ("A cheaper" green, "B cheaper" red, "Only in B" blue). Use tabular-nums font feature for number alignment.

What Claude Code does: The table uses semantic color coding — scan the Difference column and instantly see the pattern without reading numbers. font-variant-numeric: tabular-nums aligns digits vertically so $3,000 and $15,000 stack cleanly. The mixed results (mostly green, some red and blue) show this isn't a one-sided comparison — it's honest.

Try it: A clean table with green, red, and blue indicators. Numbers align perfectly. The total row stands out. You see the full picture without mental math.

Milestone 4: Bar Charts + Scope Cards

Tables are precise. Charts are visceral. Scope cards show what you're actually getting.

Prompt:

Add two sections to comparison.html. First: horizontal bar charts comparing each category visually. Two bars per chart (blue for A, amber for B), the larger bar at 100% width and the smaller proportional. Labels on the left, amounts inside the bars. Second: two side-by-side scope cards. Option A includes: Design, Development, Testing, Documentation (green checkmarks). Excludes: Dedicated support, Infrastructure hosting, 24/7 monitoring (red X marks). Option B includes everything PLUS support, infrastructure, and monitoring (all green). Pure CSS bars — no JavaScript or chart libraries.

What Claude Code does: The bar charts are div elements with percentage-based widths and gradient backgrounds. No chart library — CSS handles it. The scope cards use flexbox lists with colored circle icons. This is CSS-only data visualization — lightweight, fast, works everywhere, and looks just as polished as a charting library.

Try it: Charts show proportions at a glance. Scope cards reveal the tradeoff — Option B costs more but includes infrastructure and support. Context that tables alone can't communicate.

Milestone 5: Gap Analysis + Grand Total + Deploy

The final push — show what's missing, calculate the real total, and ship it.

Prompt:

Add three final sections to comparison.html. First: a "What's Missing" section with a red border listing items neither vendor covers — Hosting ($200-500/mo), SSL ($0-100/yr), Monitoring ($50-200/mo), Team training ($2,000-5,000 one-time). Group by priority: Critical vs Nice-to-have. Show cost ranges. Second: a grand total — Option A ($15,000 + ~$4,000 extras = ~$19,000) vs Option B ($19,500 + ~$2,000 extras = ~$21,500), showing ~$2,500 savings with A. Third: three scenario cards — Budget ($17,500), Balanced ($19,000), Premium ($21,000). Add a footer with a note about estimates. Then deploy this to Vercel.

What Claude Code does: The gap analysis uses the same card system but with a red accent border to signal urgency. Priority group headers use colored badges — the same visual language from the comparison table, reused consistently. The grand total ties it all together. For deployment, Claude Code runs vercel — Vercel detects a static site and deploys it to a global CDN. Your dashboard loads fast anywhere in the world.

Try it: The page tells a complete story: verdict, breakdown, gaps, total, scenarios. Open the Vercel URL on your phone — everything stacks and reads cleanly.

What You Built

A single HTML file with:

• A design system using CSS custom properties
• Responsive grid layouts that stack on mobile
• A comparison table with semantic color coding
• Pure CSS bar charts — no JavaScript
• Scope analysis with visual checkmarks
• Gap analysis with priority grouping
• Grand total with scenario modeling
• Deployed to a shareable URL

Five prompts. One file. Zero dependencies.

Take It Further

• Feed it real data — paste a PDF or screenshot into Claude Code and ask it to extract numbers and populate the dashboard automatically.
• Make it dynamic — ask Claude Code to add JavaScript that reads from a JSON file, so you can swap comparisons without editing HTML.
• Build a template — ask Claude Code to make it generic with placeholder variables, so anyone can fork it for their own comparisons.