Tages-Workshop

Webseiten & Web-Apps bauen mit Claude Code in deiner IDE

Von der ersten Datei bis in die Produktion — mit einem KI-Agenten, der direkt in deinem Editor mitarbeitet. In 8 Stufen, an einem durchgehenden Praxis-Beispiel.

Worum geht's?

Du lernst, wie du mit Claude Code direkt im integrierten Terminal deiner IDE (VS Code, Cursor, Antigravity) echte Dinge baust: Webseiten, kleine Web-Apps, Automatisierungen — und wie du das in einer Firma sinnvoll und sicher einsetzt. Der rote Faden: sichtbarer Quick-Win → Zeit sparen → echter Code (Brownfield) → bis ins Deployment.

Dieses Portal ist beides: Live-Präsentation für den Workshop und Selbstlern-Kurs zum Durchklicken. Dein Fortschritt wird lokal gespeichert.

? Warum Claude Code — zusätzlich zur eingebauten KI deiner IDE?

Deine IDE hat meist schon KI (Code-Vervollständigung, Chat — z. B. Copilot in VS Code, der Cursor-Chat oder Gemini in Antigravity). Claude Code ist etwas anderes: ein Agent, der eigenständig mehrere Dateien liest, ändert, Befehle ausführt und Schritt für Schritt arbeitet.

⌨️ Klassische Editor-KI
  • Vervollständigt die aktuelle Zeile / Datei
  • Beantwortet Fragen im Chat
  • Du führst Befehle selbst aus
  • Kontext meist auf das offene File begrenzt
🤖 Claude Code (Agent im Terminal)
  • Plant Aufgaben & arbeitet über viele Dateien
  • Liest/schreibt Dateien, führt Tests & Befehle aus
  • Fragt bei heiklen Aktionen um Freigabe
  • Versteht das ganze Projekt (inkl. CLAUDE.md)
Kurz: Die IDE ist der Editor, Claude Code ist der mitarbeitende Kollege darin. Beides zusammen ist stärker als jedes allein.

🧠 Mentales Modell: ein Agent in deinem Terminal

Claude Code macht keine Magie. Es ist ein wiederkehrender Kreislauf — und du bleibst an der Kontrolle.

💬
Du promptest
„Bau mir …"
📂
Liest Kontext
Dateien, Projekt
✏️
Schlägt Änderung vor
Code / Befehl
🔐
Fragt um Freigabe
du bestätigst
✅
Führt aus & zeigt
Ergebnis

… und dann wieder von vorn. Du gibst die Richtung vor und bestätigst — Claude Code übernimmt die Fleißarbeit.

🏭 Unser Beispiel: die „Nordwerk GmbH"

Damit alles zusammenhängt, digitalisieren wir über alle Stufen hinweg eine fiktive kleine Firma.

Stufe 3 baut die öffentliche Landingpage, Stufe 4 ein internes Dashboard, Stufe 6 ein Report-Skript, Stufe 7 erweitert ein bestehendes Modul und bringt alles live. So siehst du, wie Claude Code im echten Firmenalltag wächst.

🗺️ Die 8 Stufen

Git ist das Sicherheitsnetz. Für sicheres Arbeiten mit KI-Änderungen gibt es eine eigene Schwester-Schulung: „Git in der IDE". Wir verweisen an den passenden Stellen darauf.
Stufe 1

Setup & Orientierung

Claude Code im integrierten Terminal deiner IDE installieren, einloggen und das erste Mal etwas bauen.

1 Installieren & starten

Claude Code läuft im integrierten Terminal deiner IDE — ob VS Code, Cursor oder Antigravity. Einmal installieren, dann mit einem Befehl starten.

Terminal — VS Code / Cursor / Antigravity
  1. In deiner IDE das Terminal öffnen (Strg/Cmd + ö bzw. View → Terminal).
  2. Einmalig installieren: npm install -g @anthropic-ai/claude-code — Details & Alternativen in der Claude-Code-Doku.
  3. claude eingeben und mit deinem Anthropic-Konto (Claude Pro/Max) oder API-Key anmelden.
  4. Mit /status prüfen, in welchem Ordner, mit welchem Modell und welchen Berechtigungen Claude Code läuft.
