Skip to content
Get packs

Kanban Board Designer

Generates a single-screen HTML kanban task board mockup with columns, cards, and a sprint sidebar

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When you ask for a kanban, task board, sprint board, or Trello-style layout, the agent follows this skill to produce one self-contained web page showing a board with columns, task cards, assignee avatars, labels, a filter bar, and a sprint progress sidebar. It works from a design system file if one exists. The result is a visual prototype you can view in a browser, not a working project management tool.

Great for

  • Designers who want a quick visual mockup of a task board before building one
  • Product or engineering teams sketching a sprint board layout for a stakeholder review
  • Students learning HTML and CSS layout by reading a generated example

Skip it if

  • Replacing a real project tool like Jira or Trello: the board has static cards, so dragging and saving do not persist data
  • Production apps that need real data or security, since the output is a visual template with no backend or access control

Try asking

  • “Make me a kanban board for a 5-person growth squad mid-sprint with backlog, doing, review, and done columns”
  • “Create a sprint board mockup with a sidebar showing sprint progress and blocked tickets”
  • “Design a task board in the style of our design system with assignee avatars and label filters”
Step-by-step guide: how to use Kanban Board DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    kanban-board.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip kanban-board.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip kanban-board.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your squad, sprint number, and member list in the request so the mockup uses realistic content
  • Note that the skill's column set may differ from the brief's column names; state the exact columns you want
  • Ask for a specific color palette or design system so the output matches your brand

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.