1# Web development – Codex1# Web development
2
3Build responsive UI from designs and prompts.
2 4
3Codex works great with existing design systems, taking into account constraints and visual inputs to produce a responsive UI.5Codex works great with existing design systems, taking into account constraints and visual inputs to produce a responsive UI.
4These use cases are helpful when you are building web apps and need to iterate on frontend designs.6These use cases are helpful when you are building web apps and need to iterate on frontend designs.
7 9
8Use Codex to turn a rough idea into a visual direction and implement a first prototype.10Use Codex to turn a rough idea into a visual direction and implement a first prototype.
9 11
10[12- https://developers.openai.com/codex/use-cases/idea-to-proof-of-concept
11
12### Get from idea to proof of concept
13
14Use Codex with ImageGen to turn a rough idea into a visual direction, implement the smallest...
15
16Front-end Engineering](https://developers.openai.com/codex/use-cases/idea-to-proof-of-concept)
17 13
18## Build from Figma14## Build from Figma
19 15
20Use Codex to pull design context from Figma and turn it into code that follows the repo’s components, styling, and design system.16Use Codex to pull design context from Figma and turn it into code that follows the repo's components, styling, and design system.
21
22[
23
24### Turn Figma designs into code
25 17
26Use Codex to pull design context, assets, and variants from Figma, translate them into code...18- https://developers.openai.com/codex/use-cases/figma-designs-to-code
27
28Front-end Design](https://developers.openai.com/codex/use-cases/figma-designs-to-code)
29 19
30## Iterate on the UI20## Iterate on the UI
31 21
32Leverage Codex to make targeted changes from visual inputs or prompts, and have it verify its work in the browser.22Leverage Codex to make targeted changes from visual inputs or prompts, and have it verify its work in the browser.
33 23
34[24- https://developers.openai.com/codex/use-cases/frontend-designs
35 25- https://developers.openai.com/codex/use-cases/make-granular-ui-changes
36### Build responsive front-end designs
37
38Use Codex to translate screenshots and design briefs into code that matches the repo's...
39
40Front-end Design](https://developers.openai.com/codex/use-cases/frontend-designs)[
41
42### Make granular UI changes
43
44Use Codex to make one small UI adjustment at a time in an existing app, verify it in the...
45
46Front-end Design](https://developers.openai.com/codex/use-cases/make-granular-ui-changes)
47 26
48## Pick up scoped Slack tasks27## Pick up scoped Slack tasks
49 28
50Tag 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.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.
51
52[
53
54### Kick off coding tasks from Slack
55 30
56Mention `@Codex` in Slack to start a task tied to the right repo and environment, then...31- https://developers.openai.com/codex/use-cases/slack-coding-tasks
57
58Integrations Workflow](https://developers.openai.com/codex/use-cases/slack-coding-tasks)
59 32
60## Deploy a preview33## Deploy a preview
61 34
62Use Codex to build or update a web app, deploy it with Vercel, and hand back a live URL you can share.35Use Codex to build or update a web app, deploy it with Vercel, and hand back a live URL you can share.
63 36
64[37- https://developers.openai.com/codex/use-cases/deploy-app-or-website
65
66### Deploy an app or website
67
68Use Codex with Build Web Apps and Vercel to turn a repo, screenshot, design, or rough app...
69
70Front-end Integrations](https://developers.openai.com/codex/use-cases/deploy-app-or-website)
71 38
72## Ship changes faster39## Ship changes faster
73 40
74Use Codex in GitHub to make sure changes are safe to merge so you can have a faster development loop.41Use Codex in GitHub to make sure changes are safe to merge so you can have a faster development loop.
75 42
76[43- https://developers.openai.com/codex/use-cases/github-code-reviews
77
78### Review GitHub pull requests
79
80Use Codex code review in GitHub to automatically surface regressions, missing tests, and...
81
82Integrations Workflow](https://developers.openai.com/codex/use-cases/github-code-reviews)
83
