Build a Kanban Board With AI: A Task Board You Can Actually Drag

TLDR: A kanban board is one of the easiest genuinely useful things to build with AI, because it is just columns of cards you drag between stages. Prompt for one self-contained HTML file with your columns (usually To Do, Doing, Done) and tasks as data, get that working, then add HTML5 drag-and-drop in a follow-up. Add WIP limits, card counts, and localStorage so it saves. When it works, publish it with VisiblePage to get a live board you open at one link, with the dragging still working because you are sharing the real page.

Most people who want to organize a project reach for a heavyweight tool, sign up, invite everyone, learn the interface, and then use about four percent of it. For a personal project, a small team, or a one-off sprint, that is a lot of overhead for what you actually need: three columns and some cards you can move.

You can build a kanban board with AI in an afternoon that does exactly that and nothing else. This guide walks through it end to end: what makes a board better than a list, the prompt that produces a working board, how to make the cards draggable, the small touches that turn a demo into a tool you will actually open every morning, and how to put it somewhere you and your team can use it.

Why build a kanban board instead of a to-do list?

A to-do list is one column. A task is either done or it is not, and everything in between, the thing you started last week and abandoned, the task blocked on someone else, the one you keep re-reading and never doing, looks identical to everything else.

A kanban board adds the missing dimension: stages. The classic three are To Do, Doing, and Done, and just by splitting your list into those columns you can suddenly see the shape of your work. What is stuck. What you are actually touching this week. How much you have finished. It is the difference between a pile and a pipeline.

Notice the 2 / 2 count on the Doing column. That is a work-in-progress limit, and it is the single idea that makes kanban more than a prettier list. You cap how many cards can sit in Doing at once. When the column is full, you are not allowed to start anything new until you finish something and move it to Done. It sounds like a small rule. In practice it is the thing that stops you from having eleven half-finished tasks and nothing shipped.

What goes on a good board?

Before you prompt, spend five minutes on the inputs. A board built from vague tasks is a vague board. For each card, decide:

1. A short, verb-first title. “Draft intro copy,” not “Content.” You should be able to tell when a card is done just by reading it.
2. A starting column. Most cards begin in To Do. Be honest about what is already in Doing.
3. An optional label. A color and a word, like Design, Writing, or Bug, so you can see the mix of work at a glance.
4. An optional owner. For a team board, whose card is this.

Write these in plain text, one line per card. That list is what you will hand the AI, and clean inputs are the whole game. It is the same principle behind briefing AI like a designer: specific in, specific out.

The prompt that builds the board

Name the artifact, hand over your tasks as data, and ask for one self-contained file. Here is a starting block. Swap in your own columns and cards.

Build a kanban board as a single self-contained HTML file. Three columns:
To Do, Doing, and Done. Each task is a card showing a title, a small colored
label, and an optional owner. Show a card count next to each column heading.

Here are the tasks (title | column | label | owner):
- Draft intro copy | To Do | Writing | Sam
- Pick hero photo | To Do | Design | Sam
- Outline FAQ | To Do | Writing | Alex
- Write body draft | Doing | Writing | Sam
- Build the SVG | Doing | Design | Alex
- Research topic | Done | Writing | Alex
- Pick the slug | Done | Writing | Sam

Style: clean and modern, one accent color, generous spacing, rounded cards
with a subtle shadow, big readable column headings. Make it responsive so
the columns stack on mobile. Inline all CSS and JavaScript. No external
files, no libraries, no CDN links.

You will get a real board back. If the model returns a fragment or splits it across files, reply with the fix from getting self-contained HTML from AI: ask for the complete HTML with everything inlined into one file.

Get this static version looking right before you add anything. It is far easier to fix spacing and colors on a board that does not move yet, and once the layout is solid the interactive parts drop in cleanly.

How do you make the cards draggable?

A board you cannot move cards on is a screenshot. The whole point is dragging a card from To Do to Doing to Done. Add it with a focused follow-up:

Now make the cards draggable between columns using the native HTML5
drag-and-drop API. I should be able to pick up a card and drop it into any
column, and the card counts should update when I do. Also support keyboard:
let me focus a card and move it left or right between columns with the arrow
keys. Keep everything in the single HTML file using plain JavaScript with
addEventListener. No drag-and-drop libraries.

Splitting the build into “make it look right” and then “make it work” is the reliable path. Asking for a styled, draggable, persistent board all in one prompt is where results get messy. Two clear steps beat one big one almost every time, which is the core idea in iterating on AI-generated pages.

What makes it feel like a real tool?

