WEBVTT

00:00:00.000 --> 00:00:17.475
An open source developer just cloned Claw Design. It's a 100% free, and after using it for the past few days, I'm not sure I'll go back to the original. So we're gonna look at the differences between the two, and then I'll show three concrete examples so that you can really see where it shines. So the repo is called Open Design. It's local first.

00:00:17.635 --> 00:00:56.535
You can bring your own key, so you can use any coding agent CLI that you use. And it's already got over 22,000 stars because as we're going to see in a second, it is pretty awesome. So on a high level, this is how it works. We have this CLI layer where you're gonna configure a clog code or codex or cursor agent or Gemini or whatever it is that you use. It's going to run locally on your machine. It's got a system prompt, which is really what drives how it's able to do the things that it does. And then it's got a few other things that make it really valuable compared with something like Claw Design. The first is that it has skill support. So there's a bunch of built in skills that this thing uses, but of course, you could come in here and customize it yourself.

00:00:56.940 --> 00:01:06.540
If you had specific skills or specific ways of doing things that you wanted to work inside of this. One of the best parts though is that it has 71 built in design systems.

00:01:06.620 --> 00:01:15.395
And then the outputs are gonna be actual HTML files, which means it's gonna be really easy for you to take whatever you do here and immediately convert it into something

00:01:15.635 --> 00:01:23.040
in your actual project. Now, it's worth calling out that this specific project is inspired by four different open source projects,

00:01:23.200 --> 00:01:54.050
and this basically takes the best of both of them and puts them in one nice package that we can all use. So there's a few things that really make it stand out compared with Claw Design right out of the gate. So the first is that it has a ton of examples, and it actually gives you the prompt that you could use if you wanted to mimic this style. And so, for example, if we were to come down here, we could open the preview, and then actually look at a real page that was built using this exact system. And so maybe you're building a website for yourself or a landing page, and you really wanted to, like, mimic this type of feel.

00:01:54.130 --> 00:02:10.475
You have instant access to the type of prompt that you could use to kick this thing off. So the other thing that's really awesome is they have these design systems. So we'll say these things aren't rendering properly on the actual preview. But what's cool is that you could come down and you could pick one of these, for example, Claus Anthropic. You could go to preview,

00:02:10.635 --> 00:02:15.195
and then you're gonna get a full design dot markdown file that explains

00:02:15.550 --> 00:02:23.870
exactly how you would go about building this type of thing. All of the different, like, principles and component styles and aesthetic guidelines

00:02:23.950 --> 00:02:31.405
are codified for you here. Now, one of the things that I think is really cool about this project is that it has built in APIs

00:02:31.405 --> 00:02:38.205
for media. So if you wanted to have image or video or audio generated automatically

00:02:38.205 --> 00:02:42.685
as you're doing this design, you could plug in an API key like the OpenAI

00:02:42.920 --> 00:02:43.800
GPT

00:02:43.800 --> 00:03:49.170
image two model, for example. And then when it goes through and it's generating images for your project, it's going to use these libraries to do it. So those three things are a big advantage over what you get with Claw Design by default. Now that being said, let's go in and actually build something. So in the design system, we can come through here, and we can pick any of these out that we like. So if you don't know what these might look like, you can obviously go. You can Google the companies and try to see what their aesthetic looks like. But let's say in this example that I wanna use Anthropix design system. So I can pick that option out, and I can give this a name. And then we can move through and hit create. And so there's really two big problems that people run into when they're building websites or landing pages. Number one, the page looks like shit and has AI slop written all over it, and so you don't even like it yourself. And then number two, the page isn't actually structured to convert people into doing something. And so the result of those two things is obviously a bad landing page that is not going to convert. And so selecting that design system is gonna help us solve for problem number one. But for solving problem number two, here's how we're gonna prompt this thing. First, we're gonna tell it that it's building a landing page for our app that has to have the following structure,

00:03:49.250 --> 00:03:59.175
and then we're gonna detail the 11 different sections that need to be present inside of this page. Now, obviously, for the problem pain sections, how it works, the key benefits, all of those things,

00:03:59.495 --> 00:04:13.920
we need to have some context for what needs to go into those. And so in this case, I've just pulled an executive summary out of my PRD for this app, and I've pasted it in. So what's the product vision? What's the problem statement? The target user? The proposed solution?

00:04:14.080 --> 00:04:19.760
And then what are some of the different primary features that we have? And now, just like it did inside of Clog Design,

00:04:20.175 --> 00:04:23.775
it's gonna start using this generative UI to ask us questions

