use-cases/frontend-designs.md +155 −0 added
1# Build responsive front-end designs | Codex use cases
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
28[← All use cases](https://developers.openai.com/codex/use-cases)
29
30Copy page [Export as PDF](https://developers.openai.com/codex/use-cases/frontend-designs/?export=pdf)
31
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.
33
34Intermediate
35
361h
37
38Related links
39
40[Codex skills](https://developers.openai.com/codex/skills)
41
42## Best for
43
44 - Creating new front-end projects from scratch
45- Implementing already designed screens or flows from screenshots in an existing codebase
46
47## Skills & Plugins
48
49- [Playwright](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive)
50
51 Open the app in a real browser to verify the implementation and iterate on layout and behavior.
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
57## Starter prompt
58
59Implement this UI in the current project using the screenshots and notes I provide as the source of truth.
60 Requirements:
61 - Reuse the existing design system components and tokens.
62- Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.
63 - Match spacing, layout, hierarchy, and responsive behavior closely.
64 - Respect the repo's routing, state, and data-fetch patterns.
65 - Make the page responsive on desktop and mobile.
66- If any screenshot detail is ambiguous, choose the simplest implementation that still matches the overall direction and note the assumption briefly.
67 Validation:
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.
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
85## Introduction
86
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.
88
89With the Playwright skill, Codex can open the app in a real browser, compare the implementation to your screenshots for different screen sizes, and iterate on layout or behavior until the result is closer to the target.
90
91## Start from references
92
93Give Codex the clearest references you have for the UI you want. A single screenshot can be enough for a narrow task, but the handoff gets better when you include multiple states such as desktop and mobile layouts, hover or selected states, and any empty or loading views that matter.
94
95The references do not need to be perfect design deliverables. They just need to make the intended hierarchy, spacing, and direction concrete enough that Codex is not guessing.
96
97## Be specific
98
99The more specific you are about the expected interaction patterns and the style you want, the better the result will be.
100The model tends to default to high-frequency patterns and style so if it's not obvious from your references that you want something else, the UI might look generic.
101The more input you give, be it more reference inspiration or more specific instructions, the more you can expect to have a UI that stands out.
102
103## Prepare the design system
104
105Codex works best when the target repo already has a clear component layer. Codex can automatically use your existing component and design system instead of recreating them from scratch.
106
107If you think it's necessary (i.e. if you're not using a standard stack), specify to Codex which primitives to reuse, where your tokens live, and what the repo considers canonical for buttons, inputs, cards, typography, and icons.
108
109If you're starting from an existing codebase, it's very likely that Codex will understand on its own how to use your components and design system, but if starting from scratch, it's a good idea to be explicit.
110
111Ask Codex to treat the screenshots as a visual target but to translate that target into the project's actual utilities, component wrappers, color system, typography scale, spacing tokens, routing, state management, and data-fetch patterns.
112
113## Leverage Playwright
114
115Playwright is a great tool to help Codex iterate on the UI. With it, Codex can open the app in a real browser, compare the implementation to the screenshots you provided, and iterate on layout or behavior.
116
117It can resize the browser window to different screen sizes and check the layout at different breakpoints.
118
119Make sure you have the Playwright interactive skill enabled in Codex. For more details, see the [skills documentation](https://developers.openai.com/codex/skills).
120
121## Iterate
122
123The first pass should already be directionally close to the screenshots. For complex layouts, interactions, or animation-heavy UI, expect a few rounds of adjustment.
124
125Ask Codex to compare the implementation back to the screenshots, not just whether the page builds. When conflicts come up, it should prefer the repo's design-system tokens and only make minimal spacing or sizing adjustments needed to preserve the overall look of the design.
126
127Use additional screenshots or short notes if they help clarify states that are not obvious from one image.
128
129### Suggested follow-up prompt
130
131[current implementation image] [reference image]
132This doesn't look right. Make sure to implement something that matches closely the reference:
133[if needed, specify what is different]
134
135## Related use cases
136
137[
138
139### Turn Figma designs into code
140
141Use Codex to pull design context, assets, and variants from Figma, translate them into code...
142
143Front-end Design](https://developers.openai.com/codex/use-cases/figma-designs-to-code)[
144
145### Generate slide decks
146
147Use Codex to update existing presentations or build new decks by editing slides directly...
148
149Data Integrations](https://developers.openai.com/codex/use-cases/generate-slide-decks)[
150
151### Make granular UI changes
152
153Use Codex to make one small UI adjustment at a time in an existing app, verify it in the...
154
155Front-end Design](https://developers.openai.com/codex/use-cases/make-granular-ui-changes)