Mobile app mockups to SwiftUI code prompt for Codex

Have Codex build the approved HTML screens in your SwiftUI app, matching layout and spacing, using your theme colors and supporting Dynamic Type.

Implement the approved onboarding and home screens in our [SwiftUI] app. Match the layout and spacing of the HTML files in [designs/], use the colors in [Theme.swift], support Dynamic Type, and reuse existing components where they fit.

Works with

Codex

From the set

Mobile apps

About this prompt

Codex implements the approved onboarding and home screens in your real app, using the HTML files as the reference for layout and spacing. It takes colors from your existing theme file, supports Dynamic Type so text scales with the user’s settings, and reuses components you already have instead of creating duplicates.

Replace SwiftUI with your framework, such as Jetpack Compose, React Native or Flutter, and point the other two brackets at the folder with your HTML designs and the file that defines your colors. Outside Apple platforms, swap Dynamic Type for the local equivalent, such as respecting the system font scale on Android. If you designed dark mode, mention those files too so both themes are built at once.

Codex has to work inside your repository for this step, since it reads your theme and components. Start with the two screens in the prompt rather than the whole app; once their spacing and components match the mockups, the remaining screens go faster because the patterns already exist in code.

More prompts from this set

• Mobile app brief and screen list prompt for CodexDescribe your app’s users, core loop and platform, and have Codex list every screen of version one, grouped, with each screen’s purpose.
• App onboarding flow design prompt for CodexDesign three connected onboarding screens at 390×844, welcome, goal picker and first home, in one shared style with CSS illustrations.
• Mobile app home screen design prompt for CodexDesign an app home screen for a returning user, built around the one element you name as most important, with a tab bar and real stats.
• List and detail screen design prompt for CodexDesign a list screen with search and filter chips and the detail screen it opens, as two files, using realistic titles and numbers.
• App settings screen design prompt for CodexDesign a settings screen with standard grouped lists, current values on each row, toggles where they belong and destructive actions in red.
• Empty, loading and error state design prompt for CodexDesign the empty, loading and error states of an app screen as separate files, with the same navigation and header as the normal state.