19:39Griffin Wooldridge · Tutorial
Claude Design for Beginners: The Complete Guide
A screen-recorded walkthrough of Anthropic's Claude Design tool, built around one argument: skip the design system and every output stays generic.
July 15thThe argument in one line.
The advantage of GPT-6 Astra for web design isn't raw model intelligence, it's that Images 2.0 is built into the same chat, so custom brand imagery gets generated inside the design process instead of bolted on afterward.
Read if. Skip if.
READ IF YOU ARE…
- You build landing pages or client sites with an AI coding tool and keep hitting a wall on custom imagery that matches the brand.
- You're deciding between Claude Code and Codex/ChatGPT for a project that leans heavily on visuals, not just logic.
- You want a real cost and workflow comparison between GPT-6 Astra and Fable 5.1 from someone who uses both daily.
- You're curious what a one-prompt AI website build actually looks like end to end, bugs included.
SKIP IF…
- You're looking for a pure coding or reasoning benchmark comparison, not a design-taste evaluation.
- You don't use AI image generation as part of your build process.
The full version, fast.
A designer tests GPT-6 Astra against Fable 5.1 by building a full travel-brand landing page from a single prompt, using OpenAI's Images 2.0 model to generate custom imagery inline. On paper GPT-6 wins on benchmarks and is 56% cheaper per task, but that says nothing about design taste, which only shows up in the output. The real advantage isn't intelligence, it's that Images 2.0 lives inside the same chat as the code, so imagery gets generated as part of the design process instead of a separate step. The recommended workflow: use the expensive, powerful model for the first prompt to get roughly 90% of the way there, then switch to a cheaper model to finish. Heavy, effect-driven sites also need a low-motion "quiet view" toggle for visitors and for mobile.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Lines worth screenshotting.
- GPT-6 Astra outperforms Fable 5.1 on nearly every published benchmark, but benchmark performance says nothing about a model's design taste.
- GPT-6 Astra and Fable 5.1 charge the same list price, $10 in and $50 out per million tokens, but GPT-6 measures 56% cheaper on actual task cost.
- The real edge for AI web design isn't the coding model, it's having a native image generator, Images 2.0, built into the same chat as the code.
- Claude Code has no native image generation model, so matching custom imagery to a brand means paying for a separate MCP tool or breaking workflow to generate images elsewhere.
- Generating brand imagery inside the same prompt as the code lets the model decide what visuals it needs and build the interface around them, instead of imagery being bolted on before or after the build.
- AI-generated imagery from Images 2.0 can now pass as real photography rather than reading as obvious AI slop, which changes how authentic an AI-built site can feel.
- The most efficient workflow is using the expensive, powerful model only for the first prompt to get roughly 90% of the way there, then switching to a cheaper model to finish the remaining details.
- A single detailed first prompt, including target sections, tone, and reference sites, can produce a full site with layout, code, animation, and matching custom imagery in one pass.
- Heavy, effect-driven websites should ship a low-motion "quiet view" toggle so visitors who don't want scroll effects and animation can still get through the content.
- Sites built with dense scroll effects and interactive elements often need separate mobile testing, since heavy animation frequently breaks or degrades on smaller screens.
- On a $20/month ChatGPT Plus plan, a single heavy design session can hit the usage limit quickly, well before the work is finished.
- Better tools shrink the gap between having an idea and producing a visually rich result, which makes a designer's own taste and creative direction more valuable, not less.
Imagery, not code, was always the bottleneck
WHAT TO LEARN
The gap in AI-built websites has never been logic or layout, it's been getting custom imagery that actually matches the brand, and closing that gap changes how you should prompt.
01Intro
- The persistent limitation in AI-generated websites has been imagery, not code. Custom visuals that fit the art direction and layout have stayed hard to get even as code generation improved.
- Pairing a strong coding model with a native image generator in the same workflow is presented as the fix for that gap.
02Benchmarks & cost vs Fable 5.1
- GPT-6 Astra outperforms Fable 5.1 on nearly every published benchmark, but a high benchmark score doesn't indicate design taste, that only shows up when you actually use the model.
- Both models list the same token pricing, $10 in and $50 out per million, yet GPT-6 measures roughly 56% cheaper on real per-task cost.
- Performance and cost numbers are described as "on paper" only, deliberately separated from the actual design-quality judgment made later in the video.
03Images 2.0: the key advantage
- Claude Code has no built-in image generation model, so matching custom visuals to a brand there means paying for a separate tool like an MCP integration, with limited free usage.
- Codex and ChatGPT ship Images 2.0 natively, which is framed as the real practical advantage over Claude Code for design-heavy projects, independent of raw coding ability.
04Landing page walkthrough
- A single prompt, without separately requesting images, produced a full landing page with layout, cursor-reactive image motion, and custom photography-style visuals generated by Images 2.0.
- The prompt specified target sections, desired look and feel, and linked example sites for inspiration, giving the model concrete creative direction rather than an open-ended request.
- The generated imagery was judged able to pass as real photography rather than obvious AI output, which is treated as a meaningful quality threshold for brand-safe AI visuals.
05Workflow, limits & quiet view
- A $20/month ChatGPT Plus plan can hit its usage limit quickly under heavy GPT-6 use, even in light mode, an operational constraint worth planning around before committing to a workflow.
- The recommended pattern: use the powerful, expensive model for the first prompt to get about 90% of the work done, then switch to a cheaper model like GPT-5.6 for the rest.
- Sites built with heavy interactive effects should include a "quiet view" toggle that switches to a static, low-motion version for visitors who just want the content.
- Mobile rendering needs separate verification. Effect-heavy sites that look solid on desktop often need a quiet-view equivalent on mobile to stay usable and performant.
06Outro
- The real story isn't that GPT-6 codes or reasons better, capable coding models already exist. It's giving a model access to native imagery generation and treating visuals as part of the design process itself.
- Model capability doesn't replace creative taste or clear creative direction, if anything both matter more as the tools get more capable, because the technical gap keeps shrinking.
Terms worth knowing.
- GPT-6 Astra
- OpenAI's newest general-purpose model, positioned as an upgrade to coding, tool use, computer use, and long-running agentic tasks.
- Images 2.0
- OpenAI's native image generation model, available inside ChatGPT and Codex, used here to generate custom on-brand imagery directly as part of a website build.
- Fable 5.1
- Anthropic's latest model at the time of this video, used throughout as the direct performance and cost comparison point against GPT-6 Astra.
- Quiet view
- A toggle added to a heavily animated site that switches visitors into a static, low-motion version with no scroll effects, for people who just want to read the content.
- Codex
- OpenAI's coding-focused interface that includes Images 2.0, used here as the alternative to Claude Code for design-heavy builds.
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
GPT -6 Astra is here, and I put it through a pretty demanding web design test. OpenAI is positioning Astra as its most capable general purpose model yet, with major improvements to coding, tool use, computer use, and long -running agentic tasks. But the part I was most interested in seeing is what happens when you combine that intelligence and performance with OpenAI's Images 2 .0 image generation model.
Because one of the biggest limitations of AI -generated websites has never really been the code, it's the imagery. You can generate a decent looking landing page pretty quickly at this point, but getting custom visuals that actually fit the art direction, work inside the layout, and feel like they belong to the same brand has still been pretty hard.
And that's one of the reasons I pay for a ChatGBT subscription on top of my ClaudeCode subscription. I get a native image generation model that I don't get inside Claude. So I gave Astra a high -end website brief and let it handle the design, code, interactions, and custom imagery using Images 2 .0.
And the result is probably the clearest example I've seen yet of what happens when all of those capabilities start working together in one workflow. Now, just some more quick context before we dive in. GPT -6 is OpenAI's newest and most powerful AI model.
And what makes this launch particularly interesting and exciting is that Fable 5 .1 also just dropped from Anthropic. And they're both incredibly powerful models. But looking at their performance benchmarks of GPT -6 compared to Fable 5 .1, GPT -6 actually outperforms Fable 5 .1 on almost everything.
But I'm covering this model specifically from a designer's perspective, and just because a model is incredibly high performance doesn't mean it's a good designer automatically. It just means that it performs well on technical benchmarks. So going into this test, I was mostly just curious about how much of a real designer's taste GPT -6 has.
And that's really not indicated by looking at any... these benchmarks. It's something you just have to try for yourself.
So moving on from performance let's also look at the cost comparison really quick. And again, this is GPT -6 compared to Fable 5 .1. And at first glance, they're actually the same price.
$10 in, $50 out for both of them. But looking at the measured cost per task, GPT -6 Astra is actually 56 % cheaper. So just looking at the performance and cost measurements, GPT -6 is more powerful and cheaper on paper.
But that's just on paper, and like I said, this is no indication of how good of a designer GPT -6 is. Now, I use clod code for most of my work, actually. But what under - gives GPT -6 a leg up over something like Clod Code is that inside ChatGPT or Codex, you have a very powerful image model built in called Images 2 .0.
Something that I often find myself hitting a wall with when I'm designing in Clod Code is that Clod Code does not have a native image generation model. I do sometimes use the Higgs field MCP to generate images from Clod Code, but it's only free up to a certain point, and then I have to pay additional money on top of my Clod Code subscription.
But from Codex on the other hand, you have this very powerful image generation model built in, making it a lot more capable for web design in particular. Now, with that being said, let's take a look at the first design I've come up with with GPT -6 Astra.
It's a landing page for a theoretical company called Roam, and you can see the first example of my imagery generated by Images 2 .0 in the background here. So let's take a scroll through and check it out.
So as you can see, I wanted to really showcase the images I generated with Images 2 .0 and focus very heavily on interactive scroll effects and giving the visitor a very cinematic and immersive experience. And in my opinion, the imagery I generated for this site could pass as completely real images. We all know what a clearly AI slop image looks like, and in my opinion, none of these really look like that.
And you can give your end visitors a very authentic feeling website experience when you use an image generation model like Images 2 .0. And as you can see from the background image here, You can have ChatGPT generate the starting image with Images 2 .0, and then you can have GPT -6 take that image and implement this kind of dynamic image movement effect that follows my cursor.
And by the way, I didn't tell ChatGPT separately to generate these images and then bring them into my web design project. I started off with just one prompt, and I said, I want this page to seriously flex Codex's visual and image -related capabilities. And I got pretty in -depth with my prompt, but I also included Use Images 2 .0, wherever custom imagery would improve the experience.
So it doesn't have to be a fragmented process where you generate the imagery first and then see how it fits into your website. You can just do it all in one pass because Images 2 .0 is built into ChatGPT and Codex. Now diving a bit deeper into my first prompt, I told GPT what sections I wanted in this landing page, gave it a bit more guidance about the look and feel that I wanted, and then just to give Codex a bit more guidance about the immersive and interactive experience that I wanted for my website, I gave it a few examples of websites that I think do this really well.
just so that it has some inspiration to work off of. And I just included them as links at the end of my first prompt. And you can see down here that I've actually hit my usage limit as of right now.
And this honestly happened fairly quickly because of how much usage GPT -6 eats up, even on light mode. And just for reference, I'm on the $20 a month plus plan, but if you're on one of the pro plans, you'll feel the limits a lot less using GPT -6 with that 5x or a 20x more usage. After Codex's first generation, there were a few bugs that I had to call out and have it fix.
And what I think is the best strategy right now using GPT -6 for design is use it just for the first prompt at least to have it get like 90 % of the work done. Then once GPT -6 has established the bulk of the imagery, the effects, the section layouts, switch to a slightly less powerful model like GPT -5 .6 and have it do the rest of the work that you don't need such a powerful and expensive model for.
Now right now this website of course feels very heavy because of all the effects and interactive elements that we have here. And when you have such a heavy and immersive website, I recommend you include something that I would call a quiet view, which is this toggle that you see down in the bottom left. When I click it, you can see that I now land in a much less dynamic and effect -heavy version of this website.
Almost all of it is static, there's no scroll effects, and this is a great option for visitors that don't care about all those special effects and just want to get through your website. Now, let's also check out the mobile version of this website, because a lot of websites that have so many dynamic elements going on often don't respond well at all on mobile.
So let's check it out inside Codex. I'm going to open this dropdown. Show device toolbar.
And then I can switch to a mobile browser width. I'm going to choose iPhone 15 Pro Max. And this will be representative of most mobile experiences.
So let's take a scroll and see how it's looking.
Definitely a few bugs here and there, but overall it's looking pretty solid for an immersive and interactive mobile experience. On mobile especially, this is a type of website where I would prefer the quiet view, just so I can fully appreciate all the imagery and improve the performance on my phone. So right now, because of the combination of GPT -6 and the Images 2 .0 image generation model, I can confidently say that this is my favorite method for generating image -heavy websites right now.
So after testing GPT -6 Astra for design, I think the bigger story here is actually the combination. of capabilities. Astra being better at coding or reasoning is useful, but designers already have incredibly capable models for that.
What makes this workflow powerful is giving the model access to something like Images 2 .0 and letting it treat imagery as something that's baked into the actual design process rather than having to generate images before or after and then drop them in. It can decide what visuals it needs, generate them, build the interface around them, and then combine them with things like animation, shaders, 3D elements, and interactions that would normally require several different tools.
I still don't think this replaces having taste or giving the model strong creative direction. If anything, those things get more important as the tools become more capable. But the gap between having an idea and actually producing a solid, visually rich experience is getting ridiculously small.
And for designers, I think that's the part of Astra worth paying the most attention to. Thanks for watching, subscribe if you found this useful, and I'll see you in the next one.
The Hook
The bait, then the rug-pull.
One of the biggest limits on AI-built websites was never the code, it was the imagery. This test pairs GPT-6 Astra's coding with OpenAI's Images 2.0 model in a single workflow to see whether custom, on-brand imagery generated inline actually closes that gap.