Tipp: Claude Code „lebt" im Ordner, in dem du es startest. Öffne in deiner IDE den richtigen Projektordner, bevor du loslegst.
Versionsstand: Diese Schulung bezieht sich auf Claude Code v2.1.159 · Stand: Juni 2026. Claude Code wird häufig aktualisiert — aktuelle Version mit claude --version prüfen; die Konzepte bleiben.
Neu auf der Kommandozeile? Die Grundlagen — Navigieren, Dateien, Befehle, Installieren, mit Umschalter für Linux/macOS/Windows — gibt's in Terminal-Basics.

2 Die IDE-Oberfläche verstehen

Vier Bereiche, die du kennen solltest. Die Skizze zeigt das Layout schematisch (VS Code, Cursor & Antigravity sind hier nahezu gleich) — die Nummern erklärt die Legende darunter.

VS Code — nordwerk-website
Skizze
  • 1 Datei-Explorer — dein Projektbaum. Claude Code sieht genau diese Dateien.
  • 2 Editor — hier siehst du Änderungen sofort, kannst selbst eingreifen.
  • 3 Terminal mit Claude Code — dein Prompt-Eingabefeld an den Agenten.
  • 4 Diff/Änderungen — was Claude geändert hat, prüfst du hier (Quellcode-Verwaltung).
Schematische Darstellung — in VS Code, Cursor & Antigravity liegen Explorer links, Editor in der Mitte, das Claude-Code-Terminal unten, die Änderungen rechts.

3 Erstes Prompt → erste Datei

Sag in einfachen Worten, was du willst. Claude Code legt die Datei an — nach deiner Freigabe.

Du

Lege eine Datei hallo.html an mit einer zentrierten Überschrift „Hallo Nordwerk" und einem Lime-Hintergrund.

Claude Code

Ich erstelle hallo.html mit einem einfachen, zentrierten Layout. Darf ich die Datei anlegen?

→ [Freigabe erteilt] → Datei erstellt. Öffne sie im Browser, um sie zu sehen.

Wichtig: Du musst keine perfekten Anweisungen schreiben. Anfangen, ansehen, nachschärfen — das ist der normale Rhythmus (mehr in Stufe 2).

✓ Geschafft, wenn du …

Stufe 2

Grundlagen des Arbeitens

Wie du gut promptest, Kontext gibst, den Plan-Modus nutzt und die Kontrolle behältst.

1 Gut prompten

Je klarer Ziel, Kontext und gewünschtes Ergebnis, desto besser. Vage Prompts kosten Runden.

✗ vage
  • „Mach die Seite schöner."
  • „Bau mir ein Tool."
  • „Fix den Bug."
✓ konkret
  • „Mach die Hero-Sektion responsive, max. Breite 1100px, mehr Abstand."
  • „Bau ein Dashboard mit 3 Kennzahl-Karten aus daten.json."
  • „Der Filter zeigt 0 Treffer bei Großbuchstaben — vergleiche case-insensitive."

2 Dateien & Kontext referenzieren

Zeig Claude Code, worum es geht — statt es raten zu lassen.

@-Referenzen: Mit @dateiname hängst du konkrete Dateien an dein Prompt. „Richte dich nach @styles.css" liefert viel bessere Ergebnisse als eine allgemeine Bitte.

3 Plan-Modus: erst denken, dann ändern

Im Plan-Modus schlägt Claude Code erst einen Plan vor — den du prüfst — bevor irgendetwas geändert wird. Ideal für größere Aufgaben.

Klick, um zu sehen, wie ein Plan entsteht.
1.Bestehende Struktur von index.html lesen
2.Neue Sektion „Leistungen" als Karten-Grid entwerfen
3.Responsive Regeln in styles.css ergänzen
4.Im Browser gegenprüfen
✓ Plan steht. Erst jetzt — nach deiner Freigabe — beginnt Claude Code mit den Änderungen. Du kannst den Plan vorher anpassen.

