🎥 Forget Claude Design. This FREE Open Source Version Is Better?

Two weeks ago Anthropic dropped Claude design and it broke the internet. People started shipping pitch decks, landing pages, and full prototypes in seconds just by typing what they wanted. But there is a catch. It's closed, it's cloud only, and it's locked on ShopX models and ShopX rules. And the worst part, on ShopX prices. And here's the list of things you cannot do with Claude design right now. You cannot self-host it, you cannot pick your own model, no GBT, no Gemini, you cannot export to PowerPoint or video formats. And the second your subscription ends, poof, it's gone. Basically, it's a really powerful tool, but with lots of different closed doors. This is where Open Design comes in. It's open source, local-first, it has 29,000 stars on GitHub at the moment of filming, and also has Apache, I hope I'm saying it right, 2.0 license, meaning you can use it commercially with zero restrictions, which is a big one. And here's the part which broke my brain when I first saw it. Open Design doesn't replace Claude, it actually uses Claude. It takes the coding agents already on your laptop like Claude Code, CodeX, Cursor, Gemini CLI, and turns them into design engine. Your existing setup does the work. Open Design just adds design layer on top. This is the key part. And out of the box, you are getting 15 coding agent CLIs auto-detected, 19 composable skills you can mix and match, 71 brand grade design systems, which is really impressive. We have systems like Apple, Stripe, Linear, Tesla, Spotify all baked in. I'm not sure about how the copyright goes with these, but it's only for the imagination. And it exports to six formats: HTML, PDF, PowerPoint, MP4 video, zip, and also markdown formats. So, if we put Claude Design and Open Design side by side, it's not even close. Let me show you exactly how to set it up, and then I will build you some example websites just to show you how it actually works. So, first of all, you need three things working. You need VS Code or whatever platform you're using. For my example, I will use VS Code. And then, you need to check three things. So, first of all, do we have Node.js installed? Do we have Git? And also, Cloud Code installed on our systems? And to double-check, you can run three of these commands. Each of them will show you if you have all the necessary software and all the necessary stuff installed on your computer. Next step, you have to navigate to desktop, and we have to clone the repo straight from the GitHub. Just type in Git clone, and also the link of the Git repository. Also, you can find all the commands and all the links in the description. Don't forget to subscribe. This downloads the entire project to your machine, and takes around 30-40 seconds. Once it's done, you can actually jump into Open Design folder. So, run command CD Open Design. This is where all the files exist. You'll see full project structure, apps, packages, skills, design systems I mentioned. We have like again, Apple, Bugatti, and all the different brand systems. And readme file, if you actually want to dig deeper. After that, we have to install PNPM. Open Design uses a package manager called PNPM, and you have to run two commands. You can see both of these commands on the screen. Again, you can copy the commands from the description. And lastly, when it's everything is done, run this command you see on the screen, and this will open Open Design. I hope it all makes sense. It's really simple setup. Just few commands, and we are ready to roll. So, once it opens, you get this setting window, where you can actually set few different things. So, first of all, you can get a pet. So, for this, let's select this. Just quick setup. After you have your pet, the most important thing is selecting the model. So, right here, you can see all the different local CLIs you have connected. So, for my example, I only have Cloud Code, but you can also select CodeX, Open Code, Gemini, Hermes, Cursor. So, yeah, lots of different options. But as I mentioned for this video, we are using Cloud Code, so let's select it. Also, what's cool if you scroll down, we also have skills and design systems right here, but let's talk about it a bit later. So, let's save it. And if you used Cloud Design in the past, it looks almost the same. And for this video, I decided to do something really simple to actually show off how it all looks. Let's call the prototype demo. Let's select a design system. As I mentioned, you can select from all the different brands. For this one, let's use Apple as inspiration. So, let's click on Apple. Uh we are creating high fidelity website. You can also use wireframes. Again, it's the same workflow we had with the Cloud Design. Let's click create. And the left, we have the window where we can input the prompt, also add some additional information. For example, you can drop and paste images for visual references or type at to attach file from the project or try one of these starters. So, we have three options. Actually, you can do annual report, long scroll, SAS analytics dashboard, and editorial page there. I would say pretty interesting for default. I don't know if people are building these that much. And for this example, I have a prompt ready. Let's make it bigger. I just saw you can actually make this window bigger. Let's paste it in. So, build me a landing page for an AI productivity tool called Focus Flow. And I actually input more information, but again, we are just doing it as a demo. Let's send it. Okay, we have quick brief for 30 seconds. So, let's fill it out. So, primary surface, desktop web, responsive all sizes. Visual tone, modern minimal. Next up, brand context, pick a direction for me. Yeah, let's go for the pick. Color mode, let's go for Apple style and copy and content, write realistic copy for me. So, yeah, I think for example, it's more than enough. Send an answer. Again, this is pretty similar to Cloud Code, but you get a bit different questions, different information, but so far, actually, this is way easier if you're starting from scratch. Okay, again, we can select the color. So, let's see what kind of options we have. I think let's go for the linear Versel. Okay, send an answer. So, while we wait, I just want to tease my next videos on this channel. So, I plan to do a head-to-head comparison of Claude Design and also Open Design, really hard names. So, I plan to build like three or four different platforms like dashboards, landing pages with the same prompt and same instructions and see which platform performs better and also how much cheaper is to use Open Design. So, subscribe for that video. And you can see we are actually cooking with Open Design. Stuff is happening. Interesting to see how long does it actually take. So, it already took 2 minutes. So, let's cut to the finish. And we have our website. It took almost 5 minutes, which is pretty quick. And you can see like here, I think it calculates the price. So, it cost like $1.20, which I think is pretty low for this output because again, it's so quick. And actually, yeah, it looks pretty good. You can see how the website looks. It kind of tried to emulate some of the colors we picked. We have the buttons, the features. Again, pretty standard website, pretty clean look. And if you want to share, click right here. And we have these additional formats. So, again, PDF, PPTX, ZIP, HTML, markdown, and you can also deploy to Versel. So, so far I'm really loving these platforms because more pressure, more competition for Anthropic, for OpenAI, makes the product better and also cheaper for users. So, in the comments, please tell me what should I build next in my future videos where I'll be comparing Claude Code with Open Design. So, leave some ideas in comments and of course, subscribe for more videos like this. See you next time.