Du hast Claude Code installiert. Das Terminal ist kein Fremdwort mehr. Und jetzt willst du endlich etwas bauen.
Dann fangen wir an. In diesem Tutorial bauen wir zusammen ein echtes, funktionierendes Kanban-Board. Kein Spielzeugprojekt, sondern ein Tool, das du tatsächlich für deine Aufgaben nutzen kannst.
Die gute Nachricht: Du schreibst selbst keinen Code. Claude Code macht das. Du erklärst, bestätigst und schaust zu, wie deine App entsteht. Genau so ist Vibe Coding gedacht.
Falls du noch nicht mit dem Setup angefangen hast, lies zuerst Teil 1 dieses Tutorials. Dort installieren wir Claude Code, VS Code und GitHub Desktop.
Was wir heute bauen, dein erstes Kanban-Board
Warum ein Kanban-Board?
Ein Kanban-Board ist wahrscheinlich das meistgenutzte Organisationstool unter Freelancern und Selbstständigen. Aufgaben in drei Spalten, kurz und übersichtlich: Was muss noch erledigt werden, was ist gerade in Arbeit, was ist fertig.
Du kennst Trello oder Notion? Das bauen wir heute selbst. Ohne fremdes Abo, ohne Datenschutzbedenken, genau so, wie du es willst.
Was am Ende funktioniert
Am Ende des Tutorials hast du eine Web-App, die direkt im Browser läuft. Drei Spalten, eine Eingabe für neue Karten, Drag & Drop zwischen den Spalten. Farben und Texte kannst du selbst anpassen. Und du hast gelernt, wie du Claude Code für jedes zukünftige Projekt einsetzt.
Schritt 1, neues Projekt anlegen
Repository in GitHub Desktop erstellen
Bevor wir bauen, legen wir einen Ordner mit Versionskontrolle an. So ist dein Code nach jeder Änderung gesichert.
- Öffne GitHub Desktop
- Klicke auf File → New Repository
- Name:
kanban-board - Wähle einen Speicherort, z.B. deinen Dokumente-Ordner
- Klicke Create Repository
Ordner in VS Code öffnen und Claude Code starten
Klicke in GitHub Desktop auf Open in Visual Studio Code. VS Code öffnet sich mit dem leeren Projektordner.
Jetzt das Terminal öffnen: Terminal → New Terminal.
Dann Claude Code starten:
claude
Du siehst den Willkommensbildschirm. Claude Code ist bereit.
Schritt 2, Claude Code das Projekt erklären
Jetzt kommt das Herzstück. Du sagst Claude Code, was du bauen willst. Je konkreter die Beschreibung, desto besser das Ergebnis.
Dein erster Prompt
Kopiere diesen Text und paste ihn ins Claude-Terminal:
Erstelle ein Kanban-Board als Web-App. Nutze Vite und React als Framework
und pnpm als Paketmanager.
Das Board soll drei Spalten haben: "Zu erledigen", "In Bearbeitung" und "Erledigt".
Nutzer sollen neue Karten per Button erstellen und diese per Drag & Drop
zwischen den Spalten verschieben können.
Design: Modern, helle Hintergrundfarben für die Spalten, abgerundete Ecken
für die Karten, leichter Schatten. Mobilfreundlich.
Starte mit einem klaren Plan, bevor du Code schreibst.
Drücke Enter.
Den Plan durchlesen und bestätigen
Claude Code liest deinen Prompt und erstellt einen Plan. Du siehst, welche Dateien erstellt werden, welche Befehle ausgeführt werden und in welcher Reihenfolge.
Lies den Plan kurz durch. Du musst ihn nicht vollständig verstehen. Wenn er ungefähr das klingt, was du wolltest, tippe y und drücke Enter.
Claude Code beginnt zu bauen.
Schritt 3, das Projekt wird aufgebaut
Claude Code führt jetzt mehrere Schritte aus. Typischerweise so:
- Vite + React initialisieren mit
pnpm create vite@latest - Abhängigkeiten installieren mit
pnpm install - Komponenten erstellen für Board, Spalten und Karten
- Drag & Drop Logik hinzufügen
- Styling einrichten
Bei jedem Schritt, der Dateien auf deinem Computer verändert, fragt Claude Code nach deiner Bestätigung. Tippe y wenn du zustimmst.
Du siehst im VS Code Explorer auf der linken Seite, wie Dateien entstehen. Das sind echte Dateien auf deiner Festplatte, kein Vorschau-Modus.
Falls Claude Code nach pnpm install fragt oder du es manuell starten musst:
pnpm install
Das installiert alle Pakete, die das Projekt braucht. Dauert ca. 30 Sekunden.
Schritt 4, pnpm dev, deine App im Browser sehen
Wenn Claude Code fertig ist, kannst du die App starten. Entweder macht Claude Code das automatisch für dich, oder du tippst selbst:
pnpm dev
Du siehst eine Ausgabe wie diese:
VITE v6.x.x ready in 300ms
➜ Local: http://localhost:5173/
Öffne deinen Browser und gib die Adresse ein: http://localhost:5173
Dein Kanban-Board läuft.
Live-Reload: Änderungen sofort sehen
Das Großartige an pnpm dev: Jede Änderung wird sofort im Browser sichtbar, ohne manuelles Neuladen.
Teste es. Geh zurück ins Claude-Terminal und tippe:
Ändere die Hintergrundfarbe der ersten Spalte auf ein helles Blau.
Schau in den Browser. Die Änderung erscheint in Sekunden. Das ist der Kern von Vibe Coding: Idee eingeben, sofort Ergebnis sehen, weiter iterieren.
Schritt 5, das Kanban-Board ausbauen
Dein Board läuft. Jetzt kannst du es nach deinen Wünschen erweitern.
Karten hinzufügen
So gibst du Claude Code eine neue Aufgabe:
Füge oben in jeder Spalte einen "+" Button hinzu, mit dem ich eine neue Karte
mit eigenem Titel erstellen kann.
Claude plant die Änderung, zeigt dir genau, was sich ändert, und wartet auf dein y.
Weitere Ideen zum Ausprobieren
Du kannst beliebige weitere Anpassungen machen lassen. Probiere diese Prompts aus:
Füge jeder Karte ein Prioritätslabel hinzu: Hoch, Mittel, Niedrig.
Zeige oben einen Fortschrittsbalken, der anzeigt, wie viele Aufgaben erledigt sind.
Speichere die Karten im localStorage, damit sie nach einem Browser-Neustart noch da sind.
Mache die Karten per Klick editierbar.
Jede dieser Anfragen funktioniert genauso wie die erste. Beschreiben, bestätigen, sehen.
Tipp: Modi für schnelleres Arbeiten
Wenn du viele Änderungen hintereinander machst, kann das ständige Bestätigen bremsen. Claude Code hat drei Modi, zwischen denen du jederzeit mit Shift + Tab oder /mode wechseln kannst:
Standard Mode (Standardeinstellung): Claude fragt vor jeder Dateiänderung nach. Gut für den Anfang und für größere Eingriffe, bei denen du genau hinschauen willst.
Plan Mode: Claude plant zuerst alles durch und zeigt dir den vollständigen Plan. Erst dann fragt er, ob er loslegen soll. Praktisch für komplexere Aufgaben wie "Bau die gesamte Drag & Drop Logik neu".
Accept Edits Mode: Claude führt Dateiänderungen automatisch durch, ohne jedes Mal zu fragen. Ideal für schnelle Iterationen, wenn du weißt, was du willst, und Claude bereits ein paarmal gute Arbeit geleistet hat.
Fang mit Standard Mode an. Wenn du Claude besser kennst und schneller vorankommen willst, wechsle auf Accept Edits Mode.
Schritt 6, pnpm build, die App ist fertig
Wenn du mit deiner App zufrieden bist, kannst du sie für die Veröffentlichung vorbereiten. Das nennt sich Production Build.
Was passiert dabei? Deine Entwicklungsdateien werden optimiert und komprimiert. Aus hunderten von Dateien werden wenige, schlanke Dateien, die so schnell wie möglich laden.
pnpm build
Nach dem Build siehst du einen neuen Ordner namens dist in deinem Projekt. Das sind die Dateien, die du auf einen Webserver laden könntest, damit andere dein Kanban-Board nutzen können.
Fürs Erste reicht es, zu wissen, dass dieser Befehl existiert.
Schritt 7, Code in GitHub sichern
Dein Kanban-Board funktioniert. Jetzt sicherst du deinen Fortschritt.
In GitHub Desktop committen
Wechsel zu GitHub Desktop. Auf der linken Seite siehst du alle Dateien, die sich verändert haben. Das sind die neuen Dateien, die Claude Code erstellt hat.
- Schaue dir die Änderungen kurz an (das ist optional, aber du lernst dabei)
- Gib unten im Summary-Feld eine kurze Beschreibung ein: z.B. "Erstes Kanban-Board erstellt"
- Klicke auf Commit to main
Push to GitHub
Jetzt siehst du oben den Button Publish Repository (beim allerersten Mal) oder Push origin (danach).
Klick drauf. Dein Code ist jetzt nicht nur lokal auf deinem Computer, sondern auch in der Cloud bei GitHub gesichert. Von dort aus kannst du ihn später auf einem anderen Gerät weiterbearbeiten oder mit jemandem teilen.
Gewöhne dir an, nach jeder Claude Code Session zu committen und zu pushen. So verlierst du nie Fortschritt.
Was jetzt? Die nächsten Schritte
Du hast dein erstes echtes Projekt gebaut. Mit Claude Code. Ohne Programmierkenntnisse.
Was als nächstes? Bau weitere Features ein. Probiere andere Projekt-Ideen aus. Eine einfache Aufgabenliste, eine Zeiterfassung, ein Budget-Tracker. Claude Code kann das alles.
Wenn du verstehen willst, wie Profis Claude Code wirklich einsetzen, schau dir unseren fortgeschrittenen Claude Code Guide an. Dort lernst du, wie du eine claude.md-Datei als dauerhaftes Projektgedächtnis nutzt, Hooks für automatische Qualitätschecks einrichtest und Claude Code in bestehende Workflows integrierst.
Mehr Inspiration für Projekte findest du auf unserer Vibe Coding Übersichtsseite.