So sieht der Plan-Modus im Terminal aus:

Terminal — Plan-Modus
⏸ plan mode · es wird noch nichts geändert › Ergänze eine Sektion „Leistungen" als Karten-Grid. Mein Plan: 1. index.html lesen (bestehende Struktur) 2. Karten-Grid „Leistungen" entwerfen 3. Responsive-Regeln in styles.css ergänzen 4. Im Browser gegenprüfen ? Plan annehmen? [ Annehmen ] [ bearbeiten ] [ abbrechen ]
Ablauf: Claude Code listet die 4 Schritte auf, ohne Dateien zu ändern. Erst nach „Annehmen" werden die Änderungen ausgeführt und sind im Browser sichtbar.

4 Permissions & Rückgängig (Rewind)

Du behältst die Kontrolle: Claude fragt vor heiklen Aktionen, und du kannst Schritte zurücknehmen.

Permissions: Vor dem Ausführen von Befehlen oder dem Ändern vieler Dateien fragt Claude Code um Erlaubnis. Du kannst einzeln bestätigen oder für die Sitzung erlauben.
Rewind/Checkpoints: Lief etwas in die falsche Richtung? Claude Code setzt Checkpoints — du kannst zu einem früheren Stand zurückspringen. Das echte Sicherheitsnetz ist zusätzlich Git (Stufe 6 + Git-Schulung).

✓ Geschafft, wenn du …

Stufe 3 · Nordwerk

Erste Webseite

Eine echte Landingpage von Null — responsive, live geändert. Der sichtbare Quick-Win.

1 Von Null zur Landingpage

Ein Prompt mit klarem Ziel reicht für ein erstes, vorzeigbares Ergebnis.

Du

Bau eine einseitige Landingpage für die „Nordwerk GmbH" (Metallbau): Hero mit Slogan, 3 Leistungs-Karten, Kontakt-Abschnitt. Modern, dunkel, responsive. Nur HTML/CSS, keine Frameworks.

Claude Code

Ich lege index.html und styles.css an, mit Hero, Karten-Grid und Kontaktbereich. Danach kannst du im Browser draufschauen.

Terminal — nordwerk-website
› claude "Landingpage für Nordwerk GmbH …" ● erstellt index.html ● erstellt styles.css ✓ Fertig. Öffne index.html im Browser.

2 Ansehen & nachschärfen (Vorher / Nachher)

Iterieren ist der Normalfall: erste Version ansehen, gezielt verbessern.

Browser — index.html (v1 → final)
Skizze
Schematisch: links die erste Version, rechts nach 2–3 Nachschärfungen (Lime-Akzent, größerer Hero, anhebende Karten).
Du

