This Open Source Repo Just Cloned Claude Design

This Open Source Repo Just Cloned Claude Design ![rw-book-cover](https://i.ytimg.com/vi/Nmk1wxoi6ys/sddefault.jpg) 🔗 **Source:** [This Open Source Repo Just Cloned Claude Design](https://www.youtube.com/watch?v=Nmk1wxoi6ys) > [!note]+ Document Notes > tags: #ai-tools #web-design #open-source #claude-alternatives #development-tools > author: Skill Leap AI > source: YouTube > reference: https://www.youtube.com/watch?v=Nmk1wxoi6ys > date created: 2024-12-28 12:00 > > # 🏷️ Title: This Open Source Repo Just Cloned Claude Design (It's GOOD) >  ## 🧰 Action Inbox - [H1] Test Huashu Design skill in your own Claude projects — alternative to usage-limited Claude Design #ai-tools - [H2] Compare output quality between Huashu Design and Claude Design for your use cases — evaluate design fidelity #web-design - [H3] Implement Huashu Design for slide decks and landing pages — avoid Claude Design usage limits #development-tools ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Huashu Design GitHub Repository](https://github.com/huashu-design/huashu-design) - [Claude Design](https://claude.ai/design) ## 📝 Summary - What happened: A new open-source repository called Huashu Design was released that clones Claude Design's functionality using the same system prompts and design philosophies - Why it matters: Claude Design has severe usage limits that make it unusable for extended work sessions, while Huashu Design runs as a skill in Claude Code without those constraints - Key stakeholders: Developers, designers, and AI tool users frustrated with Claude Design's usage limitations - Risks and tradeoffs: Huashu Design lacks Claude Design's graphical interface features but provides comparable output quality with unlimited usage - Bottom line: Huashu Design offers a viable alternative to Claude Design's usage restrictions while maintaining similar design quality ## 📖 Main Content Huashu Design is an open-source GitHub repository that replicates Claude Design's capabilities by using the same system prompts and design philosophies. The tool addresses the major pain point of Claude Design: severe usage limits that restrict users to about an hour of work before hitting weekly caps, even on premium plans. The skill contains 20 deep-dive markdown files covering slide decks, design styles, and animation best practices, along with access to components, media assets, and an executable toolchain. It can create interactive prototypes for web and mobile apps, slide decks, motion design, and infographics. Key advantages include running on Claude Code's usage limits rather than Claude Design's arbitrary restrictions, maintaining design quality comparable to Claude Design, and providing the same variation and tweaking capabilities. However, it lacks Claude Design's graphical interface features like drawing, editing, and commenting directly on designs. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/Nmk1wxoi6ys?t=0) — [H1] Claude Design Usage Problem - Key idea: Claude Design is an amazing tool that becomes unusable due to severe usage limits - Evidence: "I hit weekly usage limits on Claw Design in less than an hour" #### ⏱️ [01:23](https://youtu.be/Nmk1wxoi6ys?t=83) — [H1] Huashu Design Solution - Key idea: Huashu Design solves usage limit problems by running as a skill in Claude Code - Evidence: "They took all the system prompts and design philosophies of cloud design and turned it into an open source GitHub repo" #### ⏱️ [02:15](https://youtu.be/Nmk1wxoi6ys?t=135) — [H2] Technical Architecture - Key idea: The skill has extensive underlying infrastructure with 20 markdown files and toolchain access - Evidence: "It has access to 20 deep dive markdown files that explain what to do for slide decks, different design styles, animation best practices" #### ⏱️ [03:45](https://youtu.be/Nmk1wxoi6ys?t=225) — [H1] Testing Methodology - Key idea: Head-to-head comparison testing landing pages, asset-based design, and slide decks - Evidence: "We're going to see how well this thing actually works in terms of designing a landing page from scratch" #### ⏱️ [05:30](https://youtu.be/Nmk1wxoi6ys?t=330) — [H2] Landing Page Test Results - Key idea: Both tools produced similar quality results with comparable questioning approaches - Evidence: "Very very similar which is a huge thumbs up for Hashu's skill" #### ⏱️ [07:45](https://youtu.be/Nmk1wxoi6ys?t=465) — [H1] Usage Efficiency Comparison - Key idea: Huashu Design uses significantly less quota than Claude Design for the same work - Evidence: "I've already eaten up about 15% of my Claw Design usage. Well, on the skill side, we've only used 13% of the context window" #### ⏱️ [09:20](https://youtu.be/Nmk1wxoi6ys?t=560) — [H3] Interface Limitations - Key idea: Huashu Design lacks graphical interface features that Claude Design provides - Evidence: "I certainly can't draw on the design skill and say, 'Hey, take a look at this. Let's, you know, mess with this'" #### ⏱️ [11:15](https://youtu.be/Nmk1wxoi6ys?t=675) — [H2] Design System Test Setup - Key idea: Testing how well each tool can work with existing design systems and assets - Evidence: "When I load this design system into claw design, I know it's going to be able to maintain that across different types of deliverables" #### ⏱️ [13:30](https://youtu.be/Nmk1wxoi6ys?t=810) — [H2] Design System Results - Key idea: Both tools successfully maintained design consistency when working with existing systems - Evidence: "It has the same font, the same colors. Definitely feels like it came from the same family of design" #### ⏱️ [15:45](https://youtu.be/Nmk1wxoi6ys?t=945) — [H2] Performance Trade-offs - Key idea: Huashu Design takes longer but uses less quota than Claude Design - Evidence: "The skill took 11 minutes and about 70,000 tokens. Claw design took about 3 minutes, but it took up 10% of its weekly usage" #### ⏱️ [17:20](https://youtu.be/Nmk1wxoi6ys?t=1040) — [H2] Slide Deck Comparison - Key idea: Both tools produced comparable slide deck quality with similar design adherence - Evidence: "Very reminiscent to the website it was just able to create. Got the same sprite thing going up going on up top" #### ⏱️ [19:15](https://youtu.be/Nmk1wxoi6ys?t=1155) — [H1] Final Assessment - Key idea: Huashu Design successfully competes with Claude Design across all test categories - Evidence: "Three things in a row we've tested where the skill is able to compete with what we get in design" #### ⏱️ [20:30](https://youtu.be/Nmk1wxoi6ys?t=1230) — [H2] Tool Scope and Capabilities - Key idea: Huashu Design extends beyond web pages to motion design and infographics - Evidence: "The skill can do more than just web pages and slide decks. It can do things like motion design, infographics, all sorts of stuff" ## 📚 References - [Huashu Design GitHub Repository](https://github.com/huashu-design/huashu-design) - [Claude Design](https://claude.ai/design) - [Claude Code](https://claude.ai/code) ## 🗣️ Paraphrase - Huashu Design replicates Claude Design's functionality without the restrictive usage limits that make the original tool impractical for extended work - The open-source alternative maintains comparable design quality across landing pages, design system integration, and slide deck creation - While lacking Claude Design's graphical interface features, Huashu Design provides a viable solution for users frustrated with usage restrictions ## 📰 Newsletter **Open Source Alternative to Claude Design Emerges** Frustrated with Claude Design's usage limits? A new open-source tool called Huashu Design might be your solution. Built using the same system prompts as Claude Design, this skill runs in Claude Code without the restrictive usage caps that plague the original tool. **Key Benefits:** - Same design quality as Claude Design - No arbitrary usage limits - Works with existing design systems - Supports web apps, slide decks, and infographics **Trade-offs:** - Takes longer to generate results - Lacks graphical interface features - Requires Claude Code access Perfect for developers and designers who need consistent access to AI design tools without hitting usage walls mid-project. Resources: [GitHub Repository](https://github.com/huashu-design/huashu-design), [Claude Code](https://claude.ai/code) ## ✅ Action Items #### DevRel - Developer advocacy: Create comparison demos between Huashu Design and Claude Design for developer audiences - Education: Develop workshops on integrating open-source AI design tools into development workflows - Developer experience: Document setup and usage patterns for Huashu Design in various coding environments - Developer marketing: Highlight open-source alternatives in AI tool selection guides - Community management: Monitor feedback on Huashu Design adoption and pain points #### Community - Maintainers: Support Huashu Design documentation and contribution guidelines - Contributors: Encourage community testing and feature requests for design tool improvements - Ecosystem: Coordinate between design tool developers and AI platform providers ## 🧪 Hypotheses - Open-source AI design tools will gain adoption primarily due to usage limit frustrations rather than quality differences - Design tool effectiveness correlates more with system prompt quality than proprietary interface features - Usage-based pricing models create barriers to iterative design workflows in AI tools - Graphical interfaces provide diminishing returns compared to text-based design iteration for experienced users ### 📊 Methodology - A/B testing between Huashu Design and Claude Design across multiple design categories - Usage analytics comparing token consumption vs. output quality metrics - User experience studies measuring design iteration speed and satisfaction ### ❓ Questions - How do usage limits affect creative iteration patterns in AI design tools? - What percentage of Claude Design's value comes from its graphical interface versus its underlying prompts? - Will open-source alternatives pressure proprietary AI tools to reconsider usage restrictions? ### 🔮 Future Research - Comparative analysis of system prompts across different AI design tools - Investigation into optimal usage models for AI creative tools - Study of open-source AI tool adoption patterns in creative workflows ### 💡 Implications - Practice: Developers can maintain design consistency without hitting usage walls during iteration - Policy: Usage limit policies may drive users toward open-source alternatives regardless of quality differences - Education: Training programs need to cover both proprietary and open-source AI design tool options - Funding: Investment in open-source AI tools may accelerate due to usage restriction frustrations ### 🧠 Learning Styles Assessment Reading level estimate: Grade 8-9 #### 👀 Visual learners - Present: Side-by-side design comparisons, interface screenshots, design output examples - Improve: Architecture diagrams showing skill structure and workflow visualizations #### 🔊 Aural learners - Present: Video demonstration with narrated comparisons - Improve: Audio summary of key differences and setup instructions #### 🗣️ Verbal learners - Present: Clear definitions of technical terms, step-by-step explanations - Improve: Glossary of AI design tool terminology and concept analogies #### 🧩 Kinesthetic learners - Present: Hands-on testing methodology, interactive comparisons - Improve: Setup checklists and guided practice exercises #### 🧠 Logical learners - Present: Systematic testing approach, quantitative usage comparisons - Improve: Decision matrices for tool selection and performance benchmarks #### 🧑‍🤝‍🧑 Social learners - Present: Community discussions about tool preferences - Improve: Collaborative testing protocols and shared experience forums #### 🧘‍♀️ Solitary learners - Present: Individual testing scenarios and self-assessment prompts - Improve: Personal workflow integration guides and reflection questions #### 🌿 Naturalistic learners - Present: Tool ecosystem relationships and open-source community connections - Improve: Sustainability considerations of open vs. proprietary tools ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear headings structure, video has spoken narration - Improve: Alt text for design comparison screenshots, transcript formatting #### Keyboard navigation - Present: Standard video controls accessible via keyboard - Improve: Timestamp navigation support, skip-to-section functionality #### Contrast and readability - Present: High contrast in design examples shown - Improve: Ensure sufficient contrast in UI comparison screenshots #### Text resizing and reflow - Present: Content adapts to different screen sizes - Improve: Maintain readability of design comparison images when scaled #### Media and captions - Present: Full transcript available - Improve: Time-synced captions, downloadable transcript with timestamps #### Forms and interactions - Present: Standard video interface interactions - Improve: Accessible controls for comparing design outputs ### 🌍 DEIB Assessment #### Cultural breadth - Present: Focus on widely applicable design principles - Improve: Examples from different cultural design contexts #### Inclusive language - Present: Technical terms are explained clearly - Improve: Avoid assumptions about user technical background #### Neurodiversity support - Present: Content broken into clear sections with timestamps - Improve: Summary sections for quick scanning, consistent structure #### Representation - Present: Focus on technical capabilities rather than user personas - Improve: Include diverse use cases and application examples #### Psychological safety - Present: Constructive comparison without dismissing either tool - Improve: Acknowledge that tool choice depends on individual needs ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear comparison methodology applied consistently across tests - Inductive strength: Generalizes from specific test cases to broader tool capabilities - Causal reasoning: Links usage limits to user frustration and tool adoption - Analogical strength: Compares tools across equivalent functionality categories #### Fallacies - Hasty generalization: Limited testing scenarios may not represent all use cases - False dichotomy: Presents choice as only between these two tools when others exist #### Tone of voice - Overall tone: Enthusiastic but balanced, acknowledges trade-offs while highlighting benefits ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on individuals or organizations - Reverse victim/offender: No victim/offender dynamics - Emotional cues: Excitement about solution without manipulation tactics ## 🎯 Conclusion Huashu Design represents a significant step forward for developers and designers frustrated with Claude Design's usage limitations. While it may lack some graphical interface features, it successfully replicates the core design quality that makes Claude Design valuable. The open-source approach ensures accessibility and removes artificial usage barriers that hinder creative iteration. For teams and individuals who prioritize consistent access over interface polish, Huashu Design offers a compelling alternative that maintains design quality while providing usage freedom. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Open-source AI tools replicate proprietary capabilities > [!quote] This Open Source Repo Just Cloned Claude Design (It's GOOD) by Skill Leap AI via YouTube. Published 2024-12-28. Accessed 2024-12-28. > "They took all the system prompts and design philosophies of cloud design and turned it into an open source GitHub repo." Demonstrates how open-source projects can achieve parity with proprietary tools by replicating underlying methodologies. [view highlight](https://youtu.be/Nmk1wxoi6ys?t=83#H1) #xref #articleseed ID:rw_huas --- ## Full Transcript [00:00] Clawed Design has to be the greatest [00:01] tool I've ever used. That's actually [00:03] completely unusable. Even though I'm [00:06] paying Anthropic $200 a month for their [00:09] 20X plan, I hit weekly usage limits on [00:12] Claw Design in less than an hour. This [00:14] is beyond frustrating, but luckily for [00:17] you and me, there is hope because a [00:20] brand new open- source repo just got [00:22] released which essentially clones claude [00:25] design and just turns it into a skill we [00:27] can use. It's called Huashu Design and [00:30] it's built on the exact same system [00:31] prompts Claude Design uses. And today we [00:34] are going to put it in a head-to-head [00:35] test against Claw Design to see if this [00:38] thing is actually worth our time. [00:40] Because if it is, we might actually have [00:42] a way out of claw design usage jail. [00:46] Hashu Design solves the problem of claw [00:48] design being an amazing tool, but one [00:50] that you really can't use for more than [00:52] an hour before you hit usage limits. So [00:55] what they did is they took all the [00:56] system prompts and design philosophies [00:58] of cloud design and turned it into an [01:01] open source GitHub repo which is [01:03] essentially just one skill we can load [01:05] into cloud code or codecs or really any [01:08] coding agent. Just like claw design, [01:10] it's able to do interactive prototypes [01:11] for web apps or mobile apps. We can do [01:13] slide decks, motion design, [01:15] infographics, on and on and on. And it's [01:17] able to do all of this with just a [01:19] single skill because it actually has a [01:21] lot going on under the hood. For [01:23] example, it has access to 20 deep dive [01:26] markdown files that explain what to do [01:28] for slide decks, different design [01:29] styles, animation best practices. So, [01:31] although it is one skill at the surface, [01:33] it pretty much has access to 20 mini [01:35] skills. It also has access to a number [01:37] of components and media and assets that [01:39] it can draw upon when it's designing [01:41] things for you. And it has an entire [01:43] executable tool chain. So, gives it the [01:46] ability to take an HTML file and turn [01:48] that into MP4 or use Playright to [01:51] actually check to make sure that what it [01:52] designed for you on paper actually works [01:54] in real life. And just like Claude [01:56] design, we're able to see different [01:57] variations. We have the full tweak [01:59] system. And the best part is since it is [02:02] a skill, if I'm inside of Claude Code, [02:05] it's based on that usage. Whether if I'm [02:07] pro, 5x, or 20X, I'm not constrained by [02:11] this seemingly arbitrary Claw design [02:14] usage limit. Well, let's actually put it [02:15] to the test. So, what we're going to do [02:17] is we're going to see how well this [02:18] thing actually works in terms of [02:20] designing a landing page from scratch. [02:22] Then, we're going to look at how it does [02:23] pretty much the same thing, but if we [02:25] give it assets to build upon, similar to [02:27] Claude Design's design system. And then [02:30] lastly, we'll see how well it does on [02:32] slide decks. And along the way, we will [02:34] compare it to Claude Design [02:35] head-to-head, so we can see if this is [02:37] actually worth it. But before we do [02:39] that, a quick word from everybody's [02:40] favorite sponsor, me. So just last month [02:43] I came out with the Claude code [02:44] masterass and it is the number one way [02:46] to go from zero to AI dev especially if [02:49] you don't come from a technical [02:50] background. I update this course every [02:52] single week and I just came out with the [02:54] claude code agentic OS modules. So if [02:57] you're somebody who wants to learn how [02:59] to best leverage this tool then you need [03:01] to check it out. You can get your hands [03:03] on it inside of Chase AI plus there will [03:05] be a link for that in the pin comment. [03:07] So let's get started. So the prompt I'm [03:09] giving Claude code and it's going to be [03:10] using this hashu design skill throughout [03:12] is use the design skill to create a [03:14] landing page for my fictional SAS [03:16] product lighthouse. Ask me whatever [03:18] questions you need to before we begin. [03:21] Now I've also given this exact same [03:23] prompt to Claude design. So, Hashu comes [03:26] back with six questions asking what [03:28] Lighthouse does, target buyer, vibe, [03:31] sections, needed, variations, and you [03:34] know, should it just create some [03:35] fictional content or do I have copy it [03:37] should use? Claw design has similar [03:39] questions, although it goes into a bit [03:41] more depth and obviously due to its [03:43] graphic nature, it gives me some stuff [03:46] to actually choose from in terms of a [03:47] visual direction that I can actually [03:49] see. So, for Hashu, I'm telling it, [03:51] let's do an analytics bench. We're going [03:53] for the solo dev. I said I want to see [03:55] multiple sort of vibes and styles and [03:58] that way I can actually compare the [03:59] variants and I also wanted to do the [04:00] copy on its own. And for Claw Design, I [04:02] pretty much told it the same thing and [04:04] that I also wanted three variants I [04:05] could look at side by side. So here's [04:07] what Claw Design came up with versus [04:09] what Huashu came up with. And I will [04:12] turn off my camera so we can kind of get [04:15] a better look at this. So let's take a [04:17] look at Hashu. Put it all on one page. [04:19] We could have had it do three separate [04:21] pages, but this kind of lets us all see [04:23] all at once. Well, actually, I take that [04:25] back. We have up here in the top right [04:27] the ability to look through all three. [04:29] So, this is what we got with this skill. [04:31] So, this ledger one actually looks [04:34] pretty cool. You know, gives us the [04:36] whole web page. We have the terminal [04:39] variant. Same sort of deal as well as [04:42] just the paper version. And then I can [04:45] see all three at once. And honestly, off [04:48] the bat, pretty good. This is way better [04:50] than if we were just using Claude code [04:52] by itself or even with the front-end [04:54] design skill and said, "Hey, hey, [04:55] greatest, you know, three variants. [04:56] Pretty solid." Now, let's look at claw [04:58] design. Of note, design gave us the [05:00] tweaks right off the bat. We won't look [05:02] at that right now, but here's its [05:05] terminal version. [05:07] You know, goes through the whole thing. [05:10] Editorial again, pretty similar to the [05:13] editorial one over here. very very [05:17] similar [05:19] spatial. This is very hideous. This [05:22] definitely gives off uh you know your [05:24] your typical AI slot vibes. I think that [05:27] has a lot to do with the gradient. And [05:29] then I can compare all three. Now the [05:32] what I want you to do right now is not [05:34] think, oh, one necessarily looks better [05:35] than the other in a vacuum, but really [05:37] just see how close this skill is that [05:40] we're looking at right here versus [05:41] design. very very similar which is a [05:44] huge thumbs up for Hashu's skill. Now [05:47] what I like to do after I see these [05:48] macro variants is to hone in on one [05:51] particular one I like and then start [05:53] doing tweaks for that. Now to keep it [05:56] somewhat similar so we can have a a [05:58] better compare and contrast. I'm going [06:00] to go with the editorial one on design [06:03] which is known as the ledger one here in [06:05] the skill and we'll see how well they do [06:07] the tweaks. Now for claw design the [06:09] tweaks are already here. So, for the [06:10] editorial, we can swap between light and [06:13] dark. I can change the accent. It gives [06:15] me pretty much any color I can think of, [06:17] which is kind of cool. Uh, I can change [06:20] the actual headline, but then it has it [06:22] split up between spatial and global. So, [06:25] what I'm going to do is I'm going to [06:26] tell it to expand the tweaks and have it [06:29] just for the editorial. And while that's [06:31] happening, I hopped into Claude Code and [06:32] said, let's go with the Ledger variant [06:34] and give it an aggressive amount of [06:36] tweaks so we can pair it on that front. [06:38] So, Claw Design has gone ahead and added [06:40] a bunch of tweaks for us. And of note, [06:42] at this point, just from what you've [06:44] seen in this video, I've already eaten [06:45] up about 15% of my Claw Design usage. [06:48] Well, on the skill side, we've only used [06:50] 13% of the context window of a single [06:54] session. So, 130k tokens, aka not even [06:57] 1% of my weekly usage. Granted, I'm on [07:00] 20x, but the difference is astounding. [07:02] Although, we should note this is still [07:04] working on the tweaks for that one [07:05] thing. So, it is a bit slower. Now, the [07:07] claw design tweaks are working as [07:09] expected. [07:11] The tweaks, frankly, are one of my [07:13] favorite parts of [07:15] claw design in general. I think the [07:17] power of claw design isn't necessarily [07:19] like, oh, the designs are amazing. And I [07:21] do think they are a step above. Don't [07:23] get that twisted, but it's the fact I [07:25] can so quickly just go through a bunch [07:28] of different stuff and see what it looks [07:29] like and just iterate, iterate, iterate [07:31] very quickly. And one thing we want to [07:32] note here is due to the nature of how [07:35] claw design works, the ability to like [07:37] click on specific things like this and [07:39] mess with the typography or leave [07:42] specific comments. That isn't really [07:44] something we can do inside the design [07:46] skill. I certainly can't draw on the [07:49] design skill and say, "Hey, take a look [07:51] at this. Let's, you know, mess with [07:53] this. Move this to the left a bit. Move [07:54] this to the right a little bit." those [07:56] sort of things you need a graphic [07:58] interface for, which is where claw [07:59] design is obviously going to pull ahead. [08:01] So, let's compare that to the tweaks we [08:03] get with Huashu Design. So, of note, the [08:07] tweaks kind of match the same sort of [08:09] style as the page itself. I can change [08:12] the presets. [08:13] I can change sort of the display family. [08:17] A little different in dark mode. I can [08:18] change the accents. And it looks like I [08:21] can change a number of things like [08:23] layout density. Do we have the trust [08:25] strip? Uh, does the trust strip go away? [08:27] Yeah, that sort of thing. So, definitely [08:30] comparable. Are there as many tweaks [08:31] here as there were in Claw Design? No, [08:32] but I'm simply one prompt away from [08:34] getting more. And I think the big [08:35] takeaway here is Claude Code with this [08:37] design skill definitely competes with [08:39] what you can get inside of Claw Design [08:41] natively. And total token usage at this [08:43] point, 170K. Basically didn't use any of [08:47] my weekly usage and I burned 15% of [08:49] Cloud Design. So for this example, which [08:52] is raw prompting it, no design system, [08:55] no assets, see what you can come up [08:57] with. I think the skill did great. So [08:59] let's move on to the next demo and see [09:01] how well this can do if we actually give [09:04] it something to build off of some sort [09:05] of design system, some sort of design [09:07] examples, and put the skill to the test. [09:10] Because I already know claw design can [09:12] do this pretty well. But when we look at [09:13] claw design and its design systems, it [09:16] does a pretty good job of being able to [09:18] take whatever we give it and that can [09:20] just be like a codebase or something and [09:22] pulling out a ton of information. [09:24] Everything from spacing to components, [09:26] gauges, buttons, hero, all this stuff. [09:28] So when I load this design system into [09:31] claw design, I know it's going to be [09:32] able to maintain that across different [09:34] types of deliverables. For example, this [09:36] agentic OS design is something I turned [09:38] into a design system. And while we see [09:40] it as a dashboard here inside of claw [09:42] design, it's very easy to replicate that [09:44] design theme. So you see this inside of [09:46] a slide deck for example. Looks like it [09:48] all came from the same place. And that's [09:49] because of the the claw design design [09:51] system is pretty powerful. The downside [09:53] is creating this sort of design system [09:56] eats up like 30% of your weekly usage. [10:00] So what I just told Claude design was to [10:02] recreate this lighthouse landing page [10:05] using that Aentic OS dashboard. I then [10:07] told claude code pretty much the same [10:10] thing saying I want to use the [10:11] aesthetic/design system that matches [10:14] that dashboard and then I told it where [10:16] it can find all that information inside [10:17] a separate directory for reference. This [10:20] is pretty much what it's using as [10:23] inspiration as its aesthetic. So [10:25] obviously the sprite over here is [10:27] freaking out [10:29] but the rest of it pretty much makes [10:32] sense. Um, it went ahead and like [10:34] recreated a dashboard here as well, [10:37] which very similar to this. I think that [10:40] looks pretty sweet. Uh, as for the [10:43] fonts, colors, all that, very much in [10:45] line with what it should be doing. The [10:48] only real complaint I have is the little [10:51] character over here just I don't know [10:53] what's going on, but that that's [10:54] probably a relatively simple fix. Now, [10:56] let's see how the hu skill did. For [10:58] reference, the skill took 11 minutes and [11:01] about 70,000 tokens. Claw design took [11:04] about 3 minutes, but it took up 10% of [11:07] its weekly usage. And here's what we [11:09] got. I'll shut off my camera so we can [11:10] see better. So, we got a little clawed [11:15] little icon logo guy over here. Of note, [11:18] this logo is a little bit different than [11:21] the sprite up here, but hey, it fits. [11:24] The colors and font seem to make sense [11:26] at first glance. And we do have our [11:27] little sprite up top here as well next [11:29] to Lighthouse. [11:32] Uh, this looks kind of cool. It's like a [11:34] little ticker. [11:36] All this stuff looks pretty familiar [11:38] from the dashboard in terms of just [11:40] general design. This feels a little bit [11:42] off over here. I wish this terminal [11:44] section was just kind of bumped up to be [11:46] centered with what we have over here on [11:48] the left, but that's an easy fix. And [11:50] overall, [11:52] pretty good. I would say I I liked the [11:54] claw designs a little bit better, [11:56] especially the fact that it created its [11:58] own dashboard and threw it in there. But [12:01] hey, like this did the design stuff, [12:03] right? It met the criteria. It has the [12:05] same font, the same colors. Definitely [12:07] feels like it came from the same family [12:09] of design. So, for this test, I think [12:11] another huge win for this skill. Big [12:13] thumbs up. Yeah. Did it take a little [12:14] bit longer? Sure. But it was essentially [12:16] creating the design system on its own. [12:18] It didn't have one preloaded. Is it as [12:20] good as design? Maybe not. but it's [12:23] pretty close and infinitely cheaper. So, [12:26] very, very, very impressed. Now, for our [12:28] last test, we're going to look at slide [12:29] decks. I already had Claw Design do it [12:31] and you're taking a look at its first [12:32] pass right now. It's using the same [12:34] design system and it's talking about our [12:36] fake SAS product. So, in terms of being [12:39] able to stick with the design, [12:41] obviously, it did a pretty good job [12:45] and all this looks pretty good. Only [12:47] complaint, little sprite up here up top [12:49] is kind of stretched out, but again, [12:50] that's not a hard thing to do. Really, [12:52] what I'm worried about here is does it [12:54] look cool. Does it look cool? And does [12:57] it match the design system? When it [12:59] comes to claw design, yes, it was able [13:01] to do this in just a couple minutes. And [13:02] in terms of usage, 6%. Now, let's see [13:05] how Cloud Code does using the skill. And [13:07] here's what we got. So, right off the [13:09] bat, very reminiscent to the website it [13:11] was just able to create. Got the same [13:14] sprite thing going up going on up top. [13:16] And we got our little clawed code logo [13:19] over here on the right. So that's the [13:21] cover page number two. Looks like some [13:23] of the text is overlapping over here, [13:25] but not a huge issue. [13:28] Page three looks good. Slide four. This [13:31] is kind of cut off, but that could [13:32] totally be a design decision. Got some [13:35] scrolling text. Looks good. And on the [13:37] last slide, we have a little bit of [13:39] overlap here again. But these are small [13:42] issues that we could easily fix with a [13:44] single prompt. So overall, when we [13:46] compare these two, design versus what we [13:48] got with the skill, very similar. Again, [13:50] that's really three things in a row [13:52] we've tested where the skill is able to [13:54] compete with what we get in design. And [13:56] I think that's the big takeaway from [13:57] this video. We now have an option to get [14:01] claw design outputs without being [14:03] beholden to these wild usage limits, [14:05] which is awesome for your average user. [14:07] Now, in a vacuum, do I still think claw [14:10] design is better? Yes, of course. The [14:13] skill is just mimicking everything claw [14:15] design does. And claw design has the [14:16] advantage of certain things like draw, [14:18] edit, comment, being able to get [14:20] everyone on a team to use this thing. [14:21] So, by nature of its graphic interface, [14:25] it can do things that the skill will [14:26] never be able to do. But for a lot of [14:29] people, what you just saw here is more [14:31] than enough. And it's a huge leap [14:32] forward from, you know, using the [14:35] front-end design skill, for example. And [14:37] remember, the skill can do more than [14:38] just web pages and slide decks. It can [14:41] do things like motion design, [14:42] infographics, all sorts of stuff. So [14:44] definitely check this thing out. You [14:46] really have nothing to lose. So that's [14:47] where I'm going to leave you guys for [14:48] today. I hope with this video I was able [14:50] to add one more tool to your [14:51] everexpanding toolbox. As always, let me [14:54] know what you thought. Make sure to [14:56] check out Chase AI Plus if you want to [14:57] get your hands on the Claude code master [14:58] class and I'll see you  📄 **Full text:** ![[Full Document Contents/Articles/This Open Source Repo Just Cloned Claude Design.md|This Open Source Repo Just Cloned Claude Design by YouTube]] ## Highlights - So, this ledger one actually looks pretty cool. You know, gives us the whole web page. We have the terminal variant. Same sort of deal as well as just the paper version. And then I can see all three at once. And honestly, off the bat, pretty good. This is way better than if we were just using Claude code by itself or even with the front-end design skill and said, "Hey, hey, greatest, you know, three variants. Pretty solid." Now, let's look at claw design. Of note, design gave us the ([View Highlight](https://read.readwise.io/read/01kq8e64gs9vhhzy7mpfgg8v68)) - Tags: 👻 ai highlighted - happening, I hopped into Claude Code and said, let's go with the Ledger variant and give it an aggressive amount of tweaks so we can pair it on that front. So, Claw Design has gone ahead and added a bunch of tweaks for us. And of note, at this point, just from what you've seen in this video, I've already eaten up about 15% of my Claw Design usage. Well, on the skill side, we've only used 13% of the context window of a single session. So, 130k tokens, aka not even 1% of my weekly usage. Granted, I'm on ([View Highlight](https://read.readwise.io/read/01kq8e64hgk754g4xypg7271v6)) - Tags: 👻 ai highlighted - claw design, I know it's going to be able to maintain that across different types of deliverables. For example, this agentic OS design is something I turned into a design system. And while we see it as a dashboard here inside of claw design, it's very easy to replicate that design theme. So you see this inside of a slide deck for example. Looks like it all came from the same place. And that's because of the the claw design design system is pretty powerful. The downside is creating this sort of design system eats up like 30% of your weekly usage. ([View Highlight](https://read.readwise.io/read/01kq8e64k6f3s1n6dyj49f1vnd)) - Tags: 👻 ai highlighted