2 2
3[← All use cases](https://developers.openai.com/codex/use-cases)3[← All use cases](https://developers.openai.com/codex/use-cases)
4 4
5Copy page [Export as PDF](https://developers.openai.com/codex/use-cases/frontend-designs/?export=pdf)
6
5Use 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.7Use 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.
6 8
7Intermediate9Intermediate
23 25
24 Open the app in a real browser to verify the implementation and iterate on layout and behavior.26 Open the app in a real browser to verify the implementation and iterate on layout and behavior.
25 27
28| Skill | Why use it |
29| --- | --- |
30| [Playwright](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive) | Open the app in a real browser to verify the implementation and iterate on layout and behavior. |
31
26## Starter prompt32## Starter prompt
27 33
28Implement this UI in the current project using the screenshots and notes I provide as the source of truth.34Implement this UI in the current project using the screenshots and notes I provide as the source of truth.
37- Compare the finished UI against the provided screenshots for both look and behavior.43- Compare the finished UI against the provided screenshots for both look and behavior.
38- Use $playwright-interactive to check that the UI matches the references and iterate as needed until it does.44- Use $playwright-interactive to check that the UI matches the references and iterate as needed until it does.
39 45
46Implement this UI in the current project using the screenshots and notes I provide as the source of truth.
47 Requirements:
48 - Reuse the existing design system components and tokens.
49- Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.
50 - Match spacing, layout, hierarchy, and responsive behavior closely.
51 - Respect the repo's routing, state, and data-fetch patterns.
52 - Make the page responsive on desktop and mobile.
53- If any screenshot detail is ambiguous, choose the simplest implementation that still matches the overall direction and note the assumption briefly.
54 Validation:
55- Compare the finished UI against the provided screenshots for both look and behavior.
56- Use $playwright-interactive to check that the UI matches the references and iterate as needed until it does.
57
40## Introduction58## Introduction
41 59
42When you have screenshots, a short design brief, or a few references for inspiration, Codex can turn those into responsive UI without ignoring the patterns already established in your project.60When you have screenshots, a short design brief, or a few references for inspiration, Codex can turn those into responsive UI without ignoring the patterns already established in your project.
101 119
102Use Codex to update existing presentations or build new decks by editing slides directly...120Use Codex to update existing presentations or build new decks by editing slides directly...
103 121
104122Data Workflow](https://developers.openai.com/codex/use-cases/generate-slide-decks)[Data Integrations](https://developers.openai.com/codex/use-cases/generate-slide-decks)[
105 123
106124### Create browser-based games### Add iOS app intents
107 125
108126Use Codex to turn a game brief into first a well-defined plan, and then a real browser-based...Use Codex and the Build iOS Apps plugin to identify the actions and entities your app should...
109 127
110128Engineering Code](https://developers.openai.com/codex/use-cases/browser-games)iOS Code](https://developers.openai.com/codex/use-cases/ios-app-intents)