use-cases/frontend-designs.md Codex Docs, 2026-04-24 12:28 UTC → 2026-05-07 20:02 UTC

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

2 2name: Build responsive front-end designs

3Codex use cases3tagline: Turn screenshots and visual references into responsive UI with visual checks.

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

5![](/assets/OpenAI-black-wordmark.svg)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

7![Codex](/assets/OAI_Codex-Lockup_Fallback_Black.svg)7 it looks right.

8 8featured: true

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

10 10skills:

11# Build responsive front-end designs11 - token: $playwright

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

13Turn screenshots and visual references into responsive UI with visual checks.13 description: Open the app in a real browser to verify the implementation and

14 14 iterate on layout and behavior.

15Difficulty **Intermediate**15bestFor:

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 scratch16 - Creating new front-end projects from scratch

24- Implementing already designed screens or flows from screenshots in an existing codebase17 - Implementing already designed screens or flows from screenshots in an

25 18 existing codebase

26# Contents19starterPrompt:

20 body: >-

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

22 provide as the source of truth.

27 23 

28[← All use cases](https://developers.openai.com/codex/use-cases)

29 24 

30Copy page [Export as PDF](https://developers.openai.com/codex/use-cases/frontend-designs/?export=pdf)25 Requirements:

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 26 

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

43 28 

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

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

46 31 

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

48 33 

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

50 35 

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

52 37 

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

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

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 40 

57## Starter prompt

58 41 

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:42 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 43 

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")44 - Compare the finished UI against the provided screenshots for both look and

45 behavior.

72 46 

73Implement this UI in the current project using the screenshots and notes I provide as the source of truth.47 - Use $playwright-interactive to check that the UI matches the references

74 Requirements:48 and iterate as needed until it does.

75 - Reuse the existing design system components and tokens.49 suggestedEffort: medium

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

77 - Match spacing, layout, hierarchy, and responsive behavior closely.51 - label: Codex skills

78 - Respect the repo's routing, state, and data-fetch patterns.52 url: /codex/skills

79 - Make the page responsive on desktop and mobile.53---

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 54 

85## Introduction55## Introduction

86 56 

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

128 98 

129### Suggested follow-up prompt99### 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[![](/images/codex/codex-wallpaper-2.webp)

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)[![](/images/codex/codex-wallpaper-3.webp)

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)[![](/images/codex/codex-wallpaper-1.webp)

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)