# 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. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/sales-pipeline-dashboard/ ## 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. ## Tech stack - CSS - Dashboard - HTML ## Build steps ### 1. Paste the prompt Paste into your AI tool. It builds the whole dashboard in one go. Prompt: ```text 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. ## Assets ### prompt.md — The full prompt. ~~~~ # Sales pipeline dashboard Copy this prompt into Claude, Cursor or Lovable. ```text 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. ``` ~~~~ ### index.html.md — Complete code of the result in the video. ~~~~ # index.html The finished result as one file. Save it as index.html and open it. ```html Sales pipeline dashboard

Sales pipeline

Q4 · EMEA

Open value$k

Win rate%

Avg cycle days

Lead 6

$12kBrightwaveInbound · Webinar

$9kKestrel LabsOutbound

$21kNorden ABReferral

Qualified 4

$33kOrbit RetailDemo booked

$48kAcme renewalChampion: Priya S.

$61kHelio BankSecurity review

Proposal 3

$27kTidal FoodsPricing sent

$54kVantage IOLegal

Won $212k$260k

$72kLumen CoSigned Oct 28

$140kPine & CoSigned Nov 02

+$48,000 won · Acme renewal

``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Sales pipeline dashboard" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/sales-pipeline-dashboard/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the KPI counters → Check the deal moving → Reuse it. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Sales pipeline dashboard" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/sales-pipeline-dashboard/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the KPI counters → Check the deal moving → Reuse it. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Sales pipeline dashboard" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/sales-pipeline-dashboard/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the KPI counters → Check the deal moving → Reuse it. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.