Claude Code Tutorial (Deutsch): Dein erstes Projekt

Du hast Claude Code installiert (oder bist kurz davor) und willst endlich was Echtes damit bauen – nicht nur „Hallo Welt”, sondern ein kleines Projekt, das am Ende wirklich läuft? Dann bist du hier richtig. Dieses Tutorial nimmt dich an die Hand: vom leeren Ordner bis zum ersten funktionierenden Feature, inklusive der Stellen, an denen Anfänger typischerweise stolpern.

Dieser Artikel gehört zu Was ist Claude Code? Einfach erklärt. Wenn du Claude Code noch gar nicht eingerichtet hast, starte vorher mit Claude Code installieren & erste Schritte – dort geht es um Installation und Login, hier ums Bauen.

Was du am Ende kannst

Am Ende dieses Tutorials hast du mit Claude Code ein kleines, lauffähiges Projekt von Grund auf gebaut – ohne jede Zeile selbst getippt zu haben.

Wir bauen bewusst etwas Kleines und Anschauliches: einen simplen Mini-Aufgabenplaner (eine „To-do-Liste”) als kleine Web-Seite. Das Projekt ist klein genug, um es in einer halben Stunde zu schaffen, aber groß genug, um den echten Arbeitsablauf zu zeigen: Idee beschreiben, Code generieren lassen, ansehen, Fehler beheben, erweitern.

Wichtig vorweg: Du musst den Code nicht verstehen, um diesem Tutorial zu folgen. Aber du wirst danach ein Gefühl dafür haben, wie man mit einem KI-Coding-Tool arbeitet – und das ist die eigentliche Fähigkeit.

Projekt-Setup

Der erste Schritt ist immer: einen leeren Ordner anlegen, hineinwechseln und Claude Code dort starten.

Claude Code arbeitet immer in dem Ordner, in dem du es startest – das ist dein „Arbeitsverzeichnis”. Leg dafür einen frischen, leeren Ordner an, damit Claude nicht aus Versehen in fremden Dateien herumräumt.

Im Terminal (PowerShell unter Windows, Terminal unter macOS) sieht das so aus:

mkdir mein-erstes-projekt
cd mein-erstes-projekt
claude

Mit claude startet die interaktive Sitzung. Du landest in einer Eingabezeile, in die du ganz normal auf Deutsch schreiben kannst – Claude Code versteht deutsche Anweisungen problemlos.

Ein guter erster Satz ist nicht „Schreib mir eine App”, sondern eine kurze, klare Beschreibung. Zum Beispiel:

Erstelle eine einfache To-do-Listen-Webseite mit HTML, CSS und etwas JavaScript. Man soll Aufgaben hinzufügen, abhaken und löschen können. Alles in einer einzigen index.html-Datei, ohne externe Bibliotheken.

Claude Code liest dann den (noch leeren) Ordner, plant die Datei und fragt dich um Erlaubnis, bevor es etwas schreibt. Genau dieses Nachfragen ist Absicht: Claude Code zeigt dir vorab, was es tun will, und du bestätigst.

Zur Prüfung: Die genaue Formulierung der Bestätigungsabfragen kann sich je nach Version unterscheiden. Lies einfach, was im Terminal steht, und bestätige die Aktion, wenn sie sinnvoll aussieht.

Dein erstes Feature

Beschreib das gewünschte Verhalten in normalem Deutsch, lass Claude Code den Code schreiben – und schau dir das Ergebnis sofort an.

Nach deiner ersten Anweisung legt Claude Code die index.html an. Bestätige die Schreib-Aktion. Sobald die Datei existiert, kannst du sie direkt im Browser ansehen: Doppelklick auf die Datei genügt für ein reines HTML/JavaScript-Projekt – ein Server ist hier nicht nötig.