The base board works. A few small additions are the difference between a demo and something you keep open in a pinned tab. Add them one at a time so you can see what each does:

• WIP limits. “Cap the Doing column at 3 cards. When it is full, show the count in red and prevent dropping more cards there.” This is the rule that makes the board change your behavior.
• A quick-add box. “Add a small input at the bottom of each column. Typing a task and pressing Enter adds a new card to that column.”
• Persistence. “Save the board to localStorage so my cards and their positions are still there when I reload the page.” Without this, a refresh wipes your work.
• Delete and edit. “Let me click a card to edit its title, and add a small delete button that appears on hover.”
• A little life. A gentle transition when a card moves, a subtle color shift on the column you are dragging over. Restrained motion reads as quality. The animation guide has the light touch to aim for.

Add, test, add the next thing. If a change breaks something, you know exactly which one to describe and fix.

Personal board vs team board

How you use the finished board depends on who is on it, and that changes one important thing: where the data lives.

For the vast majority of what people want, a personal board with localStorage, published to one link, is exactly right. You get a board for your own work, or a snapshot plan your team reads and one person updates. Real-time multi-editor sync is a genuine app-development project, not an afternoon, so start with the version that gives you ninety percent of the value for two prompts. When you do want to grow it into a multi-file app, that is where a ZIP-based project comes in.

Where should your board live?

You have a working board sitting in the AI chat or as a file on your laptop. Neither is a place you will actually use it. A chat window scrolls away, and a file on your desktop is not a board, it is a document you have to remember to open. To use a kanban board every day, it needs to live at an address.

This is where you publish it. Take the self-contained HTML the AI produced, or a ZIP if it grew into multiple files, and publish it with VisiblePage. You paste the HTML or drop the ZIP and get a live URL immediately, with no build step and nothing to configure. Every drag, drop, and quick-add still works, because you are sharing the real page and not a picture of it, and it loads fast from the edge wherever you open it.

That live link is what makes the board real. Bookmark it and it is your board every morning. Send it to two collaborators and it is a shared plan everyone reads at the same URL. Because it is a page and not a file, you choose who gets in: leave a personal board public if you like, or keep a team plan private or password-protected so only the people on it can see it. And when you improve the board, add a column, tweak the colors, you re-publish to the same link, so nobody is ever looking at an old copy. You can even point a custom domain like board.yourname.com at it so it feels like a real product.

Try it now: Publish your AI-built kanban board with VisiblePage and get a live link in seconds.

Frequently asked questions

Can AI really build a working kanban board?

Yes. A kanban board is columns of draggable cards, which is a pattern modern AI models write well. Ask for a single self-contained HTML file with your columns and tasks as data, get that looking right, then add HTML5 drag-and-drop in a follow-up. You get a real board with cards you can move between To Do, Doing, and Done, no framework or build step required.

What is the difference between a kanban board and a to-do list?

A to-do list is one column of tasks that are either done or not. A kanban board adds stages, usually To Do, Doing, and Done, so you can see where each task is in your workflow at a glance. That visual sense of flow, plus a limit on how much can be in progress at once, is what makes a board better for anything with more than a few moving pieces.

Do I need to know how to code to build a kanban board with AI?

No. You describe the board in plain language, the columns, the tasks, and the look, and the AI writes the HTML, CSS, and JavaScript. You test it in the browser and give feedback in words. The only technical step left is publishing it, and a tool like VisiblePage turns the AI’s HTML into a live link with no setup.

Will the cards save if I close the tab?

Only if you ask for it. Add a line to your prompt requesting that the board save its state to the browser’s localStorage so cards stay where you left them on reload. For a shared board where everyone edits the same live data you need a backend, but for a personal or reference board, localStorage plus one published link covers most of what people actually want.

How do I share a kanban board I built with AI?

Ask the AI for one self-contained HTML file, then publish it to a host that gives you a live URL. With VisiblePage you paste the HTML or drop a ZIP and get a shareable link immediately, with drag-and-drop and every interaction still working, because you are sharing the real page and not a screenshot.

The short version

A kanban board is one of the highest-value-per-prompt things you can build with AI, because the core idea, columns of cards you drag between stages, is simple and AI writes it cleanly. Prompt for a static board first with your tasks as data, add drag-and-drop in a second prompt, then layer in WIP limits, a quick-add box, and localStorage so it saves. Keep the changes small and test each one. When it works the way you want, publish it with VisiblePage so your board lives at a real link, with the dragging intact, ready to open every morning and share with anyone who needs it.