This Open Source Repo Just Cloned Claude Design (It's GOOD)
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Claude design has to be the greatest tool I've ever used.
00:00:02That's actually completely unusable.
00:00:05Even though I'm paying anthropic $200 a month for their 20 X plan.
00:00:10I hit weekly usage limits on Claude design in less than an hour.
00:00:14This is beyond frustrating, but luckily for you and me,
00:00:17there is hope because a brand new open source repo just got
00:00:22released,
00:00:23which essentially clones Claude design and just turns it into a skill we can use.
00:00:28It's called Huashu design and it's built on the exact same system prompts,
00:00:32Claude design uses.
00:00:33And today we are going to put it in a head-to-head test against Claude design to
00:00:37see if this thing is actually worth our time. Because if it is,
00:00:41we might actually have a way out of Claude design usage jail.
00:00:45Huashu design solves the problem of Claude design being an amazing tool,
00:00:50but one that you really can't use for more than an hour before you hit usage
00:00:54limits.
00:00:55So what they did is they took all the system prompts and design philosophies of
00:00:58Claude design and turned it into an open source GitHub repo,
00:01:02which is essentially just one skill we can load into Claude code or codex or
00:01:07really any coding agent, just like Claude design.
00:01:10It's able to do interactive prototypes for web apps or mobile apps.
00:01:13We can do slide decks, motion design, infographics on and on and on.
00:01:17And it's able to do all of this with just a single skill because it actually is a
00:01:21lot going on under the hood. For example,
00:01:24it has access to 20 deep dive Markdown files that explain what to do for slide
00:01:28decks, different design styles, animation best practices.
00:01:31So although it is one skill at the surface,
00:01:33it pretty much has access to 20 mini skills.
00:01:35It also has access to a number of components and media and assets that it can draw
00:01:40upon when it's designing things for you.
00:01:42And it has an entire executable tool chain.
00:01:44So gives it the ability to take an HTML file and turn that into MP4 or
00:01:50use playwright to actually check to make sure that what it designed for you on
00:01:53paper actually works in real life. And just like Claude design,
00:01:56we're able to see different variations. We have the full tweak system.
00:02:00And the best part is since it is a skill, if I'm inside of Claude code,
00:02:05it's based on that usage, whether if I'm pro five X or 20 X,
00:02:08I'm not constrained by this seemingly arbitrary Claude
00:02:13design usage limit, but let's actually put it to the test.
00:02:16So what we're going to do is we're going to see how well this thing actually
00:02:18works in terms of designing a landing page from scratch.
00:02:22Then we're going to look at how it does pretty much the same thing,
00:02:24but if we give it assets to build upon similar to Claude designs design system,
00:02:29and then lastly, we'll see how well it does on slide decks and along the way,
00:02:33we will compare it to Claude design head to head.
00:02:36So we can see if this is actually worth it. But before we do that,
00:02:39a quick word from everybody's favorite sponsor me. So just last month,
00:02:43I came out with the Claude code masterclass and it is the number one way to go
00:02:46from zero to AI dev, especially if you don't come from a technical background.
00:02:51I update this course every single week.
00:02:53And I just came out with the cloud code agentic iOS modules.
00:02:56So if you're somebody who wants to learn how to best leverage this tool,
00:03:01then you need to check it out. You can get your hands on it inside of chase AI.
00:03:04Plus there will be a link for that in the pin comment. So let's get started.
00:03:08So the prompt I'm giving Claude code,
00:03:09and it's going to be using this who wash your design skill throughout is use the
00:03:13design scale to create a landing page for my fictional SAS product lighthouse,
00:03:17asking whatever questions you need to before we begin. Now,
00:03:21I've also given this exact same prompt to Claude design.
00:03:24So who wash who comes back with six questions asking what lighthouse does target
00:03:29buyer vibe sections needed variations. And you know,
00:03:34should it just create some fictional content or do I have copy?
00:03:37It should use Claude design has similar questions,
00:03:40although it goes into a bit more depth and obviously due to its graphic nature,
00:03:44it gives me some stuff to actually choose from in terms of the visual direction
00:03:48that I can actually see. So for who wash who I'm telling it,
00:03:50let's do an analytics bent. We're going for the solo dev.
00:03:54I said I want to see multiple sort of vibes and styles,
00:03:57and that way I can actually compare the variants.
00:03:59And I also want it to do the copy on its own. And for Claude design,
00:04:02I pretty much told it the same thing and that I also wanted three variants I
00:04:05could look at side by side.
00:04:06So here's what Claude design came up with versus what who wash you came up with.
00:04:11And I will turn off my camera so we can kind of get a better look at this.
00:04:16So let's take a look at who wash who put it all on one page.
00:04:19We could have had to do three separate pages,
00:04:22but this kind of lets us all see all at once. Well, actually I take that back.
00:04:25We have up here in the top, right. The ability to look through all three.
00:04:29So this is what we got with this skill.
00:04:31So this ledger one actually looks pretty cool. You know,
00:04:35it gives us the whole webpage. We have the terminal variants,
00:04:40same sort of deal as well as just the paper version.
00:04:44And then I can see all three at once. And honestly off the bat, pretty good.
00:04:49This is way better than if we were just using Claude code by itself.
00:04:52We're even with the front end design skill and said, Hey, greatest, you know,
00:04:55three variants, pretty solid. And now let's look at Claude design of note.
00:04:59Design gave us the tweaks right off the bat. We won't look at that right now,
00:05:03but here's it's terminal version, you know,
00:05:07it goes through the whole thing editorial again,
00:05:11pretty similar to the editorial one over here.
00:05:15Very, very similar spatial.
00:05:19This is very hideous. This definitely gives off, uh, you know, your,
00:05:24your typical AI slot vibes. I think that has a lot to do with the gradient.
00:05:28And then I can compare all three. Now the,
00:05:32what I want you to do right now is not think, Oh,
00:05:34one necessarily looks better than the other in a vacuum, but really just see how
00:05:37close this skill is that we're looking at right here versus design. Very,
00:05:42very similar, which is a huge thumbs up or who wash whose skill.
00:05:46Now what I like to do after I see this macro variance is to hone in on one
00:05:51particular one. I like, and then start doing tweaks for that.
00:05:54Now to keep it somewhat similar so we can have a better compare and contrast.
00:05:59I'm going to go with the editorial one on design,
00:06:03which is known as the ledger one here in the skill.
00:06:06And we'll see how well they do the tweaks. Now for cloud design,
00:06:09the tweaks are already here. So for the editorial,
00:06:11we can swap between light and dark. I can change the accent.
00:06:15It gives me pretty much any color I can think of, which is kind of cool.
00:06:18I can change the actual headline,
00:06:21but then it has it split up between spatial and global.
00:06:25So what I'm going to do is I'm going to tell it to expand the tweaks and have it
00:06:29just for the editorial. And while that's happening,
00:06:31I hopped into cloud code and said,
00:06:33let's go with the ledger variant and give it an aggressive amount of tweaks.
00:06:36So we can pair it on that front.
00:06:38So cloud design has gone ahead and added a bunch of tweaks for us. And of note,
00:06:42at this point, just from what you've seen in this video,
00:06:44I've already eaten up about 15% of my cloud design usage. Well,
00:06:49on the skill side,
00:06:49we've only used 13% of the context window of a single session.
00:06:54So 130 K tokens, AKA, not even 1% of my weekly usage,
00:06:59granted I'm on 20 X, but the difference is astounding. Although we should know,
00:07:03this is still working on the tweaks for that one thing.
00:07:05So it is a bit slower and the cloud design tweaks are working as expected.
00:07:10The tweaks frankly,
00:07:12are one of my favorite parts of cloud design in general.
00:07:16I think the power of clock design isn't necessarily like, Oh,
00:07:20the designs are amazing. And I do think they are a step above.
00:07:22Get that twisted,
00:07:24but it's the fact that I can so quickly just go through a bunch of different
00:07:28stuff and see what it looks like and just iterate, iterate, iterate very quickly.
00:07:31And one thing we want to know here is due to the nature of how cloud design
00:07:36works,
00:07:36the ability to like click on specific things like this and mess with the
00:07:40typography or leave specific comments.
00:07:43That isn't really something we can do inside the design skill.
00:07:47I certainly can't draw on the design skill and say, Hey, take a look at this.
00:07:51Let's, you know, mess with this, move this to the left a bit,
00:07:54move this to the right a little bit. Those sorts of things.
00:07:57You need a graphic interface for,
00:07:58which is where cloud design is obviously going to pull ahead.
00:08:01So let's compare that to the tweaks we get with Huashu design.
00:08:05So of note,
00:08:07the tweaks kind of match the same sort of style as the page itself.
00:08:10I can change the presets.
00:08:13I can change sort of the display family, a little different dark mode.
00:08:18I can change the accents and it looks like I can change a number of things like
00:08:22layout density. Do we have the trust strip?
00:08:26Does the trust strip go away? Yeah. That sort of thing. So definitely comparable.
00:08:30Are there as many tweaks here as there were in cloud design? No,
00:08:32but I'm simply one prompt away from getting more.
00:08:34And I think the big takeaway here is cloud code with this design skill.
00:08:38Definitely competes with what you can get inside of cloud design natively and
00:08:42total token usage is this point 170 K basically didn't use any of
00:08:47my weekly usage and I burned 15% of cloud design. So for this example,
00:08:51which is raw prompting it, no design system, no assets,
00:08:56see what you can come up with. I think the skill did great.
00:08:59So let's move on to the next demo and see how well this can do.
00:09:02If we actually give it something to build off of some sort of design system,
00:09:06some sort of design examples and put the skill to the test,
00:09:10because I already know cloud design can do this pretty well.
00:09:13When we look at cloud design and it's designed systems,
00:09:16it does a pretty good job of being able to take whatever we give it.
00:09:19And that can just be like a code base or something and pulling out a ton of
00:09:23information, everything from spacing to components, gauges, buttons, hero,
00:09:27all this stuff. So when I load this design system into cloud design,
00:09:31I know it's going to be able to maintain that across different types of
00:09:34deliverables. For example,
00:09:36this agentic OS design is something I turned into a design system.
00:09:39And while we see it as a dashboard here inside of cloud design,
00:09:42it's very easy to replicate that design theme.
00:09:45So you see this inside of a slide deck, for example,
00:09:47it looks like it all came from the same place and that's because of the cloud
00:09:50design design system is pretty powerful. The downside is creating this sort of,
00:09:55design system eats up like 30% of your weekly
00:10:00usage.
00:10:00So what I just told Claude design was to recreate this lighthouse landing page
00:10:04using that agentic OS dashboard.
00:10:07I then told Claude code pretty much the same thing saying,
00:10:11I want to use the aesthetic slash design system that matches that dashboard.
00:10:14And then I told it where it can find all that information inside a separate
00:10:18directory or reference. This is pretty much what it's using as
00:10:22inspiration as its aesthetic.
00:10:25So obviously the sprite over here is freaking out,
00:10:28but the rest of it pretty much makes sense. Um,
00:10:33it went ahead and like recreated a dashboard here as well,
00:10:37which very similar to this. I think that looks pretty sweet.
00:10:41Uh, as for the fonts, colors,
00:10:44all that very much in line with what it should be doing.
00:10:47The only real complaint I have is the little character over here.
00:10:52Just I don't know what's going on,
00:10:54but that that's probably a relatively simple fix.
00:10:56Now let's see how the who wash who skilled it for reference.
00:10:59The skill took 11 minutes and about 70,000 tokens claw design
00:11:04took about three minutes, but it took up 10% of its weekly usage.
00:11:08And here's what we got. I'll shut off my camera so we can see better.
00:11:10So we got a little Claude,
00:11:15a little icon logo guy over here of note.
00:11:18This logo is a little bit different than the sprite up here,
00:11:22but Hey, it fits. The colors and fonts seem to make sense at first glance.
00:11:26And we do have our little sprite up top here as well next to lighthouse.
00:11:30Uh, this looks kind of cool. It's like a little ticker.
00:11:35All of this stuff looks pretty familiar from the dashboard in terms of just
00:11:40general design. This feels a little bit off over here.
00:11:43I wish this terminal section was just kind of bumped up to be centered with what
00:11:47we have over here on the left, but that's an easy fix. And overall,
00:11:51pretty good. I would say I liked the cloud designs a little bit better,
00:11:56especially the fact that it created its own dashboard and threw it in there.
00:12:00But Hey, like this did the design stuff, right? It met the criteria.
00:12:04It has the same font, the same colors.
00:12:06Definitely feels like it came from the same family of design. So for this test,
00:12:11I think another huge win for this skill, big thumbs up. Yeah.
00:12:14Did it take a little bit longer? Sure.
00:12:15But it was essentially creating the design system on its own.
00:12:18It didn't have one preloaded. Is it as good as design? Hmm. Maybe not,
00:12:22but it's pretty close and infinitely cheaper. So very, very,
00:12:27very impressed. Now for our last test, we're gonna look at slide decks.
00:12:29I already had Claude design do it.
00:12:31And you're taking a look at its first pass right now.
00:12:33It's using the same design system and it's talking about our fake SaaS product.
00:12:37So in terms of being able to stick with the design,
00:12:41obviously it did a pretty good job and all of this looks pretty
00:12:46good. Only complaint, a little Sprite up here at the top is kind of stretched out.
00:12:50But again, that's not a hard thing to do.
00:12:52Really what I'm worried about here is does it look cool? That's a little cool.
00:12:56It doesn't match the design system when it comes to cloud design. Yes,
00:13:00it was able to do this in just a couple of minutes in terms of usage 6%.
00:13:04Now let's see how Claude code does using the skill.
00:13:07And here's what we got. So right off the bat, very reminiscent to the website.
00:13:11It was just able to create, got the same Sprite thing going up,
00:13:15going on up top.
00:13:16And we got our little Claude code logo over here on the right.
00:13:20So that's the cover page. Number two,
00:13:23it looks like some of the text is overlapping over here, but not a huge issue.
00:13:27Page three looks good. Slide four. This is kind of cut off,
00:13:32but that could totally be a design decision.
00:13:34Got some scrolling text looks good. And on the last slide,
00:13:38we have a little bit of overlap here again,
00:13:40but these are small issues that we could easily fix with a single prompt.
00:13:44So overall, when we compare these two design versus what we got with the skill,
00:13:49very similar again,
00:13:50that's really three things in a row we've tested where the skill is able to
00:13:54compete with what we get in design.
00:13:56And I think that's the big takeaway from this video.
00:13:58We now have an option to get Claude design outputs without being beholden
00:14:03to these wild usage limits, which is awesome for your average user.
00:14:07Now in a vacuum, do I still think Claude design is better? Yes, of course.
00:14:12The skill is just mimicking everything Claude design does.
00:14:15And Claude design has the advantage of certain things like draw, edit, comment,
00:14:19being able to get everyone on a team to use this thing.
00:14:21So by nature of its graphic interface,
00:14:24it can do things that the skill will never be able to do. But for a lot of people,
00:14:29what you just saw here is more than enough. And it's a huge leap forward from,
00:14:34you know, using the front end design skill, for example. And remember,
00:14:37the skill can do more than just web pages and slide decks.
00:14:40It can do things like motion design, infographics, all sorts of stuff.
00:14:43So definitely check this thing out. You really have nothing to lose.
00:14:46So that's where I'm going to leave you guys for today. I hope with this video,
00:14:50I was able to add one more tool to your ever expanding toolbox. As always,
00:14:54let me know what you thought.
00:14:55Make sure to check out chase AI plus if you want to get your hands on the Claude
00:14:58masterclass and I'll see you around.