Jetzt der eigentliche Trick beim Arbeiten mit Claude Code: Du arbeitest in kleinen Schritten. Statt alles auf einmal zu verlangen, baust du Feature für Feature. Ein paar Beispiel-Anweisungen, die du nacheinander geben kannst:

„Füge oben eine Überschrift und ein kurzes Eingabefeld mit einem ‚Hinzufügen’-Button hinzu.”
„Wenn ich auf eine Aufgabe klicke, soll sie durchgestrichen werden.”
„Mach das Design etwas freundlicher – abgerundete Ecken und ein bisschen Abstand.”

Nach jeder Anweisung beschreibt Claude Code, was es ändern will, macht die Änderung und du lädst die Seite im Browser neu. So siehst du sofort, ob das Ergebnis passt.

Eine kleine Tabelle, wie ein typischer Schritt abläuft:

Du sagst	Claude Code tut	Du prüfst
Wunsch in einem Satz	Plan + Code-Änderung vorschlagen	Bestätigen oder ablehnen
(bestätigt)	Datei schreiben/anpassen	Browser neu laden
„passt” / „ändere X”	nächste Iteration	wieder ansehen

Dieser Kreislauf – sagen, ansehen, anpassen – ist das Herzstück. Genau das ist auch der Kern von Vibe Coding erklärt: das Ergebnis beschreiben statt jede Zeile selbst zu schreiben.

Debuggen & Iterieren

Wenn etwas nicht funktioniert, beschreibst du Claude Code einfach, was du erwartet hast und was stattdessen passiert – es findet und behebt den Fehler meist selbst.

Irgendwann klappt etwas nicht: Der Button reagiert nicht, das Design verrutscht, eine Aufgabe lässt sich nicht löschen. Das ist normal und sogar lehrreich. Der wichtigste Reflex: Nicht selbst im Code herumraten – den Fehler beschreiben.

Eine gute Fehlerbeschreibung hat drei Teile:

Was du getan hast – „Ich habe auf den Löschen-Button geklickt.”
Was du erwartet hast – „Die Aufgabe sollte verschwinden.”
Was tatsächlich passiert ist – „Es passiert nichts, und in der Browser-Konsole steht ein Fehler.”

Mit dieser Info kann Claude Code gezielt suchen. Oft liest es die betroffene Datei erneut, erkennt das Problem und schlägt eine Korrektur vor. Wenn im Browser eine Fehlermeldung erscheint (rechtsklick → „Untersuchen” → Reiter „Konsole”), kopiere den Text und füge ihn in Claude Code ein. Fehlermeldungen sind Gold wert – sie sagen genau, wo es hakt.

Tipp: Arbeite in kleinen Häppchen und prüfe nach jeder Änderung. Wenn du zehn Sachen auf einmal ändern lässt und dann etwas kaputt ist, weißt du nicht, welche Änderung schuld war. Ein Schritt, ein Test – so bleibt es überschaubar.

Anfänger-Tipps

Die wichtigsten Tipps für den Anfang: klein anfangen, oft prüfen, präzise beschreiben und nicht den Überblick verlieren.

Ein paar Dinge, die den Einstieg deutlich angenehmer machen:

Sei konkret. „Mach es schöner” ist schwer umzusetzen. „Nutze eine größere Schrift und mehr Abstand zwischen den Zeilen” liefert bessere Ergebnisse.
Eine Sache pro Anweisung. Kleine, klare Schritte sind leichter zu prüfen und zu korrigieren als ein riesiger Wunschzettel.
Lies, was Claude Code vorschlägt. Bevor du bestätigst, überflieg kurz, welche Datei geändert wird. So behältst du die Kontrolle.
Sichere deinen Stand. Wenn dir eine Version gefällt, kopier den Ordner einmal weg – oder nutze Git, falls du dich damit auskennst. So kannst du jederzeit zurück.
Trau dich, „mach das rückgängig” zu sagen. Gefällt dir eine Änderung nicht, sag es einfach. Claude Code kann den vorherigen Stand wiederherstellen.
Pausen sind okay. Du kannst eine Sitzung beenden und später im selben Ordner mit claude weitermachen.

