Anthropic Launched Claude Design... Figma Should Be Worried.

All right, so lately Anthropic has been shipping many different features. They've been shipping like crazy every single day. It's like a new feature or some new tool or whatever the case may be. So, today Claude design was launched and this is a brand new product from Anthropic Labs. If you're not familiar with them, they're the same team that built Claude code which grew from a research preview to a billion-dollar product in 6 months, the MCP which is at 100 million monthly

Downloads and became the industry standard. They built skills, Claude in Chrome, co-work. It's led by Mike Krieger who was one of the co-founders of Instagram and Ben Mann. Now, sensorially this is a division within Anthropic that is shipping like crazy. So, you can see here they say the speed of advancement in AI demands a different approach to how we build, how we organize and where we focus. Labs, Anthropic Labs, gives us room to break the mold and explore. So, it's essentially

Discovering experimental products at the frontier of Claude's capabilities and scaling them responsibly to meet the needs of our enterprise customers and growing user base. They're essentially pushing the limits, coming up with new products, shipping things really fast and I would encourage you to watch the short video here from Claude which they posted on their X right here where it kind of just gives a brief overview of Claude design. But, we're going to dive into it. I'll leave links to everything down

Below in the description. You may be wondering what is Claude design? Well, this is not a Figma plugin, this is not a Canva competitor. It's a completely separate product where you essentially describe what you want in plain English and Claude builds it visually. This includes anything from slide decks, pitch decks, wireframes, marketing pages, one-pagers, brand assets, prototypes, really anything. It does this all from a simple conversation. And this is available right now for you in your pro plan, your max plan,

Your team plan. There's no extra charge. It's just going to be using your existing subscription limits. I'll leave a link down below to this, but you can access it at claude.ai/design and this is what the UI looks like. This is powered by Opus 4.7. If you didn't see the video I did on Opus 4.7 yesterday, you can check that out. Essentially, it is their most capable and powerful vision model, at least the one that we have access to. And we're going

To dive into actually using this in just a second and the onboarding. But, the cool thing here is that a few features that are a bit different from other AI design tools is that during the onboarding, which you're going to see in just a second, Claude is able to actually read our code base or our design files, really anything about our brand and it's going to build a system from scratch with our colors, our typography, our components, all our brand assets

So that every project that we create in the future will automatically have these color schemas, etc. to match our brand. You're not going to have to paste the hex colors into a prompt or upload your brand kit every time. Claude will just know. And the cool thing is if you have multiple different brands or sub-brands or companies, whatever the case is, you can maintain more than one design system and you'll be able to refine this over time as well. And this

Is really useful. One other video I recommend if you are looking to dive deeper into design would be checking out this video. I'll leave a link down below. This is how you can actually use Claude code with a bunch of different other skills as well as our custom website skill that I made in this video to build beautiful looking websites, leverage some really cool integrations within that skill. It's a whole pipeline. But, this is something that I would actually include within

That pipeline as well, Claude design because I see tremendous value in what you can actually build with this when it comes to website design, front-end design, etc. So, first things first that we're going to do once we're in the dashboard is we're going to set up a design system like I mentioned. So, this is essentially the onboarding. This is where you can set up your company name right here. You can actually connect our GitHub right here to allow, you know, for

Claude design to access any specific repo or project that we want to give to it. We can go ahead upload some of our logos or fonts, really any different assets from our brand here. You could also upload a Figma file or you could even link code from your computer. It just would require you to use Chrome or Edge right here. And then if there is any additional notes you wanted to add, you could do so as well. So, all these are

Pretty much optional. You can give as much as you want or as little as you want. And we're going to go ahead and continue to generation and you'll see here it will take about 15 minutes to generate your design system. You can step away, keep the tab open in the background. We're going to go ahead and click on generate. And now you can see here we are caramelizing our onions as Claude says here and it's starting to explore the provided assets

In the GitHub repo to understand what we're working with. You can see our progress here with the task explore uploaded logos, explore the repo, set project title. All these different stuff is going on right here. It's going to do a lot of different stuff to build UI kits for product, create a skill.md. It's noticing few different things here as it's working. So, we're just going to let this work through and we'll kind of go over it once it's actually done. And

Boom, now we have our first draft of the design system. So, you could go ahead and take a look here at all the different tasks it went through. You see it did quite a lot of different things and we got our colors here. Our primary colors is pulled directly from our repo. We can see our marketing site here above the fold. So, it actually went to our website which I didn't even give it this repo right here. So, that's actually really

