Der ultimative Gemini 3 Design-Workflow

Das Video thematisiert die beeindruckenden Fortschritte generativer KI, insbesondere seit der Veröffentlichung von Gemini 3 durch Google. Viele Nutzer auf X behaupten, mit einem Versuch fantastische Landing Pages zu erstellen, doch dies ist irreführend. Die Wahrheit ist, dass mehrere Tools notwendig sind, um solche Seiten zu bauen. Google bietet zwar experimentelle Tools an, die von Gemini 3 und Nano Banana angetrieben werden, aber keine integrierte Möglichkeit, sie zusammen zu nutzen, weshalb ein kompletter Workflow erforderlich ist.

WISC ist ein experimentelles Google-Tool speziell für Asset-Generierung, angetrieben von Nano Banana. Das Hauptproblem bei KI-generierten Einzelbildern für Animationen ist die mangelnde Konsistenz, die WISC durch ein Framework aus Motiv, Szene und Stil löst. Der Autor nutzt WISC häufig für Hero-Bereich-Bildsequenzen und erstellt damit animierte Effekte mit Kamera-Bewegungen. Ein großer Vorteil ist, dass keine langen, detaillierten Prompts notwendig sind, da Gemini 3 als Zwischenschicht fungiert und einfache Worte in detaillierte Prompts umwandelt, was zu hochwertigen Visuals führt.

WISC wurde gewählt, weil es im Gegensatz zu Nano Banana (das umfangreiche Text-Prompts erfordert) und Googles Mix Board (für Mood Boards konzipiert) für schnelles, kontrolliertes Bild-Remixing optimiert ist. Die Kernstärke von WISC liegt darin, Referenzbilder zu kombinieren und so Bilder mit besserer Kontrolle zu generieren. Der Autor demonstriert die Erstellung eines ersten Bildes einer Kamera und dann eines letzten Bildes mit Seitenansicht und auseinandergenommenem Objektiv. Durch iterative Anpassungen der Prompts - beispielsweise die Anweisung, nur die Linsenschichtung ohne interne Elektronik zu zeigen - wurden die gewünschten Keyframes erfolgreich generiert.

Google Flow nutzt Gemini für Story-Planung, Googles Bildmodelle für konsistente Charaktere und VIO zur Videogenerierung. Während WISC Animationen auf Einzelbilder fokussiert, ermöglicht Flow die Verbindung mehrerer Keyframes zu Videos. Mit der Frame-zu-Video-Option wurden die erstellten Start- und Endbilder bereitgestellt. Für einen reibungslosen Übergang ist es wichtig, im Prompt zu beschreiben, wie das Startbild zum Endbild führt, den Animationsstil und die Bewegungsrichtung. Beim ersten Versuch waren Drehrichtung und Endbild falsch, nach Anpassung des Prompts wurde jedoch die gewünschte Animation erzeugt.

Die Videogenerierung ist im kostenlosen Tarif begrenzt auf 180 monatliche Credits, was bei 20 Credits pro VIO 3.1 Video etwa 9 Videos pro Monat entspricht. Da die generierten MP4-Videos sich schwer durch Scroll-Animationen steuern lassen, wurden sie mit einem kostenlosen Online-Konverter in WebP umgewandelt. WebP ist die ideale Wahl für Hero-Bereiche, da dieses Format im Web als Bild behandelt wird und keinen Media-Player-Wrapper benötigt. Diese Dateien sind kompakter, bieten verbesserte Performance und sind ideal für animierte Kurzinhalte, was sie perfekt für Scroll-Interaktionen macht.

Die konvertierte WebP-Datei wurde in das Public-Verzeichnis eines neu initialisierten Next.js-Projekts eingefügt. Der Autor formuliert Prompts für Claude grundsätzlich im XML-Format, da Claude-Modelle für XML-Verständnis optimiert sind, was zuverlässigeres Parsing und unabhängiges Nachdenken über jeden Abschnitt ermöglicht. Der strukturierte Prompt enthielt Context-Tags mit Kontext zur Erstellung, Asset-Standorten und Scroll-Animations-Funktionalität, Requirement-Tags mit allen Anforderungen, Animation-Behavior-Tags für das Verhalten sowie Implementierungsdetails und Einschränkungen. Claude implementierte die Animation automatisch genau nach Vorgabe.

Obwohl der Hero-Bereich gut aussah, wirkten die übrigen Komponenten wie übliche generische Websites, die KI generiert. Das Problem lag darin, hochwertige Ergebnisse von einfachem CSS zu erwarten statt sich auf vorhandene Komponentenbibliotheken zu verlassen. Für die Kamera-Landing-Page wurde eine Apple-Style-UI angestrebt, wofür Hero UI die beste Wahl war. Diese Bibliothek basiert auf Tailwind CSS und nutzt Framer Motion für lebendige Komponenten. Die Installation mit Next.js war einfach, entweder projektübergreifend oder komponentenweise. Nach dem Ersetzen vorhandener Komponenten durch Hero UI-Komponenten wurde die Website deutlich professioneller.

Nutzer entscheiden innerhalb weniger Sekunden über den Verbleib auf einer Landing Page basierend auf der UI-Attraktivität. Motion hilft dabei, Aufmerksamkeit auf gewünschte Features zu lenken und erhöht die Nutzerbindung. Motion.dev ist eine kostenlose, quelloffene Bibliothek mit gebrauchsfertigen Animationen. Anstatt manuelle Synchronisation von DOM-Updates mit Animations-Timings zu erfordern, abstrahiert Motion.dev diese Logik und verarbeitet DOM-Updates intern. Die Bibliothek aktualisiert Komponenten automatisch beim Scrollen, sodass Animationen reibungslos ablaufen. Motion-Komponenten haben Start- und Endzustände in Props definiert, und die Bibliothek übernimmt automatisch die Übergangslogik.

21st.dev ist eine Plattform mit Inspiration für UI-Komponenten von verschiedenen Designern, basierend auf beliebten Bibliotheken wie Aceternity UI, Prism UI und Magic UI. Der große Vorteil ist die Möglichkeit, für jede Komponente einen speziell für KI-Coding-Agenten zugeschnittenen Prompt zu kopieren. Diese Prompts sind umfassend strukturiert mit Projektanforderungen (ShadCN, TypeScript), Code mit Anweisungen für Verzeichnisplatzierung, allen Abhängigkeiten und Pfaden sowie Implementierungsleitfäden. Der Autor nutzte einen kopierten Prompt für einen Call-to-Action-Bereich, und Claude integrierte ihn perfekt, fügte sogar automatisch Motion hinzu und passte den Footer intelligent an die Kameraprodukt-Website an, ohne irrelevante GitHub-Icons.