Build responsive front-end designs

Introduction

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

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

Start from references

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

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

Be specific

The more specific you are about the expected interaction patterns and the style you want, the better the result will be. The 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. The 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.

Prepare the design system

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

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

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

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

Leverage Playwright

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

It can resize the browser window to different screen sizes and check the layout at different breakpoints.

Make sure you have the Playwright interactive skill enabled in Codex. For more details, see the skills documentation.

Iterate

The first pass should already be directionally close to the screenshots. For complex layouts, interactions, or animation-heavy UI, expect a few rounds of adjustment.

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

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

Suggested follow-up prompt