use-cases/frontend-designs.md Codex Docs, 2026-04-08 18:32 UTC → 2026-05-07 20:02 UTC

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

2name: Build responsive front-end designs

3tagline: Turn screenshots and visual references into responsive UI with visual checks.

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

5 matches the repo's design system, then use Playwright to compare the

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

7 it looks right.

8featured: true

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

10skills:

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

2 23 

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

4 24 

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.25 Requirements:

6 26 

7Intermediate27 - Reuse the existing design system components and tokens.

8 28 

91h29 - Translate the screenshots into this repo's utilities and component

30 patterns instead of inventing a parallel system.

10 31 

11Related links32 - Match spacing, layout, hierarchy, and responsive behavior closely.

12 33 

13[Codex skills](https://developers.openai.com/codex/skills)34 - Respect the repo's routing, state, and data-fetch patterns.

14 35 

15## Best for36 - Make the page responsive on desktop and mobile.

16 37 

17 - Creating new front-end projects from scratch38 - If any screenshot detail is ambiguous, choose the simplest implementation

18- Implementing already designed screens or flows from screenshots in an existing codebase39 that still matches the overall direction and note the assumption briefly.

19 40 

20## Skills & Plugins

21 41 

22- [Playwright](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive)42 Validation:

23 43 

24 Open the app in a real browser to verify the implementation and iterate on layout and behavior.44 - Compare the finished UI against the provided screenshots for both look and

45 behavior.

25 46 

26## Starter prompt47 - Use $playwright-interactive to check that the UI matches the references

27 48 and iterate as needed until it does.

28Implement this UI in the current project using the screenshots and notes I provide as the source of truth.49 suggestedEffort: medium

29 Requirements:50relatedLinks:

30 - Reuse the existing design system components and tokens.51 - label: Codex skills

31- Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.52 url: /codex/skills

32 - Match spacing, layout, hierarchy, and responsive behavior closely.53---

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

34 - Make the page responsive on desktop and mobile.

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

36 Validation:

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

39 54 

40## Introduction55## Introduction

41 56 

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

83 98 

84### Suggested follow-up prompt99### Suggested follow-up prompt

85 

86[current implementation image] [reference image]

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

88[if needed, specify what is different]

89 

90## Related use cases

91 

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

93 

94### Turn Figma designs into code

95 

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

97 

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

99 

100### Generate slide decks

101 

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

103 

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

105 

106### Create browser-based games

107 

108Use Codex to turn a game brief into first a well-defined plan, and then a real browser-based...

109 

110Engineering Code](https://developers.openai.com/codex/use-cases/browser-games)