Wenn man sich auf Tools verlässt, kann man schnell etwas bekommen, das "okay" aussieht. Das Ergebnis wirkt jedoch oft generisch und kommt einem bekannt vor. Das ist die Essenz des "KI-Looks" und genau hier liegt der größte Unterschied.
Basierend auf meiner Erfahrung, drei verschiedene Websites mit unterschiedlichen Persönlichkeiten aus derselben Grundlage zu erstellen – unter Verwendung einer auf Claude Code basierenden Produktionslinie (das makeLP-Projekt) – werde ich kurz eine reproduzierbare Methode zusammenfassen.
Eine Fabrik, kein einmaliger Zaubertrick
Selbst wenn man einmal etwas Gutes produziert, wird es kein wertvolles Asset, wenn es nicht reproduzierbar ist. Deshalb durchläuft es vier Phasen.
Produktion → Qualität → Verifikation → Verbesserung.
Es gibt vier Arten von unterstützenden Komponenten:
・Skills: Methodische Vorlagen (motion-lp-builder für die Erstellung, frontend-design für Anti-KI-Prinzipien, bulk-categorize für die Massenklassifizierung)
・Sub-Agenten: Spezialisierte Rollen (lp-visual-verifier für Zeichnungen und Kritik, design-reference-analyst zum Umwandeln von Referenzen in Spezifikationen, bulk-classifier für Klassifizierung)
・Referenzbibliothek: Ein Regal mit 4.074 SANKOU-Einträgen, kategorisiert nach "Website-Typ × Branche"
・Sich weiterentwickelnde Regeln: CLAUDE.md (Standardablauf/Disziplin) + Memory (um Kritiken dauerhaft zu machen)
Vorbereitung und Voraussetzungen
Die Grundlage ist festgelegt auf Vite + React + GSAP (ScrollTrigger) + Lenis. Der Schlüssel ist, "den Scroll-Fortschritt direkt mit der Produktion zu verknüpfen." Die Scroll-Menge wird zum Input für die Darstellung (Hintergrundvideo Frame Scrubbing, Pinning, Parallax, Eintritts-Enthüllungen).
Es gibt zwei Arten von Assets, die je nach Thema ausgewählt werden:
・KI-Generierung (Higgsfield): Wenn fotorealistische Bilder wie von einem Resort benötigt werden
・Code-Zeichnung (SVG/Canvas/CSS): Dies fühlt sich für B2B und Technologie "richtiger" an. Keine Credits erforderlich
Im Zweifelsfall entscheidet man basierend auf "Soll es ein Foto oder ein Diagramm sein?"
SCHRITT 1: Produktion
Die Reihenfolge ist entscheidend. Nicht sofort mit dem Schreiben beginnen; zuerst ein Marken-Briefing (wem verspricht man was, Farbe, Typografie, Bewegungsintensität) auf einer Seite festigen. Selbst bei gleicher Grundlage ist es das Briefing, nicht der Code, das die Ausgabe differenziert.
Wenn man sich für KI-Generierung entscheidet, die Credit-Disziplin einhalten:
- Guthaben prüfen
- Vorab-Schätzung mit get_cost einholen
- Zuerst ein Hero-Bild erstellen
- Weitere unter Verwendung dieses als Referenz generieren, um die Textur zu vereinheitlichen
- Auf Fertigstellung warten und herunterladen.
Bei der Implementierung die Produktion direkt mit dem Scrollen verknüpfen (Frame Scrubbing/Pin/Parallax/Enthüllung). Und immer robust machen: Statischen Fallback mit prefers-reduced-motion, sicherstellen, dass npm run dev auch bei fehlenden Assets funktioniert, und Stromsparmodus für Touch- und Canvas-Bereiche berücksichtigen.
SCHRITT 2: Qualität – Abkehr von der Massenproduktion
Den "KI-Look" dekonstruieren und in sechs Teilen eliminieren:
- Übermäßige Verwendung von Verläufen (insbesondere Text- und Lila-Verläufe) → Auf eine einzelne Farbe + einen Akzent reduzieren
- Nur Standardteile in einer Standardreihenfolge aneinanderreihen → Mit einem einzigartigen Konzept für die Struktur selbst erstellen (z. B. die gesamte Seite als Workflow-Canvas)
- Abgerundete "aufgeblähte" Zahlen → Konkret sein (z. B. "600 Rechnungen/Monat → 0" vorher/nachher)
- Emoji-Symbole → Nicht verwenden. Falls nötig, SVGs zeichnen
- Farbbalken nur am linken Rand von Blöcken → Nicht verwenden. Farbe in Flächen, Abständen und Typografie einsetzen
- Alles symmetrisch, gleichmäßig, abgerundet und mit weichen Schatten → Asymmetrie und Variationen in der Randstärke einführen
Das Prinzip: Farbschema ist eine einzelne Farbe + ein Akzent, Typografie wird mit einer charakteristischen Schriftart vorangetrieben, Stärke in den Abständen, und Bewegung um der "Fokussierung" willen.
SCHRITT 3: Verifikation – Build-Bestätigung ≠ Gut
Selbst wenn der Code bestätigt wird, können Pins, Scrubs und Enthüllungen auf dem tatsächlichen Bildschirm defekt sein. Daher startet der lp-visual-verifier einen Dev-Server, steuert einen vorhandenen Chrome/Edge über puppeteer-core, rendert und erfasst jeden Abschnitt und "kritisiert ihn mit dem Auge."
Drei wichtige Punkte:
・Der Verifizierer behebt den Code nicht (um die Ursache zu isolieren)
・Das Erfassen mit prefers-reduced-motion ermöglicht die statische Visualisierung von gepinnten Bereichen und unteren Abschnitten, die auf Enthüllungen warten
・Immer auch in mobilen Breiten erfassen
Schon eine einzige Runde Kritik → Korrektur hebt die Qualität deutlich. Gib dich nicht mit einem erfolgreichen Build zufrieden.
SCHRITT 4: Verbesserung + Referenzbibliothek
Der design-reference-analyst liest Referenzseiten und übersetzt sie in "gemeinsame Muster" und "Verbesserungsspezifikationen (Wo und wie)" – nicht nur in Eindrücke. Die sankou-reference-Bibliothek enthält 4.074 Einträge, die auf zwei Achsen klassifiziert sind, sodass man sofort "nur Beispiele für Tourismus × spezielle LP" abrufen kann (der Inhalt wird aus den Notizen in jeder Zeile deutlich).
Die Massenklassifizierung selbst ist ebenfalls vorlagenbasiert (bulk-categorize: aufteilen → Sub-Agenten parallelisieren → zusammenführen → korrigieren).
Regeln, die wachsen
Das ist die größte Entdeckung. Die Kritiken des Kunden nicht mit einer einmaligen Korrektur enden lassen, sondern zu dauerhaften Regeln erheben.
Beispiel:
"Emoji-Symbole sehen nach KI aus" "Farbbalken links sehen nach KI aus" → Diese in Memory und CLAUDE.md zu verbotenen Regeln machen → Automatisch in jeder darauffolgenden Website vermeiden.
Mit anderen Worten: Je öfter man es nutzt, desto mehr verschwindet der "KI-Look." Das Vorhandensein von Skills und Sub-Agenten ermöglicht zudem eine einfache horizontale Erweiterung.
Drei verschiedene Websites erstellen
・AZURE BAY (Sommer-Pool-LP / B2C): Türkis + Gold. Von Higgsfield generiert. Frame-Scrubbing-Pool-Video beim Scrollen.
・FLOWGEAR (n8n-Implementierungssupport / B2B): Einzelne Korallenfarbe + flach, keine Bildgenerierung. Die gesamte Seite ist ein n8n-Workflow-Canvas. Konkrete Vorher/Nachher-Werte statt aufgeblähter Zahlen.
・STATIK (Experimentallabor für ein fiktives Studio): Fast Schwarz + Mono + eine Säurefarbe. Canvas-Kinetik-Textraster + benutzerdefinierter Cursor. Ein immersives Erlebnis, nicht nur eine LP.
Die Gemeinsamkeiten sind "eine einzelne Farbe + ein Akzent," "mit konkreten Angaben sprechen" und "Durchbruch durch ein einziges Konzept." Die Wahl der Mittel basierend auf dem Thema ist der erste Schritt weg vom Durchschnitt.
Minimale Konfiguration zum Selberbauen
- Die scroll-verknüpfte Grundlage vorlagenbasiert gestalten (nicht jedes Mal von Grund auf neu schreiben)
- Anti-Massenproduktions-Prinzipien in ein einziges Regelblatt aufnehmen (keine Verläufe/Emojis/linke Balken...)
- Nach der Erstellung immer den tatsächlichen Bildschirm erfassen und betrachten
- Jedes Mal Kritiken zu Regeln erheben
Häufige Fallstricke und Gegenmaßnahmen: Credit-Verschwendung (zuerst Hero + Vorab-Schätzung), Verifikationslücken (tatsächliche Bildschirme erfassen), Bewegungszugänglichkeit (reduced-motion) und Brüche auf mobilen Geräten (immer in verschiedenen Breiten erfassen).
Zusammenfassung
KI ist eine "schnelle Hand," kein "Auge."
In dem Moment, in dem man das Auge (Verifikation) und die Regeln (Lernen) in das System integriert, befreien sich KI-erstellte Websites vom KI-Look.
