Kanban Board

Baut ein vollständiges Kanban-Board mit Drag-and-Drop, Labels und localStorage-Speicherung.

Der Prompt

Build a Kanban project management board using HTML5, CSS3, and JavaScript. Create a flexible board layout with customizable columns (To Do, In Progress, Done, etc.). Implement drag-and-drop card movement between columns with smooth animations. Add card creation with rich text formatting, labels, due dates, and priority levels. Include user assignment with avatars and filtering by assignee. Implement card comments and activity history. Add board customization with column reordering and color themes. Support multiple boards with quick switching. Implement data persistence using localStorage with export/import functionality. Create a responsive design that adapts to different screen sizes. Add keyboard shortcuts for common actions.

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Dieser Prompt lässt Claude ein vollständiges Kanban-Board als Webanwendung bauen, mit HTML5, CSS3 und Vanilla JavaScript, also ganz ohne Framework. Enthalten sind Drag-and-Drop zwischen Spalten, Kartenerstellung mit Formatierung, Labels, Fälligkeitsdaten und Prioritäten, Kommentare mit Aktivitätsverlauf, mehrere Boards, Datenpersistenz über localStorage samt Export/Import sowie responsives Design und Tastaturkürzel. Gut geeignet als Ausgangspunkt für ein persönliches Aufgabenboard oder als Lernprojekt, um Drag-and-Drop-Interaktionen und State-Management in reinem JavaScript zu üben. Für den produktiven Team-Einsatz fehlt allerdings ein echtes Backend — die Daten liegen nur lokal im Browser und sind nicht zwischen Geräten synchronisiert.

Praxis-Tipp

Nutzen Sie den Prompt als Startpunkt und ergänzen Sie danach gezielt einzelne Features, z. B. „Füge eine Backend-Anbindung über eine REST-API hinzu, damit mehrere Nutzer das Board teilen können.“

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …