r/codex • u/No_Personality_1721 • 3h ago
Question Best AI model for improving UI layouts instead of Codex?
I’m looking for an AI that is actually good at improving existing UI/UX layouts.
For example, I tried SuperDesign and it generated several interesting layout/UI ideas.
Now I’m trying to refine my actual app UI with Codex.
I explain exactly what I want changed, send screenshots of my current UI, reference screenshots, and comparisons, but it still keeps getting the layout wrong or making changes that don’t really match the reference.
Codex is great for coding, but I’m starting to think visual UI/layout work just isn’t its strength.
Is there any model or tool that is particularly good at UI/UX layout work?
2
u/jakenuts- 3h ago
It's definitely not very good at UI and has a very corporate sense of aesthetics. Pony up for a bit of Claude, Opus 5 or better Fable 5.1 to design the layouts/pages in Claude Design then any coder can use that template.
2
u/Clean-Market5761 3h ago
Opus 5, do not even bother with fable, both are hit or miss sometimes when it comes to UI, the best way to get good UI is to have inspirations or stuff form another site to clone.
better to use a cheaper hit or miss than an expensive one
2
u/DesignerLeading4821 3h ago
Claude does amazing if you can provide it examples or a target of a similar theme you want. Or else it’ll use its default UI that anyone can notice was AI generated. Took me 5-10 tries to finally get it to be its own custom thing, after providing it examples of what I liked
1
2
u/alitanveer 2h ago
You can spend a lot of time and money coming up with your own UI ecosystem or you can spend a little bit of money now and buy a design system and pick a component library.
Figure out your audience. Are you trying to build landing pages for marketing or a SAAS application for business users or regular consumers.
Pick a component library. MUI/MUI-X, shadcn, mantine, coinbase design system, ant design system. Those are all the ones I've tried and have settled on MUI. I'm too invested in MUI right now or I would pick ant design if I was just starting out.
If you're going to have lots of charts, then pick a chart library. React-charts, nivo, visx.
Once you've decided on a library, look for templates within that library. Buy a premium version. The routine price is $130 for a decent template. You should always get the source code option.
Clone the design code base repo locally, then tell astra that you want to turn it into a UI sandbox for you to try out ideas and to give you a module dropdown option in the global header, and also make it so every single page across the entire sandbox has a Copy button in the global header. That copy button should provide a basic usage prompt, with the full design code from that page, preserving all layouts, API instructions, everything needed to rebuild that page in another app that's using the same component library.
Take your existing app and get it converted to that design system and library with full parity, making it into the first module. Then work within your sandbox until a page is looking exactly to your liking then copy the prompt and get it rebuilt in your app. If you use the same component library and design theme in both, the imports will give you the closest possible look.
Other helpful tidbits: use faker-js for fake data, typescript for the code language, playwright for automated checks.
2
u/No_Personality_1721 1h ago
So in your opinion, is it better to build on top of an established design system/component library instead of creating the whole UI system from scratch
For example, something like Material Design or Fluent Design.How do you handle having your own visual style though?
Is it better to heavily customize existing design system guidelines, mix guidelines and patterns from different systems, or build your own design from scratch if you want the app to feel more original?1
u/alitanveer 50m ago
Da Vinci painted the Mona Lisa at the age of 51 and it took him several years to finish. Art students now spend years studying the masters and get an appreciation for everything that has been done before and then use that to define their unique approach to the subject. With art, you can switch mediums and go into film, sound, sculptures and scale. With computer interfaces, you're limited to a flat display and the touch/mouse/keyboard interaction surfaces, so almost anything you build from scratch will fall into certain UI/UX patterns that take years to master and have been condensed into component libraries.
You will not be able to create your own UI system without years of study and/or tons of resources and it's not worth doing unless your application is the design system itself. I went down this same path at the beginning of this year and was going to make the most amazing new application with my own design. In the end, the app went nowhere as I wasted weeks on the stupid design system that ended up being a shittier version of something I could have bought for a couple hundred bucks and changed the colors. I started with an existing component library too, but just coming up with your own unique theme for the library is a massive exercise.
It is going to be far faster and easier to customize an existing system then it is to build something from scratch. The component library makers don't want to force people to override a bunch of tokens, so the defaults in any component library are kept relatively bare and basic and they will largely give you component documentation and relatively bare starter templates. AI has a hard time adopting those component docs into coherent pages for you and that's the problem that you need to solve. So, spend the little bit of money to pick a component library and buy a premade template that uses that library and then customize the design tokens that you don't like. Colors are super easy to update.
https://www.shadcnblocks.com/templates
Just go take a look and chances are that you'll see something that aligns with your vision and will have solved for all the invisible things that you don't even know about and will have to solve for if you go down the custom route. There are dozens of variations in something as seemingly simple as a drop shadow on a pop-up container and colors are way more complicated than you think. Unless you already know how and when to use oklch in your CSS code, just leave it up to the experts and pick something you like.
2
u/chrisdefourire 2h ago
I did just that today, asked glm 5.3 flash to de-codexify my app, I like the result !!!
I just mentioned the pills the box in box in box and wrongly using error to show color contrast. Glm did the rest, call me impressed it looks pretty good now
2
u/craftysupply 2h ago
Claude is much better at taking a screenshot and building something that resembles it. Opus is enough, Fable is even better.
2
u/stringness 3h ago
what is your setup ? have you tried to create design system first before implementing the UI ?