Mit Claude Code lassen sich in wenigen Minuten Premium-Websites bauen, die in puncto Design und Funktion mit professionellen Agenturarbeiten mithalten. In dieser Anleitung zeige ich dir Schritt für Schritt, wie du dein Setup vorbereitest, eine eigene Website per Prompt erstellst und sogar bestehende Award-Winning-Websites klonst.
Was du am Ende erreichen wirst
- Eigene Premium-Websites mit cinematischen 3D-Scrolleffekten generieren
- Bilder und Videos direkt aus Claude Code heraus erzeugen (ohne Tool-Wechsel)
- Bestehende Websites strukturell klonen und für dein Branding anpassen
1. Voraussetzungen & Setup
Bevor es losgeht, brauchst du drei Bausteine:
1.1 Claude Desktop + Pro Abo
Lade die Claude Desktop App herunter und stelle sicher, dass mindestens das Claude Pro Abo aktiv ist. Das ist die Basis, ohne die Claude Code und MCP-Integrationen nicht laufen.
1.2 Claude Code aktivieren
Claude Code ist die Coding-Umgebung in Claude Desktop. Öffne die App, lege einen neuen Projektordner an (z. B. Claude-Code-Websites) und wähle ihn in der Session als Arbeitsverzeichnis.
1.3 Higgsfield MCP verbinden
Damit Claude Code Bilder und Videos für die Website direkt generieren kann, brauchst du den Higgsfield MCP:
- In Claude Desktop auf Einstellungen → Anpassen → Konnektoren gehen.
- Auf „+ Benutzerdefinierten Connector hinzufügen" klicken.
- Namen vergeben:
Higgsfield. - Die MCP-URL von Higgsfield einfügen und auf Hinzufügen klicken.
Sobald der Connector grün ist, kann Claude Code Higgsfield-Modelle für Video- und Bildgenerierung nutzen.
Wichtig: Für die Bild- und Videogenerierung benötigst du zusätzlich ein aktives Higgsfield-Abo. Ohne Abo kann der MCP zwar verbunden werden, aber keine Medien erzeugen.
2. Den Scroll-Cinematic-Skill installieren
Damit die Ergebnisse wirklich auf Profi-Niveau sind, empfiehlt sich ein vorgefertigter Skill für cinematische Scroll-Effekte. Dieser Skill ist eine ZIP-Datei mit:
- der eigentlichen Skill-Beschreibung (Aufbau, Sektionen, Animationsregeln)
- Templates für typische Hero- und Feature-Sektionen
- vorgefertigten Skripten für GSAP/ScrollTrigger-Effekte
So bindest du den Skill ein:
- ZIP entpacken und den Skill-Ordner in dein Projektverzeichnis (
Claude-Code-Websites) legen. - In Claude Code eine neue Session starten – der Skill wird automatisch erkannt und im Verlauf als „Cinematic Scroll Effect Skill" angewendet.
Scroll Cinematic Skill herunterladen
3. Website per Prompt erstellen
Jetzt der eigentliche Spaß. In Claude Code eine New Session öffnen, Projektordner auswählen und folgenden Prompt-Aufbau nutzen:
Erstelle mir eine moderne Website für [THEMA] mit 3D-Scroll-Effekten.
- Branche: [z. B. Tennis-Onlineshop]
- Stil: dark, premium, cinematic
- Hauptfarben: [z. B. Schwarz, Neon-Grün]
- Brand: [Name]
- Sektionen: Hero, Produkte, Story, Features, CTA, Footer
- Nutze den Cinematic Scroll Skill und generiere Bilder/Videos über Higgsfield.
Profi-Tipp: Lass dir den Prompt vorher von Claude selbst optimieren. Je präziser Farben, Tonalität und Sektionen beschrieben sind, desto besser das Ergebnis beim ersten Versuch.
Claude Code geht dann Schritt für Schritt vor:
- Skill wird geladen
- Higgsfield wird nach dem besten Text-zu-Video-Modell befragt
- Bilder, Videos und Code werden generiert
- Die Website wird in deinem Projektordner gespeichert und kann lokal geöffnet werden
Die Generierung dauert je nach Umfang ein paar Minuten – am Ende hast du eine voll funktionsfähige Seite inklusive Medien.
4. Bestehende Websites klonen
Die zweite, fast noch stärkere Methode: Klonen einer bestehenden Website als Vorlage.
4.1 Inspiration finden
Plattformen wie Award Winning Websites sind perfekt für Vorlagen. Filtere nach Kategorie (E-Commerce, Food & Drink, Film & TV …) und wähle eine Seite mit Effekten, die du übernehmen willst.
4.2 Klon-Prompt in Claude Code
Erstelle mir eine Website, die genauso aufgebaut ist wie die folgende –
inklusive aller Scroll-Effekte, Animationen und Sektionen.
Passe Inhalte, Bilder und Branding für [DEIN THEMA] an.
URL: https://beispiel-award-website.com
Claude Code analysiert Struktur, Layout, Animationen und baut dein Pendant – mit eigenen Bildern und Texten via Higgsfield, aber im Look der Vorlage.
Wichtig: URL ist besser als Screenshot. Bei einem Screenshot fehlt Claude der DOM- und Style-Kontext.
5. Iterieren und verfeinern
Die erste Version ist fast nie final. Typische Folge-Prompts:
- „Passe die Hero-Headline an: [neuer Text]"
- „Ändere die Akzentfarbe auf #00FF88"
- „Füge eine FAQ-Sektion mit 6 Fragen ein"
- „Mache den Mauszeiger-Effekt aus der Vorlage XY ergänzend"
- „Optimiere die Performance des Scroll-Effekts"
Je klarer deine Vision, desto schneller landest du beim Premium-Look.
6. Praxis-Tipps aus dem Workflow
- Branding vorab definieren: Logo, Farben, Typo und Tone of Voice sammeln, bevor du startest.
- Medien gezielt nachgenerieren: Einzelne Hero-Bilder kannst du im Claude-Chat über Higgsfield extra generieren und Claude Code zuweisen.
- Skill nicht weglassen: Ohne den Cinematic Scroll Skill wirken die Effekte deutlich generischer.
- Aktuelles Modell nutzen: In den Einstellungen sicherstellen, dass das jeweils aktuellste Claude-Modell aktiv ist – ältere Modelle liefern weniger saubere Animationen.
- Versionieren: Pro Iteration einen neuen Unterordner anlegen, um Stände zu vergleichen.
7. Anwendungsfälle
- Eigene Projekte & Startups: Landingpages für SaaS, Coachings, Shops
- Client-Arbeit & Verkauf: Hochwertige Websites als Service anbieten
- Templates & digitale Produkte: Verkaufbare Vorlagen bauen und auf Marktplätzen anbieten
- Pitches & Prototypen: In Minuten visuelle Konzepte für Kunden erzeugen
Fazit
Claude Code in Kombination mit dem Higgsfield MCP ist aktuell eines der stärksten Setups, um in kürzester Zeit visuell beeindruckende Premium-Websites zu bauen. Wer den Workflow einmal sauber aufsetzt – Desktop App, MCP, Skill, Projektordner – kann sowohl komplett neue Konzepte als auch geklonte Award-Designs in einer Qualität ausliefern, für die früher ganze Agenturen wochenlang gearbeitet haben.
Der entscheidende Punkt bleibt aber: Du musst eine Vision haben. Claude Code setzt brillant um – das Ziel und das Geschmacksurteil bringst du mit.