Wie ich in 2 Stunden mit Claude Code und Veo eine 3D-Scroll-Website erstellt habe
Ein Reddit-Nutzer u/Tough-Survey-2155 hat einen Workflow geteilt, um in etwa 2 Stunden eine 3D-Scroll-Website von Grund auf zu erstellen. Die Methode verwendet Claude Code für die Hauptarbeit, mit einer benutzerdefinierten Video-zu-Website-Fähigkeit (Credit an Nate Herk) und Veo für die Videogenerierung.
Workflow
- Erstelle eine Video-zu-Website-Fähigkeit – diese dient als Grundlage, um Bewegung in scrollgesteuerte Interaktionen zu übersetzen.
- Extrahiere das erste und letzte Bild aus dem Quellvideo und verwende dann Veo, um daraus ein neues Video zu erstellen. Der Videoprompt wurde mit ChatGPT generiert.
- Anweisen von Claude Code, die Website mit dem Video-Asset zu erstellen. Der Autor berichtet, dass der Rest nach dem Einfügen des Videos ein unkompliziertes Prompting war.
- Design-Anpassungen – einige manuelle Anpassungen waren nach der Generierung notwendig.
Ergebnisse & Links
- Live-Website: royal-pop-website.vercel.app
- Vollständiger Quellcode: github.com/hamzafarooq/claude-code-starter
Das Repository enthält Claude-Code-Starter-Vorlagen, die für ähnliche Projekte wiederverwendet werden können. Der Autor merkt an, dass der gesamte Prozess nur 2 Stunden dauerte, was dies zu einer praktischen Referenz für Entwickler macht, die schnell scrollgesteuerte 3D-Seiten mit KI-Unterstützung prototypisieren möchten.
📖 Lies die vollständige Quelle: r/ClaudeAI
👀 Siehe auch
Claudetop: Echtzeit-Kostenüberwachung für Claude-Code-Sitzungen
Claudetop ist ein htop-ähnliches Tool, das Echtzeit-Ausgaben, Cache-Effizienz und Modellvergleiche für Claude Code-Sitzungen anzeigt. Es bietet Slash-Befehle wie /claudetop:stats und intelligente Warnungen für Kostenmeilensteine und Effizienzprobleme.
Tokven MCP erzeugt vollständige Design-Token-Systeme aus einer einzelnen Hex-Farbe.
Tokven MCP ist ein Model Context Protocol Tool, das aus einer einzigen Marken-Farbhexadezimalzahl ein vollständiges Design-Token-System erstellt, einschließlich Oberflächen, Rahmen, Text-Hierarchie, Schatten und Hell/Dunkel-Modi mit automatischer WCAG-Kontrastvalidierung.
Specsmaxxing: KI-Psychose mit YAML-Spezifikationen und ACAI bekämpfen
Acai.sh stellt Specsmaxxing vor: eine Methode, um dem Kontextverlust von KI-Agenten entgegenzuwirken, indem Anforderungen in YAML geschrieben und nummerierte Akzeptanzkriterien für KI (ACAI) verwendet werden, auf die Agenten im Code verweisen.
Agent Wake Skill für OpenClaw: Discord benachrichtigen, wenn Aufgaben abgeschlossen sind
Ein Entwickler hat agent-wake.py erstellt, ein Python-Skript, das Claude Code nach Abschluss von Aufgaben aufruft. Es sendet Discord-Pings und löst Weckereignisse über die Gateway-HTTP-API aus, wodurch der Agent automatisch Zusammenfassungen veröffentlicht.