00:00:00Woher weiß man eigentlich, welche Design-Tools sich wirklich lohnen, wenn jede Woche ein neues erscheint?
00:00:04Das Problem ist, dass täglich neue Tools auf den Markt kommen, die alle Qualität versprechen, aber meistens nur ein Hype sind.
00:00:09Bei unseren Tests haben wir einige gefunden, die wirklich halten, was sie versprechen, und gut in unseren Workflow passen.
00:00:15Eines unserer Teammitglieder arbeitete an einer Produkt-Landingpage für ein Auto mit einer 3D-Animation im Hero-Bereich.
00:00:21Der Quellcode dieser Website und alle verwendeten Funktionen sind in AI Labs Pro verfügbar.
00:00:25Für alle, die es nicht wissen: Das ist unsere neu gestartete Community, in der ihr gebrauchsfertige Vorlagen, Prompts, Befehle und Skills erhaltet, die ihr direkt in eure Projekte übernehmen könnt.
00:00:36Wenn euch unsere Arbeit gefällt und ihr den Kanal unterstützen wollt, ist das der beste Weg. Links findet ihr in der Beschreibung.
00:00:42Der erste Schritt zu einer solchen Website ist ein gutes Asset. Dafür habe ich Tripo3D verwendet, den KI-gestützten 3D-Objektgenerator.
00:00:50Nach der Anmeldung erhielt ich etwa 300 Credits, was locker für rund 10 Generationen ausreichte.
00:00:54Nun brauchte ich ein Bild, das ich in 3D umwandeln konnte.
00:00:57Ich hatte ein Bild des Autos, aber der Hintergrund störte die Modellgenerierung, da die Trennung von Vorder- und Hintergrund für solche Tools schwierig ist.
00:01:08Ich habe den Hintergrund mit Canva entfernt, aber man kann auch Remove BG nutzen, was eine kostenlose Alternative ist.
00:01:16Sobald der Hintergrund entfernt war, ging ich zu Tripo3D und gab das Bild als Referenz an.
00:01:21Es dauerte etwa eine Minute, das Modell zu generieren, und es entsprach dem Bild fast perfekt.
00:01:25Ich konnte das Modell aus jedem Winkel betrachten, und es sah von allen Seiten konsistent aus.
00:01:31Sobald das 3D-Modell fertig war, habe ich es exportiert.
00:01:34Bei Tripo3D hat man im kostenlosen Plan nur 15 Exports. Ich habe also sichergestellt, dass ich zufrieden war, und die beste Version heruntergeladen.
00:01:43Ich habe die Auflösung auf 4K eingestellt und den Export gestartet.
00:01:45Nach dem Download der GLB-Datei habe ich sie in das öffentliche Verzeichnis einer neuen Next.js-App verschoben, damit sie leicht zugänglich ist.
00:01:52GLB ist ideal, da es Texturen und Materialien in einer einzigen Datei speichert und als natives Webformat perfekt mit Web-Bibliotheken harmoniert.
00:02:04Als die GLB-Datei bereit war, ging es an die Implementierung in der Web-App.
00:02:08Für die Landingpage habe ich die Codex-App gewählt, die erst kürzlich erschienen und nur für macOS verfügbar ist.
00:02:14Ihr fragt euch vielleicht: Warum Codex nutzen, wenn wir doch schon Claude Code haben?
00:02:19Zum Produktstart bieten sie erweiterte Limits und großzügige Quoten selbst im kostenlosen Plan an – die beste Zeit also, um das zu nutzen.
00:02:29Aber ihr könnt denselben Prozess natürlich mit jedem Agenten eurer Wahl durchführen.
00:02:32Ich habe Codex heruntergeladen und den Projektordner darin geöffnet.
00:02:34Die Benutzeroberfläche ähnelt stark dem Agent-Manager von AntiGravity, ist aber mehr auf Agenten als nur auf Code fokussiert.
00:02:40Das Feature für "Skills" hat uns am besten gefallen.
00:02:43Bei anderen Agenten muss man oft einen Open-Source-Skill-Creator nutzen, um eigene Funktionen zu erstellen.
00:02:49Codex hat jedoch einen integrierten Skill-Creator und viele fertige Skills direkt bei der Installation dabei – das fehlte bei anderen Agenten.
00:02:56Für die 3D-Animation nutzte ich den Skill-Creator und gab detailliert an, wie die Animation aufgebaut sein soll und welche Bibliotheken nötig sind.
00:03:06Nach ein paar Rückfragen wurden die Skripte ausgeführt, der Skill erstellt und er war sofort einsatzbereit.
00:03:13Eine Sache war jedoch etwas anders.
00:03:14Normalerweise installieren Agenten Skills in ihrem ".agent"- oder ".claude"-Ordner, aber Codex tat dies im Root-Verzeichnis, also habe ich es manuell verschoben.
00:03:24Es folgte jedoch demselben Muster wie das Open-Source-Framework von Claude, inklusive Skripten, Referenzen und Assets für die Skill-Erweiterung.
00:03:33Dazu gehörte auch eine YAML-Datei mit dem generischen Prompt, damit der Agent weiß, bei welcher Nutzeranfrage der Skill ausgelöst wird.
00:03:40Ich gab Codex die Aufgabe, die Animationen mit dem neuen Skill einzurichten, und fügte alle Details in den Prompt ein.
00:03:47Die Implementierung startete und die Installationsbefehle wurden ausgeführt.
00:03:49Es dauerte eine Weile, bis es fertig war. Wegen eines Timeouts im Environment konnte Codex die Dependencies nicht installieren, also ließ ich sie in die package.json schreiben.
00:04:01Bei der manuellen Installation traten Fehler auf, da die Bibliotheksversionen im Projekt nicht zusammenpassten.
00:04:08Ich musste mehrmals mit Codex debuggen, bis die Animation im Hero-Bereich endlich so funktionierte, wie ich es wollte.
00:04:14Da Codex für einzelne Features sehr lange brauchte, habe ich die Aufgaben in vier Teilaufgaben unterteilt.
00:04:21Jede Aufgabe deckte ein Feature der Landingpage ab, isoliert von den anderen, mit eigenen Zielen, Anforderungen und Einschränkungen.
00:04:28Ich nutzte das Multi-Agent-Feature von Codex und ließ jeden Agenten an einer dieser Aufgaben arbeiten.
00:04:32Da alle an derselben Seite arbeiteten, ließ ich sie in separaten Work-Trees agieren statt auf dem Main-Branch, um Code-Konflikte zu vermeiden.
00:04:43Fast alle Agenten schlossen ihre Aufgaben in einem ähnlichen Zeitrahmen ab.
00:04:46Ich habe die Ergebnisse zusammengeführt und alle Features konfliktfrei erhalten – deutlich schneller, als Codex es allein geschafft hätte.
00:04:55Die Website stand, aber außer dem Hero-Bereich gab es keine Animationen, alles wirkte flach. Also habe ich GSAP hinzugefügt.
00:05:03GSAP ist die JavaScript-Animationsbibliothek schlechthin, die von vielen Profis für konstante Performance genutzt wird.
00:05:09Wegen der vorherigen Timeout-Probleme installierte ich GSAP vorab manuell über das Terminal mit dem Befehl "npm install".
00:05:18Ich gab Codex einen sehr detaillierten Prompt für die Animationen und wies an, den Hero-Bereich unberührt zu lassen.
00:05:27Ich gab genau vor, wo welche Animationen hin sollten. Die Ausführung dieser Aufgabe dauerte recht lange.
00:05:33Es gab ein paar kleine Fehler, die ich korrigierte, indem ich die Fehlermeldungen einfach wieder an Codex zurückgab.
00:05:37Danach waren die Animationen implementiert und der Hero-Bereich blieb exakt so, wie er vorher war.
00:05:42Aber alle anderen Sektionen erhielten Scroll-Animationen, was die gesamte Haptik der Seite spürbar verbesserte.
00:05:48Trotz der Animationen wirkten die Komponenten im Vergleich zum Hero-Bereich immer noch etwas flach.
00:05:54Also suchte ich mir Komponenten von Aceternity UI aus, da diese bereits viele integrierte Mikro-Interaktionen und Animationen mitbringen.
00:06:04Ich bat Codex, die vorhandenen Komponenten durch die von Aceternity zu ersetzen, dabei aber die Animationen beizubehalten.
00:06:10Nach der Implementierung bemerkte ich jedoch Farbverläufe, die überhaupt nicht zum Theme der App passten.
00:06:14Ich gab Codex einen Screenshot und wies auf die unpassenden Gradients hin. Daraufhin wurden die Farben an das Design angepasst.
00:06:21Allerdings waren die neuen Komponenten statisch und hatten nicht die typischen Mikro-Interaktionen von Aceternity.
00:06:30Ich erklärte Codex, dass es Aceternity-Komponenten mit Tilt-Effekten beim Hovern gibt, und bat darum, diese zu verwenden.
00:06:38Danach hatten die Komponenten die gewünschten Hover-Tilt-Effekte, und die Seite fühlte sich wesentlich interaktiver an.
00:06:44Zur visuellen Verfeinerung nutzte ich ein öffentliches Repository namens "post-processing", das als NPM-Paket verfügbar ist.
00:06:51Das ist ein Layer für Animationen nach den Effekten, wenn man React Three Fiber verwendet.
00:06:56Damit können wir Bildverarbeitungs-Features wie Gammakorrektur und andere Optimierungen für High-Performance-Ergebnisse nutzen.
00:07:01Ich wies Codex an, mit dieser Library subtile Lichteffekte zu erstellen, und ließ mich durch den Prozess führen.
00:07:07Zuerst klappte es nicht richtig, und es gab keinen sichtbaren Unterschied im Ergebnis.
00:07:11Nach mehrmaligem Debugging klappte es schließlich: Ein dezentes Leuchten am 3D-Modell verlieh dem Hero-Bereich ein warmes, fertiges Aussehen.
00:07:23Damit sind wir am Ende dieses Videos angelangt.
00:07:25Wenn ihr den Kanal unterstützen wollt, damit wir weiterhin solche Videos machen können, nutzt gerne den Super Thanks Button.
00:07:31Wie immer vielen Dank fürs Zuschauen und wir sehen uns im nächsten Video!