WEBVTT

00:00:00.000 --> 00:00:07.600
Two weeks ago, Anthropic dropped Cloud Design, and it broke the Internet. People started shipping pitch decks, landing pages,

00:00:07.680 --> 00:00:15.155
and full prototypes in seconds just by typing what they wanted. But there's a catch. It's closed. It's cloud only,

00:00:15.235 --> 00:00:32.530
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.

00:00:32.610 --> 00:00:46.225
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

00:00:46.225 --> 00:00:52.465
stars on GitHub at the moment of filming, and also has Apache. I hope I'm saying it right. Two point o license,

00:00:52.730 --> 00:01:08.475
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,

00:01:08.475 --> 00:01:11.195
Codex, Cursor, Gemini CLI,

00:01:11.275 --> 00:01:24.150
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,

00:01:24.230 --> 00:01:35.245
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,

00:01:35.245 --> 00:01:41.485
all baked in. I'm not sure about how the copyright goes with these, but it's only for the imagination.

00:01:41.725 --> 00:01:44.605
And it exports to six formats, HTML,

00:01:44.605 --> 00:01:45.245
PDF,

00:01:45.440 --> 00:01:46.400
PowerPoint,

00:01:46.400 --> 00:02:02.525
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.

00:02:02.685 --> 00:02:14.045
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?

00:02:14.600 --> 00:02:36.105
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.

00:02:36.105 --> 00:02:45.240
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.

00:02:45.400 --> 00:02:55.955
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,

00:02:55.955 --> 00:03:01.235
skills, design systems I mentioned. We have, like, again, Apple, Bugatti, and all the different brand systems,

00:03:01.395 --> 00:03:04.195
and read me a file if you actually want to dig deeper.

00:03:04.515 --> 00:03:07.155
After that, we have to install PNPMs.

00:03:07.155 --> 00:03:10.275
OpenDesign uses a package manager called PNPM,

00:03:10.380 --> 00:03:16.700
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.

00:03:16.860 --> 00:03:47.930
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,

00:03:48.250 --> 00:03:49.130
OpenCode,

00:03:49.130 --> 00:04:13.320
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

00:04:13.720 --> 00:04:14.360
demo.

00:04:14.600 --> 00:04:21.935
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.

00:04:21.935 --> 00:04:43.780
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.

00:04:44.100 --> 00:05:06.210
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,

00:05:06.210 --> 00:05:16.050
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,

00:05:16.050 --> 00:05:18.995
desktop web, responsive all sizes,

00:05:19.475 --> 00:05:20.835
visual tone,

00:05:20.835 --> 00:05:26.355
modern minimal. Next up, brand context. Pick direction for me. Yeah. Let's go for the pick.

00:05:26.675 --> 00:05:36.210
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.

00:05:36.610 --> 00:05:49.845
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.

00:05:50.325 --> 00:05:54.485
I think let's go for the linear Vercel.

00:05:54.485 --> 00:06:13.025
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,

00:06:13.185 --> 00:06:18.305
and see which platform performs better and also how much cheaper is to use OpenDesign.

00:06:18.305 --> 00:06:38.695
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,

00:06:38.695 --> 00:06:51.550
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.

00:06:52.190 --> 00:07:00.590
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,

00:07:01.045 --> 00:07:02.485
ZIP, HTML,

00:07:02.485 --> 00:07:10.645
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,

00:07:10.645 --> 00:07:26.000
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.