Is OpenAI Sites GOATED for UI/UX Design?
Chapters8
Examines how AI generated UIs often lack visual hierarchy and polish, using 5.5 and OpenAI Sites as examples.
DesignCourse shows how hand-crafting OpenAI Sites in Figma reveals both AI strengths and clear UI flaws, emphasizing fundamentals over automation.
Summary
DesignCourse’s Ben critiques the UI shown in OpenAI's Sites announcement by attempting to recreate the design in Figma, hand-by-hand, to test how much AI can actually improve the look. He notes that Rohan from OpenAI Codex suggested the tools work well together with Sites, hinting at a powerful AI-driven design workflow. The video highlights specific issues with the original UI, such as lack of typographic visual hierarchy, no clear grouping, and inconsistent white space. Ben points out that three design rows end at different points, creating balance problems and clutter. Through the hand-crafting process in Figma, he demonstrates how tiny adjustments in spacing, alignment, and typography dramatically improve readability and structure. He argues that AI alone isn’t enough; designers must develop a trained eye and practice fundamentals. The fundamentals he emphasizes are visual hierarchy, color and contrast, typography, white space, alignment, and grouping. He plugs DesignCourse.com’s project-based courses as a path to mastering these skills, reinforcing that practice leads to better outcomes than relying on AI alone. If you want better UI results, Ben suggests focusing on fundamentals and iterating carefully rather than accepting AI-generated layouts at face value.
Key Takeaways
- Recreating the OpenAI Sites UI in Figma reveals a lack of typographic visual hierarchy in the original design.
- Three content rows in the design end at different points, creating balance issues and visual clutter.
- Inconsistent white space between type layers degrades layout quality and readability.
- Fine-tuning spacing and alignment in Figma markedly improves structure and usability over the AI-generated version.
- Fundamentals like visual hierarchy, color/contrast, typography, white space, and grouping are essential for top-tier UI, beyond AI generation.
- Practice-driven, project-based learning (as offered on DesignCourse.com) helps designers develop the eye for good UI design.
- Relying on AI alone without design fundamentals leads to cluttered outcomes that users struggle to parse.
Who Is This For?
Graphic and UI/UX designers curious about the practical limits of AI-generated interfaces and those looking to sharpen core design fundamentals with hands-on critique and iteration.
Notable Quotes
"All of our models harness and tooling come together very nicely with Sites to enable creating very useful and very well-designed software."
—Rohan from OpenAI Codex comments on how the tools integrate with Sites to produce usable software.
"Isn't that amazing? Well, anyhow, the process though is just one of iteration, all right? You want to make many small fine-tuned adjustments."
—Host explains the iterative hand-drawing process in Figma.
"One thing AI gets wrong often is consistent white space."
—Pointed critique on AI-generated UI spacing.
"The top and bottom element are styled exactly the same. You're not really sure which you're supposed to look at."
—Observes lack of typographic hierarchy in the original design.
Questions This Video Answers
- Can AI-generated UI designs reach the polish of hand-crafted layouts in Figma?
- What are common UI design pitfalls when using AI tools like OpenAI Sites?
- How does proper white space and visual hierarchy impact UI clarity in AI-assisted design?
- What should designers focus on to improve AI-produced UI outputs (color, typography, spacing, grouping)?
OpenAI SitesFigmaUI/UX designTypographyWhite spaceVisual hierarchyOpenAI CodexClaude designAI-assisted designDesignCourse
Full Transcript
Unfortunately, most of you don't know what good design is. For instance, check this out. 5.5 medium made this? No way. I hope Sites has some crazy magic behind it that the generated UI really looks that good. This is the UI that he's talking about and this is actually a screenshot from OpenAI's announcement yesterday about Sites. And in this video, I'm going to show you a time lapse of me recreating this design by hand in Figma to show you just how much more it can be improved. But it's not just him, check out the comments. Rohan actually works for OpenAI Codex specifically and said, "All of our models harness and tooling come together very nicely with Sites to enable creating very useful and very well-designed software." So, basically, Claude design on steroids?
Yes. I guess they're using many skills and We can hope they are cooking the UI part for all users. Now, a few people kind of got the hint though, but it looks not that good. Is it a psyop? It looks like 5.5 to me, prompted not to make cards, but it has the 5.5 clutter and lack of visual hierarchy. That's a key sign. [music] All right, so here I am in Figma and believe it or not, it's 2026 and I am hand designing. I am replicating the entire design by hand. Isn't that amazing? Well, anyhow, the process though is just one of iteration, all right?
You want to make many small fine-tuned adjustments, which you'll see. Now, here's a big issue with the original. This is has a lack of typographic visual hierarchy. The top and bottom element are styled exactly the same. You're not really sure which you're supposed to look at and there's no grouping. They're all spread out evenly, which is a big issue. Here's another problem. There's not enough separation between all these type layers. This is a lot of clutter without much structure and without much white space between them. One thing AI gets wrong often is consistent white space.
Just look at the 3x amount of white space underneath the third row compared to the top two. So, these tiny inconsistencies, they add up to degrade the overall quality of a layout. Another issue, look at how there are three different rows and they're all ending at different points in the design. So, this creates a balance issue. All right, so here's the original. And here is my version. Once again, the original my version. So hopefully you can see at a glance at least that my version is much easier to track, it's much easier to follow and understand.
So as you can see, it's still not enough just to rely solely on AI to generate your UIs for you if you want to have the best possible outcome. You need to develop the eye for UI design and you can only do that if you actually practice it and you start trying to learn the fundamentals. What are the fundamentals of UI UX design? Well, for UI design specifically, the things you really need focus on are going to be visual hierarchy, like I talked about already, color and contrast, very important, typography, understanding white space and alignment and grouping, all those things.
So all that stuff is stuff that I've taught and teach at designcourse.com throughout my courses and my courses are all mainly just project based, like the latest one I'm finishing up this week. Check it out if you're interested in really honing in the design and obviously subscribe here because this is the type of stuff that I try to focus on as much as possible. I'll see you all very soon and goodbye.
More from DesignCourse
Get daily recaps from
DesignCourse
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.









