In this video, I'm going to be going over Claude design by Anthropic Labs. Now, Anthropic has been on an absolute tear in terms of the product releases over the past several months, and this one is no exception. And I'm going to go out on a limb and say that this is probably one of the most differentiated products that I've seen in quite some time. There's a number of really interesting things that are built into the platform. In this video, what I'm going to do is I'm going to show you some of the designs that it generated for me, overall how the system works, and then we'll dive into a quick demonstration within the platform. It's pretty intuitive. On the left-hand side here, dive right into a new prototype. But the really cool thing with this is what it allows you to do is you can create a design system. With the design system, you can import this from something like Figma, but you can also leverage existing codebase. Say if you already have a website or a web app, and all of the different component pieces are in there, and you might not have that Figma design document, what it will do is it will agentically go through your application, and it will create that style guide. I'll show you in just a moment here, but it will break up all of those component pieces, it will show you what a button looks like, what a tile looks like, the different cards, and all of the core elements that are within your design system. Let's go ahead and actually take a look at the design system that it had generated for me. What it will do is, as soon as you kick off the process, it will go through and explore the repo. Within here, what I did is I pointed it at the Developers' Digest website. It went through, it explored the repository, it read through a number of key files, and it took a little bit of time. It took several minutes, but once it had all of those key pieces of information, and what it generates for you is effectively a file system of all of the core assets. The really cool thing with this is you're going to have the documents that you can look at and open. Within here, for instance, here's the skill.md of we have the entry point, and then what you'll notice within here, which is really cool, is we have all of the different files that are progressively disclosed. If I go back here, for instance, that skill will get loaded up, and it informs the LLM, "Okay, here are all of the different things that we have within the project," and we can reference different things depending on what's being asked of the LLM. For instance, if there's something around the visual foundations, it can load that up, but alternatively, the way that this works is you also see all of these HTML design assets that it had generated when it goes through the agent process of actually building out the stylesheet, and this is the context that gets leveraged and sent in when you generate new assets. Within here, for instance, you see the navigation, you see the badges, you see the form inputs. That's effectively how the design system works. So, here is an example of it leveraging the design system. So, all I did was actually pointed to the repo, it went through the agent process, generated the design guide, and effectively all that I did was ask it to generate a pricing page, and then I did a couple iterations. I played around with it a little bit, but it was able to effectively do all of this with one shot. Now, the cool thing with how this is built as well is it does also automatically generate a number of different layouts for you. For instance, if you want a pricing page in this example, what it did for me, it was able to create stack cards, it was able to create a unified table view, or the split hero view. And the cool thing with this is what it allows you to do is some of the core pieces that you might otherwise think to edit after the fact, it surfaced these as tweaks, almost as if these are probably potentially going to be some of the key areas that you're likely going to want to change, whether it's some of these more major tweaks like the layout, which sort of sets the overall foundation of the page, or some of these minor things like setting which featured tier, for instance, is actually highlighted and shows popular. And there's a ton of really cool features within here. Say, for instance, if I just want to draw on this section, if I want to remove this, I can go ahead and I can send this in, and then what it will do is it will effectively take a screenshot of whatever I had just done, pass it into the model, and then it has the context of what it needs to edit. Now, additionally within here, so there is all of the sort of core features that you might expect. You can open this up within a new tab if you want to see what it would actually look like on a website. And just to give you a sense, so this is the website that it was based off of. Now, I didn't include the font within this, so there are going to be some differences, but in terms of the core features, the lines, the colors, the overall look and feel of the website that it pulled from, it definitely is quite close. Now, the really cool thing with this, so is there's a number of other cool features within this. Now, as you might expect, this is based on Opus 4.7 by default, but you can switch to other models if you'd like. Within here, you can add in different attachments, but one really cool thing with this, it's sort of hard to demonstrate within a video, but what I'm going to do is I'm going to click this voice input. I want to remove these from our website. So, all three of these I want to remove, and then let's move on to some other edits. And then what you'll notice within here is we have all of that context that's going to stream into the chat window. And now, the really cool thing with this is effectively what it does, by the looks of it, is when I hover over those particular DOM elements, that's actually sending the representation of what those DOM elements are into the context automatically. It gives you a sort of a new UX in terms of how you can actually interact with it. And for things like this, like instructional videos, it's actually hard to demonstrate, but if you're just using it by yourself, you can go around the page and just make edits, and it almost feels like magic. You just almost have a wand where things are changing on the page, and you don't even need to type anything. It's just going to go and do whatever you ask of it. Now, within here, you have a few different options. You can prototype, you have slide decks, they also have templates as well. If you want to create things like animations or a handful of other templates, they are all within here. Now, for a quick demonstration, I'm going to ask it to generate a creative 3D banner. I'm going to reference the design system, and I'm going to have this be a high-fidelity design. I'll go ahead and I'll click create. Within here, right off the bat, you have a few different options. So, you can start with context. When you kick off a new conversation, you're going to be able to just describe what you want with natural language. They say, "When designs are grounded in real context, they turn out better." And one thing to know with Opus 4.7 is its visual reasoning is much better. So, you're able to pass in higher-resolution images, so it's able to critique some of its work. Now, one of the things that's really neat with this is if you ask it to design something, is it will actually QA its work. It will take screenshots, and it will pass it into the model for iterations, which you'll often see within the process. Now, additionally within here, you can also create sketches, which is a fun aspect of this as well. What I'm going to do within here is I'm going to say, "I want to create a beautiful hero area for my website. I want some 3D elements. I overall want it to be very creative. I'm not a particular fan of what I currently have, so I want to come up with a replacement of what I have right now." And then what you'll notice within here is it will begin to read through the context of that design system. And the really cool thing with this, what you'll notice, is it's going to stream out elements in real time as you go through. And these are the types of things that you don't really see in an actual product, where it has this leveraging of the LLM, where it's actually creating all of these buttons and the sliders in real time instead of just rendering it within the same static element each time. Within here, we have, "What kind of 3D are you imagining?" And then within here, I'm going to say faux 3D. Now, within this, I'm actually just going to have one variation just to keep it succinct within the video. Do I want it to be interactive? So, I'll have mouse follow parallax. And then I have a number of different options within here. I'll just click through a few of these just for the sake of time here. But within here, what's really cool with this, so it generated this input, but but even the inputs here, so if I have other within all of these things that it had generated for us, what's neat with this is it streamed it out, but you can also submit these as context when you actually send this in. Here we have the context of everything that was sent in there. All of those different buttons that were passed in. It's going to create a plan for us, and then it's going to begin to, again, reference anything that it needs from our design system, and it's going to build all of this out. Now, in terms of the speed of this, it definitely will take probably a couple minutes for most tasks. While that's going through and generating everything, I just want to quickly go over the announcement, cuz one of the things with their announcements lately is often times they get tens of millions of views, and this, I'm recording about 36 hours or so after this was released, and it has 50 million views. A lot of people are definitely very interested in generally what they're doing on the product front, but design is one of those tools that really resonates with a lot of, arguably even more than actually developing apps, like we've seen with some of the app builder capabilities. Now, obviously that's a huge new unlock for basically anyone who can type into a prompt box or something like Claude Code, and unlock all of the different ideas that they have of what they want to build. But arguably with design, it's potentially even a larger addressable market in terms of people that might get immediate ROI on these types of things. Cuz one of the things with this is, while I'm demonstrating this within the context of a front-end application, you can generate things like slides or reports or particular animations. So, it's pretty flexible in what you can do with it. Now, just to go through some other aspects, the way that they presented it was basically describe what you want, and Claude builds the first version. Refine it through conversation, inline comments, direct edits, or custom sliders. One thing to know with this, you're going to be able to export this to Canva, PDF, PowerPoint, or you can directly hand this off to Claude Code, or just download the context to pass it into another coding agent altogether. In terms of the handoff, it's actually relatively smooth. What it will do if you hand it off to a harness, it's going to have all of the design files, and in this case, the design files are effectively the HTML, the CSS, all of the different assets that go along with that. It's not actually an arbitrary format. It's the technologies that have been around for a long time. Like HTML has been around for decades and decades. CSS, same thing. All of the design functionality, it's effectively code. And what LLMs are particularly good at is, for instance, let's say you have a React application or a Svelte application. What's nice with this is the LLM can translate from HTML to all of those without any problem. And then here we go. Here is the new creative hero image that it had generated for us. Here, I can see the mouse interactive effect, and if I click the different accents and the tweaks, I can see these different colors. This just gives you an overall feel of how you can play around with the platform. And one of the things that's nice with this, it goes without saying, is this is all built into the Claude subscription. So, if you're already using Claude for coding and other tasks, you're going to be able to leverage this for the design tool. Overall, I just wanted to do a really quick video. It's a really interesting tool, and I think one of the things and criticisms that people have had with LLMs generating, especially front-end code, I definitely generally most of the time actually can tell when something is LLM generated unless you have that key piece that they have within here where you incorporate a design system as a part of the process. If you just one-shot a request, even with a bunch of different descriptions of how you want the app to look, oftentimes that's not enough without actually passing in some sort of coherent design system. It's really nice that you can automatically just pass in a repo and have it generate for you. Alternatively, you can still pass in a Figma file. And what's really interesting with this is the question for design tools like Figma or some of the products from Adobe, for instance, are those tools going to become redundant in an AI world where we can just generate code? I think if you worked at those companies, you'd probably say no. Like they're leaning into these types of tools as well, but the competition is definitely heating up. But what's really interesting is just the number of directions that Claude is going in parallel. Effectively, what it looks like is they're saying, "Hey, we have AGI on the horizon. We're effectively going to try and build a ton of different products on the way there." And one of the things with this strategy is it's working. They're the fastest-growing company of all time. They're generating a ton of revenue. And as you get bigger and bigger as a company, market forces effectively force you into new areas that you might not have previously considered. But overall, that's pretty much it for this video. Kudos to team at Anthropic for another great release. And if you found this video useful, please like, comment, share, and subscribe. Otherwise, until the next one.

Claude Design in 12 Minutes

Show Full Transcript

Repurpose this content with AI