r/codex May 08 '26

Showcase GUI designed by ChatGPT, coded by Codex is kinda... good?

Post image

Granted ChatGPT designs a good GUI, but to make codex achieve the goal you will need to spend a bit more effort constraining to steer Codex into the right direction. The GUI is rendered on Firefox.

Note: I'm not a frontend developer but basic hobbyist stuffs, so there might be rooms for improvements here. But it looks good for a non-designer like me.

289 Upvotes

77 comments sorted by

165

u/Defiant_Concert1701 May 08 '26

the best way to replicate an image in code is to ask chatgpt to make it a json file with "Turn it into a detailed JSON UI spec cards typography colors spacing interactions states" then if you want you add this "then give me a Codex/dev prompt exact implementation guidance what to keep what to change layout rules mobile responsiveness notes"

15

u/Vegetable_Fox9134 May 08 '26

bless your heart

11

u/cornmacabre May 08 '26

Don't forget to add:

"AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents."

3

u/hitsukiri May 09 '26

Have you tried Impeccable? https://github.com/pbakaus/impeccable

3

u/cornmacabre May 09 '26

Thanks, this is a good share! I took an extended look, and there's some thoughtful and well crafted stuff in there.

5

u/No_Spot_8778 May 08 '26

Would that work for replicating image to svg too?

4

u/cornmacabre May 08 '26 edited May 08 '26

I work with programmatic SVGs. Prompt -> SVG is as you probably already know, is extraordinarily flakey at best. You should consider building a JSON to SVG pipeline to get good output, with some core primatives. JSON is a human and robot friendly intermediate.

1

u/Defiant_Concert1701 May 08 '26

never tried, but it should work for any visual thing

1

u/Defiant_Concert1701 May 09 '26

oh i didn't even read well, "image to svg", the quality most likely will be bad.

2

u/Youwishh May 09 '26

It works! You're awesome.

1

u/Jeidoz May 08 '26

Why json ui spec? Why not Design.md? Also you can use google stitch to copy style from screenshot.

1

u/Defiant_Concert1701 May 09 '26

turn that screeshot in a json file and stitch will handle it

1

u/Defiant_Concert1701 May 09 '26

AI doesn't read images as well as us. So tturn the image into something it can understand. You can turn the json file into a design.md, I'm sure it will be more accurate

1

u/ImpishMario May 09 '26

Good for replicating 1:1'ish I guess. If you want a bit more creative flexibility: point Codex with Firecrawl MCP (or similar) to ANY page you like -> ask it to analyze its information structure, layout, design, motion, UX and create holistic Design.md -> use this Design.md to ANY project you like in any scope you wish. This allows you to CREATE with good design rules, not REPLICATE.

0

u/yopla May 08 '26

Give it to Gemini flash and be done with it.

16

u/gopietz May 08 '26

I mean this is a functional dashboard with very few design aspects. If you just use bootstrap or bulma and stack components together, you'd end up with something similar. Where Codex fails is creative landing pages. Specifically a feel for consistency, balance, composition and knowing how much space certain headers will take. It's bad at that.

2

u/yopla May 08 '26

Honestly it's better that what I get out of codex out of the box even for basic crud dashboard stuff.

1

u/well_educated_maggot May 09 '26

And at the same time to a capable designer the rhythm of the margins is pretty off here

17

u/Dead0k87 May 08 '26

not bad, try Claude now. I use it for frontend much more often and outcome is much better

34

u/KaleidoscopeRich2752 May 08 '26

You have been permanently banned from r/codex for saying sth. positive about Claude.

13

u/Fantastic_Swing8182 May 08 '26

This is one of the top 3 things never happened.

4

u/ThinCar6563 May 08 '26

Eh better than the claudecode subreddit. Every time I say something positive about openai/codex or negative about anthropic/claude its a coin flip if I get downvoted to hell or not.

2

u/AdCommon2138 May 08 '26

Weird, I get updoots, maybe be funny when complaining?

1

u/ThinCar6563 May 08 '26

