OpenAI Is Lying - CourtneyR.dev's 2nd Brain

OpenAI Is Lying ![rw-book-cover](https://img.youtube.com/vi/l-gfVIm0Xn8/maxresdefault.jpg) 🔗 **Source:** [OpenAI Is Lying](https://www.youtube.com/watch?v=l-gfVIm0Xn8) > [!note]+ Document Notes > tags: #ai-models #frontend-development #openai #claude #gemini #user-experience #web-development > author: Theo - t3․gg > source: YouTube > reference: https://www.youtube.com/watch?v=l-gfVIm0Xn8 > date created: 2024-12-19 10:30 > > # 🏷️ Title: OpenAI is lying >  ## 🧰 Action Inbox - [H1] Compare frontend outputs across AI models before choosing — GPT 5.4 consistently produces card-heavy layouts #frontend-development - [H2] Use Anthropic's frontend design skill instead of OpenAI's — proven better results across models #ai-models - [H3] Test hover states and animations on AI-generated UIs — reveals model quality #user-experience ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [OpenAI Frontend Design Article](https://openai.com/index/designing-delightful-frontends-with-gpt-4o/) - [Anthropic Claude Frontend Skill](https://github.com/anthropics/claude-frontend-skill) - [Kernel Auth Platform](https://soyv.link/kernel) ## 📝 Summary - Theo criticizes OpenAI's article claiming GPT 5.4 can create "production-ready frontends" as misleading - Demonstrates through examples that GPT models consistently produce inferior UI designs compared to Claude and Gemini - Shows OpenAI's examples are full of unnecessary cards and poor layout choices - Argues this damages trust in AI capabilities when companies oversell their models' abilities - Provides comparative analysis showing other models produce significantly better frontend designs ## 📖 Main Content OpenAI published an article titled "Designing delightful frontends with GPT 5.4" claiming their model can produce production-ready frontend designs. The content creator argues this is misleading based on extensive testing across multiple AI models. The core issue identified is that GPT 5.4 suffers from "card syndrome" - every design output contains excessive card-based layouts that look generic and unprofessional. This contrasts sharply with outputs from Claude (Opus) and Gemini 3.1, which produce more varied and aesthetically pleasing designs. The analysis suggests GPT models may be trained on a limited set of UI templates (approximately 4), while Claude has around 10 and Gemini has 15 different design patterns. This explains why GPT outputs appear repetitive and template-heavy. The video includes sponsor content for Kernel, an OAuth platform that simplifies authentication for AI agents accessing websites. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/l-gfVIm0Xn8?t=0) — [H1] OpenAI frontend claims are misleading - Key idea: OpenAI published an article claiming GPT 5.4 creates great frontends, but this is demonstrably false - Evidence: "You cannot get good frontend out of GPT 5.4" #### ⏱️ [02:30](https://youtu.be/l-gfVIm0Xn8?t=150) — [H2] Sponsor: Kernel OAuth platform - Key idea: Kernel provides managed OAuth for AI agents to access real websites - Evidence: "You sign in once and it just works forever" #### ⏱️ [05:15](https://youtu.be/l-gfVIm0Xn8?t=315) — [H1] OpenAI's examples are poor quality - Key idea: The "production-ready" examples shown by OpenAI are actually quite bad - Evidence: "Everything is a card and the text doesn't even fit in the card. It's being cropped out" #### ⏱️ [08:45](https://youtu.be/l-gfVIm0Xn8?t=525) — [H2] Trust erosion in AI companies - Key idea: Bad examples from major AI companies damage overall trust in AI capabilities - Evidence: "When companies like OpenAI, Google, Anthropic, etc. make posts like this about cool things they did and recommend and they're utter garbage that any dev can see through. It erodes trust so goddamn fast" #### ⏱️ [12:00](https://youtu.be/l-gfVIm0Xn8?t=720) — [H3] Anthropic has better frontend skills - Key idea: Claude's frontend design skill produces significantly better results than OpenAI's approach - Evidence: "Without this, Opus tends to not be great at design, but with this, it tends to be surprisingly good and coherent" #### ⏱️ [18:30](https://youtu.be/l-gfVIm0Xn8?t=1110) — [H1] Comparative model analysis - Key idea: Kimmy K2.5 (open-weight model) significantly outperforms GPT 5.4 for frontend design - Evidence: "This is cool. It's very minimal... This could be really good. It's a nice minimal start" #### ⏱️ [25:45](https://youtu.be/l-gfVIm0Xn8?t=1545) — [H2] GPT's card syndrome problem - Key idea: GPT 5.4 consistently produces designs dominated by card layouts regardless of prompting - Evidence: "All of the defaults we got from 5.4 look identical. Exact same layout, different color, same like pills and call outs everywhere" #### ⏱️ [32:15](https://youtu.be/l-gfVIm0Xn8?t=1935) — [H3] Design skills don't fix fundamental issues - Key idea: Even with design skills applied, GPT 5.4 still produces inferior results - Evidence: "5.4 needs to be steered or it will not get close to usable... Still so many cringe cards" #### ⏱️ [38:00](https://youtu.be/l-gfVIm0Xn8?t=2280) — [H2] Template limitation theory - Key idea: GPT models appear trained on very limited UI templates compared to competitors - Evidence: "I would guesstimate that for like homepages and layouts... there's around four templates" #### ⏱️ [42:30](https://youtu.be/l-gfVIm0Xn8?t=2550) — [H1] Training data speculation - Key idea: Different training datasets may explain why some models excel at frontend while others don't - Evidence: "Perhaps there was a data set that was purchased by OpenAI for GPT5... And the other labs did [get updated versions]" #### ⏱️ [48:15](https://youtu.be/l-gfVIm0Xn8?t=2895) — [H3] Community response validates criticism - Key idea: Developer community widely agrees that Claude outperforms GPT for UI work - Evidence: "I prefer CEX for most things, but Claude wins handedly for UI and UX work" #### ⏱️ [52:00](https://youtu.be/l-gfVIm0Xn8?t=3120) — [H2] Call for honest assessment - Key idea: AI companies should be more honest about their models' limitations - Evidence: "I will be as honest as I can be about everything I talk about, even companies I like, even sponsors that I have" ## 📚 References - [OpenAI Frontend Design Article](https://openai.com/index/designing-delightful-frontends-with-gpt-4o/) - [Anthropic Claude Frontend Skill](https://github.com/anthropics/claude-frontend-skill) - [Skills.sh Platform](https://skills.sh) - [Tailwind Templates](https://tailwindui.com) ## 🗣️ Paraphrase - OpenAI published misleading claims about GPT 5.4's frontend design capabilities, showing poor-quality examples as "production-ready" - Comparative testing reveals that open-weight models like Kimmy K2.5 and proprietary models like Claude significantly outperform GPT for UI design - The root issue appears to be training data limitations, with GPT models having access to fewer high-quality UI templates than competitors ## 📰 Newsletter **AI Frontend Reality Check: Why Model Choice Matters for UI Development** This week brought a wake-up call about choosing the right AI model for frontend work. While GPT excels at backend logic, it consistently struggles with UI design, producing repetitive card-heavy layouts that look amateurish. **Key Takeaway**: Different models have distinct strengths. Claude (Opus) and Gemini 3.1 consistently outperform GPT for frontend design, while open-weight alternatives like Kimmy K2.5 offer surprising quality at lower cost. **Practical Tip**: Use Anthropic's frontend design skill across models for better results, and always test hover states and animations to identify AI-generated UI quality. **Community Insight**: The developer community widely acknowledges this performance gap, with many switching to Claude specifically for UI/UX work while using GPT for other tasks. Resources: [Claude Frontend Skill](https://github.com/anthropics/claude-frontend-skill), [Skills.sh](https://skills.sh), [Model Comparison Benchmarks](https://github.com/dra-gen/ai-frontend-benchmark) ## ✅ Action Items #### DevRel - Developer advocacy: Create honest model comparison guides for different use cases, avoiding overselling capabilities - Education: Develop workshops on choosing appropriate AI models for frontend vs backend work - Developer experience: Test and document which models work best for specific development tasks - Developer marketing: Focus on actual strengths rather than inflated claims about universal capability - Community management: Address feedback about model limitations transparently #### OSPO - Policy & Governance: Establish guidelines for honest capability assessment in AI model documentation - License Compliance: Review training data sources and licensing for different AI models used in development - Security Management: Assess risks of using different models for different parts of applications - Software Inventory: Document which AI models are used for which purposes across projects - Developer Support: Provide guidance on model selection for different development tasks #### Community - Maintainers: Share honest experiences about model performance across different domains - Contributors: Test and document model capabilities to help others make informed choices - Sponsors: Support transparent benchmarking initiatives for AI model capabilities #### WordPress - Core: Evaluate which AI models work best for different WordPress development tasks - Design: Test AI models for WordPress theme and block design capabilities - Documentation: Create guides for using AI effectively in WordPress development contexts - Training: Develop curricula that teach appropriate model selection for different tasks ## 🧪 Hypotheses - GPT models are trained on limited UI template datasets compared to Claude and Gemini - Open-weight models may have access to more diverse frontend training data than some proprietary models - Training data vintage affects model performance on modern frontend frameworks and design patterns - Reinforcement learning approaches may amplify template limitations in UI generation ### 📊 Methodology - Comparative study using standardized prompts across multiple AI models for frontend generation - Qualitative assessment of design variety, quality, and production readiness - Analysis of common patterns and failure modes across different model outputs ### ❓ Questions - What specific training data differences cause such dramatic frontend performance gaps between models? - How can AI companies better assess and communicate their models' domain-specific limitations? - What benchmarking methods would provide reliable measures of AI frontend design capability? ### 🔮 Future Research - Systematic analysis of training data composition across different AI models - Development of standardized benchmarks for AI-generated frontend quality assessment - Investigation into optimal model combinations for full-stack development workflows ### 💡 Implications - Practice: Developers should use different AI models for different aspects of web development - Policy: AI companies need better practices for honest capability assessment and marketing - Security: Relying on inappropriate models for tasks may introduce quality and security risks - Education: Training programs should teach model selection alongside technical implementation - Funding: Investment in specialized models may be more effective than general-purpose solutions ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade (technical content with domain-specific terminology) #### 👀 Visual learners - Present: Multiple UI screenshots comparing model outputs, before/after design examples - Improve: Side-by-side comparison grids, visual quality rubrics, design pattern diagrams #### 🔊 Aural learners - Present: Video format with detailed narration and commentary - Improve: Audio-only summary version, podcast discussion format #### 🗣️ Verbal learners - Present: Clear technical explanations, model comparisons with specific examples - Improve: Glossary of AI model terminology, analogy-based explanations #### 🧩 Kinesthetic learners - Present: Step-by-step model testing process, hands-on examples - Improve: Interactive model comparison tool, guided practice exercises #### 🧠 Logical learners - Present: Systematic comparison methodology, cause-and-effect analysis of training data - Improve: Structured decision trees for model selection, quantitative scoring rubrics #### 🧑‍🤝‍🧑 Social learners - Present: Community feedback examples, developer testimonials - Improve: Discussion forums for model experiences, collaborative testing initiatives #### 🧘‍♀️ Solitary learners - Present: Self-directed testing methodology, individual assessment criteria - Improve: Personal model evaluation worksheets, private testing environments #### 🌿 Naturalistic learners - Present: Evolution of AI model capabilities over time, ecosystem thinking about model relationships - Improve: Model ecosystem diagrams, capability evolution timelines ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive video content - Improve: Detailed alt text for UI screenshots, transcript with visual descriptions #### Keyboard navigation - Present: Standard video player controls - Improve: Timestamped navigation menu, keyboard shortcuts for sections #### Contrast and readability - Present: High contrast in video examples - Improve: Ensure all UI examples meet WCAG contrast requirements #### Text resizing and reflow - Present: Video format adaptable to different screen sizes - Improve: Separate text-based summary for better reflow support #### Media and captions - Present: Video with clear audio narration - Improve: Detailed captions including description of visual elements, downloadable transcript #### Forms and interactions - Present: Clear interactive examples - Improve: Accessible versions of comparison tools and testing interfaces ### 🌍 DEIB Assessment #### Cultural breadth - Present: Focus on web development practices common globally - Improve: Examples from diverse design traditions, international UI patterns #### Inclusive language - Present: Technical focus with minimal jargon explanation - Improve: Define technical terms consistently, avoid culture-specific idioms #### Neurodiversity support - Present: Clear section breaks, consistent structure - Improve: Content warnings for flashing elements, summary sections #### Representation - Present: Focus on technical capabilities rather than personal characteristics - Improve: Diverse examples of use cases and applications #### Psychological safety - Present: Strong criticism of companies, not individuals - Improve: Clearer separation of technical criticism from personal attacks ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Systematic comparison methodology provides strong foundation for conclusions - Inductive strength: Multiple examples support generalization about model capabilities - Causal reasoning: Training data explanation provides plausible mechanism for observed differences - Analogical strength: Template comparison effectively explains model limitations #### Fallacies - Ad hominem: Criticism focuses on company decisions and model outputs rather than personal attacks - Cherry picking: Uses systematic comparison rather than selective examples - Hasty generalization: Based on extensive testing across multiple models and scenarios #### Tone of voice - Overall tone: Passionate and critical but technically substantive, with clear frustration about misleading claims ### 🛡️ DARVO Analysis - Deny: No denial patterns observed - direct acknowledgment of model limitations - Attack: Criticism directed at corporate messaging rather than individuals - Reverse victim/offender: No reversal patterns - clear about who is making misleading claims - Emotional cues and rhetoric --- ## Full Transcript [00:00] At this point, y'all probably know that [00:01] I really like OpenAI's models, [00:03] especially for coding. I use GBT 5.4 for [00:06] pretty much everything I built. 90% of [00:08] the time, I am using it. I've been using [00:09] it for everything I've been building [00:11] from Shu to Lawn to T3 Code. Codeex has [00:14] powered the hardest problems I've been [00:16] solving across all of these things [00:18] except for one. And I'll give you a hint [00:20] what that is. You just saw it on all of [00:22] these because everything you're seeing [00:24] right now was not made by codeex or GPD [00:27] 5.4 for because OpenAI models are [00:29] really, really bad at front end. But [00:31] that's not what the title of this video [00:33] is. The title of this video is something [00:35] along the lines of OpenAI is wrong or [00:37] OpenAI is lying to you. We AB test. I'm [00:39] sorry about that in advance. So, what am [00:40] I talking about? Well, I'm talking about [00:42] this and this and this. Please don't do [00:47] this to me, guys. If you put in the [00:49] thought and intentionality required for [00:51] it, you actually get pretty great [00:53] frontends from 5.4. Check out some best [00:56] practices here. Oh boy. I'm gonna just [00:59] say it outright here. This is a lie. You [01:02] cannot get good frontend out of GPT 5.4. [01:05] I want to go through this embarrassment [01:07] of an article, this absurd take that [01:10] OpenAI is seemingly positioning [01:12] themselves as saying that there's a [01:13] skill issue resulting in us not making [01:16] good frontends with GPT models. It is [01:18] gaslighting. It is stupid. It is [01:20] obnoxious. Two quick things though [01:22] before we go further. The first one is [01:24] that this is definitely not the author's [01:26] fault. If you any of you guys give [01:28] Sherwin any crap for this article, I'm [01:30] going to be very very mad at you. The [01:32] second quick thing is actually awesome. [01:33] It's today's sponsor. AI is pretty [01:35] smart, but it gets a lot smarter when [01:36] you give it a browser. It's the thing I [01:38] normally say, but y'all already know [01:39] that. But you'll start running into [01:40] problems when you give your agent access [01:42] to the browser. And the biggest one by [01:44] far is O. Today's sponsor is Kernel, and [01:46] I think they solved this. They have a [01:48] new managed O platform that allows you [01:50] to programmatically sign into real [01:52] websites. It couldn't be simpler to do. [01:54] First, you create an O connection. and [01:55] it's literally four lines of code. When [01:57] that happens, a URL is spit out that a [01:59] user can go to and sign in with their [02:01] credentials for any website. Once [02:03] they've been signed in, that is now a [02:04] profile that is persisted on their [02:06] managed off platform. So going forward, [02:09] as long as you use the correct [02:10] identifier for that profile, you can [02:12] sign in any browser session and it will [02:14] handle the actual sign-in flow for you [02:16] for every website going forward. Yes, [02:18] that's right. You sign in once and it [02:20] just works forever. Well, that can't be. [02:22] I use two-factor authentication. So do [02:25] I. I use it through one password and [02:26] guess who has a one password [02:28] integration. Seriously though, this is [02:29] so cool. I only discovered this just a [02:31] few hours ago and I am so excited to go [02:34] play with it. Check it out yourself at [02:35] soyv.link/kernel. [02:37] Going to give y'all a rough order of [02:38] events. We're going to go through their [02:40] recommendations. Then we're going to [02:41] look at how much better other models are [02:43] for this. And then at the end, I'm going [02:45] to theorize and speculate with y'all for [02:47] a bit as to why these models are so bad [02:50] at front end. Designing delightful [02:52] frontends with GPT 5.4 four practical [02:55] techniques for steering 5.4 towards [02:56] polished production ready front-end [02:58] designs. [03:00] Give me a sec, guys. Sorry, I felt sick. [03:04] God, it's been a bit since I read cringe [03:06] like this. I feel like we're back in the [03:07] GraphQL. I want you guys to get in your [03:09] head. We're not going to scroll just [03:11] yet. They open this with an example that [03:13] they consider a great productionready [03:15] front end. If they wrote this article, [03:17] what you're imagining hopefully is that [03:19] you give them the benefit of the doubt. [03:21] And this first example is going to look [03:23] at least decent, right? Get some idea in [03:25] your head of how you would expect this [03:27] to look. And remember, I designed lawn [03:29] with a combination of Opus and Gemini [03:32] 3.1. I designed Shu almost exclusively [03:34] with Opus. And the T3 code homepage was [03:36] an Opus oneshot. So now that you have an [03:38] idea in your head of what a good AI [03:40] powered design would look like, ready to [03:42] see the first example? [03:46] Eh, but wait for the second one. the [03:49] utter slop. Are you joking? Everything [03:53] is a card and the text doesn't even fit [03:55] in the card. It's being cropped out and [03:57] they're using this as an example. Are [03:59] you kidding? Are you [ __ ] kidding? [04:00] Transparency. I've already had private [04:02] conversations with people involved in [04:03] this. They agree this won't happen [04:05] again. But I'm going to take the [04:06] opportunity to call it out because this [04:07] is [ __ ] [ __ ] and it's a big part [04:09] of why people don't trust AI. When [04:11] companies like OpenAI, Google, [04:12] Anthropic, etc. make posts like this [04:15] about cool things they did and recommend [04:17] and they're utter garbage that any dev [04:19] can see through. It erodess trust so [04:22] goddamn fast. I learned about this [04:24] because I had people DMing me saying 5.4 [04:27] isn't doing good front end. They don't [04:28] think AI can do it. And I was like, [04:30] "Yeah, 5.4 sucks at front end. Go use a [04:32] different model." And they were like, [04:32] "No, it said it was really good. Look at [04:34] this delightful frontends article." And [04:36] that's how I learned about this and I [04:38] want to die. Anyways, let's actually [04:40] read it instead of just roasting the [04:42] screenshots. D 5.4 is a better webdev [04:44] than its predecessors, generating more [04:46] visually appealing and ambitious [04:48] frontends. Notably, we trained 5.4 with [04:50] a focus on improved UI capabilities and [04:52] use of images. It does seem to be better [04:54] at putting an image in the UI a bit, but [04:57] the rest it is not. And as our friend [05:00] family pointed out here, Kimmy K2.5 is [05:03] way better at UIs than this. Good call [05:05] from Michaela from Zed. I actually [05:07] specifically check hover states on [05:09] vibecoded apps because the UIs often [05:11] look like they should have them, but the [05:12] models forget it and it reveals if the [05:14] dev didn't check. That is a good call. I [05:16] will start looking for the same. Back to [05:18] the article. With the right guidance, [05:19] the model can produce productionready [05:21] frontends incorporating subtle touches, [05:24] well-crafted interactions in beautiful [05:26] imagery. Subtle touches, well-crafted [05:29] interactions in beautiful imagery. All [05:31] displayed here. So beautiful. Anyways, [05:35] when prompts are underspecified, models [05:37] often fall back to highfrequency [05:38] patterns from the training data. Some of [05:40] these are proven conventions, but many [05:42] are simply over represented habits that [05:44] we want to avoid. The result is usually [05:46] plausible and functional, but it can [05:47] drift towards generic structure, weak [05:49] visual hierarchy, and design choices [05:50] that fall short of what we visualize in [05:52] our heads. First example they have is [05:54] about images. Default to using uploaded [05:56] and pre-generated images. Otherwise, use [05:58] the image generation tool to create [06:00] visually stunning image artifacts. Do [06:01] not reference or link to web images [06:03] unless the user explicitly asks for [06:05] them. [06:06] Yeah, I feel like the use of images in a [06:09] page is something that we really should [06:10] be deciding on to an extent as we work [06:13] on the page ourselves. I've never let [06:16] the model just go make and put in the [06:18] images itself. I Okay, I did try once [06:20] and it was really cringe. So, I [06:21] personally don't recommend that, but it [06:23] is cool. It can use images. [06:25] They wrote this longass prompt to try [06:28] and keep the model from doing things it [06:30] shouldn't. And this looks quite [06:32] familiar. Use these hard rules. One [06:34] composition. The first viewport must [06:35] read as one composition, not a [06:37] dashboard. Unless it's a dashboard. [06:39] Brand first. On branded pages, the brand [06:40] or product name must be a hero level [06:42] signal, not just nav text or an eyebrow. [06:44] No headline should overpower the brand. [06:46] Brand test. If the first viewport could [06:48] belong to another brand after removing [06:50] the nav, the branding is too weak. [06:52] Typography. Use expressive purposeful [06:55] fonts and avoid default stacks like [06:57] enter robboto aerial and system. Good [06:59] call from Fammy here before I got to it. [07:01] Store brand claude frontend MD. Correct. [07:04] You're not familiar. There is a skill [07:06] for claude code and other things as [07:09] well. We I use this one heavily. Without [07:11] this, Opus tends to not be great at [07:13] design, but with this, it tends to be [07:14] surprisingly good and coherent. Overall, [07:17] this is literally just a markdown file [07:18] that gets injected into your prompt when [07:20] you trigger the skill. And you'll notice [07:22] some common things in here. The word [07:24] brand doesn't come up at all, which is [07:26] cool, but typography does. Choose fonts [07:28] that are beautiful, unique, and [07:29] interesting. Avoid generic fonts like [07:30] Aerial and Inter. Opt instead for [07:32] distinctive choices that elevate the [07:33] front end's aesthetics. Unexpected [07:35] characterful font choices. Pair a [07:37] distinctive display font with a refined [07:39] body font. This is one of my favorite [07:40] parts of the anthropic one. Never use [07:42] generic AI generated aesthetics like [07:44] overused font families. Enter robboto [07:46] aerial system fonts. Cliche color [07:48] schemes like purple gradients on white [07:50] backgrounds, predictable layouts and [07:52] component patterns, and cookie cutter [07:53] design that lacks the context specific [07:56] character. You know, they were tired of [07:58] the cringy purple stuff happening. [08:01] Here's another funny one. Reduce [08:03] clutter. Avoid pill clusters, stat [08:05] strips, icon rows, boxed promos, [08:07] schedule snippets, and multiple [08:09] competing text blocks. This is all of my [08:12] signatures for knowing when it's an open [08:14] AI model that generated the UI. The like [08:17] 15 pills that don't do anything is so [08:21] common. And then the weird stat bars [08:23] that are unnecessary. It's [08:25] Yeah. [08:26] exception. If working within an existing [08:29] website or design system, preserve the [08:30] established patterns, structure, and [08:32] visual language. Ah, [08:35] they then give some decent feedback on [08:37] how to actually use these tools to [08:39] design better. Thankfully, this advice [08:41] applies for models that are better at [08:42] front end. The first point is start with [08:44] design principles. So, you should be [08:46] defining constraints like a one H1 [08:48] headline for the main title, no more [08:50] than six sections, two type faces [08:52] maximum, one accent color, and one [08:54] primary called action above the fold. [08:55] That all seems reasonable. Provide [08:57] visual references. Reference screenshot [08:59] or mood boards can help the model infer [09:02] layout rhythm, typography scale, spacing [09:04] systems, and imagery treatment. Well, [09:05] that was an example of generating its [09:07] own mood board for the user to review. I [09:09] don't see how any of this helps me with [09:11] my front end, but sure. Inspired by NYC [09:13] coffee culture and Y2K aesthetics. I am [09:15] dying, guys. I know I'm compensated well [09:18] for the work I do, but I don't feel like [09:19] I'm paid enough for this one. [09:23] structure the page as a narrative. The [09:26] density of M dashes. This is like they [09:28] imported a hipster from 2010 and asked [09:31] him to make the model design good. This [09:33] hurts me. Oh boy. Here's a funny thing I [09:36] didn't know. In practice, low and medium [09:38] reasoning levels often lead to stronger [09:40] front-end results. [09:43] Oh my god, I can't do this anymore. The [09:46] amount of random esoteric [ __ ] you [09:48] need to know to make this useful is [09:51] absurd. So, so here are your options. [09:53] You can learn all of this. You can [09:56] memorize all these details. You can work [09:58] really hard to get this model to spit [10:01] out an almost usable front end. Or you [10:03] can use their front-end skill that gets [10:05] probably like half or so of the things [10:06] they're talking about here. That's cool. [10:08] You can use the skill installer to [10:10] install the front-end skill through the [10:11] codeex app. Don't do that though. So, if [10:13] you do want to install this, please just [10:15] use Skillssh because then it will work [10:17] across different tools. Skills H is [10:19] great. I use it a ton. And you'll notice [10:20] that uh one of the top skills here is [10:23] one that we mentioned earlier. It's a [10:24] very good skill. I want to now take the [10:26] time to show you guys some of the other [10:28] models in their front-end capabilities [10:30] so we can compare and come to an honest [10:32] conclusion. And then after that, the [10:33] most important part where I speculate [10:35] how the [ __ ] we got here in the first [10:37] place. Quick shout out to Dra for making [10:39] this. He's a really cool community [10:40] member. He's about to start his [10:41] internship at Amazon and he also has a [10:43] YouTube channel that'll be linked in the [10:44] description if you're curious. He made [10:46] this benchmark after being inspired by [10:47] my video about different models and how [10:49] good and bad they were at frontend stuff [10:50] and it's a really cool application of [10:52] what I was trying to do but cemented [10:54] into a thing we can go look at which is [10:57] really useful. He did two runs for each [10:59] model with five generations each. One [11:01] set is with the design skill from [11:02] Anthropic specifically and one is [11:04] without it. So we'll start with 5.4 [11:06] without the front-end design skill. Why [11:08] do they have cards on a homepage? This [11:11] is one of the worst landing pages I've [11:13] ever seen in my life. So, here is the [11:15] second design. Oh, huh. It looks a lot [11:17] like the first design, but darker and [11:19] honestly somewhat worse. Cards in the [11:22] landing section of the homepage. This [11:24] looks like a bad medical product or like [11:27] a [ __ ] pyramid scheme UI. Oh, look, [11:30] more cards. Do any of these not have Oh [11:33] my god, this even worse. [11:38] Open AI, what are you doing, guys? Let's [11:42] see if we're five for five now. They're [11:44] square cards, but they're cards. Let's [11:47] check out Kimmy K2.5 next. And remember, [11:49] this is an openweight model that is [11:51] almost a tenth the price. First one. [11:53] This is cool. It's very minimal. I don't [11:56] love this bottom bar they did here, but [11:58] it's not bad. This is a usable starting [12:00] point. With a little bit of touch-up and [12:02] maybe one or two things added, maybe an [12:03] accent color, this could be really good. [12:05] It's a nice minimal start. Here's [12:06] design, too. All fits on one page. Still [12:09] does the status bar thing at the bottom [12:10] here, but like decent. This feels like a [12:12] Tailwind template. It was fine. I like [12:14] the glow here. The glow is actually [12:16] somewhat tastefully done, which a lot of [12:17] the models don't do tastefully. It does [12:19] have the cringe pill thing here on the [12:21] top left. Now, with AI powered insights, [12:23] that gives you nothing. Just delete [12:25] those things. I find that I just trim [12:27] all the pills out whenever I make any [12:28] new UI, and if any layout gets shifted [12:30] as a result, I just tell it to fix that. [12:31] Next, this one's kind of cool. still has [12:33] these like cringey cards here. Oh, I [12:36] like the animation when you hover them [12:38] though. [12:40] The little dot here that's a call to [12:42] action bringing you attention to the [12:43] start creating free. That's a nice [12:45] touch. Put a little quote at the bottom. [12:47] The little like faded dots in the back [12:49] giving it a little bit of like oomph and [12:51] presence. This is good. Remember this is [12:53] an openweight model. How is an [12:55] openweight model absolutely cooking open [12:58] AI? Okay, this one's pretty. It does use [13:00] cards, but I really like the gradients. [13:02] Normally I hate the purple gradients. [13:04] This one's not bad. Okay, everybody else [13:05] hates it. Okay, fine. Everyone else [13:07] hates it. I I'm a sucker for the glassy [13:10] layouts with tasteful gradients. This [13:12] one's okay. It's also leaning into the [13:15] purple blue gradients that half the [13:16] models do without being steered. It has [13:18] a couple bugs when you scroll. Like this [13:20] bar should have a backdrop appear as you [13:22] scroll so that it doesn't like contrast [13:24] so badly there. But it's good. This is [13:26] really solid. Again, remembering that [13:28] this is an openw weight model without a [13:31] design skill helping it do something [13:33] better. And we can take a quick look at [13:35] Opus and Gemini as well. I want to [13:37] breeze through Composer, too, though, [13:38] cuz I actually think Composer is an [13:39] interesting one because Composer is You [13:43] guys know what it's based on, but at [13:44] this point, I'm not positive. It's Kimmy [13:46] if you didn't know. This one looks [13:48] nearly identical to one of the Kimmy [13:49] ones. This one looks like it has [13:51] something missing at the top. Your mind [13:53] on paper that never fills up. Actually, [13:55] kind of decent copy. Kimmy's good at [13:57] copy, so these parts are going to be [13:58] better than a lot of the other models. I [14:00] like the page as like the light. This is [14:01] actually a cool idea for the page. I [14:03] like it. The yellow brutalist layout. A [14:07] lot of models default to this now. I [14:08] mean, shoe got hit with this pretty [14:10] hard. And another gradienty faded one [14:14] with a pile of bullet points on the [14:15] side. This is fine. Not bad. And now [14:18] let's hop to opus. We're still without [14:21] the design skill. Remember your [14:22] thoughts. Beautifully connected. This is [14:24] such a Tailwind template UI. I do like [14:26] that it didn't overdo colors. And this [14:28] is without the design skill. So, they [14:29] didn't have to tell it, "Hey, don't spam [14:31] with shitty colors." It just came out [14:33] like this and just fine. Design two, [14:35] same deal. This just looks like a [14:36] Tailwind template. Way too much purple [14:38] and blue. Almost makes sense that they [14:41] hinted about that in the design skill. [14:43] This one I like. This one's deep in [14:45] Opus' like templates that it reaches for [14:47] this particular pastely look with like [14:50] itallic text, rounded corner buttons in [14:54] these particular cards. No animation on [14:56] them though, which makes them really, [14:57] really lame. Also, there's no need for [15:00] this to be here. I actually really like [15:02] this, especially if it made this, which [15:03] I think it did. It's like a cool little [15:05] like HTMLbased icon that they made [15:08] there. Cards that are unnecessary that [15:09] basically form a status bar. Why do [15:11] these have a hover treatment and the [15:12] last ones didn't? What the [ __ ] None of [15:14] this needs hover treatments that are [15:16] this aggressive. [15:18] And more cringe purple. I liked the [15:20] Kimmy version of this layout much better [15:22] than I like this one, especially with [15:23] Opus' cringe little pill that doesn't [15:25] belong here at all. This here is the key [15:28] that you know the thing you're looking [15:29] at was some vibe coded slop. And now [15:31] Gemini time. A nice minimal start here. [15:34] Then a kind of brutalist termally [15:37] layout. Don't love it, but I don't hate [15:39] it here. This is one of the UIs that [15:42] Gemini reaches for constantly. this [15:44] particular like playful look that has [15:46] the really bright pastel adjacent colors [15:49] and the really rounded edges, the tilted [15:52] items. That's cute. Nice little touch. [15:55] This looks really cool until it comes [15:57] out for the fifth time as you're trying [16:00] to refactor a design. My concern here is [16:02] that this particular template is very [16:04] distinct and you know as soon as it gets [16:06] reached to by Gemini. So, is it nice and [16:09] cute? Yeah, absolutely. Is it one that [16:11] gets way overused as a result of that? [16:13] Yeah, absolutely. [16:14] This one also feels very Tailwind [16:16] templaty. And this one feels like a [16:19] ripoff of Linear's homepage from back in [16:21] the day. Remember back when everybody [16:22] would copy Linear, the good old days? [16:24] Okay, you know what this actually looks [16:25] like? Yeah, I'll take the L. So, all of [16:28] that compared to the absolute garbage [16:31] that we were getting out of GPT with the [16:33] same exact layout on almost all of them. [16:35] The biggest thing I want you guys to [16:36] notice is how much better of a variety [16:38] we got from the other models. All of the [16:41] defaults we got from 5.4 look identical. [16:45] Exact same layout, different color, same [16:48] like pills and call outs everywhere, and [16:50] none of them are even decent starting [16:52] points. What happens when you give them [16:53] the design skill? I want to be clear, we [16:55] are not giving it the design skill that [16:57] was provided by OpenAI. We're giving it [16:59] the Opus one, the one that was built by [17:01] Anthropic. That said, I have played with [17:03] their design skill and it is, if [17:05] anything, slightly worse than [17:07] Anthropics, even when using GPT models. [17:09] So, I'll go through the 5.4. four [17:10] examples that are using the design skill [17:12] from OpenAI and then we'll look at some [17:13] others. This is already significantly [17:16] better. As you can tell, 5.4 needs to be [17:19] steered or it will not get close to [17:22] usable. That said, these cards floating [17:24] is kind of cringe and the layout's [17:26] awful. [17:28] Like, command minus get any better. It [17:31] does not. It's just like that. Cool. [17:33] Next, we got the editorial style. Still [17:36] so many cringe cards. No matter what you [17:38] do, you just get cards [ __ ] [17:40] everywhere again. Look at that. Look at [17:43] how these are just the same thing, but [17:45] with different color. Open AI. So, we [17:48] have four. The quiet garden version. [17:51] Still more [ __ ] cards. And here, [17:54] still more [ __ ] cards. At least the [17:56] template here is cool and the font is [17:58] actually really cool and it fits this [18:00] layout well. This is a promising start. [18:02] God [ __ ] damn. Quick feature from Dra [18:05] because we need more YouTubers who are [18:07] doing stuff like this. I'm tired of it [18:08] being just me and I'm really hyped to [18:10] have somebody else showing up and taking [18:11] part in this. Here are his thoughts on [18:13] the designs we just looked at. [18:14] >> Third iteration. Now this is classic GBT [18:18] 5.4 sickness. Look at this. Look at [18:20] this. There's one card, another card, [18:23] another card, and a card within a card. [18:26] The entire page is a card. Why are there [18:28] so many cards? Right. One ad, please. [18:31] The next model you're jump dropping GBT [18:34] 5.5 must escape the card syndrome. I'm [18:37] tired. I'm tired of everything being in [18:38] cards. Okay. I think I have a new [18:41] favorite dev YouTuber. That was great. I [18:44] think that we have our conclusion for [18:46] our passes on 5.4. The card sickness is [18:49] real. That said, I do want to take a [18:51] look at what OpenAI cooked to see if we [18:53] can find any more of the card plague. [18:55] Here's the first one that they posted. [18:59] It seems like they got the cards to [19:01] disappear in that one. Let's see how [19:02] number two is. These two pages are [19:04] identical. Why did they put these next [19:06] to each other? These are like the exact [19:07] same thing but with different pictures. [19:09] I also hot take think this picture sucks [19:12] because it leaves way too much empty [19:13] space where you don't want it and it [19:16] leaves no empty space where you do want [19:17] it. Having the plant this low and the [19:19] empty up top makes this contrast [19:22] garbage. It just looks bad. Okay, no [19:24] traditional cards, but they rounded the [19:26] corners of the image like it's a card. [19:27] And then they did their little status [19:28] bar with the one, two, three, and then [19:31] this particular layout with the the [19:33] subtext on top that is adding nothing. [19:35] Our approach. What? Why is that even [19:38] there? And like what is how is this the [19:40] second example? What the [ __ ] is this? [19:43] What? They even included no eyebrow [19:46] titles in their prompt and they still do [19:48] it on all of these. God, I bet this one [19:51] looks better on the actual site, but [19:53] multiple layers of video compression [19:54] later, it is garbage. [19:58] Okay, that was cool. Talking about this [20:00] right here. That's tasteful. That's [20:02] nice. I like that. I hate the rest, but [20:04] I like that. You know that they did like [20:06] 15 plus generations for each of these [20:07] concepts and we're just seeing the best [20:09] ones. Oh, maybe we're not just seeing [20:11] the best ones. What the [ __ ] is this [20:13] [ __ ] Are you kidding? And they couldn't [20:15] even afford to encode and upload a [20:16] decent quality file for it. That's not [20:19] just my video. All of the flickering as [20:21] it scrolled is in their demo video, not [20:23] mine. I encode my videos properly. This [20:26] gh vibe, premium, playful, never [20:30] precious. And the games you guys have [20:32] already seen, all of them, 100% of them [20:35] are full of cards though. Every single [20:37] game example, cards all over the sides [20:40] in the top nav, cards in the top. Like, [20:42] look at all how did they put this in as [20:45] a good example? Are you joking? What the [20:48] [ __ ] Like that corner. Did you see the [20:51] layout shift at the end? They hit it. [20:53] They hit it. They tried clipping it out. [20:55] No, it's at the start actually cuz the [20:56] penalty is Omen's one and then this [20:58] little box here stretches out the UI [21:01] when it has bigger things in it and it [21:03] makes it hot taller, too. The game moves [21:04] in the middle. How is that your first [21:06] [ __ ] example, OpenAI? What are you [21:08] What are you saying? Not my words, their [21:11] words. Production ready frontends. I [21:13] would say you guys need to take this [21:15] article down, but then nobody's going to [21:16] believe me that it was this bad. I'm so [21:19] thankful I have this on video because [21:20] what the [ __ ] Oh, and the dashboards [21:24] section. Oh boy. Let's see how many [21:26] cards they can stuff into this bad boy. [21:28] Pretty sure making memes is within the [21:30] like stages of grief. I don't know where [21:32] in the chart it is, but I'm definitely [21:34] at that point right now. [21:37] So many cards. So many cards. Default to [21:41] cardless layouts. They even specify it [21:44] in the skill and it doesn't listen. [21:47] What the slop is going on? I And like I [21:51] know it seems like I'm overreacting [21:52] here, but you guys need to understand [21:54] this is one of the first things people [21:55] try a new model for. They try out 5.4, [21:57] they ask it to build something and then [21:59] they look at the thing and they're like, [22:00] "This is hideous." And they don't [22:01] appreciate the fact that the parts [22:02] underneath the UI are actually decent. [22:06] Like it can solve harder problems as [22:07] long as the problems don't involve CSS. [22:09] And it is so bad at this. And it's crazy [22:11] because GBT5 was a huge leap in quality [22:14] of UI. It was so much better than [22:17] anything before and I swear it has just [22:19] flatlined since. Maybe even gotten [22:21] slightly worse. It might just be that [22:22] our expectations have gone up. It's [22:23] almost certainly that. But god damn, it [22:25] is so bad. Oh god, this card this skill [22:28] is so long. Oh, there's even more. No [22:30] cards by default. No hero cards by [22:32] default. No box or center column hero [22:34] with brief calls for full bleed. It just [22:37] didn't follow these. The word card [22:40] appears 13 times in their skill and it [22:42] still does it. It still does it. I'm [22:45] crashing out at this point. I just [22:46] noticed the arrow here when you open and [22:50] close it doesn't move. It's supposed to [22:52] point down and then to the side. Even [22:55] the actual OpenAI site is vibe coded [22:57] with GPT5. Oh my god, I'm gonna go [23:00] insane. Okay, so reminder, this is the [23:02] creme de la creme of OpenAI GPT design. [23:06] It is card slop constantly. So, let's [23:10] see how a design skill can benefit some [23:12] models that are actually decent at UI. [23:15] And I also want to take some time to [23:16] speculate as to how this happened and [23:17] help you guys make good frontends using [23:19] UI. Let's start with a really, really [23:22] expensive one. Kimmy immediately one of [23:24] the best we've seen so far. Nice, [23:26] minimal cards that have little [23:28] animations that aren't cringe and like [23:29] in the way. Still cards, still annoying, [23:31] but not that bad. Here's a nice really [23:33] brutalist one that actually like uses [23:35] the page layout well. I like the [23:36] background in the noise gradient a lot. [23:38] A lot of things get those noise things [23:40] wrong. Seems like this model does well. [23:41] It really [ __ ] up this like gradient [23:43] box thing in the corner though. I don't [23:45] know what's going on there. Then we have [23:46] the cringe retro one all the models love [23:48] to do. Then we have the editorial style. [23:51] A lot of these are going to be the same [23:52] across models because at the start they [23:54] have the tone section in the anthropic [23:56] skill that is brutally minimal, [23:58] maximalist, chaos, retrofuturistic, [24:00] organic neutral, luxury refined, [24:02] playful, toylike, editorial magazine, [24:04] brutalist, raw, art, deco, geometric, [24:07] soft pastel, industrial, utilitarian, [24:09] etc. The retrofuturistic part. You know [24:11] what? I'm going to do a thing. I'm going [24:13] to do a very uncharacteristic Theo thing [24:15] here. I'm going to file a PR. I am going [24:17] to delete this right here because it is [24:21] a net negative to the world. Now take a [24:23] moment to admire the absolute hell that [24:24] is GitHub copilot's generated commit [24:26] message and description here. The commit [24:28] message not great. This is just wrong. I [24:31] did not remove the maximalist chaos. I [24:34] removed a different one. I left [24:35] maximalist chaos. I deleted [24:37] retrofuturistic. But it seems like their [24:39] diff checker is broken. Let's see if it [24:42] gets the Nope. It generated the same [24:43] wrong commit message again. Great. This [24:45] is going to be one of the greatest gifts [24:46] I've given to Anthropic in my life. If [24:48] they actually merge this, this is going [24:50] to make people very happy. So, now that [24:51] I've handled the one cringe [24:53] recommendation that happens to sneak [24:55] into a lot of these things, cuz god, [24:56] this is awful. Let's look at the other [24:58] designs from Kimmy. We got the art of [25:00] remembering. Uh, this is the editorial [25:01] style. It did a really cringe like [25:03] graphic on the side here. Trying to [25:05] HTMLify a random diagram or image just [25:08] did not do a good job there. And then we [25:10] have this very big fun maximalist style. [25:14] You you could use some of these as a [25:15] real base. Let's look at something [25:17] competent like Opus. This is the [25:19] terminal style. I almost want to delete [25:21] this one, too. It's pretty gross. Yeah, [25:23] it is what it is. Happy Dara agrees. The [25:25] terminal ones are all awful. Oh, this [25:27] one's cute. Quiet place where ideas [25:29] remember themselves. [25:32] And we got a retrofuturistic. [25:36] Then we got another one of these chill [25:38] ones. This is pretty cool. I like the [25:39] little animation there. I don't like the [25:40] end state for the plants, but I like [25:42] that it tried something here. I like the [25:44] timing on it a lot actually. That type [25:45] of stuff is hard to get right and did [25:47] that very tastefully. Things fading in [25:49] is cool until these all like popped in [25:52] after. Do you see that? That's a bad CSS [25:54] bug. [25:57] And the final one from Opus. This is [25:59] pretty cool. They always do the same [26:02] like stacked animation for the text [26:04] though and that gets a little annoying. [26:07] Oh, I did the same flicker thing there [26:08] too. [26:10] Come on guys. Not bad. All of those are [26:13] workable some amount, but it's honestly [26:14] disappointing for Opus for me. I've seen [26:16] much better. And now for the killer, [26:19] Gemini. He's doing some bad stuff here [26:21] where like these overlap. I don't know [26:23] if that's like an actual font that does [26:25] that cuz I hate that. I don't like that [26:26] part of the font. The rest looks cool. [26:28] So, one of the funny things I've noticed [26:29] with Gemini is the way it follows [26:31] instructions is by following the [ __ ] [26:33] out of them and doing things really [26:35] lame. Like, this is the brutalist [26:37] example. So, obviously it talks about [26:39] how it's a brutal uncompromising second [26:41] brain. The design style term leaks into [26:45] the copy. Tell me it's not the most [26:47] Google thing you've ever seen. This [26:48] one's stunning. This is nice and [26:50] elegant. I'm starting to think that card [26:52] flicker might be something from the [26:53] harness that's holding all of this. Then [26:55] there's a cringe terminal one cuz [26:56] there's always a cringe terminal one. It [26:57] takes way too long for the content to [26:59] come up, but it looks okay. It's using [27:01] the same font, but somehow the A is [27:03] fixed, but the L isn't. The [ __ ] No [27:06] idea what's going on with this font. [27:07] Your brain but fun. The fact that it [27:10] [ __ ] with the copy so much is absurd. [27:14] And then the editorial style, [27:18] it's fine. But yeah, like these are [27:20] usable. These are starting points you [27:21] can make real things with. This is why [27:23] I've used Gemini 3.1 Pro as the starting [27:24] point for many of my designs. You can [27:26] see some of its signatures, like this [27:27] section here, the big font at the top [27:30] there, the cards that aren't really [27:32] cards. They're like brutalist slanted [27:34] pieces in the top over the fold stuff. [27:35] Like it's it can be forced to do some [27:37] cool stuff. And now we get to the [27:39] important part, the speculation, which [27:41] should also hopefully help you guys make [27:43] better designs using these tools. Back [27:45] in the day, the way that many developers [27:48] did design, not designers who develop, [27:50] to be clear, developers doing design. [27:52] The way so many developers have [27:54] historically done design, is to get [27:55] templates. One example of a cool place [27:57] to get templates is the Tailwind Plus [27:59] library. We can look through a handful [28:01] of these. The way that this works is [28:03] they give you templates that are [28:04] included as part of their paid [28:06] subscription or onetime purchase. cuz I [28:07] don't remember which it is now. It was a [28:08] one time for life before. You go to one [28:10] of these, you decide that you like it. [28:12] You can screw with the color palette as [28:14] well if you want to play with that cuz [28:15] it's Tailwind. It's not too hard to do. [28:17] And when you like it, you can copy paste [28:19] the code into your codebase and adjust [28:21] it as you need. This has historically [28:24] been one of the main ways that design [28:26] work has been done. This kind of broke [28:28] down because of Shad CN, which is a good [28:31] thing to be clear. I am sad for Tailwind [28:33] as a business because selling the [28:34] temples is a huge part of their income. [28:36] But something like Shadzen is really [28:37] cool because it gives you these reusable [28:39] components as part of a design system [28:41] that lives in your codebase. So you can [28:43] adjust it and modify it yourself. If you [28:45] want a sidebar, here is a very powerful [28:48] customizable sidebar made by the Shad CN [28:50] team that you can integrate this into [28:51] your application. Really cool, really [28:53] useful. So what does that have to do [28:54] with GPT? Well, as you guys probably [28:57] know, the models are trained on data [28:59] largely built by humans. The code that [29:02] these models are trained on is code that [29:04] existed before. And a lot of the diffs [29:06] they're trained on, which is an [29:07] important detail, are doing things [29:09] similar to what we have done [29:10] historically. Eventually, what's [29:12] happening is they take a bunch of pull [29:13] requests, they take the repo state [29:14] before and after. They tell a smart [29:16] model to generate a fake chat history as [29:19] though they were prompting to do this [29:21] instead. They throw that at [29:22] reinforcement learning with verifiable [29:23] rewards and eventually a smarter model [29:25] comes out. This is a gross [29:27] oversimplification. a grotesque, [29:30] terrible oversimplification as I'm about [29:32] to reveal with the next thing they had [29:33] to do. Because one of the problems with [29:35] this strategy is that it requires that [29:37] you have a starting point for the repo [29:39] that the PR is filed on. And that's [29:41] different from the repo you're using it [29:42] on. Things can break down. So they've [29:44] had to create all sorts of fake [29:46] scenarios to do this with. And it is my [29:49] guess that those fake scenarios, [29:51] especially for UI stuff, are using a set [29:53] of what are effectively templates in the [29:55] training data that are being fine-tuned [29:58] against And I can tell because I could [30:00] see them in the generations. The way I [30:03] would frame this, having used all of [30:06] these models for front end far more than [30:07] any human should have to, I would say [30:09] that GPT 5.3 codecs, I I'm saying 5.3 [30:13] because I did a lot more front end with [30:15] that one than I did with 5.4. I've just [30:17] given up at this point. I would [30:18] guesstimate that for like homepages and [30:21] layouts, the vibe I get is that there's [30:24] around four templates. And to be clear, [30:26] I'm not saying literal templates like [30:28] they're all using the same code. I'm [30:29] saying design styles and systems that [30:32] were used in training to give it [30:34] goodlookingish [30:36] designs and then the RL just kind of [30:39] made it fall into that pattern even [30:41] more. The problem with reinforcement [30:42] learning with verifiable rewards is that [30:44] it relies on verifiable rewards and you [30:46] can't trivially verify what UI is good. [30:49] So they have to have a reference for [30:50] what good is. And is my guess that the [30:52] GPT series has a very small number of [30:54] examples for good. And one of those [30:56] examples or more of them have way too [30:58] many [ __ ] cards in them, hence the [31:00] chaos that we see. And then I would say [31:02] Opus, specifically 4.5, but honestly 4.6 [31:04] feels nearly identical here. I'd say it [31:06] has like 10 of these templates, but [31:08] they're a lot better overall. All 10 of [31:11] the ones Opus reaches for feel [31:13] meaningfully better than the four that [31:15] GPT 5.3 and now 5.4 as well have in it. [31:18] And it's also better at being pointed at [31:20] a specific thing or in a specific [31:22] direction. And now we have Gemini 3.1. I [31:25] would say this has a lot more. Has like [31:27] 15 templates. The problem with them is [31:30] that a handful of them are way worse. A [31:32] couple of them are meaningfully better. [31:34] And it sucks at being steered. And [31:37] that's the biggest thing. When you're [31:38] doing like a mock front end or you're [31:40] making a landing page and you say, "Go [31:42] make this look good." Gemini has more [31:44] variety, but some of the variety is [31:46] garbage. Opus has less variety, but most [31:49] of the examples are really good. And GPT [31:51] models have way fewer examples, and all [31:54] of them are trash. You can even see this [31:56] in their own article. Text on the left [31:59] with a title, an image behind it, and [32:01] not too much information. [32:04] Text on the left with an image behind it [32:06] and not too much information. Text on [32:08] the left with an image behind it. You [32:10] get the idea. All of the examples in [32:12] their homepage are the exact same [32:14] structure. Yeah. Oh, and three nav items [32:17] on all of them, too. That top nav is so [32:20] common across these designs. It's [32:22] hilarious. But all of the models have [32:24] the thing that they do far too often. [32:26] 5.3 has a lot of those things, and 5.4 [32:29] does as well. They're nearly identical [32:31] for this other than like there's one [32:32] additional template added for that image [32:34] layout. Opus has its own quirks. In [32:36] particular, it loves those little pills [32:38] at the top with like a status. It sneaks [32:40] those into like everything it designs. I [32:43] have to do a whole pass every time I let [32:45] Opus touch anything to remove all the [32:47] pills from stuff. It's annoying. It also [32:49] reaches for some kind of cringy fonts [32:50] here and there and you have to remind it [32:51] like, "No, don't use that font. That's [32:53] bad." It's also really, really bad at [32:55] layouts with images involved. I've [32:57] noticed it's pretty consistently putting [32:59] images with bad dimensions in places, [33:01] cropping them wrong, doing cut offs and [33:03] stuff like that. You can usually massage [33:05] it after. I'll often dive into the code [33:07] and do that myself. But yeah, Opus [33:09] overall is still still my go-to for most [33:12] design work. And if I'm feeling [33:13] masochistic and I'm willing to feel a [33:16] lot of pain to make something slightly [33:18] nicer looking, Gemini 3.1 with a lot of [33:21] back and forth and a lot of rolls. [33:23] That's the biggest thing with 3.1 is I [33:25] feel like I have to try five plus times [33:27] sometimes to get a decent UI out of it. [33:29] But once you do, you can get something [33:31] really good and then fix it up with [33:32] other models. I'll occasionally use GPT [33:35] for very specific like buggy UI stuff [33:37] because for better or worse, I have [33:38] noticed GPT models don't make as buggy [33:41] of UI as other models, but they don't [33:43] make very good UI either. So, I'll use [33:45] them to clean up the mess that gets left [33:46] behind by these other models pretty [33:48] often. So, how did we end up here? What [33:51] is the difference between the GPT models [33:53] and these where they just have so few [33:55] templates? Well, I think these poll [33:57] requests that are being used for [33:58] generating chat histories are purchased [34:00] from companies. There's a handful of [34:02] these data resellers as well as [34:04] companies that will reach out to [34:05] businesses to buy their source code and [34:08] their GitHub histories not because they [34:10] want to use that to clone them or [34:12] whatever. They use it to create these [34:14] fake histories and training data that [34:16] they can hand over to the labs to make [34:17] their models better. There's a whole [34:19] industry of these types of companies. [34:21] I've even managed to invest in a few of [34:22] them and they're doing quite well [34:24] because getting enough data to train the [34:25] labs well is not trivial. You might have [34:27] also noticed that a lot of the designs [34:29] between Opus and Gemini looked very [34:31] similar, almost like they were sharing [34:34] some templates. Perhaps there was a data [34:36] set that was purchased by OpenAI for [34:39] GPT5 that made the model go from bad at [34:42] front end to reasonable at front end. [34:44] And then that data set got more and more [34:45] advanced, but OpenAI didn't update their [34:47] training data with the new better [34:49] version of said data. And the other labs [34:52] did. Ready for the spiciest version of [34:54] this? The reason the GBD models are bad [34:56] at UI right now is the same reason [34:58] they're bad at modern spelt or modern [35:00] tailwind or using convex. They're not as [35:02] good at new things because the majority [35:04] of their data is still old. Even though [35:06] the training cutoff was bumped for, I [35:08] believe it was 5.2, might have been 5.3, [35:10] they did bump to a reasonable cutoff. [35:12] August 31st, 2025 is allegedly the [35:15] cutoff here. That said, I don't think [35:18] they updated all of the data that they [35:20] were buying or there's a different data [35:23] set that Google and Anthropic got that [35:25] OpenI didn't. I don't know what it is, [35:27] but it is pretty clear some data that is [35:30] meaningfully useful for UI is being [35:32] shared between the bottom two labs and [35:34] has not made it into the training data [35:35] for the top one. All of that said, it [35:38] definitely seems like they're paying [35:39] attention to here. Why else would they [35:41] make this terrible slop article? The [35:44] only reason this article exists is [35:46] because they're thinking internally [35:48] about front end. My guess is that [35:49] there's some mandate internally that is [35:52] we need to fix GPT 5.4's front-end [35:55] design problem. And while it's probably [35:57] not an all hands-on deck type thing, [35:59] it's definitely a thing a lot of people [36:01] are responsible for. You have the [36:02] researchers having to try and figure it [36:03] out to make the model smarter. You have [36:05] the codeex people trying to integrate [36:07] better tools and skills to make it [36:08] easier to get good designs out. It is my [36:10] guess that the authors here are probably [36:12] devril types that are also trying to [36:15] help where they can. And the guess that [36:17] I have is that internally this seemed [36:18] like a good way to accept and work on [36:21] the front-end problem mandate assuming [36:24] there is something like that internally. [36:25] So if the devrils were told to work on [36:27] this, devrils can't make the model [36:29] better. Devrils can't magically make the [36:31] model better at this in particular. So [36:33] this is the angle that they chose to [36:35] take. In that case, I understand. But [36:38] there needs to be a system in place with [36:40] somebody who uses models that aren't [36:41] OpenAI models to look at something like [36:43] this before it goes live and say, "Hey, [36:45] are y'all sure about this one? You [36:47] really think we need to post this? [36:49] Because godamn, this is so so cringe." I [36:53] cannot believe this article went live. I [36:55] would implore OpenAI explore different [36:58] ways of doing review and press planning [37:00] to prevent something like this. And I [37:02] would also highly recommend they don't [37:04] go as far as pushing it on Twitter the [37:06] way they have. In particular, getting [37:08] the CTO to tweet about it as though it's [37:10] a good thing. And if you look at the [37:12] replies on Twitter, you'll see I am far [37:14] from the only one who feels this way. [37:16] And it's all the same thing, too. I [37:18] prefer CEX for most things, but Claude [37:20] wins handedly for UI and UX work. Or you [37:23] can just use Claude code. Even with just [37:24] two to three lines of basic description, [37:26] Claude can design amazing UI. Sorry, I [37:28] love Codex in GPT, but it lacks ability [37:31] designing even a basic page. But you [37:33] don't have to do all of the circus when [37:35] using clawed opus. It's just good at [37:37] design. It's a different thing to steer [37:38] Codex to a different design that you [37:40] want. Also worth noting that it's still [37:42] not going to do a very good job. I think [37:45] I'm done crashing out over this. Sorry I [37:46] baited you guys into watching me rant [37:48] about front end for an hour, but this is [37:51] something that's important to me. [37:52] There's a reason I have an HTML shirt on [37:53] for this. I care a lot about good user [37:56] experiences and OpenAI cares that you [37:58] think they're good at user experiences [38:00] and that's what I'm here for. As you [38:01] guys know, I will be as honest as I can [38:03] be about everything I talk about, even [38:05] companies I like, even sponsors that I [38:07] have. I have nothing to hide, but I do [38:09] have a lot to lose. If I'm ever [38:10] dishonest, please call me out for it [38:12] because I go out of my way to share how [38:14] I really feel. And this is the exact [38:16] same way I put these things when talking [38:18] to people at OpenAI about it. I hate [38:20] this. It is insane that this company [38:22] thinks that their UI is good enough to [38:24] do an article like this and now I am [38:26] stuck having to just [ __ ] all over them [38:29] for it. This is bad. This is cringe. If [38:31] other labs did this, I might have [38:32] ignored it cuz the other labs are kind [38:34] of cringe already. But if they did it [38:36] egregiously enough, I would probably [38:37] jump on it. Like if Anthropic was to do [38:39] an article about how you can make the [38:40] model run longer by writing a shitload [38:43] of tests and putting a bunch of things [38:44] in to make sure it doesn't lose track of [38:46] what it's doing, I would make fun of [38:48] them, too, because you don't have to do [38:49] that with codeex models. I'm I'm done [38:52] with this. I hope this was a helpful [38:53] video. I hope you can make better UIs [38:54] now. Let me know what you think. Until [38:56] next time, peace nerds.  📄 **Full text:** ![[Full Document Contents/Articles/OpenAI Is Lying|OpenAI Is Lying, YouTube]] ## Highlights - like the page as like the light. This is actually a cool idea for the page. I like it. The yellow brutalist layout. A lot of models default to this now. I mean, shoe got hit with this pretty hard. And another gradienty faded one with a pile of bullet points on the side. This is fine. Not bad. And now let's hop to opus. We're still without the design skill. Remember your thoughts. Beautifully connected. This is such a Tailwind template UI. I do like that it didn't overdo colors. And this is without the design skill. So, they didn't have to tell it, "Hey, don't spam ([View Highlight](https://read.readwise.io/read/01kmzkr8h3gz7952j6f55gktts)) - Tags: 👻 ai highlighted - with shitty colors." It just came out like this and just fine. Design two, same deal. This just looks like a Tailwind template. Way too much purple and blue. Almost makes sense that they hinted about that in the design skill. This one I like. This one's deep in Opus' like templates that it reaches for this particular pastely look with like itallic text, rounded corner buttons in these particular cards. No animation on them though, which makes them really, really lame. Also, there's no need for ([View Highlight](https://read.readwise.io/read/01kmzkr8jnsz46kj7ypv5gnecb)) - Tags: 👻 ai highlighted - that we were getting out of GPT with the same exact layout on almost all of them. The biggest thing I want you guys to notice is how much better of a variety we got from the other models. All of the defaults we got from 5.4 look identical. Exact same layout, different color, same like pills and call outs everywhere, and none of them are even decent starting points. What happens when you give them the design skill? I want to be clear, we are not giving it the design skill that was provided by OpenAI. We're giving it the Opus one, the one that was built by ([View Highlight](https://read.readwise.io/read/01kmzkr8pryepmxqe3trfmkg8q)) - Tags: 👻 ai highlighted - layout well. This is a promising start. God [ __ ] damn. Quick feature from Dra because we need more YouTubers who are doing stuff like this. I'm tired of it being just me and I'm really hyped to have somebody else showing up and taking part in this. Here are his thoughts on the designs we just looked at. >> Third iteration. Now this is classic GBT 5.4 sickness. Look at this. Look at this. There's one card, another card, another card, and a card within a card. The entire page is a card. Why are there so many cards? Right. One ad, please. ([View Highlight](https://read.readwise.io/read/01kmzkr8sm740kh1q3zm2yckva)) - Tags: 👻 ai highlighted - "This is hideous." And they don't appreciate the fact that the parts underneath the UI are actually decent. Like it can solve harder problems as long as the problems don't involve CSS. And it is so bad at this. And it's crazy because GBT5 was a huge leap in quality of UI. It was so much better than anything before and I swear it has just flatlined since. Maybe even gotten slightly worse. It might just be that our expectations have gone up. It's almost certainly that. But god damn, it is so bad. Oh god, this card this skill is so long. Oh, there's even more. No ([View Highlight](https://read.readwise.io/read/01kmzkr8vfdg854hg5mkk2r5y3)) - Tags: 👻 ai highlighted - insane. Okay, so reminder, this is the creme de la creme of OpenAI GPT design. It is card slop constantly. So, let's see how a design skill can benefit some models that are actually decent at UI. And I also want to take some time to speculate as to how this happened and help you guys make good frontends using UI. Let's start with a really, really expensive one. Kimmy immediately one of the best we've seen so far. Nice, minimal cards that have little animations that aren't cringe and like in the way. Still cards, still annoying, ([View Highlight](https://read.readwise.io/read/01kmzkr913r5a2aneb6azzdd3v)) - Tags: 👻 ai highlighted - but not that bad. Here's a nice really brutalist one that actually like uses the page layout well. I like the background in the noise gradient a lot. A lot of things get those noise things wrong. Seems like this model does well. It really [ __ ] up this like gradient box thing in the corner though. I don't know what's going on there. Then we have the cringe retro one all the models love to do. Then we have the editorial style. A lot of these are going to be the same across models because at the start they have the tone section in the anthropic skill that is brutally minimal, maximalist, chaos, retrofuturistic, ([View Highlight](https://read.readwise.io/read/01kmzkr93qdp28kfvnzb582h0b)) - Tags: 👻 ai highlighted - designing even a basic page. But you don't have to do all of the circus when using clawed opus. It's just good at design. It's a different thing to steer Codex to a different design that you want. Also worth noting that it's still not going to do a very good job. I think I'm done crashing out over this. Sorry I baited you guys into watching me rant about front end for an hour, but this is something that's important to me. There's a reason I have an HTML shirt on for this. I care a lot about good user experiences and OpenAI cares that you think they're good at user experiences ([View Highlight](https://read.readwise.io/read/01kmzkr9cngmvt6zp44qfm5690)) - Tags: 👻 ai highlighted