use-cases/frontend-designs.md Codex Docs, 2026-04-16 00:46 UTC → 2026-05-01 18:29 UTC

68- 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.

69- 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.

70 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 

71Implement 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.

72 Requirements:74 Requirements:

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

146 148 

147Data 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)

148 150 

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

150 152 

151Use 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...

152 154 

153iOS 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)