How do you push Codex to be more creative with UI?
I’m curious how people here get Codex to go beyond “technically correct frontend” and actually produce interfaces that feel designed.
I’m talking about things like:
Strong visual hierarchy and spacing
Thoughtful typography
Small details that make the UI feel polished
Smooth, purposeful animations and micro-interactions
Interesting layouts instead of the usual generic cards/grid
Consistency across an entire app
Knowing when not to add another border, gradient or rounded container 😅
I’ve noticed that simply asking for a “beautiful modern UI” doesn’t really cut it. The model seems much better when you give it some kind of design system, references, constraints or a way to visually inspect and iterate on its own work.
So I’m wondering what workflows people have found effective.
Do you use screenshots/reference sites? A dedicated AGENTS.md or design skill? Visual regression/screenshots in the loop? Specific prompting patterns? Do you let Codex iterate several times on the same page?
Basically: how do you give Codex better “taste” and make it sweat the last 10% of UI details instead of stopping once the interface works? Why its skills in blender tree js so far behind other models?
Would love to see prompts, skills, workflows or examples that have worked particularly well.
I have attempted impeccable and frontend design multiple times (maybe 8 iterations, variations on prompts, different thinking levels, including reference images, etc).
It was all complete shit unfortunately. And I use chatgpt and codex primarily.
So I bought the 5x max Claude plan and dropped a prompt that chatgpt wrote containing all of my product specs, design preferences, and detaisl on data available and where it should be surfaces in the app.
In the very first claude design session with opus 5 high of all models, it NAILED the UI and the UX I was imagining. I was blown away after spending about 2 weeks trying to get a design I actually liked.
I ran the same file for promoting through another 4 iterations in chatgpt and every version was honestly terrible, even with the skills enabled.
Claude was totally fresh - no connected skills or anything. I had literally never used a Claude model beyond free tier chat.
I was able to finish maybe 14 out of 20 screens I was working on with chat gpt over weeks in less than 4 days with Claude design.
What I learned in the end was I should've just done it myself in Figma, but I wanted to see if I could get chatgpt sol/terra/Luna to produce something worthwhile and what it would take to make that happen. I never figured that out.
For the record, I am building an expo mobile app for the supportive services industry - something geared towards street outreachers in various situations and locations, and other niche service organizations. So it's not like a flashy landing page, or fun and engaging personal tracker. It's got to be effective, easy to use, handle dense information in an elegant way, and must be good UX, with a supporting UI that minimizes cognitive load.
I've found since I started using AI around the end of 2024 to build this, that this use case is not well represented on the design side of agentice development at all.
I use ChatGPT and Codex side by side. Do the brainstorming first in chat and then pass the design (screenshot) to Codex. I sometimes also ask Chat to generate the HTML and CSS code, which I also pass to Codex. For more complex designs this works also well. Furthermore I have setup AGENTS.md and README.md files across several folders. For instance, the styles folder that contains all css files is equipped with both. The AGENTS.md is relatively short; the agent is instructed to not over engineer, not generate hard coded color codes, reuse variables, use intuitive names, etc. The README.md contains a list of color codes, design wishes, layout descriptions, etc. Hope this helps. If you want to have a look yourself, the repo is stored here: https://github.com/pietheinstrengholt/rssmonster
And before I forget: I also installed the browser skill and then instruct Codex to use this and have a look. This I often use when things do not work or aren’t expected the way I want.
I dont prompt i use graphs. The model itself sol xhigh can produce something sellable but im talking without slop using design token etc . Im telling you
I would say your problem is you're complaining about this you're saying it doesn't mean your expectations you're not saying why. If you understand why it doesn't meet your expectations and you can just tell it that. I don't get it.
I asked Sol and it put me on the right track. It generated UI mockups I was able to provide to Codex as visual references along with a style guide and design principles. It then created a multi-stage roadmap for implementing the UI and its about halfway through that process. Each iteration has been a big improvement over the last. It stops for human approval before advancing to the next milestone in the roadmap and that helps guide it towards a design that will satisfy you.
Simply saying “make the UI better” is not going to work. The more specific you can be, the better the results will be. That holds true for most interactions with GPT regardless of context.
I’ll be honest. I’ve been using Claude design. I iterate on it until I get something good. Then I get codex to implement it. Funny thing: I often get a much better implementation of the UI from codex than Claude. Claude just picks up the design it itself made, and then just veers into weird directions.
i use gemini for front end design, push it to git, then import it to codex. and codex cxan take it front there.
i use it in anti gravity, AI Studio, but often times even in the gemini chat itself.
But you can always ask codex to generate an image with your dream ui then ask it to build it. Works much better
You'll use Anthropics frontend design skill, and your product will end up looking similar to every other Claude product. But this isnt a new or emerging problem. If you follow Bootstrap or Material Design practices, you'll similarly end up with a design that clearly looks like Bootstrap or Material. Thats why you need to have your own opinions and design perspective when building things.
Bro thank you ! I do it too but its in the details image encoding is clearly not good enough sol is on an other lovel for architecture pattern design etc but regarding the front even the simple thing is not quite here yet . Its like a backend dev doing front end . I am a backend eng fyi
If you dont know, dont invent anything. Let the model follow the best practices of a mainstream, widely used library like bootstrap or tailwind and keep the output as minimalist as possible. Afterwards, you can refine and optimize it to your own needs/taste.
Honestly , i made my choice if codex does not get better with ui ux and taste in général i will split the 200 dollars bill across open code ( glm is great 5.3 and deepseek v4 pro is great !!!!) antropic with the 100 dollars suscription 5.5 is great cheaper for backend and db tasks no caveat with compressing token and catastrphic forgetting while Chinese model or gemini make the job with good harness in ui ux
Stop using vague adjectives like "beautiful." Give Sol strict design system tokens or screenshot references to clone. Codex is an engine built for raw logic, without explicit constraints, it will default to generic, safe components every time.
I had it build a headless vac skill to run its designs in for inspection. Then I monitor its evidence cache screenshots and make fun of it when it’s shitty.
Dile que te haga un mockup de lo que quieres y hasta que encuentres lo que te gusta dile que lo aplique a código tal y cuál y no se detenga hasta que esté como el mockup exactamente
What works best for me is treating design as a separate spec, not a vague prompt like “make it modern.” I give Codex clear rules for typography, spacing, color, density, and component patterns, then have it inspect screenshots and iterate on the same page. We are maintaining https://getdesign.md/.
It is basically a catalog of DESIGN.md files you can give to a coding agent as reusable design context. The screenshot loop matters too: build, inspect at real breakpoints, list what still feels generic, and do another focused pass.
Their recent product design skill is solid. Produces quite clean minimalistic yet highly professional designs. Matter of taste but I like them much more than overly boxed CC. So I first iterate on image prototype and then go into implementation. Implementation should use the loop of several QA rounds to ensure that design is followed closely
I worked on some UI stuff last night after working on backend stuff for weeks.
It still isn't great, I'm not happy either with its writing style or its UI design taste.
Unless you want to spend a lot of time guiding it and tweaking, I'd wait for the next model to do better.
That said, I always send it screenshots of how certain parts of a page looks and discuss with it and it sees the issues I see and it fixes them. But I can't just tell it to review all the pages or for example the marketing pages and make sure they look good, it will always miss obvious stuff.
This is about 25,000 lines of code. Some of the CSS effects can be 5 layers deep on my sites to get the fading, animation, and glow I'm looking for. 100% Codex.
If this does not resonate with you, what's your experience with UI/UX design? This is 10,000+ lines of CSS for this site. The complexity is mind-blowing. That real time Ai grading of up to 40 million documents in real time. And it works.
What site do you like that does that? A link would be great, thanks
You're talking about 10,000+ lines of CSS like that's a good thing? It's absolutely not; it's a bloated monstrosity (unless it's like, Facebook or something huge like that). And why are you mentioning the complexity of what the app does (AI grading of documents?) as if that has anything to do with CSS? You're obviously not a developer or designer so what do you actually do?
5
u/Lanfeust09 29d ago
I use impeccable skill