Cool it did that. Grabbed some different typography right here. Grabbed all of our colors, their spacing, different components. So, these are components we already have. Buttons, we have badges, forms, cards, pricing tier, FAQ row, stats right here, brand watermark. We have client logos. We have our Lucid icons right here. So, this is really cool. It literally pulled all this. Now, we could change this to our default or we could, you know, not. We could upload additional fonts. We could tell it

To change things right here. I'm just going to actually go ahead and use this now. You can also see here we have our design system and design files. You can see different assets, fonts that it used, the UI kit, the uploads. You can see it even created a skill.md right here. So, this is the executive stride design right here that it created, some guardrails, quick reference and a read me here. is really cool that it did this all out of box.

I'm actually going to go ahead and now do new design using this system. That's going to pull us back here. So, we could do a prototype, a slide deck. You can choose from template or other. I'm just going to do a prototype. And with prototype, you can either do wireframe or high fidelity. So, this is for wireframes to explore quick ideas or we can do polished mockups with real brand assets and components, which we're going to do right now. I'm going

To call this one Stride AI Academy and we're going to use the executive stride design system which we can select right here. Now, I'm going to go ahead and click on create. And now we have our design panel where we can start with context. So, design system, add screenshots, add Figma design file. This can kind of integrate with Figma or it can kind of replace tools like Figma or Google Stitch. So, I'm going to go ahead and say create a landing

Page for Stride AI Academy's free community. We help business owners and professionals master AI tools like Claude code to automate their workflow and scale their business. Include a hero section, three value props, testimonial section and a CTA to join the community right here. And I'm going to go ahead and click on send. By the way, if you haven't already joined our free Stride AI Academy which has all the free resources that we do for all of our YouTube videos like, you

Know, on Obsidian, Claude code, etc. Definitely join. I'll leave a link down below for that. You can see here now Claude design is cooking. It's essentially going about creating the files, reading, you know, what our design is about. Now, it has some good context. So, it's actually going to ask us some questions before we go ahead and build this out. So, it's going to ask us what theme we want, dark mode, light mode, both. I'm going to decide that we have

A both toggle and header. So, we can decide either light mode or dark mode. We can decide the tone of the page. So, I'll just maybe do a balanced mix right here. Value props. I'll just go with the ones that it recommended here. So, Claude code mastery, workflow automation and peer community. We can just keep those for now. For testimonials, I'll just say make some realistic placeholders and community stats. I'll just give a few stats right here. How prominent is the

Free? I'll just say medium. You know, you can mention it but not shout it. Asking if we want anything else besides this. So, what's in the community, FAQ, some information on the founder. Sure. I'll just honestly click all these just to see what it does. Now, it's also asking for design variations. This is really good because we can spin up multiple designs as a Claude coder when we're building things out and see which direction we really want to take before we

Actually go about and start building with Claude code. So, I'm it could just be one version or we could do two to three hero variations via tweaks or full page layout side by side. I'll just say full page layout side by side. And we can decide our imagery as well as our CTA labels. And I'm just going to click these ones right here. Now, go on and continue. Now that I got those questions, it's building out its task right here and

It's getting to work. So, honestly so far with this whole process, I'm actually very impressed. I'm I will be excited to see what this output is. But, so far like the design process, it really streamlines a lot of this and those of you who have been using Claude code, you'll know that the design process for it isn't really hasn't always been one of its strengths, right? But now with 4.7 and you know, it being the best capable model for images and

Whatnot, plus this new design builder, I think this could be game-changing for anything you're doing with website designs or app designs or whatever the case may be. Okay, so now it's going to build out three versions of this landing page. We're going to have a classic one which follows our brand and our marketing page quite closely. It's going to have an editorial one, left align asymmetric hero, bigger stats, feel more magazine style and then a dark showcase. So, the always dark,

Bigger accent gold moments and community terminal feel. Now it's starting on the version two. I have a couple cool things to note, too. You can change the model down here if you would like. If you want to use a weaker model, you can also add attachments. You can also just simply use voice mode right here. Uh voice mode, it looks like it's only available on Chrome. Right now I'm on Zen browser which is based on Firefox, so that won't work. And

Then you can import and you can upload from Figma like I showed you. You can configure GitHub access here, grab web elements and then you can also see skills and design systems here as well as referencing another project. So, if we go to our skills, we can see the different skills that we have so we can add front-end design skill, wireframe skill, you know, send to Canva skill, a bunch of different skills that we could choose from. All right, and here

We have some of these landing pages. So, we can see we have our classic version one. So, this is actually pretty much exactly like our website. If we look at our website right here, you know, this is a website I created probably over a year and a half or so ago and if we go over to our Claude design here, we can see it pretty much cloned it. Um we got different logos here. We even have this text right here moving