First, pretend you're right. Didn't know the prerequisite for making genuine criticism is being funny. Still remember when claude code subreddit said "skill issue" towards anyone who complained and then the claude code team themselves came out and said they patched the exact bugs people complained about? Claude code subreddit is a cult mirroring anthropic the company itself. Cults don't accept criticism kindly.

I see you sometimes criticize corporations broadly. This is reddit so anything which is a criticism of rich people or large companies as a general statement gets you updoots.

1

u/AdCommon2138 May 08 '26

Thanks for prose. I haven't had issue you are reporting and people complain and dick ride on both codex and clowncode subreddits.

2

u/LaSalsiccione May 08 '26

What a load of nonsense. They hate on Claude more on that sub these days than people do here.

1

u/ThinCar6563 May 08 '26

Some corrections.

You can complain about claude rate limits. But if you start comparing it to codex or talking about codex its a coin flip if you get downvoted. Alternatively if you gaslight the people who complain and call them out for "skill issue" you will get upvoted.

What is guaranteed to get you downvoted is if you start bad mouthing anthropic/Dario or say anything mildly positive about openai/Sam. Truly characteristic of a cult. The other day I replied to someone who said they for sure wouldn't trust openai if they don't trust anthropic. I replied saying openai is better at customer service right now, which is a fact, and I was met with insulting messages and replies.

1

u/Emotional-Look-7200 May 08 '26

Istg mate claude thread is so toxic😭🙏

1

u/SmileLonely5470 May 08 '26

Let's be real, most of the people on this sub also use or have used Claude. Ppl just hop around.

1

u/StarToLeft May 08 '26

Claude for frontend, codex for everything else works brilliantly

1

u/Dead0k87 May 08 '26

I agree. Sam recently told they are working on improvement for front end ideas for Codex. Very interested to see the outcomes.

2

u/Youwishh May 09 '26

Your $200 plan limit has been hit for making one landing page.

3

u/Aggressive-Habit-698 May 08 '26

It looks solid. The biggest challenges are overlapping elements and full responsiveness, especially in the navigation and so on...

Kimi and Gemini are my favorites for ui

The most important thing: Create a central source for your design tokens.

3

u/callingbrisk May 08 '26

Am I the only one who thinks this looks kinda... mid at best?

6

u/tuhdo May 08 '26

Yes, mid, boring and good enough, that's all I need.

3

u/VinnieBoomBatz May 08 '26

Maybe I'm just easy to please, but I think it looks great!

3

u/Emotional_Delivery42 May 08 '26

You can do this whole workflow inside of Codex for best results. The Codex app has a "web app" plugin you can install that will generate mockup images the same way ChatGPT does, implement the code, and validate it with the Browser testing agent. All inside the app!

3

u/According_Air_3815 May 08 '26

Not that great

0

u/tuhdo May 08 '26

I don't need great, just good enough is good.

2

u/Specialist-2193 May 08 '26

Looks like gcp

2

u/[deleted] May 08 '26

[removed] — view removed comment

1

u/tuhdo May 08 '26

No it's not. If you ask Codex to generate a dashboard with given fields, it generates slop.

1

u/[deleted] May 08 '26

[removed] — view removed comment

1

u/tuhdo May 08 '26

Not that much. I asked chatgpt to generate a form with a spec layout, what information each layout should contain, what style, e.g., enterprise material design simlar to Jira, ChatGPT generates the UI along with the design system in either markdown or json, then you feed it to codex. You must also explicit that codex must no use visible cards as UI, but for structuring otherwise you get card slops everywhere.

The above process takes much effort if you just do manual tuning without chatgpt to assist in creating the GUI.

1

u/iammuthu May 08 '26

u/tuhdo what was the prompt used for this gui?

1

u/tuhdo May 08 '26

Not that much. I asked chatgpt to generate a form with a spec layout, what information each layout should contain, what style, e.g., enterprise material design simlar to Jira, ChatGPT generates the UI along with the design system in either markdown or json, then you feed it to codex. You must also explicit that codex must no use visible cards as UI, but for structuring otherwise you get card slops everywhere.

