use-cases/frontend-designs.md Codex Docs, 2026-04-16 00:46 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 

71Implement 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

72 Requirements:45 behavior.

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

74- 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

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

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

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

78- 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

79 Validation:52 url: /codex/skills

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

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

82 54 

83## Introduction55## Introduction

84 56 

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

126 98 

127### Suggested follow-up prompt99### Suggested follow-up prompt

128 

129[current implementation image] [reference image]

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

131[if needed, specify what is different]

132 

133## Related use cases

134 

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

136 

137### Turn Figma designs into code

138 

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

140 

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

142 

143### Generate slide decks

144 

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

146 

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

148 

149### Add iOS app intents

150 

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

152 

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