Ich habe in den letzten Wochen mehrere Websites mit Claude Opus 5.5 gebaut: eine Landingpage für eine Software, eine Agentur-Website, zwei Shops und ein kleines Hobbyprojekt. Für jede davon bin ich nach exakt demselben Ablauf vorgegangen. In diesem Artikel zeige ich dir diesen Ablauf in vier Schritten und was ich aus den einzelnen Projekten gelernt habe.
Die vollständigen Prompts zu den Websites findest du gesammelt in der Ressource 5 Website-Prompts zum Nachbauen. Hier geht es um das Vorgehen dahinter.
Warum KI-Websites oft nach AI Slop aussehen
Als „AI Slop“ bezeichnet man austauschbare, offensichtlich KI-generierte Inhalte. Bei Websites heißt das: der immer gleiche Aufbau mit Hero, drei Feature-Kacheln und Preistabelle, dazu die immer gleichen Farbverläufe.
Das liegt nicht daran, dass die Modelle kein Design können. Wenn du Claude sagst „Bau mir eine Landingpage“, dann hat er kaum Input und baut die Seite allein auf Basis seiner Trainingsdaten. Das Ergebnis ist dann eben Standard.
Opus 5.5 hat hier einen deutlichen Schritt nach vorne gemacht. Zaubern kann das Modell trotzdem nicht. Es braucht einen strukturierten Ablauf und im besten Fall visuellen Input von dir. Das gilt genauso für jedes andere aktuelle Modell: Je besser dein Input, desto weniger landest du beim Durchschnitt.
Der Prozess in 4 Schritten
| Schritt | Was du tust | Werkzeuge |
|---|---|---|
| 1. Inspiration | Designs sammeln, Trends und Best Practices erkennen | Dribbble, Pinterest, Awwwards, Mobbin |
| 2. Designsystem | Farben, Schriften, Komponenten festlegen lassen | Claude Design |
| 3. Bilder | Passende Bilder suchen oder generieren | lizenzfreie Bibliotheken, Bildgeneratoren |
| 4. Entwickeln | Seite bauen und Sektion für Sektion verfeinern | Claude Code, Three.js, GSAP |
Schritt 1: Inspiration sammeln
Du hast vermutlich schon eine Idee, für welches Projekt du eine Website brauchst. Bevor du Claude Code startest, schaust du dir an, was es schon gibt. Es geht nicht darum, eine Seite eins zu eins nachzubauen. Du willst erkennen, was gerade gute Praxis im Webdesign ist, und das für dein Projekt übernehmen.
Meine Anlaufstellen:
- Dribbble: Nach wie vor eine meiner Lieblingsplattformen. Kostenlos, mit unzähligen Webdesigns.
- Pinterest: Auch hier findest du schnell gute Designs, die du dir abspeichern kannst.
- Awwwards: Hier werden Websites für Designpreise nominiert. Das ist wirklich Top-Qualität, und du kannst dir die Seiten direkt live anschauen.
- Mobbin: Kostenpflichtig, aber mit tausenden Beispielen für Mobile-Apps, Web-Apps und Websites. Mobbin hat sogar einen eigenen MCP-Server. Damit verbindest du Claude direkt mit der Bibliothek, und er kann die Designs als Vorlage nutzen.
Deine Funde sammelst du an einem Ort, zum Beispiel auf einem Whiteboard in Figma oder Miro oder direkt in einem Claude-Projekt.
Schritt 2: Ein Designsystem entwickeln lassen
Ein Designsystem ist das Regelwerk für das Aussehen deines Produkts: Farben, Schriften, Abstände, Komponenten und wie sie eingesetzt werden. Ich lasse es mir von Claude Design erstellen, das du unter claude.ai/design findest.
Dort legst du im Bereich „Designsystem“ ein neues System an. Du beschreibst dein Projekt und gibst alles mit, was du hast: bestehenden Code, Figma-Dateien oder einfach lose Bilder. Wenn du schon eine Anwendung hast und nur noch eine Landingpage brauchst, verknüpfst du einfach den Code.
Heraus kommt ein vollständiges Designsystem mit allen Dos and Don'ts. Für mein Demoprojekt, eine Reservierungs- und Gästemanagement-Software für unabhängige Restaurants, enthielt es Farben samt Regeln zum Einsatz, ein Logo, kleine Mockups der Web-App und einzelne Komponenten.
Der Vorteil: Das System nutzt du nicht nur für die Landingpage, sondern auch für Social-Media-Grafiken, Präsentationen oder App-Prototypen.
Schritt 3: Passende Bilder besorgen
Brauchst du Bilder, kannst du sie generieren lassen oder auf lizenzfreie Bibliotheken zurückgreifen. Ich habe mich an Bildern aus einer lizenzfreien Bibliothek orientiert und mir passende Motive für mein Projekt herausgesucht.
Für einen der Shops habe ich zusätzlich Produktbilder generiert, dazu gleich mehr.
Schritt 4: Mit Three.js und GSAP entwickeln
Damit sich eine Seite nicht wie eine Standard-Website anfühlt, sondern wie eine digitale Experience, gebe ich Claude zwei Werkzeuge mit. Beides sind JavaScript-Bibliotheken mit unterschiedlichen Aufgaben:
- Three.js bringt 3D in den Browser: 3D-Modelle, Kameras, Licht und Schatten. Damit baust du ganze 3D-Szenen oder etwa Produktkonfiguratoren, bei denen ein technisches Produkt auseinandergezogen wird und die einzelnen Bauteile sichtbar werden.
- GSAP kümmert sich um Bewegung und Abläufe. Du steuerst Animationen mit präzisem Timing, lässt Effekte nacheinander ablaufen oder koppelst sie ans Scrollen. So entstehen weiche Übergänge und „Scrollytelling“, also eine Geschichte, die sich beim Scrollen Stück für Stück erzählt.
Oft arbeiten beide zusammen: Three.js baut die Szene, GSAP steuert den Ablauf beim Scrollen. Du musst die Bibliotheken nicht selbst beherrschen. Es reicht, Claude Code anzuweisen, sie zu verwenden.
Dann startest du in Claude Code mit deinem ersten Prompt und holst dein Designsystem dazu. Das geht über den Design-Sync-Skill. Du sagst einfach:
Hol mir mein Designsystem aus Claude Design.
Claude synchronisiert es und hält sich beim Bauen an deine Vorgaben.
Wichtig: So eine Seite entsteht nicht mit einem einzigen Prompt. Sie braucht viele kleine Prompts und viele kleine Optimierungen, bis das Ergebnis stimmt.
Was ich aus den Beispielen gelernt habe
SaaS-Landingpage: Eine Geschichte statt eines Mockups
Für die Restaurant-Software wollte ich bewusst keine klassische Software-Seite mit einem Produkt-Mockup in der Mitte. Stattdessen läuft man beim Scrollen durch eine 3D-Szene, gebaut mit Three.js und GSAP: vom Abend vor dem Restaurant hinein in den vollen Gastraum, zur Vogelperspektive mit freien und belegten Tischen, bis zu einer Familie, deren Anlass und Allergien die Software kennt.
So versetzt sich der Besucher direkt in den Alltag, den die Software erleichtert. Erst danach folgen die inhaltlichen Abschnitte und die Möglichkeit, eine Demo zu vereinbaren.
Eine bewusste Entscheidung war der Illustrationsstil mit Low-Poly-Elementen, also 3D-Objekten mit wenigen Details. Die Seite läuft später auf den unterschiedlichsten Geräten. Jeder Browser muss sie einwandfrei darstellen können, ohne dass sie zu viel Leistung zieht.
Software-Agentur: Den eigenen Prozess sichtbar machen
Gleicher Ablauf, anderer Use Case: Eine Softwareagentur visualisiert ihren Produktionsprozess als „Software Factory“. Kleine Bots durchlaufen die Stationen Spezifikation, Architektur, Planung, Implementierung, Qualitätsprüfung und Deployment. Jede Station ist interaktiv, man kann den Bots bei der Arbeit zuschauen, rechts unten steht jeweils die Erklärung zum Schritt.
Nach der Szene geht die Seite in eine normale Website über, mit Prozessbeschreibung und Kontaktanfrage.
E-Commerce: Erst die Assets, dann die Seite
Für eine fiktive Marke für Dosen-Cocktails habe ich einen Zwischenschritt eingebaut. Die Produktbilder habe ich mir mit ChatGPT generieren lassen, ausgehend von Fotos aus einer lizenzfreien Bibliothek. Praktisch dabei: Die Produkte kommen direkt freigestellt heraus.
Für den Hero wollte ich einen Parallax-Effekt über eine Tiefenkarte (Depth Map). Dabei bekommt ein Foto eine räumliche Wirkung, weil Vorder- und Hintergrund unterschiedlich auf die Maus reagieren. Damit Claude Code die Animation gut umsetzen kann, habe ich die Bildtiefe vorher visualisiert. Der Effekt ist subtil, aber nicht trivial: Gesichter dürfen dabei nicht verzerren.
Den Rest hat Claude sehr spielerisch umgesetzt: Produktdetails zum Anklicken, ein Warenkorb, in den die Dosen hineinfliegen, ab zwei Drinks ein Gratis-Glas, Rezepte und ein kleines Spiel, bei dem man ein Glas bis zum Eichstrich füllen muss. Eine interaktive Bilderwand hat Claude auch noch eingebaut. Die würde ich ehrlich gesagt weglassen. Für einen ersten Entwurf ist die Seite aber sehr gelungen.
Notizbuch-Shop: Claude bringt eigene Ideen ein
Im zweiten Shop-Beispiel geht es um Notizbücher. Im Header schwebt ein 3D-Notizbuch, ebenfalls mit Three.js gebaut. Beim Scrollen öffnet es sich, und ein Stift zeichnet Skizzen auf die Seiten, etwa einen Leuchtturm. Besucher können selbst mitzeichnen, umblättern und die Farbe des Notizbuchs wechseln. Wählt man ein Raster wie Punktraster oder Karo, passt sich der Hintergrund der ganzen Seite an.
Spannend war, was Claude ohne Vorgabe ergänzt hat: das Zeichnen auf den Seiten und eine technische Zeichnung des Notizbuchs mit allen Abmessungen. Das sind genau die Ideen, die eine Seite von der Masse abheben.
Hobbyprojekt: Ein Awwwards-Design als Lernobjekt
Zum Schluss habe ich versucht, ein für Awwwards nominiertes Projekt von Ravi Klaassens nachzubauen, bei dem Filme als CDs durch das Bild rotieren. Meine Version zeigt Serien statt Filme: Die CDs lassen sich durchscrollen, bewegen und anklicken, um Details zu öffnen.
Ganz rund ist es noch nicht. Die Detailansicht müsste ich noch optimieren. Als Übung zeigt es aber gut, wie weit du mit einer starken Vorlage kommst. Wenn du so etwas machst, gib dem Original die Ehre und veröffentliche keinen Klon als eigene Arbeit.
Vor dem Livegang: Consent-Banner nicht vergessen
Bevor du so eine Seite veröffentlichst, noch ein Punkt, der oft untergeht. Sobald du externe Dienste einbindest, etwa Analytics, Session-Recordings oder Error-Tracking, brauchst du einen Consent-Banner. Darüber geben Besucher ihr Einverständnis zur Verarbeitung ihrer Daten. Ohne Einwilligung darfst du diese Daten nicht speichern.
Dafür gibt es Consent-Management-Plattformen, die du als Code-Snippet einbindest. Das Einbauen kannst du deinem Coding Agent überlassen.
Einordnung: Der Input entscheidet
Opus 5.5 hebt die Messlatte für KI-Webdesign spürbar an. Am Ende zählt aber, wie dein Arbeitsablauf aussieht und wie gut der Input ist, den du dem Modell gibst. Inspiration, Designsystem und gute Bilder sind kein Extra, sondern der Grund, warum die Ergebnisse nicht nach KI aussehen. Das gilt für jedes Modell, das nach Opus 5.5 kommt.
Wenn du die Beispiele selbst ausprobieren willst, findest du alle Prompts in den Website-Prompts zum Nachbauen. Bei Landingpages reicht ein guter Prozess für das Design. Sobald aus der Website ein echtes Produkt mit Login, Bezahlung und Daten wird, brauchst du zusätzlich einen strukturierten Entwicklungsprozess, wie ich ihn in Vibe Coding vs. Spec-Driven Development beschreibe.
