Two weeks ago, Anthropic dropped Cloud 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's a catch. It's closed. It's cloud only,
and it's locked on Tropics models, on Tropics rules, and the worst part, on Tropics prices. And here's a list of things you cannot do with Cloud 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. Two point o 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. OpenDesign doesn't replace Clot. It actually uses Clot. It takes the coding agents already on your laptop, like ClothCode,
Codex, Cursor, Gemini CLI,
and turns them into design engine. Your existing setup does the work. OpenDesign 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,
m p four video, ZIP, and also markdown formats. So if we put Clot 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 Versus Code or whatever platform you're using. For my example, I will use Versus Code, and then need to check three things. So first of all, do we have Node. Js installed?
Do we have git and also ClotCode 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 in your computer. Next step, you have to navigate to desktop, and we have to clone the repost right 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 description. Don't forget to subscribe. This downloads the entire project or machine and takes around thirty, forty seconds.
Once it's done, we can actually jump into open design folder. So run command c d open design. This is where all the files exist. You'll see a full project structure, apps, packages,
skills, design systems I mentioned. We have, like, again, Apple, Bugatti, and all the different brand systems,
and read me a file if you actually want to dig deeper.
After that, we have to install PNPMs.
OpenDesign 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, once everything is done, run this command you see on the screen, and this will open OpenDesign. 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, can see all the different local CLIs you have connected. So for my example, I only have ClothCode, but you can also select Codex,
OpenCode,
Gemini, Hermes, uh, Cursor. So, yeah, lots of different options. But as I mentioned for this video, we are using ClothCode. 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 ClothCode 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 the 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 Clot Design. Let's click create. And on 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, SaaS analytics dashboard, and editorial page dev. I would say pretty interesting options 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 FocusFlow,
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 thirty seconds, so let's fill it out. So primary surface,
desktop web, responsive all sizes,
visual tone,
modern minimal. Next up, brand context. Pick direction for me. Yeah. Let's go for the pick.
Color mode, let's go for Apple style, and copy and content. Right. Realistic copy for me. So, yeah, I think for example, it's more than enough. Send an answer.
Again, this is pretty similar to clot 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 colors. So let's see what kind of options we have.
I think let's go for the linear Vercel.
Okay. Send an answer. So while we wait, I just wanna tease my next videos on this channel. So I plan to do a head to head comparison of Clot Design and also OpenDesign, really hard names. So I plan to build, like, three or four different platforms, like dashboards, uh, landing pages with the same prompts and same instructions,
and see which platform performs better and also how much cheaper is to use OpenDesign.
So subscribe for that video, and you can see we are actually cooking with OpenDesign. Stuff is happening. Interesting to see how long does it actually take. So it already took two minutes. So let's cut to the fin And we have our website. It took almost five minutes, which is pretty quick. And you can see right here, I think it calculates the price. So it costs, 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 kinda 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,
uh, markdown, and you can also deploy to Vercel. So so far, I'm really loving these platforms because more pressure, more competition for Entropic,
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 Cloud Code with OpenDesign. So leave some ideas in the comments, and, of course, subscribe for more videos like this. See you next time.