Mehr Abstand im Hero, die Karten sollen beim Hover leicht anheben, und die Akzentfarbe auf Lime (#bce941).

So fühlt sich Iterieren an — ein Klick verwandelt v1 in die finale Version:

Browser — index.html
Skizze · interaktiv
v1 — schlicht. Klick, um nachzuschärfen.

3 Responsive prüfen

„Sieht das auf dem Handy gut aus?" ist ein gültiges Prompt.

Browser — Mobile-Ansicht
Skizze
Schematisch: auf schmalen Geräten stapeln sich Hero und Karten untereinander — eine Spalte statt drei.

✓ Geschafft, wenn du …

Stufe 4 · Nordwerk

Interaktivität & Web-App

Ein kleines internes Dashboard mit echtem Verhalten — und wie Claude Code beim Debugging hilft.

1 Internes Dashboard bauen

Aus statisch wird interaktiv: Daten anzeigen, filtern, reagieren.

Du

Bau ein internes Dashboard: lies auftraege.json, zeige Kennzahl-Karten (offen/erledigt/Umsatz) und eine filterbare Tabelle. Vanilla JS.

Claude Code

Ich erstelle dashboard.html + app.js: Karten rechnen die Summen, das Suchfeld filtert die Tabelle live.

2 Debugging: Bug → Fix

Bugs gehören dazu. Beschreibe das Symptom — Claude Code findet und erklärt die Ursache. Klick „Fix anwenden".

Symptom: Der Filter findet „Schmidt" nicht, wenn man „schmidt" tippt.

const q = input.value; rows.filter(r => r.name.includes(q)); // case-sensitive! render(rows);
Ursache: includes vergleicht Groß-/Kleinschreibung. „schmidt" ≠ „Schmidt".
✓ Behoben: beide Seiten mit .toLowerCase() vergleichen — jetzt case-insensitive.

Im Terminal läuft das so ab:

Terminal — Debugging
› Der Filter findet „Schmidt" nicht, wenn ich „schmidt" tippe. ● liest app.js ● gefunden: Zeile 12 — includes(q) ist case-sensitive ● Vorschlag: r.name.toLowerCase().includes(q.toLowerCase()) ? Änderung anwenden? [ ja ] [ nein ] ✓ Suche funktioniert jetzt unabhängig von Groß-/Kleinschreibung.
Ablauf: Du tippst nur das Symptom. Claude Code zeigt die betroffene Zeile, erklärt die Ursache (Groß-/Kleinschreibung) und schlägt den Fix vor — nach deiner Freigabe funktioniert die Suche.

✓ Geschafft, wenn du …

Stufe 5

Claude Code methodisch nutzen

Die Features, die aus „nettem Helfer" einen verlässlichen, wiederholbaren Arbeitspartner machen.

1 Die Werkzeuge im Überblick

⌨️
Slash-Commands
Wiederkehrende Aufgaben als /befehl — eingebaut (z. B. /init) oder selbst definiert.
🧩
Skills
Wiederverwendbare Fähigkeiten/Anleitungen. Mit skill-creator baust du eigene — starkes Firmen-Argument.
📄
CLAUDE.md
Projekt-Kontext & Regeln, die Claude Code automatisch liest. Mit /init generieren.
👥
Subagents
Teilaufgaben an spezialisierte Helfer-Agenten delegieren — parallel & fokussiert.
🪝
Hooks
Aktionen automatisch bei Ereignissen (z. B. „nach jeder Änderung Formatter laufen lassen").
🔁
Plan/Verify
Erst planen, dann ausführen, am Ende belegt verifizieren — statt blind „fertig".

2 CLAUDE.md & /init

Die CLAUDE.md ist das Gedächtnis deines Projekts: Konventionen, Befehle, „nicht anfassen"-Zonen.

i/init erzeugt ein Gerüst
› /init
# scannt das Projekt und schlägt eine CLAUDE.md vor:
# - Tech-Stack, Build-/Test-Befehle
# - Code-Stil, Ordnerstruktur
# - Dinge, die Claude beachten/meiden soll
Warum stark: Einmal gepflegt, hält sich Claude Code projektweit an eure Regeln — ohne dass du sie jedes Mal wiederholst.

3 Skills selbst bauen (skill-creator)

Eine Aufgabe, die ihr ständig braucht? Gieß sie in einen Skill — dann ruft jeder im Team sie per /name auf.

Du

Erstelle mir mit skill-creator einen Skill „nordwerk-report", der aus einer CSV einen formatierten Monatsreport baut.

Claude Code

Ich lege .claude/skills/nordwerk-report/SKILL.md an, mit Beschreibung und Schritten. Ab jetzt per /nordwerk-report aufrufbar.

VS Code — skill-creator
Skizze
skill-creator legt den Ordner samt SKILL.md an — danach für alle per /nordwerk-report aufrufbar.

4 Hooks: Standards automatisch erzwingen

Hooks führen Befehle bei Ereignissen aus — ohne dass du dran denken musst.

⚙.claude/settings.json (Beispiel)
{
  "hooks": {
    "PostToolUse": [
      { "matcher": "Edit|Write",
        "command": "npx prettier --write ." }
    ]
  }
}
Effekt: Nach jeder Datei-Änderung läuft automatisch der Formatter. So bleiben Standards eingehalten, ganz ohne Erinnerung.

✓ Geschafft, wenn du …

Stufe 6 · Nordwerk

Produktiv im Alltag

Refactoring, Tests, Git, MCP und eine Automatisierung, die über die Web-Welt hinausgeht.

1 Refactoring & Code erklären

Du

Erklär mir, was app.js macht, und schlage 3 Verbesserungen vor — ohne Verhalten zu ändern.

Claude Code

Überblick + 3 konkrete Refactorings (Funktionen trennen, Namen klären, Duplikate entfernen). Soll ich sie umsetzen?

2 Tests

„Schreib Tests dafür" ist ein hervorragendes Prompt — Tests sichern künftige Änderungen ab.

Terminal — tests
› npm test ✓ filtert case-insensitive ✓ summiert Umsatz korrekt 2 passed

3 Git — kurz, aber wichtig

Claude Code hilft auch bei Git: Commit-Messages vorschlagen, Diffs erklären, bei Konflikten unterstützen. Git ist dein Sicherheitsnetz für KI-Änderungen. Die ganze Tiefe in der Git-Schulung.

4 MCP / Connectors

Über MCP verbindet sich Claude Code mit externen Werkzeugen & Datenquellen (z. B. Ticket-System, Datenbank, Doku).

Idee: Statt Daten zu kopieren, fragt Claude Code direkt das angebundene System. Sicherheit beachten — siehe Stufe 8 (nicht vertrauenswürdige Inhalte).

5 Automatisierungs-Skript (CSV → Report)

Der Nutzen über Webseiten hinaus: wiederkehrende Büroarbeit automatisieren.

Du

Schreib ein Skript, das auftraege.csv einliest und einen Monatsreport (Summen pro Kunde, als HTML) erzeugt.

Browser — report.html
Skizze
Schematisch: aus der CSV wird ein lesbarer HTML-Report mit Summen pro Kunde — automatisch erzeugt.

✓ Geschafft, wenn du …

Stufe 7 · Nordwerk

Echte Projekte & Deployment

Bestehenden Code verstehen und ändern (Brownfield) — und das Ergebnis live bringen.

1 Brownfield verstehen

Der Firmenalltag ist selten „grüne Wiese". Claude Code hilft, fremden Code schnell zu erfassen.

Du

Verschaff dir einen Überblick über dieses Projekt und erkläre mir die Architektur in 5 Sätzen. Wo würde ich eine neue Funktion „Angebots-PDF" einhängen?

Erst /init laufen lassen (CLAUDE.md), dann gezielt fragen — so arbeitet Claude Code von Anfang an mit dem richtigen Kontext.

2 Große Aufgaben zerlegen

  1. Ziel klären & Plan-Modus nutzen.
  2. In kleine, prüfbare Schritte aufteilen.
  3. Schritt umsetzen → ansehen → nächster Schritt.
  4. Nach jedem sinnvollen Schritt committen (Git).

3 Statisch deployen — zuerst der einfache Weg

Eine statische Seite live zu bringen ist erstaunlich einfach.

Terminal — deploy
› claude "baue die Seite statisch und erkläre die Deploy-Optionen" ● Build in ./dist ● Optionen: statisches Hosting, VPS, Container … ✓ Bereit zum Hochladen.

4 Docker als Kür

Für reproduzierbares Deployment auf dem eigenen Server: ein Container.

🐳Dockerfile (statische Auslieferung)
FROM caddy:alpine
COPY ./dist /usr/share/caddy
Mehr Tiefe: Self-Hosting mit Docker & Caddy ist Thema der Git-Schulung (Forgejo-Beispiel).

Build & Deployment im Terminal:

Terminal — Deployment
› claude "baue die Seite und verpacke sie in einen Container" ● npm run build → ./dist ● schreibt Dockerfile (caddy:alpine) ● docker build -t nordwerk . ● docker run -p 8080:80 nordwerk ✓ Live unter http://localhost:8080
Ablauf: Die Seite wird statisch gebaut, in einen Container verpackt und gestartet — im Browser erscheint die Live-Version der Nordwerk-Seite.

✓ Geschafft, wenn du …

Stufe 8

Best Practices, Grenzen & Sicherheit

Damit Claude Code im Firmenalltag ein Gewinn bleibt — und kein Risiko.

1 Was Claude Code (nicht) gut kann

✓ Stark bei
  • Boilerplate, Refactoring, Tests
  • fremden Code erklären
  • wiederkehrende Aufgaben
  • Vorschläge & Varianten
△ Vorsicht bei
  • fachlichen Entscheidungen ohne Kontext
  • brandneuen/seltenen APIs
  • „einfach alles" ohne Review
  • sicherheitskritischen Details

2 Review-Pflicht & Halluzinationen

Du verantwortest den Code. Claude Code kann plausibel klingenden, aber falschen Code erzeugen (Halluzination). Lies Diffs, lass Tests laufen, prüfe das Ergebnis — besonders vor dem Commit.

3 Prompt-Injection / nicht vertrauenswürdige Inhalte

Reales Risiko bei MCP & Web: Inhalte aus externen Quellen (Webseiten, Tickets, Dokumente) können versteckte Anweisungen enthalten, die Claude Code manipulieren wollen. Behandle externe Inhalte als Daten, nicht als Befehle — und gib nur die Berechtigungen, die nötig sind.

4 Secrets & .gitignore

Niemals echte Tokens/Passwörter in den Code oder ins Repo. Platzhalter verwenden, Secrets in .env, und .env in .gitignore. Falls doch passiert: Secret widerrufen — Details (auch „aus der Historie entfernen") in der Git-Schulung.

5 Sicherheitsnetz: Checkpoints/Rewind + Git

Zwei Netze: Claude Codes Checkpoints/Rewind für schnelle Rücknahme innerhalb der Sitzung — und Git als dauerhaftes, nachvollziehbares Sicherheitsnetz für jede Änderung.

6 Kontext & Kosten

Große Aufgaben = viel Kontext = mehr Tokens/Zeit. Arbeite fokussiert: relevante Dateien referenzieren, Aufgaben zerlegen, CLAUDE.md pflegen. Das spart Geld und macht die Ergebnisse besser.

✓ Geschafft, wenn du …

Bonus

Cheat-Sheet

Zum Mitnehmen: gute Prompts, nützliche Befehle, Skill-Ideen. (Zählt nicht für den Fortschritt.)

★ Prompt-Muster, die funktionieren

  • Ziel + Kontext + Format: „Bau X, richte dich nach @datei, nur HTML/CSS."
  • Symptom statt Lösung: „Bei Großbuchstaben 0 Treffer" — Ursache findet Claude.
  • Erst Plan: „Mach erst einen Plan, bevor du etwas änderst."
  • Verifizieren: „Führe die Tests aus und zeig mir das Ergebnis."

⌨ Nützliche Slash-Commands

/init
CLAUDE.md fürs Projekt generieren.
/review
Änderungen prüfen lassen.
/clear
Kontext zurücksetzen (frischer Start).
eigene
Per Skill/Command für Team-Routinen.

🧩 Skill-Ideen für die Firma

  • Report-Generator (CSV/Excel → formatierter Bericht)
  • Onboarding-Helfer (Projekt erklären, Setup-Schritte)
  • Review-Checkliste (Stil, Sicherheit, Tests)
  • Doku-Schreiber (Code → README/Spec)
Lernkontrolle

Quiz

10 Fragen quer durch die Stufen. Ab 8 richtigen Antworten schaltest du dein Zertifikat frei.

Frage 1 von 10
…
Abschluss

Dein Zertifikat

Glückwunsch! Trage deinen Namen ein und drucke das Zertifikat (oder speichere als PDF).

FL
Florian Ludwig
AI Consultant · Kutzschbach INNOVATIONS
Zertifikat
Claude Code in der IDE
Hiermit wird bestätigt, dass
Dein Name hier
den Workshop „Webseiten & Web-Apps bauen mit Claude Code in der IDE" erfolgreich abgeschlossen hat.
—Datum
★GEPRÜFT
Florian LudwigAI Consultant · Kutzschbach INNOVATIONS