Like it is here. Um this is tailored for the community, of course. And I'm clicking space right here to kind of scroll down through it. I can click up on my keypad to go back up. You can see some testimonials about the uh host right here, myself. You could add an image there, what's inside. So, I think this did a pretty good job. Now if we look at the editorial version two, we can see this is the magazine style, so this

Is actually really cool as well. I I like this style a lot. You know, this beats every $2,000 AI course you paid for and we have the testimonial section down here. Wow. So, this is honestly just my first impressions so far are really good. Okay, this is really cool. Like I may even use some of these. Like if we scroll up here, I I really like this terminal thing. Um build AI agents that actually run. You can see less theater, more

Shipping. Uh all in all, I think they did a great job with these sites. Now over here in the bottom right, um you can't really see because my head's here, but you have a few different options. So, you can tweak the layout. So, you can do canvas where we can see all these ones separately or we can do full page where you can see this whole entire thing exactly as you would with a full page and then we could switch from

The variants over here. So, V1, V2, V3 and we can choose the light mode or dark mode theme, right? For some of these. Some of these do have the light mode and dark mode for version one and two. Version three doesn't. We could add that if we wanted to. And of course, just like anything, you could come down here, tweak it, say, "Hey, make version one or make version three have a dark mode." Now also, you can go up here. You

Can see a few things like comments. So, I could click here. I could say, "Make button text white on all colored buttons." And then send this to Claude. We could go to edit here and we can see different options with typography, size, colors, etc. We can go over here to draw. You could draw on this for, you know, whatever reason that you may want to do that. You could present this in a new tab, full screen or in this tab. You

Can add internal comments for, you know, feedback for your team, but you can also add comments here. Let's say if I wanted to click on comments and then click on this button and then say, "Hey, make this text white." Whatever the case is and then send it to Claude, it can make those changes. And when you're ready to actually go ahead and start using this, you can go up here to either share and you can share this with teammates and choose

Their access level, copy link, duplicate project, duplicate as template or you could export this project as a zip or export as PDF, PowerPoint, send to Canva or export as a standalone HTML or you can even hand off to Claude code and you'll see that you can simply just run this command right here and it would pull in this design and you'd be able to actually use it, which is really cool, really powerful. All right, another example here, like we can create

Slide decks. So, I could use the same design system. You could use speaker notes if you want and then we can go ahead and create. I could do the exact same thing, just create a prompt right here. So, turn this into a 10-slide presentation for my YouTube audience, keep it educational and clean about using Claude code and I can go ahead and click on send. And you can see here it's asking us some of those questions again. I just went ahead

And answered some and I'm going to go ahead and click on continue. Wow. Damn. This is looking pretty good on in my opinion already. The cool thing here, you can see that it's verifying. So, it's I believe it's taking screenshots and using 4.7's power of, you know, having good visual capabilities to be able to make any adjustments if needed. You can see we have a 10-slide deck right here. Um we can see the speaker notes right here, which is really cool

That it does that as well. We can see some tweaks right here, whether it just be headline or mark first, my agency's unfair advantage, how we use Claude code essentially. Uh we can change some of the uh variants here as well. We can go through the slide deck uh briefly and we can see we got some animations right here with a terminal again. Um this is pretty damn good in my opinion. Uh I would definitely use something like this with, of

Course, some tweaks. We can go up here, export this as PowerPoint or do whatever the case we want with this and or we could send it to Claude code and make some additional tweaks if we want. All in all, guys, that's pretty much a high-level overview of what you can do with Claude design. Um you know, I'm sure you guys can go in, explore and build some other really cool stuff. If you build something that's really, really cool or something that

I missed in this video, let me know in the comments down below so that others can get some ideas as well. Let me know what your thoughts are about Claude design. It's pretty crazy because Anthropic just doesn't stop shipping new cool products. You know, we're seeing Claude managed agents, Claude routines, which I'm going to have a video coming out on very soon with some really cool stuff, so stay tuned for that. And we're just seeing a bunch of stuff from Anthropic.

Obviously, we have Opus 4.7 that came out yesterday. We have some mixed opinions on that with, you know, some people wondering if it was nerfed or this or that. If you haven't seen that, check out my video yesterday. But other than that, guys, that's pretty much it for this video. If you're new to this channel and you got some value here, make sure to drop a like, comment down below what you want to see in future videos and subscribe to stay

Up to date with more Claude code, AI and business growth videos. Also, too, guys, if you want all the free resources that we covered in all the videos on this channel, join our free Stride AI Academy where you can network with other like-minded AI entrepreneurs as well as myself. If you want to help grow your business with AI, you can book a call down below. But other than that, guys, I will see you in the next video. Keep hustling, keep grinding

And of course, guys, accelerate your stride. Take care.