Kurze Zusammenfassung
In diesem Video wird gezeigt, wie man mit GPT Image 2 und Codex einzigartige Website-Designs erstellt. Der Prozess umfasst das Generieren von Bildern mit GPT Image 2, das Animieren dieser Bilder mit Higgsfield und das anschließende Verwenden von Codex, um eine vollständige Website basierend auf diesen animierten Bildern zu erstellen.
- Erstellung von einzigartigen Website-Designs mit KI-Tools.
- Animation von Bildern für den Hero-Bereich einer Website.
- Nutzung von Codex zur Generierung einer kompletten Website basierend auf den erstellten Designs.
Design mit GPT Image 2 [0:00]
Der Sprecher demonstriert die Möglichkeiten von GPT Image 2, um beeindruckende Designs zu erstellen und diese in reale Anwendungen und Websites umzuwandeln. Er zeigt verschiedene Bild-zu-Site-Prompt-Kits, die bereits in Image GPT 2 erstellt wurden, und plant, eines dieser Designs in Codex zu replizieren, um zu sehen, wie es sich in eine funktionierende Website umsetzen lässt.
Generierung des Hero-Konzepts [0:42]
Der Sprecher verwendet einen Premium-Prompt aus seiner School-Community, um mit GPT Image 2 ein Bild zu generieren, das als Grundlage für den Hero-Bereich der Website dienen soll. Das generierte Bild ist Sci-Fi-inspiriert und einzigartig. Der Plan ist, den Hero-Bereich der Website als animiertes Video zu gestalten, anstatt ihn manuell zu codieren.
Mobile Breakpoint Setup [1:23]
Um sicherzustellen, dass die Website responsiv ist, wird eine mobile Version des Hero-Bereichs erstellt. Der Sprecher fordert GPT Image 2 auf, einen Mobile Breakpoint des Hero-Bereichs zu erstellen, um sicherzustellen, dass das Design auf verschiedenen Geräten korrekt dargestellt wird.
Entfernen von Buttons und Exportieren [2:09]
Da der Hero-Bereich als Video animiert wird, müssen unnötige Elemente wie der "Deploy Now"-Button entfernt werden. Der Sprecher bittet GPT Image 2, den Button sowohl von der Desktop- als auch von der Mobile-Version des Bildes zu entfernen. Anschließend werden die bearbeiteten Bilder gespeichert und für die Animation vorbereitet.
Animieren in Higgsfield [3:11]
Die vorbereiteten Bilder werden in Higgsfield hochgeladen, um sie zu animieren. Der Sprecher verwendet spezifische Prompts, um die Animationen zu steuern. Für die Desktop-Version soll die Kamera statisch bleiben, während die Typografie wie ein lebendiges Terminal animiert wird, inklusive Glitch-Effekten. Die Mobile-Version wird im Format 9:16 animiert, wobei der gleiche Prompt verwendet wird.
Fixing Bad Video Prompts [4:23]
Nachdem die ersten Video-Generationen nicht zufriedenstellend waren, bittet der Sprecher seinen Agenten, einen besseren Prompt zu erstellen. Er betont, wie wichtig es ist, bei Video-Animationen präzise Prompts zu verwenden, um die gewünschten Ergebnisse zu erzielen.
Herunterladen von Hero Videos [4:53]
Nachdem die Animationen erfolgreich erstellt wurden, werden die Videos für den Desktop- und Mobile-Hero-Bereich heruntergeladen und im Projektordner gespeichert. Die Videos werden als "Desktop Hero Video" und "Mobile Hero Video" benannt, um sie später leichter identifizieren zu können.
Codex Spec und File Paths [5:39]
Der Sprecher verwendet einen speziell entwickelten Prompt, um Codex mit den Referenzbildern und dem animierten Video zu füttern. Der Prompt weist Codex an, ein Design zu erstellen, das auf diesen Referenzen basiert und eine Designspezifikation zu erstellen. Es wird darauf geachtet, dass Codex auf den gleichen Ordner zugreift, in dem die Referenzbilder und Videos gespeichert sind. Die Pfadnamen zu den Ordnern werden in den Prompt eingefügt, um sicherzustellen, dass Codex die Dateien korrekt findet.
Reviewing The Generated Site [6:58]
Das Ergebnis ist eine vollständig gestaltete Website, bei der Codex das Design des Hero-Bereichs verstanden und den Rest der Website entsprechend angepasst hat. Codex hat sogar einen Button im gleichen Stil hinzugefügt. Die Website enthält verschiedene Abschnitte mit generiertem Inhalt, der jedoch noch angepasst werden muss. Das Ergebnis ist eine einzigartige Website, die sich von herkömmlichen Designs abhebt.
Creative Possibilities And Next Steps [7:56]
Der Sprecher betont die kreativen Möglichkeiten, die sich durch diesen Prozess ergeben. Er ermutigt die Zuschauer, die gezeigten Techniken und Vorlagen zu nutzen, um eigene, einzigartige Websites zu erstellen. Er gibt als Feedback, dass der Text auf der generierten Seite noch überarbeitet werden muss.
Join The Crew [8:27]
Der Sprecher lädt die Zuschauer ein, seiner School-Community beizutreten, um Zugang zu den verwendeten Systemprompts für Codex und weiteren Ressourcen zu erhalten. In der Community werden Menschen dabei unterstützt, KI-Tools zu nutzen, um reale Geschäftsinfrastrukturen aufzubauen.
