Einleitung: Wenn der KI-Agent die Webdesign-Agentur ersetzt

Eine professionell gestaltete, animationsreiche Website kostet Unternehmen schnell 10.000 bis 20.000 Euro — Planung, Design, Entwicklung, Deployment inklusive. Was wäre, wenn ein KI-Agent das in wenigen Minuten erledigen könnte, vollautomatisch und ohne manuelle Eingriffe?

Genau das zeigt Jay E vom YouTube-Kanal RoboNuggets in diesem Video. Er stellt seinen selbst entwickelten Agenten „Cinematic Sites“ vor, der eine bestehende Unternehmenswebsite analysiert, eine Markenidentität ableitet, cineastische Hero-Animationen generiert und das Endergebnis live auf Vercel deployt. Das Einzige, was der Nutzer tun muss: eine URL eingeben und gelegentlich Entscheidungen bestätigen.

In diesem Artikel fassen wir alle Inhalte des Videos zusammen, erklären den technischen Workflow Schritt für Schritt, listen alle verwendeten Tools auf und extrahieren die Kernprompts aus dem Agenten-Setup — damit du den Prozess selbst nachbauen kannst.

Was macht der „Cinematic Sites“-Agent?

Der Agent ist kein einfaches Skript, sondern ein vollständiger KI-gesteuerter Workflow, der mehrere KI-Modelle und Dienste miteinander verbindet. Jay demonstriert das am Beispiel von Ichi Raku Canteen, einem Ramen-Restaurant, dessen Website bisher nur eine schlichte Reservierungsseite war.

Das Vorher-Nachher

Vorher: Eine einfache, textbasierte Reservierungsseite ohne visuelles Konzept.
Nachher: Eine vollwertige, cineastische Website mit animiertem Hero-Video, Scroll-Effekten, Markenfarben, Typografie und interaktiven Elementen — alles vollautomatisch generiert.

Im Video zeigt Jay weitere Beispiele: ein Blumengeschäft, eine Pizzeria und ein Modebrand. In allen Fällen transformiert der Agent eine einfache Basisseite in eine Premium-Web-Erfahrung.

Die vier Schritte des Agenten-Workflows

1. Schritt 1: Markenanalyse (Brand Analysis)Der Agent ruft die bestehende Website des Unternehmens ab und extrahiert automatisch: Farbpalette, primäre und sekundäre Farben, Typografie, Logo-Stil und allgemeine Markenpersönlichkeit. Das Ergebnis ist eine strukturierte Brand Card — eine digitale Markenkarte, die der Nutzer bestätigen oder anpassen kann, bevor der Agent weitermacht.
2. Schritt 2: Szenen-Generierung (Scene Generation)Basierend auf der Brand Card schlägt der Agent drei kreative Ideen für das Haupt-Hero-Video vor. Nach der Nutzerauswahl generiert er mithilfe vonNanobanana(Googles API-Infrastruktur) hochwertige Bilder. Diese Bilder werden anschließend überClingree(via Wave Speed, ein KI-Modell-Aggregator ähnlich wie Hugging Face) in animierte Videos umgewandelt.
3. Schritt 3: Website-Erstellung (Website Building)Der Agent baut die fertige Website unter Verwendung der extrahierten Markenelemente und der generierten Animationen. Zusätzlich integriert er vorgefertigte Cinematic Modules — wiederverwendbare Design-Komponenten wie Akkordeon-Menüs, kinetische Texte und Bild-Trail-Effekte. Diese Module sind kostenlos verfügbar und können direkt eingebunden werden.
4. Schritt 4: DeploymentIn letzten Schritt deployt der Agent die fertige Website kostenlos auf Vercel. Der Agent ist mit der Vercel-Dokumentation ausgestattet, sodass er alle notwendigen Konfigurationsschritte eigenständig ausführt. Nach wenigen Minuten ist die Website live erreichbar.

Die technische Grundlage: SKILL.md als Gehirn des Agenten

Ein zentrales Element des Videos ist die Erklärung der SKILL.md-Datei. Jay beschreibt sie als das „Instruktionsmanual“ des Agenten — eine Markdown-Datei, die Claude Code genau vorschreibt, wie er sich verhalten, welche Werkzeuge er nutzen und in welcher Reihenfolge er vorgehen soll.

Das Konzept ist direkt vergleichbar mit einem Skill-System, wie es auch in Claude Code selbst verwendet wird. Der Agent weiß, welche KI-Modelle für welche Aufgabe zuständig sind, wie er mit externen APIs kommuniziert, und welche Dokumentation er für die Nutzung von Diensten wie Vercel oder Wave Speed heranziehen soll.

Nanobanana 2 — Bildgenerierung über Googles API

Nanobanana ist ein Werkzeug, das Zugang zu Googles Bildgenerierungs-APIs ermöglicht. Im Video wird es genutzt, um qualitativ hochwertige Szenenbilder zu erstellen — beispielsweise dampfende Ramen-Schalen mit Garnelen in cineastischer Beleuchtung. Die generierten Bilder landen in einem Generations-Tab zur Überprüfung, bevor sie weiterverarbeitet werden.

Kling / Wave Speed — Video-Animierung

Die von Nanobanana generierten Standbilder werden über Kling (bereitgestellt über die Wave-Speed-Plattform) in animierte Videos umgewandelt. Wave Speed fungiert dabei als Aggregator für verschiedene KI-Modelle — ähnlich wie Hugging Face oder Freepick — und gibt dem Agenten Zugang zu Modellen wie Cling (einem spezialisierten Video-Animations-Modell).

Kernprompts und Agenten-Anweisungen

Im Video erläutert Jay, wie die SKILL.md-Datei strukturiert ist. Obwohl er den exakten Inhalt nicht vollständig zeigt, lassen sich folgende Schlüsselprompt-Strukturen ableiten:

Alle erwähnten Tools und Ressourcen

Alle Links aus der Videobeschreibung