Und der vielleicht wichtigste Tipp: Erwarte nicht, dass alles beim ersten Versuch perfekt ist. Das Hin und Her gehört dazu – genau dabei lernst du, wie du gute Anweisungen formulierst.

Wie es weitergeht

Profi werden: Claude Code Workflows & CLAUDE.md
Mehr Power: was ein MCP-Server ist
Wiederkehrende Aufgaben automatisieren: Claude Skills

FAQ: Häufige Fragen zum Claude Code Tutorial

Brauche ich Programmierkenntnisse für dieses Claude Code Tutorial?

Nein. Du kannst diesem Tutorial ohne Vorkenntnisse folgen, weil du das Ergebnis auf Deutsch beschreibst und Claude Code den Code schreibt. Hilfreich ist nur die Bereitschaft, Fehler zu beschreiben und in kleinen Schritten zu arbeiten. Ein Grundverständnis hilft später, ist aber für den Einstieg nicht nötig.

Kann ich Claude Code auf Deutsch bedienen?

Ja. Du kannst deine Anweisungen komplett auf Deutsch eingeben – Claude Code versteht sie und antwortet ebenfalls auf Deutsch. Der Code selbst (Variablennamen, Schlüsselwörter) bleibt aus technischen Gründen meist englisch, aber das musst du nicht selbst tippen.

Was kostet das Tutorial bzw. Claude Code?

Claude Code selbst setzt einen kostenpflichtigen Anthropic-Plan voraus; das Tutorial-Projekt verursacht darüber hinaus keine zusätzlichen Kosten. Die genauen Preise und Verbrauchsgrenzen schauen wir uns separat an – als grobe Orientierung reicht ein einfaches Projekt wie dieses problemlos für einen ersten Test. (Zur Prüfung: aktuelle Preise auf der offiziellen Anthropic-Seite nachsehen.)

Mein Code funktioniert nicht – was mache ich?

Beschreibe Claude Code in drei Teilen, was passiert ist: was du getan hast, was du erwartet hast und was stattdessen geschah. Wenn der Browser eine Fehlermeldung zeigt (über „Untersuchen” → „Konsole”), kopiere sie in die Eingabe. Mit diesen Infos findet Claude Code den Fehler in den allermeisten Fällen selbst.

Wie groß darf mein erstes Projekt sein?

Halte es bewusst klein. Ein erstes Projekt mit einer einzelnen HTML-Datei und ein paar Funktionen ist ideal, weil du jeden Schritt sofort im Browser prüfen kannst. Größere Projekte mit mehreren Dateien funktionieren später genauso – aber für den Lerneffekt ist „klein und fertig” besser als „groß und halb kaputt”.

Wo kann ich nach diesem Tutorial weitermachen?

Ein guter nächster Schritt ist, dasselbe Projekt zu erweitern (z. B. Aufgaben speichern, damit sie nach dem Neuladen erhalten bleiben) oder ein zweites, etwas größeres Projekt zu starten. Wenn du verstehen willst, was hinter dem Arbeitsstil steckt, lies Vibe Coding erklärt.

Fazit

Ein Claude-Code-Projekt zu bauen ist kein Hexenwerk: leeren Ordner anlegen, Claude starten, in kleinen Schritten beschreiben, was du willst – und nach jeder Änderung im Browser nachschauen. Der Rhythmus aus sagen, ansehen, anpassen ist die ganze Magie. Wer das einmal verinnerlicht hat, kann damit erstaunlich schnell echte kleine Werkzeuge bauen.

Nächste Schritte: Wenn du das Setup noch sauber aufsetzen willst, geht es weiter mit Claude Code installieren & erste Schritte. Und für den großen Überblick lohnt sich Was ist Claude Code? Einfach erklärt.