Transcript
00:00:00sir a second claw design clone has just hit github yes that is right we have yet another claw design
00:00:06clone except this time it comes with an actual graphic interface now earlier this week i put out
00:00:13a video on hu washu design which was sort of the first claw design clone out here on the market it
00:00:20did a really good job we showed it pretty much going head to head with your standard claw design
00:00:24format yet not running into any of the usage issues yet one of the problems with hu washu design was
00:00:30the fact that it was only inside the terminal i did not have a graphic interface like you see here
00:00:36with this brand new open design tool that pretty much apes claw design i mean just look at these
00:00:43two tools right here we have open design which is what we're going to be talking about today
00:00:48and here we have claw design extremely similar now the really cool thing about open design
00:00:54is that it is built on top of hu washu design and like you saw in the last video hu washu design is
00:00:59really really good we got some great content and great front-end designs from this repo and so now
00:01:06we're just taking that and putting a nice graphic layer on top of it so that it's way easier to
00:01:11interact with for most users and gives us a lot of that sort of polish that we saw originally with
00:01:16claw design even better open design is something that we can use with any coding tool it doesn't
00:01:22have to just be clawed code we can use gemini we can use codex and again we're not running into the
00:01:28usage issues we see inside of claw design proper so today we're going to run through open design i'm
00:01:34going to show you how it works how to install it what you should care about inside of here because
00:01:39i think there is a little bit of bloat and we'll actually do some comparisons between it and claw
00:01:43design spoiler alert it's pretty good i think it's solid and i am super excited that we're starting to
00:01:49get all these spin-offs of claw design because i really like claw design it's just like the usage
00:01:53is horrible so the more that these sort of tools come out i think the quicker entropic is going to
00:02:00get on board and kind of fix this usage mess so open design is the open source alternative to
00:02:05claw design we can connect it to things like clawed code or codex or we can just bring our own api key
00:02:12if we want to use some other harness or api it will automatically detect what sort of coding agents are
00:02:16on your computer and it has 31 skills and 72 brain grade design systems already built it now when i
00:02:24said it was built on top of washer design i wasn't joking they literally call this out themselves it's
00:02:28kind of a conglomeration of washer design the guzheng powerpoint skill open code design and then
00:02:34multica you put that all together and really i would say this is who washer design with a nice layer on
00:02:40top of it now the rest of the repo goes pretty in depth about what's going on under the hood and some
00:02:45examples and demos all you need to know this is open source claw design or as close as you're
00:02:49going to get to it now before we jump into the install a quick word from today's sponsor
00:02:53me so i just released my clawed code master class and it is the number one way to go from zero to
00:02:58ai dev especially if you don't come from a technical background i update this thing every single week
00:03:04and we really focus on real world use cases and how to use this tool to actually move the needle
00:03:09in your business or whatever venture you're working on you can find it inside of chase ai plus there's
00:03:14a link to that in the pin comment and i hope to see you there now two ways to install this you can go
00:03:18onto this repo you can open up the terminal and you can paste all this in there the second option is
00:03:23you just go to this link you copy it i'll have a link to this in the description you paste it into
00:03:28clawed code or codex or whatever and you say hey install this for me in a new directory and it will
00:03:32get it up and running now once you install this and get it running it should give you a link to the
00:03:36local dev server if it doesn't just tell clawed code hey spin up a dev server for open design and
00:03:42you should see a page like this and most likely you'll have something pop up that says hey do you
00:03:46want to use local cli or an anthropic api or what do you want to do in terms of the actual ai system
00:03:51so you're going to want to do local cli that means it's pulling off of clawed code or codex or open
00:03:56code specifically clawed code and codex that way you're not paying api fees it's all just being
00:04:01pulled from your max account for model you can just do default which is the cli config and then we have
00:04:06the ability to add media providers because as you will see here i can not only do prototypes slide
00:04:13decks and templates i can do images and videos as well so i can generate that from this ui but
00:04:18to generate video to generate images i need to add an api key to a model that does that so i can add
00:04:24stuff like minimax open ai 11 labs all sorts of stuff so that is useful and that is something you
00:04:30can't find inside of claw design now up top we have designs examples design systems image templates and
00:04:36video templates now what are these templates specifically inside of design systems well it's
00:04:40similar to awesomedesigns.md if you've seen that before so they've essentially gone to a website
00:04:46like airbnb for example and they've sort of broken out what's going on with that website in terms of
00:04:52palette typography components visual theme and atmosphere so the idea is if i wanted to create
00:04:58a website that was similar to airbnb and style i can use this prompt basically and include it and
00:05:06i'll get something close i think your results will vary here um i think the design system section
00:05:13looks cool i don't know how effective it really is in reality this stuff with image templates is
00:05:18similar it's just showing us example images and json prompts you could use to get something that's close
00:05:23i think this is bloat same thing video templates i think this is bloat looks cool you're not going
00:05:29to get any value out of this now we have examples here which are also kind of cool but understand
00:05:35this is just this is just what they got when they used a single line prompt right like this isn't
00:05:42there's not some fancy prompt in the background here for this the prompt is literally right here
00:05:47so if i hit use this prompt it's going to include it and it's one line design mutuals a dating site
00:05:53for x posters daily digest dashboard with stats mutual matches and a community ticker so
00:06:00you know uh don't get blown away by i think some of the examples they have in here it's a long it's
00:06:07one line it's it's one line prompt there's nothing there's nothing crazy happening here so let's focus
00:06:12on what you should actually care about and that is creating the prototypes and slide decks and these
00:06:16sort of standard type deliverables that you would see inside of claw design itself and it works
00:06:22pretty much the same way you're just going to name the demo you're going to choose a design system so
00:06:28you can do one or multiple and again we have this list of all of them that are already in there we
00:06:32decide if we want to do a wireframe or high fidelity we have the ability to import a claw
00:06:37design zip so let's say you created a design system inside of claw design i can turn that into a
00:06:44zip file and include it here and then we just hit create i want to quickly show off this example
00:06:51first here i asked open design to create the same thing that we demoed in that huasha design video
00:06:57which was i want a landing page for a fake sas product called lighthouse and it's meant for
00:07:03small teams solo founders and i want three examples that i can can compare all together and so i have
00:07:11sort of the classic stacked i have something that's more editorial and then something that's a bit more
00:07:17loud and in your face and when we compare that directly to what we got here inside of claw design
00:07:21you see a lot of similarities a lot of the same kind of fonts a lot of the same colors especially
00:07:26in the background especially since we did sort of an editorial bent you will also see over here on
00:07:32the left with open design that it went through the same sort of q a brief you could expect inside of
00:07:37claw design itself so it's asking me questions it gives me buttons to select etc etc it's pretty much
00:07:43the same exact product now of note one of the differences i did see when it came to open design
00:07:49versus claw design is open design was a little bit slower this took about 10 minutes versus claw
00:07:56design took about half the time of note even though we see stuff like common edit and draw that isn't
00:08:01actually available yet inside of open design although it is on the roadmap if you want the
00:08:06tweaks to pop up you're going to have to prompt open design directly to say hey can you create
00:08:13a tweaks panel where i can mess with things you know on my own very quickly by just like you know
00:08:18turning it on and off again very similar to what we do with huashu so open design's a bit slower
00:08:24it's missing some of these you know quality of life things but other than that very close to claw
00:08:30design now let's talk about if you want to use a design system of your own because it is one of
00:08:35those things that we kind of have to work around so if i wanted to create a slide deck that was using
00:08:40my agentic dashboard os sort of design system and for reference this is kind of what i'm talking
00:08:46about this is the sort of visual aesthetic i'm going for that inside of claw design itself i have
00:08:51a design system for if i want to recreate that sort of thing inside of open design how i do how can i
00:08:56do that and again it doesn't have to be my dashboard let's say you had a website you had your own assets
00:09:01typography whatever that you wanted to recreate here well there's nothing like very straightforward
00:09:08like i can't go into design systems and necessarily create that there's no button to do that at all so
00:09:14instead what you're going to want to do is you're going to want to import a claw design zip so if i
00:09:20created this design system inside of claw design already what i can do is i can go to that design
00:09:25system that's where i'm at right now i go to share and then i go to download project as dot zip then
00:09:32i can go inside of open design select that design system zip and upload it and you can see inside
00:09:39here all the design files that have just been uploaded now if you were trying to do something
00:09:45similar to this and you haven't turned it into a design system inside of claw design well i suggest
00:09:51you do that it's going to be the simplest way or you can essentially recreate the sort of design
00:09:55system setup yourself inside of codex or inside of cloud code again kind of janky one of the downsides
00:10:00of open design and this is a place where i think huasha design makes it a little bit easier because
00:10:04when we're inside of the terminal doing this versus on a graphic interface i can just say
00:10:08inside the terminal inside of cloud code hey take a look at that directory look at everything that's
00:10:14in there okay now recreate it this slide deck in that style so you know one of the downsides of
00:10:20being forced to use a ui so now i said in the prompt create a slide deck talking about my
00:10:25fake sas product lighthouse it's analytic stuff for small teams ask me whatever questions you need to
00:10:29so we'll zoom in a bit so you can see it's a little bit better but here's the questions it has for me
00:10:34who's the stack for let's say it's for product launch who's in the room uh we'll say product folks
00:10:44how many slides we'll keep it short fidelity i want high fidelity speaker notes no
00:10:51visual tones do brutalist use the agentic os design system and then we'll have it decide
00:11:00story beats and we'll send the answer and so much a normal clod code type breakdowns it will
00:11:04give you a to-do list and then slowly start working through it and here's what it ended
00:11:08up giving us for the first slide which looks pretty good i think this is definitely on brand
00:11:13with the design system we gave it however as you may notice i have no ability to actually swap
00:11:20between them either that or it made all of them the same so i told open design i can only see the first
00:11:25slide it's not swapping between any of them so we'll see if it's able to fix it so here's what
00:11:29open design ended up giving us for the slide deck and i also exported it to powerpoint so you could
00:11:34see what that export process looks like because things often look good inside of clod design and
00:11:39open design and then when you get it to powerpoint it can have some stuff that's a little off so
00:11:43first slide looks good second slide is fine we can see this is a little you could probably
00:11:52fix this a little bit with the numbers slide three right this is a little off we need to kind of
00:11:58change how this is separated and sort of the spacing between them slide four looks good
00:12:04this looks good slide six again we should probably move this up a little bit then slide seven we have
00:12:13a little bit of formatting issues again here keeping it inside the boxes but i would consider
00:12:18this a 90 solution would take you what five minutes to kind of fix that and it matches the design
00:12:24system we went for but i think you're able to see as we created this slide deck it is a little bit
00:12:29rough around the edges in comparison to more polished project like claw design and that's
00:12:33kind of to be expected open design literally came out this week so hopefully this is something they
00:12:37continue to iterate on and kind of smooth it out but overall what we're having just come out and
00:12:42this being pretty much the first iteration of it i think open design is a really solid tool if you are
00:12:48someone who wants to use claw design and wants some sort of graphic interface to do all this and you're
00:12:54getting crushed by usage if you don't need a graphic interface but you like the bones of claw
00:13:00design and how it works i think you washer design is still probably a little bit better it's quicker
00:13:05and because i'm inside of the terminal i think it's a little more flexible but if you're someone who's
00:13:10like i need i need i need this sort of interface well i think this is a solid alternative to claw
00:13:15design because i mean like i love claw design don't get me wrong it's just this usage is so absurd but
00:13:21again like i said earlier i hope 10 million of these tools come out tomorrow and that way kind
00:13:26of like gets a fire lit underneath anthropics like fix this usage problem like this is ridiculous so
00:13:31this is where i'm going to leave you i think it's a really cool tool definitely check it out yourself
00:13:34easy to set up and very flexible in terms of what sort of coding agents it works with so let me know
00:13:40what you thought about this in the comments make sure to check out chase ai plus if you want to get
00:13:43your hands on the Masterclass and I'll see you around.