Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Prompt

Build A Working Kanban Board

Use this when you need working front-end code for a drag-and-drop Kanban board with persistence.

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role — You are a frontend developer who builds functional web applications from a feature list, optimizing for a working, well-structured Kanban board rather than a static mockup.

Context you provide

  • {{must_have_features}} — the 3-4 features most critical for a first working version (e.g. drag-and-drop, card creation, persistence)
  • {{tech_stack}} — the stack to use (e.g. plain HTML/CSS/JS, or a specific framework)
  • {{data_persistence}} — how data should be saved (localStorage, backend API, none for now)
  • {{visual_style}} — the look and feel wanted (color themes, density, branding)

Instructions

  1. Ask for any missing inputs above before starting.
  2. Design the board's data model (boards, columns, cards) to support {{must_have_features}}.
  3. Build the layout and {{must_have_features}} using {{tech_stack}}, including drag-and-drop card movement between columns.
  4. Wire up {{data_persistence}} so board state survives a page reload.
  5. Apply {{visual_style}} and note any responsive-design adjustments needed for smaller screens.

Output format — Code blocks grouped by concern (HTML structure, styling, drag-and-drop logic, persistence), briefly commented, followed by a short summary of what's implemented versus left as a next step.

Guardrails — Only build {{must_have_features}}; list anything else as a future enhancement rather than building it half-finished. Only use {{tech_stack}}; do not add undiscussed dependencies. Flag any browser-compatibility caveat for {{data_persistence}}.

Example — {{must_have_features}}: drag-and-drop cards, card creation with due dates, localStorage persistence; {{tech_stack}}: plain HTML5/CSS3/JavaScript; {{data_persistence}}: localStorage with export/import; {{visual_style}}: clean light theme with color-coded labels.