Complete AI Training

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.