WEBVTT

00:00:00.000 --> 00:00:09.520
This is OpenDesign, an open source alternative to ClawDesign that lets you use any agent or model you already have installed to generate full web prototypes,

00:00:09.600 --> 00:00:30.970
mobile apps, and even slide decks in HTML. With 72 brand grade design systems built in, and every project stays on your machine. So nothing is sent to the cloud. But we already know that Claude Opus 4.7 is really good at front end design. So does it make sense to allow the user to choose any model they want, since most of them could be really bad at design? Hit subscribe and let's find out.

00:00:33.850 --> 00:01:03.660
Claude design from Anthropic was released earlier last month and was an instant hit. It gave people the ability to make really good looking designs using an impressive model. It gave people an alternative to lovable v zero and similar tools. But it's a proprietary cloud only tool that's to a single model and will cost you $20 a month to use it, which basically means it's not for everyone. So eleven days later, Tom and the Nexa team shipped an open source alternative, which was really popular. It kind of reminds me of OpenCode coming from ClaudeCode,

00:01:03.660 --> 00:01:06.220
and now OpenDesign is coming from ClaudeDesign.

00:01:06.300 --> 00:01:21.805
What is the next thing Anthropic is going to make that someone is going to put open in front of? But how is this open source tool able to create designs as good as Claw design? Well, this is because two things are working together. The first is design systems. Open design contains many of these with full brand specs, typography,

00:01:21.805 --> 00:01:39.605
spacing, and color tokens inspired from brands like Linear, Stripe, and Spotify. The second is skills. Lots and lots of skills for every output type. So a dashboard skill knows how to lay out charts, and a deck skill knows how to structure slides. There's even an anti AI checklist baked into every prompt, and before it generates anything,

00:01:39.765 --> 00:02:33.030
it asks you about your audience, tone, and brand content. If you've watched my video on impeccable, this will seem very familiar, but it's different. And we'll go through the differences later on in the video. But for now, let's go through a simple demo. So to get started, you can either download OpenDesign for Mac OS or Windows, claim the repo and install it using Docker, or run it from source, which is what I've decided to do. So with the project running, I can visit this port in my browser, which brings me to this UI, which looks pretty overwhelming for someone who's not used to Cloak Design, but let's just go through it. So if I click down here, you can see it's picked up the agent harnesses I already have installed. So Claude's code codecs and open code. And if I click on Claude's code and scroll down, we can pick the model. So by default, it will pick the one that is chosen in the CLI, but I can pick one here. I can also do the same with codecs, but codecs allows me to change the reasoning effort, which is a nice touch. But I'm gonna go with open code. I'm scroll down and change the model to t l m 5.1.

00:02:33.030 --> 00:05:25.615
Now over here as well, I could pick the memory, so the instructions that will be added to each prompt, the media providers, and by default, it's picked up my OpenAI key, and it's going to use GPT image two to generate images, but I could also connect my 11 Labs API key for doing things like text to speech or different sound effects for animations you might have on your website. Then over here, I could review all the skills that are available. I can view all the design systems, which we'll go through a bit later. And I can even choose a pet, which is something that Codex does. Basically, we have a lot of options here. But I'm gonna close this and get to designing. So I'm gonna give my project a name and then pick a design system. Now, if you have no idea what these design systems are, you can click on the design system tab to view all of them, and there are lot. But I went through them before recording the video, and I think I like the Miro one, which looks like this and gives details of design tokens, as well as information in the design and default. Now notice I'm in the prototype tab, but there's also live artifacts for things that you want to update based on changing data, a slide deck to generate HTML based slides, or to build from a template. So I could click on the templates tab here and pick a template I want. Now, we will just stick with prototype and click on create. Now from here, we get taken to another page where we can give it a prompt. Now, I'm gonna try something a bit unique here. So right now, I have my YouTube channel search app running, and I wanted to create a much better looking version of this. So what I'm gonna do is give it this URL and see if GLM is able to search through the tabs and the inputs and use that for its design. So here, I've given it a prompt to make me a well designed simple website for a product I can use to search YouTube channels. I've also given it the link of the website for it to visit using agent browser or whatever tool it feels fits. That In way, it can view the inputs and go through all the pages. So let's see what it does. So now it's asked me some questions around the visual tone, brand context, and a few other things, which I'm going to answer. And then we'll continue with the design process. And check this out, it was able to run a curl command to open the site using Chrome, and now it's using agent browser to connect to the site. So I didn't open any of this or go to the URL, and it's going through the site in the browser. We can see a few more agent browser commands to understand how it works. Okay. So at this point, it's still going. It's not quite done yet. It still has a few things to do, but I like the direction of where things are going. I like the search page that it's made with the advanced filters down here, and I can toggle between video titles and channel name for the search. We've got the search results, which looks very impressive. And it's using data from the actual website, so I'm not sure what it did, if it scraped and saved it somewhere. But this is actual data apart from missing thumbnails. We also have the favorites page. So if I favorite a person over here, this is where they'll go. And I can generate an email to contact them or remove them. And there's also a hidden page over here. So for example, if I press x, then a person would end up on this page. And it looks like after around twenty minutes, yep, g l m 5.1 is not the fastest model. Everything is finished. And so here's what it's told me. It's given me all the five files it's made.

00:05:25.935 --> 00:05:51.095
And I think it exported everything into a temporary location. So what I can do now is I could give it another prompt. So if I wanted to add a dark mode, I could do that. But I could also click on finalize design package, which will synthesize everything into a single design and d file. So if the transcript, the design system, and any artifacts that were generated. Basically, these five pages. I could also click share to export in different formats, and I can even export a standalone HTML

00:05:51.175 --> 00:06:16.810
and give it to Claude's codes to implement in my actual project, and even deploy to Vercel or Cloudflare pages, which is a very nice touch. So that's a quick overview of Open Design. Is it worth using? Well, if you already have a coding agent installed and you pay for a subscription off of Van Claude, then it's a no brainer to try. The combination of design systems and skills means that it can actually produce something pretty decent regardless of the harness or model. But how does it compare to something like impeccable?

00:06:17.065 --> 00:07:08.910
Well, personally, I prefer the way impeccable does its planning. It asks you everything upfront and designs different mock ups using an image model, which you can pick and iterate from there. So you can pretty much have no idea of what you want the design to look like at the start, but end up with something pretty decent. Whereas, with Open Design, you kinda have to know a bit about design before going in. I mean, it does ask you what design system you want before you start, and I know the model can generate one, but the fact that it asks you means it's geared towards someone who knows a bit more about design. But I've got to admit, OpenDesign does have a great UI, giving you the option to see responsive views, export any way you want, add skills, MCP tools, and even pets, which is nice for someone who's used to using the Codex UI or the Clawd desktop app. And it did a great job of designing an app using d l m 5.1,

00:07:08.990 --> 00:07:25.825
which isn't the best model for designing out there. So, if I wanted to design something relatively quickly and I had a bit of an idea of the direction I wanted to go in, then I definitely try open design. But if you don't mind spending a bit of money, Clot Design is pretty good. I mean, look at what it was able to do with the exact same prompt.