use-cases/make-granular-ui-changes.md Codex Docs, 2026-04-23 12:28 UTC → 2026-05-07 20:02 UTC

1# Make granular UI changes | Codex use cases1---

2 2name: Make granular UI changes

3Codex use cases3tagline: Use Codex-Spark for fast, focused UI iteration in an existing app.

4 4summary: Use Codex to make one small UI adjustment at a time in an existing app,

5![](/assets/OpenAI-black-wordmark.svg)5 verify it in the browser, and keep iterating quickly from a popped-out chat

6 6 window near your preview.

7![Codex](/assets/OAI_Codex-Lockup_Fallback_Black.svg)7skills:

8 8 - token: $playwright

9Codex use case9 url: https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive

10 10 description: Open the running app in a real browser, inspect the changed route,

11# Make granular UI changes11 and verify each small UI adjustment before the next iteration.

12 12bestFor:

13Use Codex-Spark for fast, focused UI iteration in an existing app.13 - Existing apps where the main structure is already built and you need small

14 14 visual adjustments

15Difficulty **Easy**15 - Fast product or design review loops where each note should become one

16 16 focused code change

17Time horizon **5m**17 - UI polish passes that need browser verification but should not turn into a

18 18 broad redesign

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.19starterPrompt:

20 20 title: Make One UI Change

21## Best for21 body: >-

22 22 Make this UI change in the existing app:

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 23 

45- Existing apps where the main structure is already built and you need small visual adjustments24 [describe the exact spacing, alignment, color, copy, responsive, or

46- Fast product or design review loops where each note should become one focused code change25 component-state adjustment]

47- UI polish passes that need browser verification but should not turn into a broad redesign

48 26 

49## Skills & Plugins

50 27 

51- [Playwright](https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive)28 Constraints:

52 29 

53 Open the running app in a real browser, inspect the changed route, and verify each small UI adjustment before the next iteration.30 - Change only the files needed for this UI adjustment.

54 31 

55| Skill | Why use it |32 - Reuse existing components, tokens, icons, and layout patterns.

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 33 

59## Starter prompt34 - Keep behavior, data flow, and routing unchanged unless I explicitly ask

35 for it.

60 36 

61 Make this UI change in the existing app:37 - Start or reuse the dev server, inspect the current UI in the browser, make

62[describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment]38 the smallest patch, and verify the result visually.

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 39 

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 40 

72 Make this UI change in the existing app:41 Stop after this one change and summarize the files changed plus the browser

73[describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment]42 check you ran.

74 Constraints:43 suggestedModel: gpt-5.3-codex-spark

75 - Change only the files needed for this UI adjustment.44 suggestedEffort: low

76 - Reuse existing components, tokens, icons, and layout patterns.45relatedLinks:

77- Keep behavior, data flow, and routing unchanged unless I explicitly ask for it.46 - label: Codex-Spark

78- Start or reuse the dev server, inspect the current UI in the browser, make the smallest patch, and verify the result visually.47 url: /codex/speed#codex-spark

79Stop after this one change and summarize the files changed plus the browser check you ran.48 - label: Floating pop-out window

49 url: /codex/app/features#floating-pop-out-window

50---

80 51 

81## Introduction52## Introduction

82 53 

108 79 

109If the result is close but not quite right, keep the follow-up equally specific:80If the result is close but not quite right, keep the follow-up equally specific:

110 81 

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 down82## When to slow down

116 83 

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.84Do 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 85 

119Fast UI iteration works best when Codex is adjusting an already-understood surface, not redesigning the app from scratch.86Fast 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[![](/images/codex/codex-wallpaper-1.webp)

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)[![](/images/codex/codex-wallpaper-2.webp)

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)[![](/images/codex/codex-wallpaper-1.webp)

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)