Erste Website mit Claude Code

Claude Code erstellt Websites direkt aus deiner Beschreibung — im Terminal, ohne dass du selbst programmieren musst. Du sagst, was du willst, und Claude schreibt den Code. In diesem Tutorial baust du deine erste Website von Grund auf.

Für wen ist das?

Für Einsteiger, die eine Website erstellen wollen, ohne HTML, CSS oder JavaScript zu beherrschen. Du brauchst nur ein Terminal und die Bereitschaft, Claude Code auszuprobieren.

Was lernst du?

• Welche Voraussetzungen du für Claude Code brauchst
• Wie du ein Projekt startest und Claude Code aufrufst
• Wie du eine Website in natürlicher Sprache beschreibst
• Wie Claude Code deine Beschreibung in Dateien umsetzt
• Wie du das Ergebnis prüfst und iterativ verbesserst
• Welchen Workflow Claude Code intern durchläuft

Wann nutzen?

• Du brauchst eine einfache Website (Portfolio, Landingpage, Vereinsseite) und willst sie schnell umsetzen
• Du willst Claude Code kennenlernen, ohne direkt ein komplexes Projekt zu starten
• Du hast eine Idee für eine Seite und willst in wenigen Minuten ein Ergebnis sehen

Wann nicht?

• Für eine komplexe Web-Anwendung mit Datenbank, Authentifizierung und Backend brauchst du mehr Grundlagen
• Wenn du eine Website nur bearbeiten, nicht neu erstellen willst — nutze dafür einen visuellen Editor
• Wenn du kein Terminal nutzen möchtest — dann starte mit Claude Chat und erstelle dort ein HTML-Artifact

Voraussetzungen

Bevor du loslegst, brauchst du drei Dinge:

• Node.js (Version 18 oder neuer) — Download unter nodejs.org
• Claude Code — Installiere es global mit npm install -g @anthropic-ai/claude-code
• Ein Terminal — Windows Terminal, iTerm2 (Mac), oder das eingebaute Terminal deines Betriebssystems

Prüfe, ob alles installiert ist:

node --version    # Sollte v18 oder höher zeigen
claude --version  # Sollte die aktuelle Version zeigen

Schritt für Schritt zur ersten Website

Was Claude Code dabei tut

Hinter den Kulissen durchläuft Claude Code bei jeder Anweisung einen strukturierten Workflow:

1. Analyse — Claude liest deine Beschreibung und identifiziert die Anforderungen: Welche Seiten, welche Inhalte, welches Design?
2. Planung — Claude entscheidet über die Dateistruktur: Separate CSS-Datei oder inline? Eine HTML-Datei oder mehrere? Wird JavaScript gebraucht?
3. Erstellung — Claude schreibt die Dateien und zeigt dir jede einzelne Änderung. Du siehst den Code entstehen und kannst jederzeit eingreifen.
4. Prüfung — Claude validiert den erstellten Code auf Fehler und Konsistenz. Wenn etwas nicht stimmt, korrigiert Claude es selbstständig.

Dieser Zyklus wiederholt sich bei jedem Feedback, das du gibst. Das ist der Kern von iterativem Arbeiten mit Claude Code: beschreiben, prüfen, verfeinern.

Tipps für bessere Ergebnisse

Sei spezifisch, nicht vage. Statt “Mach eine schöne Website” schreibe “Erstelle eine Landingpage mit weißem Hintergrund, grünen Akzentfarben (#2D7D46), einer Hero-Sektion mit Bild-Platzhalter und drei Produkt-Karten darunter.”

Eine Sache pro Iteration. Ändere nicht fünf Dinge gleichzeitig. “Ändere die Schriftgröße der Überschriften auf 2rem” ist besser als “Ändere Schriften, Farben, Layout und füge neue Seiten hinzu”.

Beschreibe das Ergebnis, nicht den Weg. Sage “Die Navigation soll auf Mobilgeräten als Hamburger-Menü erscheinen” statt “Füge JavaScript für ein responsives Menü hinzu”.

Typische Fehler

• Zu vage Beschreibung: “Mach eine Website” gibt Claude zu wenig Information. Beschreibe Zweck, Zielgruppe, Inhalt und Stil.
• Zu viele Features auf einmal: Starte mit einer einfachen Seite. Füge Features (Formular, Animation, weitere Seiten) schrittweise hinzu.
• Nicht iterieren: Das erste Ergebnis ist selten perfekt — das ist normal. Der Workflow ist: Ergebnis ansehen, Feedback geben, verbessern lassen.
• Ergebnis nicht im Browser prüfen: Schau dir jede Änderung im Browser an. Nur so erkennst du, ob das Design funktioniert.
• Dateien manuell ändern und parallel Claude nutzen: Wenn du Dateien gleichzeitig selbst bearbeitest und Claude Anweisungen gibst, kommt es zu Konflikten. Lass Claude die Dateien ändern — oder mach es selbst.

Mini-Übung

Erstelle eine Landingpage für einen fiktiven Blumenladen. Starte Claude Code und gib diesen Prompt ein:

Erstelle eine Landingpage für einen Blumenladen namens "Blütenzauber".
Die Seite braucht:
- Ein Hero-Banner mit dem Namen des Ladens und dem Slogan "Frische Blumen für jeden Anlass"
- Drei Produkt-Karten: Sträuße, Gestecke, Hochzeitsfloristik
- Einen Footer mit Adresse, Öffnungszeiten und Telefonnummer
- Modernes Design: weißer Hintergrund, grüne Akzente, runde Ecken
- Responsive für Mobilgeräte

Prüfe das Ergebnis im Browser. Gib dann mindestens zwei Runden Feedback:

1. Ändere eine Farbe oder Schriftgrösse
2. Füge ein neues Element hinzu (z.B. ein Bewertungs-Abschnitt)

Nächster Schritt

Du hast deine erste Website mit Claude Code gebaut. Als Nächstes lernst du Projects, Artifacts & Memory kennen — damit baust du dauerhaften Kontext auf, den Claude über mehrere Conversations hinweg nutzt.