Bauplan: Website-Umbau
Aus deiner alten Website wird eine moderne – oder du baust deine erste. Fünf fertige Stile, ehrlich erklärt, was Claude allein schafft und wofür du Fotos, Videos oder eine Bild-KI brauchst, und ein Website-TÜV, der vor dem Online-Gehen die typischen rechtlichen Stolpersteine findet.
Neu in Version 1.1.0: Neuer Befehl /aktualisieren: prüft, ob es eine neuere Version gibt, und übernimmt sie, ohne deine Daten anzufassen. Hast du eine ältere Version? Lade die neue herunter und sag Claude in deinem Bauplan-Ordner: „/aktualisieren“ – oder bei Version 1.0: „Die neue Version liegt als ZIP in Downloads. Pack sie nach neue-version/ aus und folge dort der Anleitung .claude/skills/aktualisieren/SKILL.md.“
Stand 25. Oktober 2026 · Wir prüfen die Inhalte regelmäßig gegen die aktuellen Programme. Was ist neu?
Die Anleitung auf dieser Seite ist kostenlos – du kannst alles selbst nachbauen. Das Paket spart dir die Arbeit: fertige Vorlagen und Werkzeuge, getestet und auf deutsches Recht ausgerichtet.
- So läuft es: ZIP herunterladen, Ordner in Claude Code öffnen, „Hallo, lass uns anfangen“ sagen. Claude baut es Schritt für Schritt mit dir auf – meist in 20 bis 60 Minuten. Es läuft nicht von allein ohne dich.
- Du brauchst: ein eigenes Claude-Abo (Pro, rund 20 € im Monat) und je nach Bauplan Python oder eigene Konten – siehe „Kosten“ auf dieser Seite.
- Einmal zahlen: kein Abo, nichts zu kündigen. 12 Monate neue Versionen inklusive.
- Kein Widerrufsrecht: Du lädst sofort herunter, deshalb kannst du den Kauf nicht zurückgeben. Lies vorher die Anleitung unten – dann weißt du genau, was du bekommst.
Bezahlen über Stripe, Rechnung mit 19 % USt. Nach dem Kauf geht der Download sofort los und bleibt unter „Meine Pakete“.
Eine Agentur nimmt für eine neue Website schnell 1.500 € und mehr. Mit diesem Bauplan baust du sie selbst – mit Claude Code, an einem Abend, als ganz normale Dateien, die dir gehören und die du überall kostenlos hosten kannst.
Drei Dinge machen den Unterschied zu „Claude, mach mir eine Website“:
- Claude baut genau das, was du beschreibst. „Mach es schön“ ergibt eine austauschbare Seite. Darum gibt es fünf fertige Stil-Aufträge zum Kopieren und Anpassen: ruhig und edel · modern mit Bewegung · Restaurant und Food · Handwerk, bodenständig · kleiner Shop. Jeder legt Farben, Schriften, Aufbau und Bewegung genau fest.
- Ehrlich, was Claude nicht kann. Fotos, Videos und echte 3D-Modelle erzeugt Claude nicht. Eine sich drehende Waffel im Kopfbereich? Geht – mit einem eigenen Video, einem KI-Video über einen Konnektor (Credits) oder einer Fotoserie. Der Bauplan sagt dir bei jedem Wunsch, was du zusätzlich brauchst und was es kostet.
- Ein Website-TÜV vor dem Online-Gehen. Ein kleines Prüf-Werkzeug sucht die typischen Stolpersteine, die bei alten Seiten zu Abmahnungen führen: fehlendes Impressum, Google-Schriften von Google-Servern, Tracking ohne Einwilligung, eingebettete Videos und Karten, der veraltete Link zur EU-Streitschlichtung, Bilder ohne Beschreibung, Animationen ohne Rücksicht auf „Bewegung reduzieren“. Dazu Checklisten für Technik und Recht, Stand Oktober 2026 – inklusive Widerrufs-Knopf für Online-Shops.
Ein Bauplan ist ein fertiger, getesteter Ordner, durch den dich Claude Code führt – wie der Assistent aus Stufe 4.
Schritt für Schritt
Prüf, ob alles da ist. Claude-Abo mit Claude Code (Pro reicht), Claude Code auf deinem Rechner (Lektion 3.2) und Python 3 für das Prüf-Werkzeug. Auf dem Mac bietet der Rechner es beim ersten Mal selbst an, unter Windows hilft dir Claude.
Lade den Bauplan herunter. Klick hier: Website-Umbau herunterladen. Pack die ZIP-Datei aus (Mac: Doppelklick, Windows: Rechtsklick → „Alle extrahieren…“) und leg den Ordner in deine Dokumente.
Öffne ihn in Claude Code. In der Claude Desktop-App im Bereich „Code“, unter dem Eingabefeld „Local“, dann „Open folder…“. Nachfrage-Modus auf „Manual“ lassen.
Probier es erst an der Übungsseite. Im Ordner liegt eine absichtlich veraltete, erfundene Website „Malerbetrieb Max Muster“.
Claude lässt den Website-TÜV darüber laufen (bei der Übungsseite: lauter rote Punkte) und baut dir in wenigen Minuten eine moderne Fassung. So siehst du, wie es geht, bevor du deine eigene Seite angehst.
Hallo, lass uns anfangen. Zeig mir erst an der Beispiel-Website, wie der Umbau läuft.
Füll das Briefing aus. Claude fragt dich nacheinander: Was machst du, für wen, was sollen Besucher tun (anrufen, Anfrage, kaufen)? Welche Seiten? Welche Websites gefallen dir? Leg Bildschirmfotos davon in den Ordner bilder – ein Beispiel sagt Claude mehr als zehn Sätze.
Wähl deinen Stil und pass ihn an. Claude stellt dir die fünf Stile vor. Ihr passt den gewählten an deine Farben, Schriften und Inhalte an. Wünschst du dir einen besonderen Hingucker (etwa ein Produkt, das sich dreht), sagt Claude dir ehrlich, was du dafür brauchst und was es kostet.
Sammel deine Inhalte. Alte Website im Ordner alte-website speichern (Claude erklärt dir je nach Anbieter, wie – WordPress, Wix, Jimdo, …), Fotos und Logo in bilder. Was fehlt, baut Claude erst als sauberen Platzhalter ein.
Lass bauen – erst die Startseite.
Claude zeigt dir zuerst den Plan, dann die Startseite als Entwurf. Du öffnest sie im Browser, ziehst das Fenster schmal (so sieht es auf dem Handy aus) und sagst, was anders soll. Danach entstehen die übrigen Seiten.
/bauen
Prüf vor dem Online-Gehen.
Der Website-TÜV muss ohne Rot sein. Dann geht ihr die Technik- und die Rechts-Checkliste durch. Impressum und Datenschutzerklärung holst du dir aus einem seriösen Generator (IHK, Kammer, bekanntes Rechtsportal) – Claude stellt dir die nötigen Angaben zusammen und prüft danach, ob jeder Dienst, den deine Seite nutzt, darin steht.
/pruefen
Stell sie online.
Schritt für Schritt bei Netlify oder Cloudflare Pages (beide kostenlos, auch für Firmen), dann die eigene Domain verbinden. Claude warnt dich vorher, wenn deine E-Mails beim alten Anbieter laufen – damit nach dem Umzug keine Mail verloren geht.
/online
Ich richte gerade den Baustein „Bauplan: Website-Umbau“ aus dem AWA Campus ein und hänge bei diesem Schritt: … Erklär ihn mir bitte einfacher, Schritt für Schritt. Ich bin Anfänger.
Wenn es hakt
Zuerst: Ist dein Rechner bereit? – Claude prüft das in zwei Minuten für dich.
- Der Website-TÜV meldet Rot bei Impressum oder Datenschutz. Rechtstexte schreibt Claude nicht aus dem Kopf. Trag deine Angaben selbst ein oder nimm einen Text aus einem Generator oder vom Anwalt, dann noch einmal
/pruefen. - Die Vorschau zeigt noch die alte Seite. Dein Browser hat sie zwischengespeichert. Neu laden mit Strg + Umschalt + R (Mac: Cmd + Umschalt + R).
- Beim Online-Stellen öffnet sich ein Browserfenster. Das ist die Anmeldung beim Anbieter, zum Beispiel Netlify. Die bestätigst du selbst, dann geht es in Claude Code weiter.
- Fotos fehlen oder sind Platzhalter. Claude erzeugt keine Fotos von deinem Betrieb. Leg eigene Bilder in den Ordner und sag Claude, wo sie hinsollen.
Bei allen Bauplänen – die sieben häufigsten Stolpersteine
- Claude findet die Dateien des Bauplans nicht.
- Meist ist die ZIP-Datei nicht ausgepackt. Unter Windows sieht eine ZIP aus wie ein Ordner: Rechtsklick → „Alle extrahieren…“. Dann in Claude Code genau diesen ausgepackten Ordner öffnen, nicht „Dokumente“ oder „Downloads“.
- Claude Code fragt nach einem API-Schlüssel oder will, dass du dich anmeldest.
- Melde dich mit deinem normalen Claude-Konto an (Pro oder höher), in Claude Code mit
/login. Für Claude Code selbst brauchst du keinen API-Schlüssel. Nur der Website-Chatbot braucht einen eigenen Schlüssel für deine Website – den trägst du bei Netlify ein. Kopier nie einen Schlüssel in den Chat. - Beim ersten Öffnen kommt die Frage, ob du dem Ordner vertraust.
- Mit Ja bestätigen. Erst dann gelten die Einstellungen des Bauplans. Sonst fragt Claude bei jedem kleinen Befehl um Erlaubnis.
- „python3“ oder „node“ wird nicht gefunden.
- Sag Claude: „Prüf bitte, ob Python bzw. Node.js installiert ist, und hilf mir beim Installieren.“ Am Mac bietet der Rechner Python beim ersten Mal selbst an. Unter Windows beim Installieren von python.org den Haken „Add python.exe to PATH“ setzen und danach Claude Code neu starten.
- Git meldet „Please tell me who you are“.
- Git braucht einen Namen fürs Sicherungsbuch. Sag Claude: „Trag für diesen Ordner meinen Namen und meine E-Mail-Adresse bei Git ein, nur hier, nicht global.“
- Claude sagt, dein Nutzungslimit ist erreicht.
- Das ist dein Claude-Abo, nicht der Bauplan. Claude nennt dir, wann es weitergeht. Bis dahin pausieren, nichts geht verloren.
- Etwas ist schiefgegangen oder sieht falsch aus.
- Jeder Bauplan sichert nach jedem Schritt mit Git. Sag Claude: „Mach den letzten Schritt rückgängig“ – gelöscht wird dabei nichts. Dateien, die plötzlich fehlen oder doppelt sind? Prüf, ob der Ordner in OneDrive oder iCloud liegt, und leg ihn in einen normalen Ordner auf deinem Rechner.
Ich richte den Bauplan „Website-Umbau“ aus dem AWA Campus ein. Das passiert: … Diese Meldung steht da: … Finde die Ursache, erklär sie mir einfach und schlag mir den nächsten Schritt vor. Ändere erst etwas, wenn ich Ja sage.
Vorlage
Hallo, lass uns anfangen. Zeig mir erst an der Beispiel-Website, wie der Umbau läuft.
In alte-website/ liegt meine alte Seite. Übernimm Texte und Bilder, verbessere die Texte und lass alles Veraltete weg. Zeig mir vorher eine Liste, was du übernimmst.
Lass im Kopfbereich Platz für ein Video unseres Signature-Gerichts. Bis ich das Video habe, nimm einen Platzhalter. Bau den Einbau schon fertig: stumm, Endlosschleife, Standbild vorab, bei „Bewegung reduzieren“ nur das Standbild.
So soll es ungefähr aussehen (Bildschirmfoto liegt in bilder/beispiel.png) – aber in unseren Farben und ruhiger.
- dein Briefing und dein angepasster Stil stehen,
- alle Seiten gebaut sind und auf dem Handy gut aussehen,
- der Website-TÜV kein Rot mehr zeigt und ihr beide Checklisten durchgegangen seid,
- Impressum und Datenschutzerklärung aus einem seriösen Generator eingefügt und geprüft sind,
- die Seite online ist – auf Wunsch unter deiner eigenen Domain.
Wörter erklärt
- Briefing: eine kurze Beschreibung, was die Website soll – Ziel, Zielgruppe, Seiten, Stil.
- Website-TÜV: unser kleines Prüf-Werkzeug im Bauplan, das typische rechtliche und technische Stolpersteine sucht.
- Hosting: der Dienst, auf dessen Rechnern deine Website im Internet liegt.
- Domain: deine Adresse im Internet, zum Beispiel mein-betrieb.de.
- Zwei-Klick-Lösung: Ein Video oder eine Karte lädt erst, wenn der Besucher darauf klickt – vorher gehen keine Daten an Google.
- Bewegung reduzieren: eine Einstellung im Gerät für Menschen, denen von Animationen schwindlig wird. Gute Websites beachten sie.