Prompt für App-Mockups zu SwiftUI-Code in Codex

Lass Codex die abgenommenen HTML-Screens in deiner SwiftUI-App umsetzen, mit passendem Layout und Abständen, deinen Theme-Farben und Dynamic Type.

Setz die abgenommenen Onboarding- und Startscreens in unserer [SwiftUI]-App um. Übernimm Layout und Abstände aus den HTML-Dateien in [designs/], verwende die Farben aus [Theme.swift], unterstütze Dynamic Type und nutze bestehende Komponenten, wo sie passen.

Funktioniert mit

Codex

Aus der Sammlung

Mobile Apps

Über diesen Prompt

Codex setzt die abgenommenen Onboarding- und Startscreens in deiner echten App um und nutzt die HTML-Dateien als Vorlage für Layout und Abstände. Es übernimmt die Farben aus deiner vorhandenen Theme-Datei, unterstützt Dynamic Type, damit der Text mit den Einstellungen des Nutzers skaliert, und verwendet Komponenten, die du schon hast, statt Duplikate anzulegen.

Ersetze SwiftUI durch dein Framework, etwa Jetpack Compose, React Native oder Flutter, und richte die beiden anderen Klammern auf den Ordner mit deinen HTML-Designs und die Datei, die deine Farben definiert. Tausche außerhalb von Apple-Plattformen Dynamic Type gegen das lokale Gegenstück aus, etwa die Beachtung der Schriftskalierung des Systems unter Android. Hast du einen Dark Mode gestaltet, erwähne auch diese Dateien, damit beide Themes in einem Zug gebaut werden.

Codex muss für diesen Schritt in deinem Repository arbeiten, weil es dein Theme und deine Komponenten liest. Beginne mit den zwei Screens aus dem Prompt statt mit der ganzen App; passen deren Abstände und Komponenten erst zu den Mockups, gehen die übrigen Screens schneller, weil die Muster im Code schon existieren.

Weitere Prompts aus dieser Sammlung

• Prompt für App-Briefing und Screen-Liste in CodexBeschreibe Nutzer, Kernablauf und Plattform deiner App und lass Codex alle Screens der ersten Version gruppiert auflisten, mit dem Zweck jedes Screens.
• Prompt für den Onboarding-Flow einer App in CodexGestalte drei verbundene Onboarding-Screens in 390×844, Willkommen, Tagesziel und erster Startscreen, in einem gemeinsamen Stil mit CSS-Illustrationen.
• Prompt für den Startscreen einer mobilen App in CodexGestalte einen Startscreen für wiederkehrende Nutzer um das eine Element, das du als wichtigstes nennst, mit Tab-Leiste und echten Zahlen.
• Prompt für Listen- und Detailscreens einer App in CodexGestalte einen Listenscreen mit Suche und Filter-Chips und den Detailscreen, der sich daraus öffnet, als zwei Dateien mit realistischen Titeln und Zahlen.
• Prompt für den Einstellungsscreen einer App in CodexGestalte einen Einstellungsscreen mit gruppierten Listen, aktuellen Werten in jeder Zeile, Schaltern, wo sie hingehören, und destruktiven Aktionen in Rot.
• Prompt für Leere, Lade- und Fehlerzustände einer App in CodexGestalte den leeren, den ladenden und den Fehlerzustand eines App-Screens als getrennte Dateien, mit derselben Navigation und demselben Kopfbereich wie normal.