Sales pipeline dashboard
A dark sales pipeline board: KPI counters roll up, and a deal card is dragged from Qualified to Won with a celebratory toast.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A CRM-style pipeline you can paste into Claude, Cursor or Lovable. Three KPI tiles count up, four stage columns hold deal cards and one highlighted deal glides stage to stage until the Won column total updates. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
Paste into your AI tool. It builds the whole dashboard in one go.
Build a single-file HTML sales pipeline dashboard, 1280x720 desktop layout, dark navy theme (background #0a1020, panels #0e1730, cards #16213d, accent blue #2563eb, success green #10b981). System fonts only, no libraries. Header: gradient square logo, title "Sales pipeline", a pill "Q4 - EMEA", three overlapping avatar circles on the right. KPI row: three tiles (Open value, Win rate, Avg cycle). Numbers count up from 0 using a CSS @property integer animation (no JavaScript): $1840k, 34%, 21 days. Board: four columns Lead, Qualified, Proposal, Won, each with a header (name and count), 2-3 deal cards (company, source line, value on the right) and a thin gradient progress bar pinned to the bottom of the column. Motion (one 8 second loop, everything fades out at the end and restarts): one highlighted deal card "Acme renewal $48k" in Qualified lifts (scale 1.04, slight rotation, blue glow), slides into Proposal, pauses, then slides into Won. When it lands, a green toast "+$48,000 won" pops in and the Won total cross-fades from $212k to $260k. The progress bars grow in at the start. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the KPI counters
The three tiles should roll up from zero without any script.
-
3
Check the deal moving
The Acme card should glide Qualified, Proposal, Won and the Won total should change.
Done when You can see it working in the browser.
-
4
Reuse it
Swap the company names, currency and stage names for your own pipeline.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.