use-cases/make-granular-ui-changes.md +141 −0 added
1# Make granular UI changes | Codex use cases
2
3Codex use cases
4
5
6
7
8
9Codex use case
10
11# Make granular UI changes
12
13Use Codex-Spark for fast, focused UI iteration in an existing app.
14
15Difficulty **Easy**
16
17Time horizon **5m**
18
19Use Codex to make one small UI adjustment at a time in an existing app, verify it in the browser, and keep iterating quickly from a popped-out chat window near your preview.
20
21## Best for
22
23- Existing apps where the main structure is already built and you need small visual adjustments
24- Fast product or design review loops where each note should become one focused code change
25- UI polish passes that need browser verification but should not turn into a broad redesign
26
27# Contents
28
29[← All use cases](https://developers.openai.com/codex/use-cases)
30
31Copy page [Export as PDF](https://developers.openai.com/codex/use-cases/make-granular-ui-changes/?export=pdf)
32
33Use Codex to make one small UI adjustment at a time in an existing app, verify it in the browser, and keep iterating quickly from a popped-out chat window near your preview.
34
35Easy
36
375m
38
39Related links
40
41[Codex-Spark](https://developers.openai.com/codex/speed#codex-spark) [Floating pop-out window](https://developers.openai.com/codex/app/features#floating-pop-out-window)
42
43## Best for
44
45- Existing apps where the main structure is already built and you need small visual adjustments
46- Fast product or design review loops where each note should become one focused code change
47- UI polish passes that need browser verification but should not turn into a broad redesign
48
49## Skills & Plugins
50
51- [Playwright](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive)
52
53 Open the running app in a real browser, inspect the changed route, and verify each small UI adjustment before the next iteration.
54
55| Skill | Why use it |
56| --- | --- |
57| [Playwright](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive) | Open the running app in a real browser, inspect the changed route, and verify each small UI adjustment before the next iteration. |
58
59## Starter prompt
60
61 Make this UI change in the existing app:
62[describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment]
63 Constraints:
64 - Change only the files needed for this UI adjustment.
65 - Reuse existing components, tokens, icons, and layout patterns.
66- Keep behavior, data flow, and routing unchanged unless I explicitly ask for it.
67- Start or reuse the dev server, inspect the current UI in the browser, make the smallest patch, and verify the result visually.
68Stop after this one change and summarize the files changed plus the browser check you ran.
69
70[Open in the Codex app](codex://new?prompt=Make+this+UI+change+in+the+existing+app%3A%0A%5Bdescribe+the+exact+spacing%2C+alignment%2C+color%2C+copy%2C+responsive%2C+or+component-state+adjustment%5D%0A%0AConstraints%3A%0A-+Change+only+the+files+needed+for+this+UI+adjustment.%0A-+Reuse+existing+components%2C+tokens%2C+icons%2C+and+layout+patterns.%0A-+Keep+behavior%2C+data+flow%2C+and+routing+unchanged+unless+I+explicitly+ask+for+it.%0A-+Start+or+reuse+the+dev+server%2C+inspect+the+current+UI+in+the+browser%2C+make+the+smallest+patch%2C+and+verify+the+result+visually.%0A%0AStop+after+this+one+change+and+summarize+the+files+changed+plus+the+browser+check+you+ran. "Open in the Codex app")
71
72 Make this UI change in the existing app:
73[describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment]
74 Constraints:
75 - Change only the files needed for this UI adjustment.
76 - Reuse existing components, tokens, icons, and layout patterns.
77- Keep behavior, data flow, and routing unchanged unless I explicitly ask for it.
78- Start or reuse the dev server, inspect the current UI in the browser, make the smallest patch, and verify the result visually.
79Stop after this one change and summarize the files changed plus the browser check you ran.
80
81## Introduction
82
83When you have an existing app and want to iterate fast on the UI, you can use `gpt-5.3-codex-spark` to make small, focused changes to the UI.
84Codex-Spark is our fastest model, optimized for near-instant, real-time coding iteration.
85
86This works best as a tight loop: one visual note, one focused edit, one browser check, then the next note.
87
88You can use the [Codex Spark model](https://developers.openai.com/codex/models#gpt-53-codex-spark) for this
89 task. It is available on Pro plans.
90
91## Pick your model
92
93For fast UI iteration, start with `gpt-5.3-codex-spark` if you have access to it. It is less capable that our general-purpose models, but is designed for real-time coding iteration. If you don't have access to it, use our latest model with `medium` or `low` reasoning effort.
94
95That tradeoff is useful for granular UI work. You usually do not need the deepest model to move a button, tune a breakpoint, or adjust a component state. You need a model that responds quickly, understands the local code, edits the right file, and can repeat the loop without making the iteration feel heavy.
96
97## Development flow
98
991. Open the existing app and get the relevant route or component visible.
1002. Pop out the active Codex conversation into a [floating window](https://developers.openai.com/codex/app/features#floating-pop-out-window) and keep it near your browser, editor, or design preview while you work.
1013. Give Codex one specific UI change at a time. Include the route, viewport, current screenshot, target screenshot, or exact product note if you have it.
1024. Ask Codex to inspect the current implementation, make the smallest defensible edit, and preserve the app's existing components, tokens, layout primitives, and data flow.
1035. Review the result, then send the next small adjustment in the same thread.
104
105## Write small prompts
106
107Granular UI prompts should be direct and narrow. A good prompt names the surface, the target change, and the validation you expect.
108
109If the result is close but not quite right, keep the follow-up equally specific:
110
111The change is close. Keep the implementation, but adjust only this detail:
112[describe the remaining mismatch]
113Verify the same route and viewport again before you stop.
114
115## When to slow down
116
117Do not keep using the fast loop if the task stops being granular. Switch to a stronger model and a more deliberate prompt when the change needs broad refactoring, a new design system primitive, non-trivial accessibility behavior, or a product decision that affects more than one screen.
118
119Fast UI iteration works best when Codex is adjusting an already-understood surface, not redesigning the app from scratch.
120
121## Related use cases
122
123[
124
125### Add iOS app intents
126
127Use Codex and the Build iOS Apps plugin to identify the actions and entities your app should...
128
129iOS Code](https://developers.openai.com/codex/use-cases/ios-app-intents)[
130
131### Adopt liquid glass
132
133Use Codex and the Build iOS Apps plugin to audit existing iPhone and iPad UI, replace custom...
134
135iOS Code](https://developers.openai.com/codex/use-cases/ios-liquid-glass)[
136
137### Build a Mac app shell
138
139Use Codex and the Build macOS Apps plugin to turn an app idea into a desktop-native...
140
141macOS Code](https://developers.openai.com/codex/use-cases/macos-sidebar-detail-inspector)