Kanban project board
Copy this prompt into Claude, Cursor or Lovable.
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.Source, 12 lines
# Kanban project board Copy this prompt into Claude, Cursor or Lovable. ```text 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. ```