5 Claude Code-Hacks, die Websites professionell aussehen lassen
Vor drei Wochen bat mich ein Freund, seine neue Landing Page zu reviewen. Er hatte ein ganzes Wochenende damit mit Claude Code verbracht. Und um ehrlich zu sein — sie sah aus wie jede andere KI-generierte Website, die ich je gesehen hatte. Derselbe Gradient-Hero-Bereich. Dasselbe Cookie-Cutter-Card-Layout. Dieselbe "von KI gebaut"-Energie, die Besucher abspringen lässt, bevor sie überhaupt scrollen.
Ich sagte das natürlich nicht. Ich sagte "es ist ein guter Anfang" — weil ich kein Monster bin.
Aber hier ist, was ich dachte: Dieser Typ benutzte eines der mächtigsten KI-Coding-Tools auf dem Planeten und landete trotzdem bei etwas, das "Template" schreit. Nicht weil Claude Code es nicht besser kann. Weil niemand ihm die fünf Setup-Tricks beigebracht hat, die einen generischen KI-Build von etwas trennen, für das ein Kunde tatsächlich zahlen würde.
Warum die meisten Claude Code-Websites gleich aussehen
Das Problem ist Kontext — oder genauer gesagt, das vollständige Fehlen davon.
Wenn du VS Code öffnest und tippst "baue mir eine Landing Page für mein SaaS-Produkt," fragst du eine unglaublich mächtige KI, mit verbundenen Augen zu arbeiten. Sie kennt deine Markenfarben nicht. Sie kennt deine Designpräferenzen nicht. Also wählt sie die sichere Option. Und "sicher" bedeutet in KI-Begriffen generisch.
Hack 1: Eine CLAUDE.md-Datei als persönliches Design-Brief
Das Wirksamste, was du für die Ausgabequalität von Claude Code tun kannst: eine gute CLAUDE.md-Datei einrichten.
# Projektübersicht
[Kurze Beschreibung des Projekts und der Zielgruppe]
# Tech Stack
- Framework: [z.B. Next.js 14, React, Vanilla HTML/CSS]
- Styling: [z.B. Tailwind CSS]
# Designregeln
- Schriftart: [Name + Fallback-Stack]
- Primärfarbe: [Hex-Code]
- Sekundärfarben: [Hex-Codes]
- Eckenradius: [z.B. 8px für Buttons]
# Verbotene Muster
- KEINE Stock-Foto-Platzhalterbilder
- KEINE generischen Gradient-Hintergründe es sei denn explizit angefordert
- KEIN schablonenhaftes Kartenraster für den Hero-Bereich
Die verbotenen Muster sind genauso wichtig wie die Designregeln.
Hack 2: Den Front-End Design Skill installieren
/install-skill frontend-design
Einmal installiert, versteht Claude Code visuelle Hierarchie, Weißraum, Typografieskala und Farbverhältnisse. Die Kombination aus einer gut eingerichteten CLAUDE.md plus dem Design-Skill produziert Ausgaben, die merklich besser sind als jede der beiden allein.
Hack 3: Großartige Websites als visuelle Referenzen screenshotten
Anstatt Claude Code zu beschreiben, wie deine Site aussehen soll, zeige es ihm.
Dieser Screenshot zeigt den Hero-Bereich einer Website, die ich als visuelle Referenz verwende.
Ich versuche nicht, das zu kopieren — ich möchte dieselbe visuelle Dichte, Typografieskala
und Komponentenabstände erfassen. Wende das auf den Hero-Bereich meines Projekts an
mit [deine Markendaten einsetzen].
Claude Code ist bemerkenswert gut darin, abstrakte Designprinzipien zu extrahieren und sie in einem anderen Markenkontext anzuwenden.
Hack 4: Individuelle Komponentenintegration aus Design-Bibliotheken
Meine bevorzugte Ressource dafür ist 21st.dev — eine Bibliothek moderner, produktionsbereiter UI-Komponenten.
Ich möchte diese Glassmorphismus-Karte in meinen Pricing-Bereich integrieren.
Passe die Farben an meine Markenpalette an (#2563eb primär, weißer Hintergrund)
und stelle sicher, dass sie auf mobilen Bildschirmen responsive ist.
[Quellcode einfügen]
Hack 5: Eine iterative Screenshot-Feedback-Schleife
Die meisten Menschen generieren Code, öffnen den Browser, beurteilen visuell und tippen dann einen Follow-up-Prompt. Das funktioniert, aber es ist langsam.
Hack 5 schließt die Feedback-Schleife, indem Claude Code buchstäblich die Seite zeigt, die es generiert hat:
- Claude Code generiert deinen Komponentencode
- Du renderst ihn in einem Browser
- Du machst einen Screenshot der gerenderten Komponente
- Du gibst den Screenshot mit spezifischem Feedback an Claude Code zurück
Hier ist ein Screenshot der gerenderten Komponente. Drei Dinge zum Verbessern:
1. Die Überschrift fühlt sich zu klein im Verhältnis zum Rest der Sektion an
2. Es gibt zu wenig Abstand über dem CTA-Button
3. Auf Mobilgeräten stapeln sich die Karten vertikal, verlieren aber ihren Schatteneffekt
Kannst du diese drei Probleme beheben?
Die Zahlen, die für sich sprechen
Nach der Anwendung aller fünf Hacks auf acht Kundenprojekte:
- Erste Revisionsannahmequote: von 40% auf 78% gestiegen
- Durchschnittliche Revisionsrunden: von 4,2 auf 2,1 gesunken
- Durchschnittliche Frontend-Projektzeit: um 35% reduziert
Was ich als Erstes bauen würde
Öffne VS Code. Installiere die Claude Code-Erweiterung. Erstelle einen neuen Projektordner. Schreibe eine CLAUDE.md-Datei. Verbringe 30 Minuten damit, sie spezifisch und meinungsstark zu machen.
Baue dann eine Seite. Sieh, wie viel besser die Ausgabe ist im Vergleich zu Prompts ohne CLAUDE.md. Das allein wird dich überzeugen.
Füge danach den Front-End Design Skill hinzu. Baue dieselbe Seite neu. Vergleiche. Jede Ebene multipliziert sich. Du wirst den Unterschied bei jedem Schritt spüren.
