use-cases/frontend-designs.md Codex Docs, 2026-04-14 18:31 UTC → 2026-04-25 00:42 UTC

1# Build responsive front-end designs | Codex use cases1# Build responsive front-end designs | Codex use cases

2 2 

3Codex use cases

4 

5![](/assets/OpenAI-black-wordmark.svg)

6 

7![Codex](/assets/OAI_Codex-Lockup_Fallback_Black.svg)

8 

9Codex use case

10 

11# Build responsive front-end designs

12 

13Turn screenshots and visual references into responsive UI with visual checks.

14 

15Difficulty **Intermediate**

16 

17Time horizon **1h**

18 

19Use Codex to translate screenshots and design briefs into code that matches the repo's design system, then use Playwright to compare the implementation to your references for different screen sizes and iterate until it looks right.

20 

21## Best for

22 

23 - Creating new front-end projects from scratch

24- Implementing already designed screens or flows from screenshots in an existing codebase

25 

26# Contents

27 

3[← All use cases](https://developers.openai.com/codex/use-cases)28[← All use cases](https://developers.openai.com/codex/use-cases)

4 29 

5Copy page [Export as PDF](https://developers.openai.com/codex/use-cases/frontend-designs/?export=pdf)30Copy page [Export as PDF](https://developers.openai.com/codex/use-cases/frontend-designs/?export=pdf)

43- Compare the finished UI against the provided screenshots for both look and behavior.68- Compare the finished UI against the provided screenshots for both look and behavior.

44- Use $playwright-interactive to check that the UI matches the references and iterate as needed until it does.69- Use $playwright-interactive to check that the UI matches the references and iterate as needed until it does.

45 70 

71[Open in the Codex app](codex://new?prompt=Implement+this+UI+in+the+current+project+using+the+screenshots+and+notes+I+provide+as+the+source+of+truth.%0A%0ARequirements%3A%0A-+Reuse+the+existing+design+system+components+and+tokens.%0A-+Translate+the+screenshots+into+this+repo%27s+utilities+and+component+patterns+instead+of+inventing+a+parallel+system.%0A-+Match+spacing%2C+layout%2C+hierarchy%2C+and+responsive+behavior+closely.%0A-+Respect+the+repo%27s+routing%2C+state%2C+and+data-fetch+patterns.%0A-+Make+the+page+responsive+on+desktop+and+mobile.%0A-+If+any+screenshot+detail+is+ambiguous%2C+choose+the+simplest+implementation+that+still+matches+the+overall+direction+and+note+the+assumption+briefly.%0A%0AValidation%3A%0A-+Compare+the+finished+UI+against+the+provided+screenshots+for+both+look+and+behavior.%0A-+Use+%24playwright-interactive+to+check+that+the+UI+matches+the+references+and+iterate+as+needed+until+it+does. "Open in the Codex app")

72 

46Implement this UI in the current project using the screenshots and notes I provide as the source of truth.73Implement this UI in the current project using the screenshots and notes I provide as the source of truth.

47 Requirements:74 Requirements:

48 - Reuse the existing design system components and tokens.75 - Reuse the existing design system components and tokens.

121 148 

122Data Integrations](https://developers.openai.com/codex/use-cases/generate-slide-decks)[![](/images/codex/codex-wallpaper-1.webp)149Data Integrations](https://developers.openai.com/codex/use-cases/generate-slide-decks)[![](/images/codex/codex-wallpaper-1.webp)

123 150 

124### Add iOS app intents151### Make granular UI changes

125 152 

126Use Codex and the Build iOS Apps plugin to identify the actions and entities your app should...153Use Codex to make one small UI adjustment at a time in an existing app, verify it in the...

127 154 

128iOS Code](https://developers.openai.com/codex/use-cases/ios-app-intents)155Front-end Design](https://developers.openai.com/codex/use-cases/make-granular-ui-changes)