19:46Chase AI · Tutorial
Your Claude Code Carousels Suck (Here's The Fix)
A 19-minute screen-share walkthrough of the hybrid AI-image-plus-HTML approach that keeps social carousels from looking like everyone else's Claude Code output.
June 2ndThe argument in one line.
Claude Design doesn’t change what code gets written — it adds the visual-first interface that makes iterating on that code feel like design instead of guesswork.
Read if. Skip if.
READ IF YOU ARE…
- You’ve tried prompting Claude Code to build UI and found the round-trip corrections exhausting because you couldn’t see what you were describing.
- You use Google Stitch, Lovable, or Pencil and want to understand how Claude’s design tool stacks up.
- You’re on Claude Pro, Max, or Enterprise and didn’t know claude.ai/design exists.
- You want to know how to hand a Claude Design prototype off directly into Claude Code without manual copy-paste.
SKIP IF…
- You’re purely backend or CLI-focused and have no interest in visual design workflows.
- You need a production-depth tutorial — the host explicitly frames this as a quick orientation lap, not a deep dive.
The full version, fast.
Claude Code’s long-standing weakness has been frontend design — translating visual intent to natural language to code is a lossy pipeline and iterating without seeing the result is painful. Claude Design is Anthropic’s answer: a browser-only visual interface where you describe what you want, answer a more detailed set of clarifying questions than plan mode asks, and get a fully interactive prototype you can edit by selecting elements, queuing annotated comments, or sketching intent freehand. Technically it’s writing the same code Claude Code would write. The product is the visual feedback loop. Export options include zip, PDF/PowerPoint, Canva, and a generated Claude Code hand-off command.
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 →Where the time goes.
00:00 – 01:15
01 · Intro and overview
Claude Code’s frontend weakness acknowledged. Claude Design introduced as Anthropic’s answer to Google Stitch. Available Pro/Max/Enterprise at claude.ai/design. Outputs: prototypes, mockups, PowerPoint, Canva.
01:15 – 02:15
02 · Interface walkthrough
claude.ai/design landing page tour: prototype, slide deck, template, or other. Design system setup via GitHub link, local folder drag, or raw asset upload. Smart file selection on large codebases.
02:15 – 04:35
03 · Live demo — globe prototype
Same prompt Anthropic used in their own marketing video: interactive dark-themed globe showing culture flows between cities. Detailed clarifying question phase. Mixed culture, editorial style, full dashboard, multi-hue palette, top 10 cities, flow-color tweakable.
04:35 – 06:07
04 · How is this different from Claude Code?
Honest answer: technically nothing — it writes the same code. The value is the visual iteration layer: seeing options, comparing states, editing without translating intent to text. Explains why Stitch and Pencil are popular despite being wrappers.
06:07 – 08:35
05 · First pass result and editing tools
Interactive globe with rotation drag, glow intensity slider, palette swapper. Edit mode: element selection + property panel. Comment mode: queue annotations for Claude. Draw mode: sketch intent freehand. Export: zip, PDF/PPT, Canva, or Claude Code hand-off command.
Lines worth screenshotting.
- Claude Design is browser-only at claude.ai/design — not available in the desktop app and likely never will be due to its graphical nature.
- The clarifying question phase is more thorough than Claude Code plan mode, which typically asks only three questions.
- Brand ingestion is selective: Claude reads your codebase and pulls only the files relevant to design, so a large repo doesn’t block you.
- Claude Design was built with Opus 4.7 in mind, not the default Claude model.
- Under the hood, Claude Design writes the same code Claude Code would — the value is the visual iteration layer, not a different engine.
- Edit mode works like Cursor or Lovable: click the element you want to change, adjust properties in a panel, no text prompting required.
- Comments can be queued without sending them to Claude immediately, letting you batch multiple annotation requests before triggering a generation.
- The hand-off to Claude Code is a single generated terminal command — design-to-code is one step, not a manual copy-paste.
- Outputs built in Claude Design are fully interactive prototypes with real APIs — not static screenshots or flat mockups.
- The visual-to-code problem: humans think in visual terms first, and natural language is a compression that loses information before it becomes pixels.
The visual layer is the product, not the code.
WHAT TO LEARN
Claude Design doesn’t generate better code than Claude Code — it gives you a feedback loop that makes design iteration feel like design instead of prompt archaeology.
- Visual-first tools win not because of superior output quality but because they let you compare options before committing to a direction — the same reason Figma matters even when a developer could write the CSS by hand.
- The code-first design loop (describe in text, generate, look at result, re-describe) compounds error at each step; a visual selection replaces an entire correction cycle.
- Brand ingestion via a local folder or GitHub repo is the highest-leverage onboarding step — skipping it means every output will need manual color and typography correction.
- Element-level editing (click the thing, change the property) is more precise and faster than natural language corrections for spatial or dimensional changes.
- The comment queue lets you batch visual feedback and send it all at once, cutting generation round-trips compared to prompting each change individually.
- Treating Claude Design outputs as prototypes with real APIs rather than static mockups changes what you hand to stakeholders — they can interact with it, not just look at it.
- The one-command Claude Code hand-off is the most underappreciated export — it bridges the design-to-production gap without requiring you to re-describe the design in text.
Terms worth knowing.
- Claude Design
- Anthropic’s browser-based visual design tool at claude.ai/design. Takes natural language prompts and generates interactive prototypes, mockups, and presentations with a visual edit interface.
- Design system ingestion
- Claude Design’s onboarding step where you provide a GitHub repo link or local folder and Claude selects relevant design files to extract brand colors, typography, and assets.
- Google Stitch
- Google’s competing visual AI design tool, referenced as the closest analog to Claude Design in terms of visual-first, prompt-to-UI workflow.
- Lovable
- An AI-powered visual web app builder that generates and edits code through a design-centric UI, used as a benchmark for element-level editing capability.
- Plan mode (Claude Code)
- A Claude Code mode that asks clarifying questions before writing any code. Claude Design’s question phase is more extensive — plan mode typically asks about three.
- High-fidelity mockup
- A detailed visual representation of a UI that closely resembles the final product in layout, color, and typography — contrasted with a wireframe, which is a structural skeleton only.
Things they pointed at.
04:52productGoogle Stitch
07:00productLovable
05:37productPencil
Lines you could clip.
05:22
“When I’m doing everything code first from a design perspective, it’s tough. It’s kind of janky.”
04:52
“The awesome thing about Stitch isn’t even necessarily its design philosophy. It’s the fact that I have a UI where I can visually see a bunch of options and edit it in this manner.”
04:52
“If we get super reductive, nothing really. Like, it’s just writing code.”
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.
00:00So the updates never stop. Anthropic just released Cloud Design, which now gives us an interface to create web apps, websites, pretty much whatever we want via the Cloud interface.
00:13This is their version of Google Stitch. And as you can see from this demo video, it's all about giving you the ability to tweak everything from the macro to the micro with these designs. And we're not talking about just web apps, we're also talking about mobile designs as well.
00:27And it's kind of funny because when we talk about Anthropic and ClaudeCode, one of its biggest weaknesses is front end design. So to see that they're now coming out with a full fledged application that handles this weakness is pretty cool.
00:39So in this video, I'm gonna show you how it works. We're gonna do a quick demo so you can jump in there yourself. Now Clot Design was created with Opus 4.7 in mind and it's available if you're on anything from the Pro Max to Enterprise.
00:51And this does everything from prototypes to mock ups to PowerPoint presentations and it's something we can export into things like Microsoft PowerPoint or send it to Canva. Now one of the cool things about this is brand design.
01:01So you can give this a code base, say the code base of your website, and it will pull all of the brand assets from the website so it can match things like colors and typography to the design you're working on.
01:12So to get started, you just need to head to claud.ai/design and it will take you to a web page that looks like this. Now right away on the left, we have a few different options, prototype, slide deck, you can use a template or other.
01:23Down here on the bottom, like I was talking about, we have the ability to create a design system. So if I go to set up design system, I can give it something like my company name, and then I can provide examples of my design system.
01:36You don't have to do this but this will help if you already have something you're trying to match it to. So you can give it the link to your GitHub. You can actually drag the folder so if you have the code base on your actual computer, you can drag it here or you can just add the fonts, logos, and assets as well as any other notes.
01:52So what I did is I just selected the folder on my computer with assets to my website, and then I just hit continue to generation. When you do this, especially if it's a larger code base, first of all, it's not going to upload the entire code base. It's gonna figure out which files actually make sense.
02:06And secondly, you'll get a pop up window that says, hey, this can take fifteen to twenty minutes as it goes through all your files. Now if you wanna do something from scratch, can totally do that as well. So we'll just start a new prototype.
02:16We'll call it chase demo. We have two options. You have like just a rough wireframe or we can go straight into a high fidelity mock up.
02:24So we'll do the mock up. That's gonna take you to this page and, again, definitely getting some stitch vibes here. So I'm gonna tell let's design an interactive dark themed graphic showing how culture flows between cities, a rotating globe with the cities connected by glowing path.
02:35This is the same thing they did in the demo, but I'm interested to see if what we get here actually matches the asset they showed us in the video and and what sort of differences we're gonna see. How much did they hype it up in their ad?
02:47So we're gonna go ahead and send it. And by the way, you can see here, we can also choose things like the model, you can attach stuff, you can actually do voice here and import whatever you want.
02:55So right away, it starts asking us some questions which I really like. This is almost similar to plan mode inside of Cloud Code. So what kind of culture we think?
03:04Let's just do mixed, globe style. Let's do let's do this.
03:12Flow path. That looks cool. What do we wanna do for color palette?
03:16Let's do multi hue. And right away, I I love the fact we're now getting these prompts. If I go into stitched, I'm not really going to get this.
03:24If I go into other things, I'm not really gonna get this. Like, one of the most powerful things inside of Cloud Code, and we talked about this in other web design lessons, is, you know, having this back and forth to kind of figure out these blind spots in our plan. And the fact that it's asking all these questions is huge.
03:39It's asking me quite a few. You know? Even normal plan mode in Cloud Code only asks, like, three.
03:44So we'll drag to rotate. What city city should we feature? Let's do top 10.
03:49How much UI? Let's do full dashboard. Overall mood.
03:56Let's do editorial. We'll keep with editorial. What should be tweakable?
04:02Oh. We'll do flow color palette. That would do three things.
04:08Let's continue. And then over on the left, once we answer those questions, it sets up its progress. Again, similar to what we would see in Cloud Code if we had it on plan mode and had to do stuff.
04:17And by the way, this is obviously something that you have to be on the web app to do. You this isn't something that's available in the terminal for obvious reasons due to the graphical nature. And from what I'm reading, I I don't think this is ever gonna be implemented into the desktop app, or maybe it will at some point.
04:33But as of right now, you have to do it through claw.ai. Now as this is building, let's talk about some of the questions you might have, which is like, how is this any different from me giving it this prompt right here into the chat window or pulling up Clawd code and just saying, hey. I want you to build this interactive thing.
04:47Well and having it just, you know, create some sort of web app out of that. The answer is at if we get super reductive, nothing really.
04:54Like, right, it's just writing code. It's gonna be the same thing. The difference is and, if you've done any sort of front end design in any capacity, even if it's just a simple landing page, you understand the power of being able to visually see these things and compare them.
05:05That's why, you know, Google Stitch is so cool. Because the awesome thing about Stitch isn't even necessarily its design philosophy, although I think it's really good. It's the fact that I have a UI where I can visually see a bunch of options and edit it in this manner.
05:17And then when I like it, pull it into code. When I'm doing everything code first from a design perspective, it's tough.
05:22It's kind of janky. It's kinda hard to take a visual medium and put that into natural language which gets turned into code, which gets turned into a visual and really nail it, especially at the beginning.
05:33Like, I need to see things visually. These for me, and I need to see options. And so having this is awesome.
05:38This is a great step forward for Anthropic and Claude code because this has been a real weak point. That's why you see apps like Pencil and things like that becoming so popular because it gives you that visual medium to deal with these sort of things. And also quick note, like you can see down here, like these are full fledged applications.
05:53It's essentially prototyping. So you can have these things called APIs. You should be thinking this more not just as like a visual design Canva thing.
06:03You should be thinking this more in terms like Google Studio, like Google AI Studio type deal. So here's what it came back with, kinda went with editorial style. We can see the globe right here.
06:12I can drag it with the mouse. We can do the rotation speed, change glow intensity, change the palette.
06:19That's kinda cool. And then it kinda has like little write ups over here. Now let's talk about being able to edit this thing.
06:27First of we have this little tweaks thing up here. So the tweaks just has to do with rotation speed and all that.
06:34I can leave comments, I can edit, I can draw. And then we can also do things like full screen to see what this would look like for real. Oh, that's kind of interesting in full screen.
06:42That looks much much better actually. But let's say I wanted to make an edit to this thing. Obviously, we could just go back into the prompt window and prompt it.
06:50If I go to edit, I can get a lot more granular. This kinda reminds me of like cursor's editor or even something like lovable.
07:00So I can, you know, actually select the individual cities themselves. If I select the globe at large, it'll bring it up here and I can change things like the color, that looks hideous, know, the height and all that.
07:14So I have the ability to get very, specific with what I wanna change, which again is great. Better than me saying in text, hey, I wanna change the size of this. Well, I can just select it in here and edit it that way.
07:24We could also do comments so I can click on any particular thing. Same thing with edit, but instead of actually changing, hey, these specific numbers, I can click on the globe and leave a comment and be like, can we make the globe larger?
07:38You know? Send to Claude. And it creates a queue of comments if you don't wanna send it to Claude right away, but at any point, you can then send it to Claude, we'll start working.
07:46On top of that, we can also draw. So I can be like, alright. Well, I just want, like, a moon over here.
07:51You know? Let's get let's get a moon. I wanna see, like, Artemis two over here flying around.
07:56Stuff like that. Then over here, we also have the design file, so you can actually take a look at the code underneath the hood. And lastly, we have the ability to export and share this thing.
08:05So if I click export, I can download it as a zip, I can export it as a PDF PowerPoint, send it to Canva, or what's also super cool is I can hand this over to Cloud Code. And it gives me the command to bring this inside of Cloud Code, which is great.
08:17So that's where I'm gonna leave you for today. I know that was kinda down and dirty, but just kinda wanted to show you how to navigate this thing and what's possible. Definitely expect a deep dive in the next day or so showing you how you can get the most out of this.
08:29As always, let me know what you thought. If you wanna get your hands on the Chase AI masterclass, that's down in the pinned comments, and I'll see you
The Hook
The bait, then the rug-pull.
Anthropic shipped Claude Design the same week this was recorded — a tool aimed directly at the one criticism that has followed Claude Code since launch: its front-end design work is rough. This is the first public hands-on that runs Anthropic’s own demo prompt and keeps going past the marketing clip.
Named ideas worth stealing.
04:52concept
Visual-first vs code-first design loop
Code-first design (text prompt to code to visual) is lossy because you can’t see options until after generation. Visual-first tools invert this: see options first, pull to code when satisfied. Same reason Figma beat raw CSS.
Steal forAny pitch for visual tooling, design system argument, or client explanation of why mockups matter
How they asked for the click.
VERBAL ASK
08:15product
“If you wanna get your hands on the Chase AI masterclass, that’s down in the pinned comments.”
Single soft mention at the end, not repeated. Low-pressure.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
