use-cases/frontend-designs.md Codex Docs, 2026-04-15 06:44 UTC → 2026-05-07 17:08 UTC

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

2 2name: Build responsive front-end designs

3[← All use cases](https://developers.openai.com/codex/use-cases)3tagline: Turn screenshots and visual references into responsive UI with visual checks.

4 4summary: Use Codex to translate screenshots and design briefs into code that

5Copy page [Export as PDF](https://developers.openai.com/codex/use-cases/frontend-designs/?export=pdf)5 matches the repo's design system, then use Playwright to compare the

6 6 implementation to your references for different screen sizes and iterate until

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.7 it looks right.

8 8featured: true

9Intermediate9coverImage: /codex/use-cases/frontend-designs-use-case.png

10 10skills:

111h11 - token: $playwright

12 url: https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive

13 description: Open the app in a real browser to verify the implementation and

14 iterate on layout and behavior.

15bestFor:

16 - Creating new front-end projects from scratch

17 - Implementing already designed screens or flows from screenshots in an

18 existing codebase

19starterPrompt:

20 body: >-

21 Implement this UI in the current project using the screenshots and notes I

22 provide as the source of truth.

12 23 

13Related links

14 24 

15[Codex skills](https://developers.openai.com/codex/skills)25 Requirements:

16 26 

17## Best for27 - Reuse the existing design system components and tokens.

18 28 

19 - Creating new front-end projects from scratch29 - Translate the screenshots into this repo's utilities and component

20- Implementing already designed screens or flows from screenshots in an existing codebase30 patterns instead of inventing a parallel system.

21 31 

22## Skills & Plugins32 - Match spacing, layout, hierarchy, and responsive behavior closely.

23 33 

24- [Playwright](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive)34 - Respect the repo's routing, state, and data-fetch patterns.

25 35 

26 Open the app in a real browser to verify the implementation and iterate on layout and behavior.36 - Make the page responsive on desktop and mobile.

27 37 

28| Skill | Why use it |38 - If any screenshot detail is ambiguous, choose the simplest implementation

29| --- | --- |39 that still matches the overall direction and note the assumption briefly.

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 40 

32## Starter prompt

33 41 

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

35 Requirements:

36 - Reuse the existing design system components and tokens.

37- Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.

38 - Match spacing, layout, hierarchy, and responsive behavior closely.

39 - Respect the repo's routing, state, and data-fetch patterns.

40 - Make the page responsive on desktop and mobile.

41- If any screenshot detail is ambiguous, choose the simplest implementation that still matches the overall direction and note the assumption briefly.

42 Validation:42 Validation:

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

45 43 

46Implement this UI in the current project using the screenshots and notes I provide as the source of truth.44 - Compare the finished UI against the provided screenshots for both look and

47 Requirements:45 behavior.

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

49- Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.47 - Use $playwright-interactive to check that the UI matches the references

50 - Match spacing, layout, hierarchy, and responsive behavior closely.48 and iterate as needed until it does.

51 - Respect the repo's routing, state, and data-fetch patterns.49 suggestedEffort: medium

52 - Make the page responsive on desktop and mobile.50relatedLinks:

53- If any screenshot detail is ambiguous, choose the simplest implementation that still matches the overall direction and note the assumption briefly.51 - label: Codex skills

54 Validation:52 url: /codex/skills

55- Compare the finished UI against the provided screenshots for both look and behavior.53---

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

57 54 

58## Introduction55## Introduction

59 56 

100Use additional screenshots or short notes if they help clarify states that are not obvious from one image.97Use additional screenshots or short notes if they help clarify states that are not obvious from one image.

101 98 

102### Suggested follow-up prompt99### Suggested follow-up prompt

103 

104[current implementation image] [reference image]

105This doesn't look right. Make sure to implement something that matches closely the reference:

106[if needed, specify what is different]

107 

108## Related use cases

109 

110[![](/images/codex/codex-wallpaper-2.webp)

111 

112### Turn Figma designs into code

113 

114Use Codex to pull design context, assets, and variants from Figma, translate them into code...

115 

116Front-end Design](https://developers.openai.com/codex/use-cases/figma-designs-to-code)[![](/images/codex/codex-wallpaper-3.webp)

117 

118### Generate slide decks

119 

120Use Codex to update existing presentations or build new decks by editing slides directly...

121 

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

123 

124### Add iOS app intents

125 

126Use Codex and the Build iOS Apps plugin to identify the actions and entities your app should...

127 

128iOS Code](https://developers.openai.com/codex/use-cases/ios-app-intents)