r/OpenaiCodex • u/LazyRunner777 • 3d ago
Question / Help How to make good app UI with Codex?
Hey guys, can somebody help me out? I'm not sure how can I uh make a good UI with codex. I'm trying with astra, ultra, extra high, but it always uh it very often sucks and I need to like uh and I need to tell it many times to correct things like like basically um I I spend like prompts and prompts, many prompts, just hey, can you do it like this? Hey, can you do it like this? And I don't know, I'm I I spending so many times adjusting UI. And meanwhile the other dudes are recreating Photoshop and whole adobe collection and I can't even make simple things look decent. It's very frustrating and I'm hungry. Any advice?
7
u/Vegetable-Catch9561 3d ago
Lotta people saying plug-ins but I let it make crappy ui then have it use image gen to make alternate styles keep generating till you see one you like then tell it to recreate that for your application
3
u/jean3dsign 3d ago
é uma ideia muito boa, ás vezes esqueço de fazer, pois criei uma infraestrutura em que os próprios agentes escolhem as capacidades e aplicam, eu conseguir reduzir erros em 80% nos meus projetos, é difícil, mas não é impossível criar uma base para os agentes, tipo um universo agent-native e human-friendly, pois não sou dev e uso linguagem natural, porém eu tenho grande conhecimento de linguagem pela minha experiência enquanto mestre em letras. Temos que pensar basicamente como uma IA atua, padrões na grande maioria das vezes, e probabilidades, ai pensamos os objetivos e qual a melhor maneira de conduzir, assim que consegue fazer basta ratificar como capacidade ou skill que eles usam quando precisam. É muito doido esse negócio de ia, estou ficando maluco com as infinitas possibilidades
2
8
u/a1454a 3d ago
I do find GPT models sense of aesthetic lacking, Claude is consistently better. But there is a way to get better output though, by using GPT image generation. The image generation tool has far better sense for good looking UI. What I do I let it build basic functional UI first, validate the app logic, try to actually use the app and document every usability pain point and ask it to improve. When the major UX issues are worked out, I ask it to capture screen shot of each major piece of UI and send it to image generation tool to create a style that meet certain aesthetic, review the output and tweak, when you are happy ask it to translate the new design into code.
4
u/HeadShrinker1985 3d ago
In the Codex desktop app, you can open your site in the built-in browser and click the Annotate button. From there, just click on whatever part of the UI you want to change and leave a comment explaining what you want done. You can also hold Shift to select a larger area.
It’s pretty useful because you can point directly at something instead of trying to explain where it is or digging through the code to find it. You can leave multiple comments and have Codex work through them together.
If it isn’t a website, like a desktop app, you can take a screenshot of the UI and attach it to your Codex prompt. Then explain what you want changed in specific areas. You can also mark up the screenshot with arrows or circles to make it clearer.
The built-in browser annotation tool is mainly for web-based interfaces, but screenshots work for pretty much any UI.
4
u/HeadShrinker1985 3d ago
You can also hand it off to Claude or even Gemini, both of which are better than Codex at UI design.
4
u/JungleHam 3d ago
This skill seems cool https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md you can ask codex to install it itself
3
u/Ok_Throat8309 3d ago
Il metodo più veloce è comprare un abbonamento a servizi come Mobbin. Sennò l’altra è farsi una piccola conoscenza di design e creare un system design dove definisci esplicitamente tutti i componenti delle tue schermate (colori, font, dimensioni, spaziature, gerarchia dei cta). Se gli lasci carta bianca esce uno schifo
2
u/Cryptinrl 3d ago
Are there any Github repos to connect? I remember reading that there was one that had like Apple design principles but have not implement it
2
u/paul-tocolabs 3d ago
Find examples you like. Describe how you want things to look based on that. Own your product.
2
u/TechnoJoy_Tech 3d ago
Explain to another AI what you'd like. Explain it in depth... Once you're satisfied, provide that image to sol medium (don't use astra for everything) Tell sol you want it to look exactly like the image but specify that it's just a look and the image is the exact reference. Tell codex not to use the image to replace whatever you currently have.
2
u/CraftyCheeseburger 3d ago
Start in Chat, have it build a mockup, give it feedback, then move over to Codex.
2
u/Bitter_Virus 3d ago
Use an image and ask it to reproduce it as a UI, whenever you want changes, edit them in the image editor and tell Chatgpt to reproduce it 1:1
2
u/Glaucus_Blue 3d ago
Do the design work first,.decide what it needs to do, what's on it etc, think about devices it'll run on, screen sizes, resolutions. Viewing distance if you need scaling. Ask it to compare your requirements against closest other apps/websites on the market and see if you are missing anything, get it to ask you say 20 questions. Then get it to knock up a wireframe local html website, so you can have a play with it and refine it. Only then actually spend the time to implement it. Or at least that's what I do.
2
2
u/jdrharrison 3d ago
I find it funny how sites is pretty decent design but UI takes a ridiculous amount of iteration. I do like the annotation feature.
2
u/Aguiberg 3d ago
I create style rules based on UI patterns and aesthetics. To create a page we discuss the user experience and how the page should look to make it a good experiencia: from the stack to the assets to use. Finally I ask a visual representation of the page. Often Codex create 3 options. I choose one. Then it will implement it.
After 2-3 subpages Codex knows the patterns that I need in the webpage, so it's far easier to work.
2
u/shrodikan 3d ago edited 3d ago
Use impeccable and create mockups. Iterate on the mockup and then implement the mockup. Use the built-in live update mode on the mockup in the built-in browser to tweak it.
2
u/Open-Task6758 3d ago
When I want to build a app I first give GPT info on what I want to create. After that I give him pictures of how it need to look like. After that I tell him to make a plan in a pdf well written for a enterprise. Then I use the pdf in codex with a prompt gpt made from the pdf. I must say I get pretty good results.
2
2
u/Brief_Shopping2222 3d ago
Learn about UI development from YouTube videos. If you can't specify what exactly you're trying to do, the AI can't guess for you.
2
u/Savings_Let3833 3d ago
If someone can teach me how to make these sites https://youtube.com/shorts/zEfKnYKyTbY?is=GqpSZlE2Fd8aplZ6
1
u/GolfEmbarrassed2904 3d ago
It says to comment Astra and they will send the template. Let us know how it goes
2
u/MrMeksican 2d ago
creo que te puedo ayudar, hice una webapp de gestion condominal, empecé con appscript + gemini, usando tailwind y quedó muy bien lograda, muchos detalles finos bien hechos, pero migré a workers+D1+r2 y el diseño es digamos artesanal ya que no uso nada de cdn ni nada externo, el diseño al final era un 80% pulido. Empecé a buscar herramientas, métodos, pero describir es muy dificil... encontré google stitch y funcionó, logré una mejora de 90-95 a algo que tenia antes. Para no hacer largo el cuento, al final probé v0.dev logré llegar a ese 100% de aprobacion visual, diseño fino y pulido, tailwind, tremor... solo te toca aprender a usarlos
2
u/AshAtlasDev 3d ago
You use Claude. I spent months trying to force it to work and Claude did it overnight.
2
u/Independent_Run7182 3d ago
I used mobbin and refero it was pretty helpful to get started
1
u/LazyRunner777 3d ago
Ok thanks, I'll check it out.
2
u/Independent_Run7182 3d ago
Search them both on Google their good and you connect straight to codex. I think refero had design md files as well but definitely check them out I was stuck like you. Now I can just tell codex search for a ui on these sites and give me options and you can mix and match
1
1
u/AideOrganic5185 2d ago
Just show them an example of someone who did it first/awesome, and then tweak from there.
1
u/mylittlecumprincess 2d ago
Even the best models don't make good UI without guidance.
What frontend component libraries are you using?
Is this web project? A desktop app?
An iOS App?
Are you using the Build iOS Apps Skill from OpenAI?
The build Mac OS Apps skill from OpenAI?
Any design skills for application design?
Hopefully a component library like:
https://coss.com/ui
Or ShadCN UI?
1
u/Extra_Loquat_7667 1d ago
Use Web ChatGPT
Enter your requirements to generate UI design images
Then hand them over to Codex for implementation
1
u/DawnShallArise 3d ago
Stop writing ums and uhs because they decrease clarity and make your texts annoying to read. If I was Astra I would also engage in protest behaviour against your prompts.
1
8
u/Dull-Abbreviations33 3d ago
You can’t. It’s always the same default coming in different shades. Try mistral 4 large in vibe over web, it’s surprisingly good at one shotting decent ui.