Kanban project board
A warm light kanban board where two cards are dragged between columns by a cursor while the sprint progress rises.
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 friendly project board with three columns. A visible cursor picks up a task, drops it into In progress, then moves another into Done with a green tick, and the sprint percentage climbs from 40 to 73. 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
The AI builds the board with absolute positioned cards.
Create a single-file HTML kanban board, desktop 1280x720, warm paper theme (background #f7f3ec, columns #efe8da, white cards, accent vermilion #e0561b). System fonts, no libraries. Top: title "Launch week board", muted subtitle "12 tasks - 4 teammates" and on the right a sprint progress label with a number that counts from 40% to 73% (CSS @property counter) above a rounded progress bar that fills to match. Three columns: To do (3 cards), In progress (2), Done (2). Each card: white, 14px radius, soft shadow, bold task title, one or two small pill labels (Design, Backend, QA, Growth in tinted colours) and a coloured avatar dot bottom right. Use absolute positioning with explicit coordinates so cards can move cleanly. Motion (8 second loop): add a mouse cursor SVG. The cursor moves to the top To do card, the card lifts (scale 1.04, rotate -2.5deg, big shadow), travels into In progress and settles in the first slot. Then the cursor picks up the Set up analytics events card, carries it into Done where a green check badge pops in. Everything fades out at the end and restarts. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Watch the first drag
The webhook card should lift and land in In progress.
-
3
Watch the second drag
The analytics card should land in Done with a green tick.
Done when You can see it working in the browser.
-
4
Make it real
Replace the animation with real drag and drop if you need to use it live.
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.