1# Build responsive front-end designs | Codex use cases1# Build responsive front-end designs | Codex use cases
2 2
3Codex use cases
4
5
6
7
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
30Copy page [Export as PDF](https://developers.openai.com/codex/use-cases/frontend-designs/?export=pdf)
31
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.32Use 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 33
7Intermediate34Intermediate
23 50
24 Open the app in a real browser to verify the implementation and iterate on layout and behavior.51 Open the app in a real browser to verify the implementation and iterate on layout and behavior.
25 52
53| Skill | Why use it |
54| --- | --- |
55| [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. |
56
26## Starter prompt57## Starter prompt
27 58
28Implement this UI in the current project using the screenshots and notes I provide as the source of truth.59Implement 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.68- 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.69- Use $playwright-interactive to check that the UI matches the references and iterate as needed until it does.
39 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
73Implement this UI in the current project using the screenshots and notes I provide as the source of truth.
74 Requirements:
75 - Reuse the existing design system components and tokens.
76- Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.
77 - Match spacing, layout, hierarchy, and responsive behavior closely.
78 - Respect the repo's routing, state, and data-fetch patterns.
79 - Make the page responsive on desktop and mobile.
80- If any screenshot detail is ambiguous, choose the simplest implementation that still matches the overall direction and note the assumption briefly.
81 Validation:
82- Compare the finished UI against the provided screenshots for both look and behavior.
83- Use $playwright-interactive to check that the UI matches the references and iterate as needed until it does.
84
40## Introduction85## Introduction
41 86
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.87When 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 146
102Use Codex to update existing presentations or build new decks by editing slides directly...147Use Codex to update existing presentations or build new decks by editing slides directly...
103 148
104149Data Workflow](https://developers.openai.com/codex/use-cases/generate-slide-decks)[Data Integrations](https://developers.openai.com/codex/use-cases/generate-slide-decks)[
105 150
106151### Create browser-based games### Make granular UI changes
107 152
108153Use Codex to turn a game brief into first a well-defined plan, and then a real browser-based...Use Codex to make one small UI adjustment at a time in an existing app, verify it in the...
109 154
110155Engineering Code](https://developers.openai.com/codex/use-cases/browser-games)Front-end Design](https://developers.openai.com/codex/use-cases/make-granular-ui-changes)