15:02Jack Roberts · Tutorial
Claude Design 2.0 Just Changed Everything
A five-level walkthrough of Claude Design 2.0 — from branded slide generation to escaping credit limits entirely with a local open-source alternative.
June 28thThe argument in one line.
Claude Design's default graphics look like generic AI slop, and the fix is a five-level system that feeds it real data, matched fonts, licensed icons, real motion assets, and eventually a skill that watches raw footage and builds the graphics itself.
Read if. Skip if.
READ IF YOU ARE…
- You use Claude Design or Claude Code for content, social graphics, or client work and want it to stop looking like generic AI output.
- You make YouTube, Instagram, or client videos and want an automated way to turn raw footage into custom motion graphics.
- You're comfortable stringing together a few outside tools (Firecrawl, LottieFiles, icon packs) around an AI design workflow.
SKIP IF…
- You want a single button that makes AI design good with zero extra tool setup, this workflow leans on several outside services.
- You're not using Claude's design or motion features at all and just want general graphic design theory.
The full version, fast.
Claude's design mode can animate real data into charts and graphics, but by default it produces the same generic look as every other AI design tool. The fix is a five-level system: feed it real numbers instead of vague prompts, fix the biggest AI tell (generic fonts) using Firecrawl brand scraping and font-discovery sites, layer in a paid icon pack for premium polish, pull in free Lottie animations and AI-generated images for real motion and imagery, then give Claude a full video with a word-level timestamped transcript. The final level packages all of this into a reusable Claude skill that watches raw footage, researches supporting data with Firecrawl, and automatically generates matching graphics for specific moments, no manual prompting required.
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 – 00:26
01 · Stop Making Generic AI Slop
Cold open naming the problem: Claude Design's default output reads as generic AI slop.
00:26 – 01:20
02 · How Claude Design Works
Walkthrough of the Claude Design interface and its basic animate and build options inside claude.ai.
01:20 – 02:22
03 · Animated Bar Chart With Real Data
First demo: feeding Claude Design AI-model benchmark numbers to generate an animated, multicolor bar chart with logos.
02:22 – 05:44
04 · Level 1: Real Data, Real Motion + Fonts
Codifying a data-driven chart as a reusable asset, then fixing the biggest AI-slop tell (generic fonts) using Firecrawl brand scraping, Fonts In Use screenshots, and free font sites.
05:44 – 07:55
05 · Level 2: Borrow the Craft
Buying a cohesive icon pack for about $8 and feeding it to Claude Design produces noticeably more premium results than the default icons.
07:55 – 11:47
06 · Level 3: Generate the Art Too
Pulling free Lottie animations and AI-generated images into Claude Design to layer real motion assets and imagery onto generated graphics.
11:47 – 13:07
07 · Level 4: Feed It Video
Claude ingests a recorded or YouTube video and returns a full word-level, timestamped transcript it can jump to directly.
13:07 – 16:27
08 · Level 5: It Watches, Then Builds
A packaged Claude skill watches raw footage, uses Firecrawl to research supporting data, and auto-generates timed graphics for specific moments in the video.
16:27 – 16:32
09 · What's Next
Closing tease into a follow-up video on Claude's design creation skill.
Lines worth screenshotting.
- Claude Design's default output looks generic because it draws from the same limited style library every other AI design tool uses.
- Feeding Claude Design real numbers instead of a text description is what turns a generic AI graphic into a legitimate data visualization.
- Font choice is the single biggest tell that a design was AI-generated, more than any other visual element.
- Firecrawl can scrape a website's branding data, including its exact fonts, for a fraction of a cent by stripping out unneeded HTML.
- Fontsinuse.com lets you screenshot a font you like in the wild and hand that screenshot directly to Claude Design as a style reference.
- A single paid icon pack, around $8, produces noticeably more premium output than Claude Design's default generic icons.
- LottieFiles' free animation library can be pulled directly into Claude Design to add professional motion without animating anything by hand.
- Claude Design can accept a generated AI image and composite it directly into an existing design rather than generating imagery itself.
- Claude can process a full video, from YouTube, desktop, or any file, and generate a word-level, timestamped transcript automatically.
- A packaged Claude skill can watch raw footage, cross-reference the transcript with Firecrawl research, and auto-generate matching graphics for specific moments in a video.
- Research agents that pull outside data through Firecrawl fix the accuracy problem of an AI inventing statistics it was never given.
- Codifying a design choice, like a color palette or font pairing, as a saved asset lets Claude Design reuse that exact style on every future chart or graphic.
Five levels that turn Claude's default output into something that doesn't look AI-made.
WHAT TO LEARN
The gap between generic AI graphics and genuinely custom ones is closed by feeding Claude real data, matched fonts, licensed assets, and eventually a skill that automates the whole pipeline from raw footage.
04Level 1: Real Data, Real Motion + Fonts
- Give the AI actual numbers instead of a vague description; a specific dataset produces a specific, non-generic chart.
- Save a working style (colors, fonts, layout) as a codified asset so every future graphic reuses it automatically instead of drifting back to generic defaults.
- Fix fonts first: generic AI fonts are the single biggest visual tell, and free resources (Fonts In Use, Fontshare, Google Fonts, Open Foundry, Typewolf) can replace them without a design budget.
- Use a scraping tool to pull a target brand's exact typography and colors directly from its website instead of guessing at a style.
05Level 2: Borrow the Craft
- A single paid icon pack applied consistently across a whole project reads as far more premium than mixing default AI-generated icons.
- Keeping one icon style per presentation, rather than mixing styles, is what makes the result look cohesive instead of stitched together.
06Level 3: Generate the Art Too
- Pull in real animation assets (like free Lottie files) rather than asking the AI to invent motion from scratch; borrowed craft beats generated craft.
- AI-generated images can be composited into an existing generated design as a separate step, rather than expecting one single generation to produce everything at once.
07Level 4: Feed It Video
- A word-level timestamped transcript turns a video into a navigable dataset an AI can jump through directly, instead of a file it can only summarize.
- This works on any video source: a locally recorded desktop capture, a YouTube URL, or any uploaded file.
08Level 5: It Watches, Then Builds
- When an AI needs supporting facts or statistics it wasn't given, route it through a research/scraping step instead of letting it invent numbers.
- The end state worth building toward is a reusable skill that chains all of the above (watch footage, research data, generate graphics) into one automatic pass instead of repeating manual steps every time.
Terms worth knowing.
- Claude Design
- A design-generation mode inside Claude that turns prompts, real data, and outside assets into animated graphics and motion design.
- Firecrawl
- A web-scraping tool that converts a webpage into clean markdown and branding data, including fonts and colors, while stripping out unneeded HTML to cut token cost.
- Lottie
- A lightweight, JSON-based animation format that plays back as scalable vector motion graphics, usable across design tools, apps, and websites.
- Word-level timestamped transcript
- A transcript where every spoken word is mapped to an exact point in the video, letting an AI jump straight to any specific moment.
- Claude skill
- A saved, reusable instruction set that packages a multi-step workflow, such as finding animation-worthy moments in footage, so it can be triggered with a single prompt.
Things they pointed at.
10:13toolNano Banana Pro (AI image generation)
Lines you could clip.
00:00
“Claude Design can now build beautiful motion graphics, but 99% of those designs look generic and AI slop.”
02:30
“This is Doctor Slop. This is the master king of the Slop universe.”
03:46
“It saved us 93% of our tokens, which is ridiculous.”
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.
metaphor
Claw Design can now build beautiful motion graphics, but 99% of those designs look generic and AI slop.
But I just found a new system inside Claw Design that easily builds unique designs and fits into any workflow. So you can avoid the slop, save more time, and get better designs faster. So if you haven't already, grab that beautiful coffee, and let's dive straight in.
Now the first thing to understand about Claude design is obviously we can do this in the online app. We can do this in the Claude app. It's not just the fact that we can go ahead in the selection menu here for example, go ahead and choose the animation, pick a design system, and have it animate something.
But we can also get it, if we wish, to go ahead and actually take real data, real numbers, and animate them. So we can give it any data set. So let's say for example, the we're talking about AI model performance in this video.
And not only am I gonna show you in this video, by the way, exactly how to animate in ways that you haven't seen before with Claude, I'm gonna show you how I'm personally using it in a systemized way that will work for any social media platform for your business anyway. It's really freaking cool. So will Disney capture heart with animation?
How do we bring it to life? Well, one of the things we can do is just give data to Claude and give it a prompt. And so for example, you could come here and say, I'd like it to animate for me the OpenAI model and DeepSeek and Claude and all the different models in an animated bar chart with multi colors, add their logos in, and make it beautiful and interactive.
And I'm gonna give you some specific numbers and data. And then down here, we could give it as much data as we wanted to. We could say OpenAI is 700 and Claude is five nine five.
And basically, this Claude here, the Claude design will animate this. So you end up with something that looks like this. You have x, perplexity, humming phase, quine, visceral matter, Gemini, DeepSeek, anthropic, and OpenAI.
And we have this beautiful, multi caloric gradient on OpenAI. And look at this, even the word actually matches exactly the gradient that we have down below there.
And you can go back and forth with this and play around with it. I encourage you to do that until you get your desired design start. Then when this is done, we can codify this as an asset and we can let you come up the Claude and just say, hey, when I'm building a chart, I want you to use this exact style for all future bar charts.
So level one of the five levels we're covering is essentially using data. Now before I can show you level two, we have to talk about the single greatest design skill.
This is Doctor Slop. This is the . I am talking about the font.
This is the biggest giveaway. Now check this out. This very presentation that I'm using right now, I actually did three versions of it.
I have one with what's called a Cotham font. This one here is Poppins, and this one here is Montserrat.
Now, call itself, when you just give it a prompt, whether you're using design or something else, we'll use a generic font.
But what we can do is say, hey, I want this font or I want that font instead. And honestly, just changing the font to something like Montserrat or Poppins, Glacial Indifference, there's so many different fonts we can use drastically changes the perception.
So let's say that you find a website that you like or you found a font but you have no idea what it is. Well, one of the things that we can do, and let's say I'm on ClickUp, I actually met the founder in Montenegro. Very, very, very cool guy.
Very inspirational story. What we're gonna do is come over to Firecrawl, drop in the URL, and under format, come down and check on branding. I use Firecrawl for all my internet search.
I love it. But if you click on start scraping, this will actually extract all of the different typographies and font styling that we can use to consider for our system.
Now what I'm most interesting in here is actually the font. You So can see, I can come down here. It saved us 93% of our tokens, which is ridiculous.
Look at this. 22¢. That's wild.
I come down to branding. Not only do have logos, but I can actually see down here, I've got the fonts, which is this. So one of the things I can say to Claude is, hey, go ahead and build me a design system using this font or something similar.
And a huge hack for you. God, the design experts do not want to know about this, but I'm gonna pull the and show you. There's a really cool website chat called fontsinuse.com.
So essentially, this is an amazing website. And effectively, it just shows you like you know, you see really beautiful designs. Like, I have here some paprika because I'm in Hungary and we love paprika in Hungary.
It's part of the deal. They say this when you come in, you gotta love it. Essentially, you see things or packages that looks really cool, but you don't really know what the actual font and design is.
Well, websites like this just let you browse real life use cases, find it, and then literally what you can do is screenshot this. You can even say some of these fonts are available for free online and you can just directly use them to site Claude. It is so so cool.
You can literally even take a screenshot and all you would do is come down like this and say, hey, to Claude. Let's come down here like so and just skip this a little bit of a screenshot. You can come over, you can drop this in and say, hey, I want you to build for me a beautiful advert for my business and I really love this font.
Could you check all available free fonts for me to see if you can find something as close as possible to this, if not this one itself. Now, you can also buy the font, which I'd highly recommend if you are gonna be doing lots of design for a particular brand. It's the easiest way to elevate it, but there are so many free options.
But you can check out Google Fonts. There's a website called Fontshare where you can see all of these beautiful fonts which are available for free. So you can come down and have a look.
Like, I think one of the fonts that I use is Switzer. I highly recommend that. Obviously, I use it.
My designer actually built this for me, which is cool. Again, this is a great website. Another one here as well is Open Foundry.
This is really cool for some nice kind of like off static gorgeous fonts. Obviously, I'll time some everything down below. If you font it out, feel free to skip.
But this really is just one of the coolest way to do it. You got Type Wolf as well. This is I think this just shows you gorgeous fonts.
I'm not sure if these are all free, but you can go ahead and check them. So now we understand how to use data and fonts. It takes us on to level two.
And by the way, each level is more epic and beneficial than the last one. Level five, you're gonna really love this one. So the idea with this is that we can actually take Cord itself and bring in other design assets to really improve its quality because it can generate beautiful graphics like this.
I use it, for example, to build up my entire Claude Code operating system. It helped me to build up my entire design operating system as well. It can build things.
But one of its limitations really is the ability to create beautiful graphical icons. And icons can really elevate the level of it.
I did it in my first tech startup. And and by the way, if you don't know who I am, I'm Jack. I built and sold my last tech startup with like a gazillion customers.
Now I show you here the stuff that works whilst I'm building my own AI startup. So I love this stuff. I do this stuff every day.
And one of the cool ways you can elevate your designs in level two is using icons. I there's a lot of different options.
There's icon a, there's flat icon. But what I'd recommend that you can do here, and some of them are free by the way, if you just give them attribution, is find a design style that you think looks really cool. So for example, you got this travel pack here, and what you can actually do is just download the entire pack.
I'm on these guys' pay plan. I think it's like $8. By way, again, not sponsored.
I'm just tying the stuff that I use. You can download all of them. And then what we can do is then integrate these icons into any kind of animation or graphic.
And this is an example. I just gave it the packs. Said, design me something interesting.
Now check this out. This is just something on travel. This is anatomy of a trip.
And you can just see that the level and quality of this design is just way better. Like, it's not I get I didn't really give us any sophisticated prompt, but how much better and crisp and premium does this look in your videos, in your assets, in your presentations, and you just give it these logos?
And in fact, there are hundreds of these logos on so many different websites that you could use. Like, in in a lot of cases, you can search for stuff. Like, again, and I did this in my last tech start, which I'm just telling you all the source that I did.
Like, let's say we're doing something around Christmas. Right? Like a Christmas presentation.
We can actually just go ahead and find icons. Now I recommend that basically each presentation, you use one style.
So try to keep it to one style rather than jumping around. But you can see just how beneficial this Now this takes us squarely onto level three where we take it to a complete new level. Let me show you what I mean when I say that.
So you got generating the art as well. Now here's a cool thing we can do. Now imagine this.
We're not just having Claude using its existing assets and applying motion. But what we can do here for animations, which is really interesting, is take a prompt. We can actually go and use different resources.
We can actually go to existing websites that have built not just icons, but beautiful interactive graphics that make your graphics look unbelievable. Now, some things that we can do is add in images to our designs, which are great. But you can go through to websites like this.
Lost Animations itself has this incredible, like, repo of beautiful animations and graphics, and where relevant, you can basically add them in. It's like a search engine for really gorgeous things.
People have always used them in their websites, but you can actually use them in Clozesign if you want to. Now the best part is the fact that you can actually get free ones. Obviously, will have different licenses and you have to check that.
But you can see you've got this beautiful fire thing here, which is cool. This is free under the Creative Commons license, which is cool. You've got the rocket.
You've got like loads of cool things. You've even got, for example, and I really like this one here, like this pack of like astronauts and stuff like that. And what you can do is actually find these from websites like this and integrate them inside of Clordesign.
So for example, check this out. Imagine this in an Instagram style reel, and I've laid it out like that, for example, and you could literally scroll and show different things. So with the fire, we've got, like, all these different things.
Again, using these assets, which is incredible, and it's not something that you can accomplish with Claude by itself, which I think is absolutely fantastic. And these just look gorgeous and beautiful, and you can imagine this on Instagram carousels. You could imagine this on so many different platforms that you can grab this.
And all you literally need to do when you get them effectively is you find one that you like, you come down, you can download the Lottie JSON like so, and then you just create a library, create a repository, and share it with Claude. Lottie has a free plan and a pay plan.
You can play around with that and see all of the details. But we can even take this another step forward and use an image. So for example, if I come over to my Claude design operating system here, I'm gonna get down and let's just get, like, little images.
I'm gonna come over to let's do 16 by nine two k, and we'll create two images of this, and we'll do Nano Banana Pro. Let's do Nano Banana Pro two. And I might say something like, hey, design for me a gorgeous kind of beautiful illustration of the galaxy, please.
Alright? Something gorgeous, maybe kinda Ghibli style, something familiar, something fantastic.
Come down here. I see this cost four credits, or if I can come down, I can see, you know, the that'd be like 12¢ to do or a couple credits with Hicksville. Come down, and let's go ahead and generate that for me.
And what's gonna be really interesting here as well is it generating and it's cool. Is that we can grab any image that we want to and literally bring that into any Claude design system.
And, you can get Claude from your own computer to directly create this in here. And by the way, if all of this is sounding like I'm speaking Spanish, I'm gonna put a link down below for my full Claude code master class inside the community. It has everything from foundations and setup, building websites, power features, memory systems, agents, essentially all the stuff like many things that I've never shared on my channel that will take you from zero to Interstellar.
Plus the community, we hang out and we have a great time. So here, we've got this here for example. Let's say that we like this.
Well, let's go ahead, copy this image, and then we can show it over to Claw Design. And as you can see guys, you can now add it into any image. I just gave it to Claw Design.
I was like, hey, add this into the end. And as you can see once it pops up, you're now gonna go ahead and see this image added in. And I really think the imagery and animation and icons plus the kind of the graphics and the editing that Claw can do is really how you separate this out plus the fonts plus the data.
It just takes it to a completely new level. But then it leads us on to one of the limitations, which is this these designs are beautiful, but if we can't do anything with them, what's the value?
And this is where level four comes in, and we take it to a completely new level here. No pun intended, of course. And that's the idea that we can actually give Claude video.
So let's say that we record a video together, and there's two ways we can do this. One is we do everything manually. Level two though, is that Claude can actually go ahead and process that video for us.
So to do this, all you're gonna do is the below which is, hey there Claude, there is a video I just recorded on my desktop. I want you to go to that video and I want you to get the full transcript for that video and do an RTF please and share that with me in a HTML file. Now RTF basically means that every word that you say is mapped to a timestamp.
And the reason why this is so beneficial is because we can then have Claude in step five do something very fancy and incredible with it that really takes designs to a completely new level. Now we don't even have to upload the video. We could point it to a YouTube video.
We could point it to any file on our desktop and it will go ahead and do that for us. And as you can see, we now have the file for the design genius script, which is coming out, I think, yesterday. And look at this.
We've got effectively everything on here and it explains all of the detail and it's got everything there, timestamp. And then I've opened this up in a new file so you can see it and everything I've said here is linked down by the minutes. And then there's a file underneath this that literally has every word connected with every single minute and second that it was said.
And then once we have that, we can go into step five. So not only can Claude actually watch, it can build and integrate all of this together in an incredible system, which just means that you basically record the short form content or the long form content, and Claude will not only basically timestamp that, it can do many other things.
So here, you can actually activate a skill, and I'll put a link for it down below so you can grab it, and it does all that stuff for you automatically. So, hey, use the skill to get the full transcript. And what I want you to do is identify parts of the video as per your skill that essentially explain where a animation would be valuable.
This is a YouTube video. I want you to do some research with Firecrawl to find interesting insights and statistics that might be beneficial.
Basically, mirroring exactly what it is that I say. Isolate the moments within the script, then go ahead and create for me some beautiful animations and graphics for those exact things and then save them for me on my desktop.
Then literally, you can enter that in and Claude will do the work for you. And the reason that we're using FireCool here is because it's going to enrich the information and the data.
If you're doing this on Instagram or YouTube, it's very viable to go ahead and get actual insights. And Firecrawl is like the cheapest way I found I'm using myself to actually go and get information from online. Like this saved us 93 tokens because what it does instead of bringing all the HTML, it just brings the relevant things.
Most people miss the research steps. So they get inaccurate data, but by having this enrichment cycle where actually, I'm talking about like I did earlier. So for example, I might say, hey, AI models are getting better from x all the way to OpenAI.
Now, where is it gonna get these numbers from? Because I don't explicitly mention them in the video.
So what needs to happen is there needs to be a research agent saying, hey, what has Jack said? How could and ask questions like, how could I make this better? How could I show this visually?
That's where Firecrawl comes in. It grabs that data and it does it in the cheapest way possible. It cuts out all HTML and you can obviously get branding and all of that kind of thing.
Beautiful. And then we get a full extract like this. Now the cool thing is that you can actually build a Claude skill like this that does anything that you want to.
So it could be for Instagram reels, could be for YouTube. This one for me, its basic premise is to find opportunities. So this is what I did for exclusive training inside my community, which is cool.
And basically, it's look at this. This is what it's found. And it suggested, hey, this is where I think we should add in clips into your long term content.
And this is an example of one that it did for me just off the back. So let's just give it a quick watch and see what it did. One question, three models.
So are we talking up? Blah blah blah. There's one, two, three.
No one copies homework. Again, so I'm talking here, and then this is all running in the background, which is cool. And then it just brings up these different graphics that you can see and we can do anything we want do.
That's just that's just one shot, but you get the idea of the thing you can kind of generate. Then it's kind of suggested six different ways we could do this. And it's actually given me a breakdown of everything I've said in my video, how fast I'm talking, which is extremely fast as you can see in this one, and then a full transcript as well.
And then you can say to hey, go ahead and build me that and it will actually insert those into the video if you want to or it will just give you the clips. But knowing how to use Claude with motion design is one thing. But if you don't know how to use Claude's most powerful design creation skill, you are leaving too much value on the table.
So the next thing we're gonna do is learn how to do that in this video right here.
The Hook
The bait, then the rug-pull.
Claude's design mode can already animate real data, but left alone it defaults to the same generic template every other AI tool produces. This breakdown walks through the five-level system for making Claude Design output that doesn't read as AI slop, ending in a skill that watches raw footage and builds matching graphics on its own.
Named ideas worth stealing.
02:22list
The 5 Levels of Claude Design (Anti-Slop System)
- Level 1: Real Data, Real Motion (feed it numbers, fix fonts)
- Level 2: Borrow the Craft (paid icon packs)
- Level 3: Generate the Art Too (Lottie animations + AI images)
- Level 4: Feed It Video (word-level timestamped transcript)
- Level 5: It Watches, Then Builds (auto-generating skill)
A five-step escalation for making Claude Design output that doesn't look like default AI slop, ending in a skill that fully automates graphic creation from raw footage.
Steal forany recurring social or video content pipeline that needs on-brand motion graphics without a human designer
How they asked for the click.
VERBAL ASK
10:59link
“I'm gonna put a link down below for my full Claude code master class inside the community.”
Soft, conversational plug for a paid community dropped mid-demo without breaking the screen-recording flow, reinforced again in the description with a free-skill download link.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
Visual structure at a glance.
