Web development

For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.

Build responsive UI from designs and prompts.

Codex works great with existing design systems, taking into account constraints and visual inputs to produce a responsive UI. These use cases are helpful when you are building web apps and need to iterate on frontend designs.

Get from idea to prototype

Use Codex to turn a rough idea into a visual direction and implement a first prototype.

Get from idea to proof of concept: Use Codex with ImageGen to turn a rough idea into a visual direction, implement the smallest...

Build from Figma

Use Codex to pull design context from Figma and turn it into code that follows the repo's components, styling, and design system.

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

Iterate on the UI

Leverage Codex to make targeted changes from visual inputs or prompts, and have it verify its work in the browser.

Build responsive front-end designs: Use Codex to translate screenshots and design briefs into code that matches the repo's...
Make granular UI changes: Use Codex to make one small UI adjustment at a time in an existing app, verify it in the...

Pick up scoped Slack tasks

Tag Codex in Slack when there's a feature request or a reported issue, so that it can pick up the task and work on it in the background.

Kick off coding tasks from Slack: Mention @Codex in Slack to start a chat tied to the right repo and environment, then...

Deploy a preview

Use Codex to build or update a web app, deploy it with Vercel, and hand back a live URL you can share.

Deploy an app or website: Use Codex with Build Web Apps and Vercel to turn a repo, screenshot, design, or rough app...

Ship changes faster

Use Codex in GitHub to make sure changes are safe to merge so you can have a faster development loop.

Review GitHub pull requests: Use Codex code review in GitHub to automatically surface regressions, missing tests, and...

tracks/web-development.md +9 −7

1# Web development1# Web development

2 2

3> For the complete documentation index, see [llms.txt](/llms.txt). Markdown versions of documentation pages are available by appending `.md` to the page URL.

3Build responsive UI from designs and prompts.5Build responsive UI from designs and prompts.

4 6

5Codex works great with existing design systems, taking into account constraints and visual inputs to produce a responsive UI.7Codex works great with existing design systems, taking into account constraints and visual inputs to produce a responsive UI.

9 11

10Use Codex to turn a rough idea into a visual direction and implement a first prototype.12Use Codex to turn a rough idea into a visual direction and implement a first prototype.

11 13

~~12- https://developers.openai.com/codex/use-cases/idea-to-proof-of-concept~~14- [Get from idea to proof of concept](https://developers.openai.com/codex/use-cases/idea-to-proof-of-concept): Use Codex with ImageGen to turn a rough idea into a visual direction, implement the smallest...

13 15

14## Build from Figma16## Build from Figma

15 17

16Use Codex to pull design context from Figma and turn it into code that follows the repo's components, styling, and design system.18Use Codex to pull design context from Figma and turn it into code that follows the repo's components, styling, and design system.

17 19

~~18- https://developers.openai.com/codex/use-cases/figma-designs-to-code~~20- [Turn Figma designs into code](https://developers.openai.com/codex/use-cases/figma-designs-to-code): Use Codex to pull design context, assets, and variants from Figma, translate them into code...

19 21

20## Iterate on the UI22## Iterate on the UI

21 23

22Leverage Codex to make targeted changes from visual inputs or prompts, and have it verify its work in the browser.24Leverage Codex to make targeted changes from visual inputs or prompts, and have it verify its work in the browser.

23 25

~~24- https://developers.openai.com/codex/use-cases/frontend-designs~~26- [Build responsive front-end designs](https://developers.openai.com/codex/use-cases/frontend-designs): Use Codex to translate screenshots and design briefs into code that matches the repo's...

~~25- https://developers.openai.com/codex/use-cases/make-granular-ui-changes~~27- [Make granular UI changes](https://developers.openai.com/codex/use-cases/make-granular-ui-changes): Use Codex to make one small UI adjustment at a time in an existing app, verify it in the...

26 28

27## Pick up scoped Slack tasks29## Pick up scoped Slack tasks

28 30

29Tag Codex in Slack when there's a feature request or a reported issue, so that it can pick up the task and work on it in the background.31Tag Codex in Slack when there's a feature request or a reported issue, so that it can pick up the task and work on it in the background.

30 32

~~31- https://developers.openai.com/codex/use-cases/slack-coding-tasks~~33- [Kick off coding tasks from Slack](https://developers.openai.com/codex/use-cases/slack-coding-tasks): Mention `@Codex` in Slack to start a chat tied to the right repo and environment, then...

32 34

33## Deploy a preview35## Deploy a preview

34 36

35Use Codex to build or update a web app, deploy it with Vercel, and hand back a live URL you can share.37Use Codex to build or update a web app, deploy it with Vercel, and hand back a live URL you can share.

36 38

~~37- https://developers.openai.com/codex/use-cases/deploy-app-or-website~~39- [Deploy an app or website](https://developers.openai.com/codex/use-cases/deploy-app-or-website): Use Codex with Build Web Apps and Vercel to turn a repo, screenshot, design, or rough app...

38 40

39## Ship changes faster41## Ship changes faster

40 42

41Use Codex in GitHub to make sure changes are safe to merge so you can have a faster development loop.43Use Codex in GitHub to make sure changes are safe to merge so you can have a faster development loop.

42 44

~~43- https://developers.openai.com/codex/use-cases/github-code-reviews~~45- [Review GitHub pull requests](https://developers.openai.com/codex/use-cases/github-code-reviews): Use Codex code review in GitHub to automatically surface regressions, missing tests, and...