00:04:23.935 --> 00:04:53.505
to help dial in exactly what we want to build. So I'm gonna come through, just answer a few of these questions based on what I want, and then we are going to hit send answers, and it's gonna shoot this thing off and start building out our landing page. And so in this case, they actually have a SaaS landing page skill, which they're gonna use to help execute on this task. And that's one of the reasons that I really love this tool, because we can come in here and we can start customizing it. We can add any of the skills that we want to based on our own systems or processes

00:04:53.585 --> 00:06:01.980
or things that we find online from other people, and we can integrate it directly into this system. So in this case, this structure that pasted in could just be loaded in as a skill with actual, like, copywriting guidelines and stuff like that. But now this thing is going through. It's, again, using our CLI under the hood to actually implement in all of this, and we'll look at what the output is in a second. So about five minutes has gone by, and we have, like, a pretty professional looking landing page straight out of the gate that actually conforms to our standards that we set out earlier. So the actual structure of this page is meant to convert. It's following the claw design system that we chose. It's made this really nice comparison table. I really love how they styled this case study card with, like, the outcome being very prominent here. FAQ looks really nice. And so on the whole, the page is looking pretty nice for a first pass. Obviously, we would wanna move through and dial things in and kind of ratchet it up a notch, but for a first pass, pretty strong. Now just to show you what a more experimental version of this could look like, I ran through the same exact exercise, and the only difference was that I chose a brutalist design

00:06:01.980 --> 00:06:19.525
tone instead of an editorial style, which was the last one. And we can see we're getting, like, a much different overall, like, aesthetic coming out of this. Obviously, we would wanna go back and forth and prompt it and and dial things in, but we can get, like, really meaningfully different looking designs out of here,

00:06:19.765 --> 00:06:22.005
thanks to these design system templates

00:06:22.200 --> 00:06:46.765
that ship with this for free. So in a bit, we're gonna look at how we can build a web app using the same system. But first, I wanna see if we can build a mobile app with this tool. And so, again, with the mobile app, there's two problems that people run into similar to the landing page. Number one, the actual aesthetics of it are off, and it just doesn't look nice. And number two, the structure of it and, like, the user experience

00:06:46.925 --> 00:07:03.600
doesn't make sense, and so it doesn't feel right. So, again, to solve for the design system, we're gonna use this built in, like, anthropic design system. We're gonna hit create. But now when we come through and prompt, I am going to prompt in my app screens. So what I'm gonna do here is that I'm gonna go screen by screen

00:07:03.855 --> 00:07:13.375
to build out these different pieces of our app. And so in this case, I have a skill that I've built, which will go through, take your features,

00:07:13.615 --> 00:07:55.760
brainstorm like UX paradigms around it, and then it will actually build you prompts that you can paste into tools just like this one. And so I'm gonna come through here, and I'm gonna copy this first screen, and then we're gonna hop over into OpenDesign, and we're gonna say, we're building out the first screen for our app detailed below. And now what I'm gonna do is I'm gonna come back here, and I'm just gonna copy, like, the overall, like, philosophy for this app and how the UX is meant to go. And then we're gonna come back through. We're gonna paste it in here, and we're gonna let this build out a screen for us. And then we're gonna come back, and we are going to hit send. Now, this case, I want to see what an iOS mock up is going to look like. So this is gonna do what it normally does. It's gonna come through. It's gonna mock up questions.

00:07:56.080 --> 00:08:27.805
It's gonna send us those questions. We will answer them, and then we'll see what the output looks like. Okay. So we have three screens to look at now. I went through and pasted in a few more screens from that PRD. And if we were to scroll down and look at them, we can see they're adhering to the design system, like that anthropic style pretty well. And so, like, we have this pretty simple but nice home feed, and this is meant to be where you can look at all of, like, the food that you have eaten today. And so we have these nice little, like, affordances for things we can do with it, so we can skip things, we can swap things, we can confirm that we had things. So this is like our main kind of daily inbox

00:08:27.805 --> 00:08:33.805
screen. Then we have this screen for, like, filling in the gaps. So say that you missed a meal for some reason or you had to make a modification,

00:08:33.965 --> 00:09:04.505
it can then go through your library of, like, commonly consumed foods and help recommend to you meals that will close the gap in terms of, like, what your goals are and what you need to accomplish today. And so, for example, if we said that we wanted the turkey avocado wrap, it says, hey. This fits your macros. This will bridge the gap getting into that plan. Then we could come through. We could confirm the pick. And then last but not least, we have this, like, ad hoc log. So if we were to come through and search for something like overnight oats, we can see things that are matched from, like, public databases, and then we can see things that are recipes from our library.

