Wie ich eine Website in Minuten mit Claude Opus neu gestaltet habe

Wie ich eine Website in Minuten mit Claude Opus neu gestaltet habe

Vor zwei Wochen saß ich um 23 Uhr an meinem Schreibtisch mit einem Problem. Ein Kunde benötigte seine komplette Website von einem einfachen hellen Theme zu einem polierten dunklen Design konvertiert, eine brandneue Services-Seite von Grund auf gebaut, und ein vollständiges SEO-Audit mit allen deployte Korrekturen — alles vor einem Montagmorgen-Meeting. Der alte ich hätte eine Nachtschicht durchgezogen, CSS durchgekämpft, HTML geschrieben, Lighthouse ausgeführt und Meta-Tags manuell gepatcht.

Stattdessen öffnete ich Claude Code, tippte drei Prompts und ging schlafen.

Als ich aufwachte, war die Seite live. Dunkles Theme mit perfekten Kontrastverhältnissen. Eine Services-Seite, die die bestehende Designsprache bis hin zum Abstand matched. Meta-Tags, Sitemap, robots.txt, Favicon, Open Graph-Karten — alles vorhanden. Die gesamte Transformation benötigte Claude etwa zwölf Minuten aktive Verarbeitungszeit. Mein gesamter Hands-on-Aufwand? Vielleicht neunzig Sekunden Tippen.

Diese Nacht veränderte mein Denken über Web-Entwicklungs-Workflows. Nicht weil die KI etwas Magisches tat — sondern weil sie enthüllte, wie viel von "Webentwicklung" eigentlich repetitive Entscheidungsfindung ist, die ein gut instruierter Agent übernehmen kann.

Das Problem, das niemand über Website-Wartung zugibt

Ein schmutziges Geheimnis, das die meisten Entwickler nicht laut sagen: eine Website zu warten ist langweilig. Eine Website zu bauen? Das ist aufregend. Aber sechs Monate später, wenn der Kunde fragt, von Light Mode zu Dark Mode zu wechseln, eine Seite hinzuzufügen und "das SEO-Zeug zu fixen" — das ist die Arbeit, die niemand machen will.

Es ist keine schwere Arbeit. Das ist das Frustrierende daran. Genau diese Art von Arbeit ist es, für die KI-Agenten gebaut sind. Nicht die kreativen Architekturentscheidungen. Die konsistente, musterfolgende Ausführungsarbeit.

Was Claude Opus 4.6 anders macht

Claude Opus 4.6 ist nicht nur ein schlauerer Chatbot. Wenn du in Claude Desktop von Chat-Modus zu Code-Modus wechselst, änderst du das Interaktionsmodell grundlegend. Im Chat-Modus gibt Claude Antworten. Im Code-Modus führt Claude Aktionen aus.

Als ich Claude aufforderte, das Theme meiner Website zu konvertieren, gab es mir keine CSS-Vorschläge. Es öffnete die tatsächlichen HTML- und CSS-Dateien in meinem Git-Repository, analysierte das bestehende Farbschema, kartierte jeden Farbtoken zu seinem Dunkelmode-Äquivalent und zeigte mir ein Diff der Änderungen.

Zwei Skills machten das möglich:

Der Front-end Design Skill — offiziell von Anthropic gepflegt, über 100.000 Installationen. Gibt Claude tiefes Wissen über Design-Systeme, Farbtheorie und Barrierefreiheitsstandards.

Der SEO Audit Skill — Community-Skill mit ca. 19.000 Installationen. Verwandelt Claude in einen umfassenden SEO-Analysierer.

Claude als Website-Agent einrichten — Schritt für Schritt

Schritt 1: Website in ein Git-Repository bringen. Claude benötigt Dateisystemzugriff über ein Git-Repo.

Schritt 2: Claude Desktop installieren und zu Code-Modus wechseln. Das ist der Schritt, den die meisten Menschen überspringen.

Schritt 3: Arbeitsverzeichnis auf den lokalen Klon deines Git-Repositories setzen.

Schritt 4: Die claude.md-Datei verstehen. Denke daran als Bedienungsanleitung für Claude über dein spezifisches Projekt. Diese Datei bleibt zwischen Sitzungen bestehen.

Schritt 5: Skills installieren.

/install-skill frontend-design
/install-skill seo-audit

Das Redesign: vom hellen zum dunklen Theme in Minuten

Ich begann mit einem einfachen Prompt: "Konvertiere diese Website vom aktuellen hellen Theme zu einem modernen dunklen Theme mit perfektem Kontrast."

Claude scannte jede HTML- und CSS-Datei, identifizierte das Farbpalette und begann Änderungen vorzunehmen.

Der Hintergrund wechselte von Weiß (#FFFFFF) zu einem tiefen Anthrazit (#1a1a2e). Text ging zu gebrochenem Weiß (#e0e0e0). Was mich beeindruckte, war die Konsistenz. Jede einzelne Komponente wurde aktualisiert.

Die gesamte Theme-Konvertierung dauerte etwa vier Minuten.

Eine Services-Seite hinzufügen ohne eine Zeile zu schreiben

Prompt: "Erstelle eine neue Services-Seite, die mit dem bestehenden Design konsistent ist. Aktualisiere die Navigation auf beiden Seiten."

Claude analysierte die bestehenden Seiten und replizierte alles für die neue Services-Seite. Semantisches Markup wurde automatisch hinzugefügt.

Dauer: etwa drei Minuten.

Das SEO-Audit, das fand, was ich übersah

Kritische Probleme:

• Kein robots.txt-File
• Keine XML-Sitemap
• Fehlendes Favicon
• Fehlende Meta-Beschreibungen

Das generierte robots.txt:

User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

Gesamtzeit für vollständiges SEO-Audit und Implementierung: etwa fünf Minuten.

Das eine, was Claude falsch gemacht hat

Die Favicon-Implementierung war technisch korrekt, aber praktisch unvollständig. Claude fügte das <link rel="icon">-Tag hinzu und referenzierte einen favicon.ico-Pfad. Das Problem? Die tatsächliche Favicon-Bilddatei wurde nicht erstellt.

Das ist eine subtile aber wichtige Fehlerklasse bei KI-Agenten. Der Code war syntaktisch perfekt. Aber das eigentliche Asset fehlte.

Nach meinem Hinweis generierte Claude sofort ein einfaches SVG-Favicon. Problem behoben in dreißig Sekunden.

Warum das die Kalkulation für Solo-Entwickler verändert

Das ist eine ca. 30-40-fache Beschleunigung. Wenn ein Kunde nach einer Theme-Änderung fragt und du weißt, dass es vier Minuten statt drei Stunden dauert, machst du es sofort. Diese Reaktionszeitdifferenz verändert die Kundenbeziehung vollständig.

Was ich beim nächsten Mal anders machen würde

• Claude mehr Kontext im Voraus geben — spezifische Markenfarben
• Diffs überprüfen, nicht Seiten — der Git-Diff zeigt genau, was sich geändert hat
• Zwischen Prompts committen — gibt saubere Rollback-Punkte
• SEO-Audits nicht blind vertrauen — mit eigenen Kenntnissen abgleichen
• Die claude.md-Datei aktuell halten

Dein nächster Schritt

Richte Claude Code mit diesen zwei Skills dieses Wochenende ein. Probiere den Workflow auf einer Seite eines Projekts aus. Die zwölf Minuten werden dich schneller überzeugen als alles, was ich hier schreiben kann.