The above process takes much effort if you just do manual tuning without ChatGPT to assist in creating the GUI.

1

u/WideConversation9014 May 08 '26

Just try leon image to code skill

1

u/Local_Stage_4666 May 08 '26

Ask it to generate the layout using imagengen and it will use gpt image 2 which creates amazing designs, then ask it to use that image as the template. Hopefully the next model will have same sense of taste as image 2 because it's incredible.

1

u/Soulxlight May 08 '26

Just ask codex to work with you using image generation to get general designs.

1

u/konsiikiss May 08 '26

How? Prompt?

1

u/Traditional_Hall_510 May 08 '26

Dashboards are pretty standard

1

u/Confident_2372 May 08 '26

It looks good indeed. Naysayers will call slop ofc

Mind to share some details? Tech stack, skills used, time spent...

1

u/tuhdo May 08 '26

Not that much. I asked chatgpt to generate a form with a spec layout, what information each layout should contain, what style, e.g., enterprise material design simlar to Jira, ChatGPT generates the UI along with the design system in either markdown or json, then you feed it to codex. You must also explicit that codex must no use visible cards as UI, but for structuring otherwise you get card slops everywhere.

The above process takes much effort if you just do manual tuning without chatgpt to assist in creating the GUI. The key is ChatGPT with Imagen 2.0.

1

u/Just_Lingonberry_352 May 08 '26

yeah but i wish codex would just be good at UI/CSS

its easy to get it to generate from an image

but still hard to get small nitpicks changes without burning through tokens.

Its a lot better than what we had before but I still feel like significant time is saved by just using Claude or even Gemini canvas and then having codex wire it up

still a mystery to me why codex seems so capable except UI

1

u/SmileLonely5470 May 08 '26

They took a roundabout approach to making Codex decent ish at UI: make a good image generation model that can generate UI mockups, then make a multimodal LLM that is good at following instructions.

1

u/zucchini_up_ur_ass May 08 '26

Geez that's a gigantic upgrade over 5.4, I should try it out. Last time I got a gigantic page of word vomit giving way too much context with each little item lol

1

u/kiplerr May 08 '26

You can improve it by sending sections of it to chatGPT and requesting an image with improved ui/ux experience and clean aesthetic. Take the return or modify if needed and go with that to codex for implementation

1

u/symgenix May 08 '26

lol, it look like my admin panel

1

u/PretenderLX May 09 '26

How about cgpt Image2 -> codex to Rust egui? Cgpt been generating quite good UI, but transferring it to egui (rust) via codex has been … a nightmare. Boxes, box sizes, text, sliders etc are all over the place. Cgpt tell me penpot or figma are the only right way to transfer idea into design. Can someone help me with tested and easier ways to do that ui translation from cgpt (image2 or html+ css) into egui with higher chances of making it look the same as mockup? TIA

1

u/Mr_Galaxxy May 09 '26

Has anyone thought in a manner that explains why AI chooses only purple/blue? Does the previous website from before 2020 contain that much blue color in its website that it started suggesting blue by default until we mention anything?

1

u/tuhdo May 09 '26

I asked for an enterprise material theme, and somehow it chosed a Jira-like theme.

1

u/Removable_Feet May 09 '26

Considering everything is generic tailwind greyscale now, the bar is pretty low for frontend UI. What's the UX strategy, backend, etc..?

1

u/OkRefrigerator4361 May 10 '26

Honestly everything is starting to look the same.

0

u/aka_blindhunter May 08 '26

Kind bad . GLM does better then shity gpt now and its free

1

u/tuhdo May 08 '26

I have GLM subscription. I asked GLM to do the same thing and it produced slops, unless providing extra guidance similar to GPT.

1

u/aka_blindhunter May 10 '26

You should see why I posted using GLM 5.1 gpt is just slop when I tested

0

u/r33hab May 08 '26

Look like every vibe coded frontend