00:09:04.745 --> 00:10:04.225
We could come through. We could say, hey. I actually had 50 grams. We could confirm it and add it into our log. And so if we were to log this thing, then it would obviously show up over here in this stack screen. So overall, for ten minutes of just sending some prompts into this thing, I would say it is doing a pretty good job at adhering to the design system. And then two, actually having, like, some sort of structure to what it's gonna build because we're pulling through from an actual PRD of the features we wanted to build for this app. And so it's interesting with slightly different approaches to the UX that we prompted it with, we get wildly different results. So in this case, we said, hey. I want it to actually be, like, a real chat first interface that takes, like, a coaching approach, and we can see that it looks much, much, much different now. And so in this case, this is what one screen might look like. So if we logged in to, like, today and opened this thing up and it was Monday, this is what it looks like before we've had any conversation at all. We have these little slash commands that we can run to, like, log food, upload photos,

00:10:04.720 --> 00:11:11.860
modify our goals, see, like, trends in our nutrition and maybe how that correlates with, like, our fitness trackers. Then if we're in the middle of having a conversation, well, what do those, like, affordances and UI elements actually look like? So, for example, if we came through and logged our grilled chicken ball, we can see, okay, that brings us closer to our goal. This is what we have left today. We can edit portions. We could add snacks. We could log it. We could do a bunch of different stuff. And then this is what it might look like if we wanted to actually upload an image of a food and say, hey. Can you try to estimate the calories in this? So again, really nice UIs, but it depends on how we chose to prompt this thing in the first place. But no matter which direction we take, it's all looking pretty nice. But now the last thing that I'm curious about is how the multimodal works. So what if I wanted to take these screens and build out a, like, desktop compatible version of this thing? What might that look like? So what I'm gonna do is I'm gonna come through and I'm just gonna screenshot these three screens. I'm gonna open up a new chat. I'm gonna drag that screen in, and then I'm gonna give it a pretty open ended ask, mock up a web app version of this core functionality.

00:11:12.245 --> 00:11:41.480
Now, obviously, if we were working through, like, a proper, like, spec driven development framework for this stuff, we would have specifications in place already for, like, what the desktop version of this, like, needs to actually look like. But we're gonna see what we can do with, like, a pretty vague prompt going into a tool like this. So again, we're gonna come through, we're gonna answer some of their questions, and then we are going to hit send, and we're gonna see what we get out the other side. Okay. So after, again, I think, like, maybe five minutes or so, we have a complete translation of that mobile screen into this desktop

00:11:41.480 --> 00:11:43.640
version, again, of this chat interface.

00:11:44.025 --> 00:12:26.275
And so I really like this three pane approach where we have, like, more of our navigational elements over here, our main canvas that we're interacting on in the middle, and then we have, like, our progress view on this right hand side where we can see our log of today, how close to the goals are. And that's really nice because we don't need to go popping around now to other views in order to see things. Now one thing we did was we mocked up what some of those commands look like. So if I wanted to see what the slash command functionality looks like, I could come through here and actually log a meal. And so, obviously, if we were building this into a real app, this would need to have, like, back end logic to route it to the right places and do everything we wanna do. But we saw when we hit that log it button, it updated everything over here. It added this to the log. And overall, we have, like, a really nice, clean feeling design

00:12:26.370 --> 00:12:52.235
with this chat forward interface. So all in all, you can get like really different looking things out the other side of this tool, depending on the design systems that you choose, any of the examples that you choose to move forward with, and most importantly, like how you actually choose to prompt it to build the things that that you want to see. So overall, this being free, not locking you into a specific provider, and matching most of the functionality, and giving you a lot more customization

00:12:52.235 --> 00:12:52.955
options,

00:12:53.275 --> 00:13:35.065
I think this is an awesome tool. So if you actually want access to all the skills that we use to convert these UX approaches into actual, like, screens that we can prompt into tools like Claw Design or Open Design, you can get more information about that in the description below. But one big pain that I hear from you guys is how can we actually take screens like this and merge it into something that we've already started building? So maybe you built a web app, you weren't really happy with the outputs that you got, and now you design something really cool into, like, Open Design, and you wanna figure out how to merge those two things together. I did a video on this last week using a tool called OpenSpec, so you can check that video out somewhere around my head if you are interested. But that is it for this video. I will see you in the next