GPT Image 2.6 Mockup zu HTML: Prompt für Codex

Wandle ein GPT Image 2.6 Mockup in Codex in eine eigenständige HTML-Datei um, mit Layout, Abständen, Farben und Text des Bildes und Icons als Inline-SVG.

Bau das angehängte Mockup-Bild als eine eigenständige HTML-Datei in [390×844] nach, mit Inline-CSS und Systemschriften. Übernimm Layout, Abstände, Farben und Text exakt. Zeichne Icons als Inline-SVG.

Funktioniert mit

GPT Image 2.6, Codex

Aus der Sammlung

Prompts für GPT Image 2.6

Über diesen Prompt

Jeder andere Prompt in diesem Set endet mit einem Bild, das du nicht anklicken, in der Größe ändern oder ausliefern kannst. Dieser hier ist für Codex: Häng das generierte Mockup an, und Codex baut das Bild als eine einzige eigenständige HTML-Datei mit Inline-CSS und Systemschriften nach, passend in Layout, Abständen, Farben und Text, und zeichnet die Icons als Inline-SVG.

Die Größe in Klammern ist das Einzige, was du ändern musst. Bleib bei 390×844 für einen Smartphone-Screen und nimm für alles andere die Maße des Mockups selbst, zum Beispiel 1440×900 für einen Desktop-Hero oder ein Dashboard. Enthält das Bild Fotos, sag Codex, wo die echten Dateien liegen, statt es zu bitten, sie nachzubilden.

Rechne mit einem nahen ersten Durchgang, nicht mit einem pixelgenauen. Auf einem Codex-Design-Canvas liegen das generierte Bild und die HTML-Version nebeneinander, sodass Abweichungen bei Abständen oder Schriftgrößen leicht zu erkennen und zu beheben sind, entweder visuell oder mit einem weiteren Prompt an Codex.

Weitere Prompts aus dieser Sammlung

• Prompt für den Startscreen einer Fitness-App in GPT Image 2.6Startscreen einer Lauf-App mit Wochendistanz-Ring, Button „Lauf starten“, Karte zum letzten Lauf und vier Tabs, zum Anpassen an deine App.
• Prompt für eine Mobile-Banking-App in GPT Image 2.6Ein Banking-Screen mit Kontostandkarte, vier Schnellaktionen und Liste der letzten Umsätze in ruhigem Marineblau. Tausch die Zahlen gegen deine aus.
• Prompt für den Startscreen einer Lieferdienst-App in GPT Image 2.6Startscreen eines Lieferdienstes mit Adressleiste, Suche, Kategorie-Chips, hervorgehobener Restaurantkarte und Liste „Beliebt in deiner Nähe“.
• Prompt für App-Onboarding-Screens in GPT Image 2.6Drei Onboarding-Screens nebeneinander: Willkommen, Zielauswahl mit Chips und Zeitwähler für die Erinnerung, in einer einheitlichen Palette.
• Prompt für den Unterhaltungsscreen einer Chat-App in GPT Image 2.6Ein Unterhaltungs-Screen mit Nachrichtenblasen, geteiltem Foto, Sprachnachricht mit Wellenform und Eingabefeld, in hellem Theme mit blauem Akzent.
• Prompt für einen iOS-Einstellungs-Screen in GPT Image 2.6Ein nativer iOS-Einstellungs-Screen mit gruppierten Listen, aktuellen Werten, Schaltern für Sync und Erinnerungen und roter Zeile „Abmelden“.