NEW Claude Design Tool Is INSANE! - CourtneyR.dev's 2nd Brain

NEW Claude Design Tool Is INSANE! ![rw-book-cover](https://img.youtube.com/vi/L4ybnW8t1d0/maxresdefault.jpg) 🔗 **Source:** [NEW Claude Design Tool Is INSANE!](https://www.youtube.com/watch?v=L4ybnW8t1d0) > [!note]+ Document Notes > tags: #ai-tools #design #claude #web-development #figma #ui-ux > author: Leo from Fireall > source: YouTube > reference: https://www.youtube.com/watch?v=L4ybnW8t1d0 > date created: 2024-12-29 10:30 > > # 🏷️ Title: NEW Claude Design Tool is INSANE! >  ## 🧰 Action Inbox - [H1] Test Claude's design tool for social media post creation — comprehensive design system needed #design - [H2] Explore collaborative commenting features for team workflows — real-time feedback capability #collaboration - [H3] Compare Claude design tool capabilities vs traditional WordPress/Elementor workflows — cost-benefit analysis #web-development ## 🧭 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 - [Claude Design Tool](https://claude.ai) - [Firecrawl Website](https://firecrawl.dev) ## 📝 Summary - Claude launched a new design tool offering wireframing, high-fidelity design, design systems, and slide deck creation - The tool generates interactive HTML pages from simple sketches or screenshots with collaborative commenting features - Key capabilities include brand consistency through design systems, real-time editing, and exportable assets - Targets both designers and non-designers with intuitive interfaces similar to Figma or Elementor - Still in research preview with expected improvements and expanded functionality ## 📖 Main Content Claude's new design tool represents a significant advancement in AI-powered design capabilities, offering four distinct modes: wireframe creation, high-fidelity design, design system development, and slide deck generation. The platform enables users to transform rough sketches into functional HTML prototypes within minutes, featuring collaborative commenting systems and extensive customization options. The tool's design system functionality stands out for its ability to maintain brand consistency across projects, generating comprehensive style guides including typography, color palettes, spacing guidelines, and interactive components. Unlike traditional design tools that require extensive technical knowledge, Claude's interface accommodates users without design backgrounds while providing sophisticated controls for professional designers. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/L4ybnW8t1d0?t=0) — [H1] Claude Design Tool Launch - Key idea: New Claude design tool launched 30-40 minutes prior to video recording - Evidence: "What you do inside of Figma, like create a landing page, set up your entire brand design" #### ⏱️ [00:45](https://youtu.be/L4ybnW8t1d0?t=45) — [H2] Collaborative Features - Key idea: Tool includes real-time commenting and collaboration capabilities - Evidence: "You can click on comment. Leave a comment here like I loved this part" #### ⏱️ [01:30](https://youtu.be/L4ybnW8t1d0?t=90) — [H3] Four Design Types Available - Key idea: Platform offers wireframe, high-fidelity, design system, and slide deck creation - Evidence: "I built four different designs with the four different available features" #### ⏱️ [02:15](https://youtu.be/L4ybnW8t1d0?t=135) — [H2] Wireframe Creation Process - Key idea: Users can start with rough sketches that Claude transforms into functional wireframes - Evidence: "I drew was the worst design UI ever, but Claude was able to get that and transform it" #### ⏱️ [03:00](https://youtu.be/L4ybnW8t1d0?t=180) — [H1] Interactive HTML Output - Key idea: Generated designs are actual HTML pages with clickable functionality - Evidence: "This is an actual HTML page that you can click through and see the different sections" #### ⏱️ [03:30](https://youtu.be/L4ybnW8t1d0?t=210) — [H2] Customization Options - Key idea: Tweaks panel allows real-time adjustments to design elements - Evidence: "Line wobble, I can make it less wobbly or more" #### ⏱️ [04:15](https://youtu.be/L4ybnW8t1d0?t=255) — [H2] Direct Element Editing - Key idea: Users can modify specific website components through edit options - Evidence: "I can either change the text or I can change the font, the size, color" #### ⏱️ [05:00](https://youtu.be/L4ybnW8t1d0?t=300) — [H3] High-Fidelity Design Testing - Key idea: Tool can recreate existing websites from screenshots with high accuracy - Evidence: "I wanted to test with an actual existing website. And the website I sent it was the firecrawl website" #### ⏱️ [07:30](https://youtu.be/L4ybnW8t1d0?t=450) — [H2] Contextual Questions - Key idea: System asks relevant questions to gather design requirements and preferences - Evidence: "It's asking me what would you like me to design? So, let's select an original landing page" #### ⏱️ [09:45](https://youtu.be/L4ybnW8t1d0?t=585) — [H1] Design System Implementation - Key idea: Design systems provide brand consistency and context for future projects - Evidence: "The reason why they use this design system and why you should configure it for your company is because again for context" #### ⏱️ [11:00](https://youtu.be/L4ybnW8t1d0?t=660) — [H2] Interactive Mobile App Generation - Key idea: Tool creates functional mobile app prototypes, not just static images - Evidence: "Look at this mobile app. And it's not just an image. You can actually interact with it" #### ⏱️ [12:15](https://youtu.be/L4ybnW8t1d0?t=735) — [H3] Comprehensive Design Assets - Key idea: Generated design systems include typography, colors, spacing, and patterns - Evidence: "All of the primary colors, then neutral, paper, semantic. We have the spacings, shadows, background patterns" #### ⏱️ [13:30](https://youtu.be/L4ybnW8t1d0?t=810) — [H2] Professional vs Amateur Usage - Key idea: Tool serves both novice users and professional designers with different capabilities - Evidence: "The average person without a design background would just look at it and say, 'Okay, I think it's cool. Let's just build it.' But an actual designer would know what to do to iterate" #### ⏱️ [14:45](https://youtu.be/L4ybnW8t1d0?t=885) — [H3] Presentation Creation - Key idea: Slide deck generation includes brand-accurate design and speaker notes - Evidence: "It absolutely nailed the Claude design and the overall content explaining about skill isn't that bad" #### ⏱️ [16:00](https://youtu.be/L4ybnW8t1d0?t=960) — [H2] Asset Management - Key idea: Design files section contains all project assets including HTML, SVGs, and UI kits - Evidence: "You should see much more inside of here when you're creating your design system just because I mean all of the SVGs will be in here" ## 📚 References - [Claude AI Platform](https://claude.ai) - [Firecrawl Website Example](https://firecrawl.dev) - [Figma Design Platform](https://figma.com) - [WordPress Elementor](https://elementor.com) ## 🗣️ Paraphrase - Claude's new design tool transforms rough sketches into professional, interactive HTML prototypes with collaborative features similar to Figma - The platform offers four distinct design modes including wireframing, high-fidelity design, comprehensive design systems, and presentation creation - Design systems enable brand consistency across projects while serving both amateur and professional designers with appropriate complexity levels ## 📰 Newsletter 🎨 **Claude Launches Game-Changing Design Tool** The AI landscape just shifted with Claude's new design platform that transforms sketches into interactive websites in minutes. This isn't just another AI art generator—it's creating functional HTML pages with collaborative features that rival Figma. **Key Benefits:** - **Speed**: Wireframe to working prototype in minutes, not days - **Accessibility**: No design background required, but powerful enough for professionals - **Consistency**: Built-in design systems maintain brand identity - **Collaboration**: Real-time commenting and team feedback features **WordPress Connection**: This could revolutionize theme development and client presentations, offering rapid prototyping before committing to custom WordPress builds. **Try It**: The tool is in research preview—perfect time to experiment with your next project concept. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer experience: Document Claude design tool integration possibilities with WordPress development workflows - Education: Create workshop content comparing AI design tools vs traditional WordPress theme development - Developer marketing: Showcase rapid prototyping capabilities for client presentations and stakeholder buy-in #### WordPress - Core: Investigate potential for AI-generated theme templates and design system integration - Design: Evaluate AI design tools for rapid UX prototyping and design system documentation - Documentation: Create guides for using AI design tools in WordPress development workflows - Themes: Explore AI-generated starting points for theme review queue submissions ## 🧪 Hypotheses - AI design tools will reduce WordPress theme development time by 60-80% for initial prototyping phases - Non-designers using AI tools will produce more consistent designs than traditional DIY approaches - Professional designers will use AI tools primarily for rapid ideation rather than final production - Collaborative AI design tools will improve client communication and reduce revision cycles ### 📊 Methodology - Comparative study: Traditional WordPress theme development vs AI-assisted workflow timing - User experience testing: Designer vs non-designer outcomes using AI design tools - Quality assessment: AI-generated designs vs human-created designs using WCAG and usability metrics ### ❓ Questions - How will AI design tools impact WordPress theme marketplace dynamics and pricing? - What quality control measures are needed for AI-generated design systems? - How can AI design tools be integrated with existing WordPress development toolchains? ### 🔮 Future Research - Integration patterns between AI design tools and WordPress block editor - Accessibility compliance of AI-generated designs and required human oversight - Economic impact on freelance designers and WordPress development agencies ### 💡 Implications - Practice: Fundamental shift in design workflow timing and client presentation approaches - Education: Need for updated curricula balancing AI tool proficiency with design fundamentals - Security: Consideration of data privacy when using cloud-based AI design platforms - Funding: Potential reduction in design budget requirements for early-stage projects ### 🧠 Learning Styles Assessment Reading level estimate: 8th Grade (Flesch-Kincaid) #### 👀 Visual learners - Present: Extensive screenshot examples and design comparisons throughout video - Improve: Side-by-side workflow diagrams showing traditional vs AI-assisted design process #### 🔊 Aural learners - Present: Video format with clear narration and step-by-step explanations - Improve: Podcast-style summary discussing implications for design industry #### 🗣️ Verbal learners - Present: Clear definitions of design system components and technical terminology - Improve: Glossary of AI design terms and analogies to traditional design tools #### 🧩 Kinesthetic learners - Present: Step-by-step walkthrough of actual tool usage and hands-on demonstrations - Improve: Downloadable practice exercises and template starting points #### 🧠 Logical learners - Present: Clear progression from simple wireframes to complex design systems - Improve: Decision tree for choosing between design modes and workflow optimization charts #### 🧑‍🤝‍🧑 Social learners - Present: Collaboration features and team commenting functionality highlighted - Improve: Community challenges and shared project galleries for learning #### 🧘‍♀️ Solitary learners - Present: Individual tool exploration and self-directed project creation - Improve: Self-assessment checklists for design quality and personal progress tracking #### 🌿 Naturalistic learners - Present: Organic evolution from sketch to final design mimicking natural creative processes - Improve: Connections to traditional design principles and sustainable web practices ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Video includes verbal descriptions of visual interface elements - Improve: Detailed alt text for generated designs and semantic markup in examples #### Keyboard navigation - Present: Tool appears to support standard web interactions - Improve: Explicit demonstration of keyboard-only workflow and shortcuts #### Contrast and readability - Present: Generated designs show attention to visual hierarchy - Improve: WCAG compliance checking integration and contrast ratio validation #### Text resizing and reflow - Present: Responsive design examples shown across device sizes - Improve: Specific testing of AI-generated responsive breakpoints #### Media and captions - Present: Video includes clear narration describing actions - Improve: Closed captions and transcript availability for accessibility #### Forms and interactions - Present: Interactive prototypes demonstrate form functionality - Improve: Accessibility testing of generated form elements and error states #### Standards reference - Generated designs should be evaluated against WCAG 2.2 AA success criteria ### 🌍 DEIB Assessment #### Cultural breadth - Present: Tool appears globally accessible without regional restrictions - Improve: Multi-language design system templates and international design patterns #### Inclusive language - Present: Generally neutral terminology in interface descriptions - Improve: Inclusive design pattern recommendations and diverse imagery suggestions #### Neurodiversity support - Present: Multiple interaction modes (sketch, screenshot, text prompt) - Improve: Cognitive load considerations and attention-friendly interface options #### Representation - Present: Focus on technical capabilities rather than demographic assumptions - Improve: Diverse user personas in examples and inclusive design system templates #### Psychological safety - Present: Non-judgmental approach to amateur vs professional design skills - Improve: Community guidelines for collaborative features and constructive feedback ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Tool capabilities logically follow from demonstrated features - Inductive strength: Conclusions about industry impact based on observed functionality - Causal reasoning: Clear connection between AI assistance and reduced development time - Analogical strength: Valid comparisons to existing tools like Figma and Elementor #### Fallacies - Appeal to novelty: "Just launched 30-40 minutes ago" - newness doesn't guarantee quality - Hasty generalization: Limited testing doesn't prove universal applicability across all design needs #### Tone of voice - Overall tone: Enthusiastic but informative, appropriate for technology demonstration content ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on traditional design methods or competitors - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Excitement and wonder appropriate for technology demonstration ## 🎯 Conclusion Claude's design tool represents a significant advancement in AI-powered creative workflows, offering genuine utility for both amateur and professional designers. The platform's strength lies in its ability to bridge the gap between rough concepts and functional prototypes while maintaining collaborative features essential for team workflows. For WordPress developers, this tool could fundamentally change client presentation processes and rapid prototyping approaches, though questions remain about long-term design quality and accessibility compliance of AI-generated outputs. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] AI design tools generate interactive prototypes > [!quote] NEW Claude Design Tool is INSANE! by Leo from Fireall via YouTube. Published 2024-12-29. Accessed 2024-12-29. > "This is an actual HTML page that you can click through and see the different sections of your website." Demonstrates functional output beyond static mockups with real --- ## Full Transcript [00:00] Hey there, it's Leo from Fireall. And in [00:01] this video, we'll be taking a look at a [00:03] really, really, really cool feature from [00:04] Claude that just launched about 30 to 40 [00:07] minutes ago. When I saw this, I didn't [00:09] really know what to expect, but while [00:10] testing it, it really surprised me. [00:12] Basically, what you do inside of Figma, [00:14] like create a landing page, set up your [00:16] entire brand design, or just have all [00:18] your assets there just ready for [00:20] whenever you want to build anything. [00:22] This is also a collaborative tool. So [00:23] you can click on comment. Leave a [00:25] comment here like I loved this part. [00:29] Send a cloud or comment. If you sent a [00:31] cloud probably it'll just understand [00:33] that this is the component you want to [00:34] change. Or if you just leave this as a [00:36] comment, other members should be able to [00:38] find that specific comment on the [00:40] comments tab up here. But I'm skipping a [00:42] bunch of steps. Let's first go through [00:44] the homepage and understand how you can [00:46] get to that point of having an actual [00:48] design done. I built four different [00:50] designs with the four different [00:52] available features that I found. First [00:53] one being the wireframe, then [00:55] highfidelity. I also created a design [00:58] system and finally a slide deck. When [01:00] you create a new project, you have to [01:02] choose between either if you want to [01:04] create the actual highfidelity project [01:06] or if you're just testing out different [01:08] designs and different ideas. If you have [01:10] a quick sketch and you just want to test [01:12] something out, you can come over to [01:13] project name. Let me type in something [01:14] like project test. Select wireframe. [01:17] Click create. And here you'll see an [01:20] agent that will understand you want to [01:22] create a wireframe. And based on the [01:24] context you give it, which can be many [01:26] like a GitHub repository, web element [01:28] down here. This is more about what you [01:31] can add to this specific project scope. [01:34] So for example, you can add a save as [01:35] PDF skill which will then allow the [01:38] agent to output your project as a PDF. [01:42] In my example, what I did was click on [01:43] start with a sketch. When you select [01:46] this, you're basically given a [01:48] sketchboard for you to draw in. What I [01:50] drew was the worst design UI ever, but [01:54] Claude was able to get that and [01:55] transform it to an actual wireframe. By [01:58] the way, this is an actual HTML page [02:00] that you can click through and see the [02:02] different sections of your website. [02:04] You'll also notice that every time Cloud [02:06] creates this tweaks window that allows [02:08] you to see different variations. So, if [02:10] I don't want to see this mobile version, [02:13] I can just hide it like that. Line [02:15] wobble, I can make it less wobbly or [02:18] more. But if that's getting in your way [02:20] and you don't want to see this, just [02:21] untoggle it up here. Additionally, I can [02:24] change specific parts of the websites by [02:26] using the edit option. So, for example, [02:29] if I want to change this, I can either [02:31] change the text or I can change the [02:34] font, the size, color. This is very [02:36] similar to I think it's called Elementor [02:38] for WordPress, but you used to have to [02:41] build an entire template and pay [02:43] hundreds or thousands to have a website [02:45] with all of this capability and now you [02:48] can generate it in minutes, which is [02:50] pretty cool. All right, so that's how [02:52] you can design a wireframe. Let's check [02:54] the high fidelity feature. Whenever you [02:56] want to check your past projects, just [02:58] go back to the homepage, select either [03:00] your designs. These examples are from [03:02] Claude. And by the way, I really want to [03:05] build with this. I believe I might not [03:06] even cover half of what is possible with [03:08] this tool in this video and it's still [03:10] in research preview. So you can probably [03:12] expect a lot of improvements with this. [03:14] All right. Now, as for the highfidelity [03:15] project, I wanted to test with an actual [03:18] existing website. And the website I sent [03:20] it was the firecrawl website. This is it [03:22] right here. I just sent a screenshot. [03:24] And by the way, if I type in something [03:26] like firecrawl project, select high [03:28] fidelity, hit create, let me screenshot [03:31] the website. And as soon as I insert [03:33] this screenshot, it is added as one of [03:36] the uploads to the design files. Hitting [03:38] send will have it understand what it [03:40] needs to do and prompt me with these [03:42] questions on more context of how exactly [03:45] do I want the website to look like. [03:47] Since I didn't give it any context, it's [03:48] asking me what would you like me to [03:50] design? So, let's select an original [03:52] landing page for a similar product. And [03:54] I like that it always considers that I [03:56] might not have the answers for these [03:58] questions. So it tells us things like if [04:01] you don't have one yet, say invent it. [04:03] So invent it. Or you can toggle things [04:06] like decide for me. Decide for me. [04:08] Accent color direction. Let's select the [04:10] orange one. And leave the side for me [04:12] toggled for every single question. I [04:14] believe all these questions are [04:15] optional, but really useful if you're [04:18] actually building something. Provide the [04:20] most amount of context possible. You can [04:22] even add images as reference here. But [04:25] as for this example, let me just hit [04:26] continue and see what it builds for us. [04:29] While it's building that, let's check [04:30] the example that it already built [04:32] previously, which is this one. Honestly, [04:34] it looks really, really good. And I [04:36] really like this tweaks option that [04:37] allows you to change the hero section, [04:40] the accent color. You can toggle between [04:42] the light mode and dark mode. Dark mode [04:44] isn't looking that good. But again, you [04:46] can just click on comment, select what [04:48] isn't looking pretty good. And I'm [04:50] actually going to select everything. The [04:52] color in dark mode isn't looking good. [04:57] Background color. Let me send this to [05:00] Claude. This sends it off to the chat [05:02] and it should start working on it. All [05:03] right, it's done. I thought it didn't [05:05] change for a second, but just by [05:07] clicking on a link up here, which [05:08] reloads the page should then apply the [05:10] changes. All right, now back to our [05:12] recent build. It seems like it's already [05:14] done. And this is it. It's really close [05:17] to the previous one, but there's a huge [05:19] section here that I really appreciate. [05:21] And we have more options in the tweak [05:23] section. So, yeah, this looks more with [05:26] the original firecrawl landing page. And [05:28] by the way, this tweaks option, you can [05:30] ask Claude to add different options [05:33] here. So, for example, if you want [05:34] different options for the hero copy, you [05:36] can just ask Claude to add that for you. [05:39] Okay, that checks off high fidelity and [05:41] wireframe. Let's check how you can add [05:43] your own design system. This was my [05:45] prompt for setting up the design system. [05:46] But the reason why they use this design [05:48] system and why you should configure it [05:50] for your company is because again for [05:53] context. It gives Claude the exact [05:55] context to build something that isn't [05:57] generic as well as to keep the design [06:00] consistent. You don't want to be using [06:01] an inconsistent design every time you [06:03] post something because branding is all [06:05] about identity and being remembered. So [06:07] the more you use that specific and [06:10] consistent design, the more your brand [06:12] will be remembered. After I sent my [06:14] prompt, it asked me a bunch of questions [06:15] similar to the previous build. And then [06:18] it took around 10 minutes to actually [06:19] design everything. Then everything is [06:21] displayed here. You can either approve [06:23] it or tell it it needs work. But [06:25] honestly, everything that was created [06:27] looks pretty amazing. Like look at this [06:29] mobile app. And it's not just an image. [06:31] You can actually interact with it and go [06:34] inside of the app. Check it out. Really, [06:36] really cool. There's also a website they [06:38] generated. This is how it looks like. [06:40] There's a bunch of different sections. I [06:42] honestly really enjoyed this. Finally, [06:44] we have more core design features like [06:48] type. You can see how the hero section [06:50] might look like, how the body would look [06:52] like along with other variations. I [06:54] honestly don't think designers are [06:56] cooked because of these types of tools, [06:58] but rather that they'll have a much more [07:00] powerful tool to work with. These are [07:02] all of the primary colors, then neutral, [07:05] paper, semantic. We have the spacings, [07:08] shadows, background patterns. The thing [07:11] about this is that the average person [07:12] without a design background would just [07:14] look at it and say, "Okay, I think it's [07:15] cool. Let's just build it." But an [07:17] actual designer would know what to do to [07:19] iterate and make it even better. Now, [07:22] after you have your design system all [07:23] set up, you can click on new design [07:25] using this system. I'm actually going to [07:27] use this tool myself for building social [07:28] media posts. And setting up the system [07:30] design is the very first thing I'd want [07:32] to do. All right, we covered everything [07:34] down here. Let's check the system deck. [07:36] I know you can just go inside of Claudet [07:38] and ask it to build a PowerPoint [07:40] presentation and it should do pretty [07:42] well, but this is honestly just [07:44] something else. My prompt was create a [07:46] presentation about Claude skills. Use [07:48] Claude's brand design to do so. First of [07:50] all, it absolutely nailed the Claude [07:52] design and the overall content [07:54] explaining about skill isn't that bad. I [07:56] mean, I guess it would benefit from [07:58] additional context, but the overall [07:59] structure just looks really good. And [08:01] you also have the tweaks option here [08:03] where you can tweak around and change [08:06] through different variations. This was [08:07] all built with just this prompt. And [08:09] after this prompt, again, it made me a [08:11] bunch of follow-up questions. One of [08:13] them was if I wanted speaker notes. I [08:16] did choose to use the speaker notes just [08:18] to see how it looks like. And it's just [08:19] basically a text area where you can add [08:22] your own notes and just looks pretty [08:23] useful. By the way, I didn't mention [08:24] about the design files. In the design [08:26] files, you can see everything that was [08:29] added as context of the project. So, a [08:31] screenshot that you send will be found [08:33] here. The HTML generated can also be [08:35] found here along with all of the other [08:37] assets for your project. You should see [08:39] much more inside of here when you're [08:41] creating your design system just because [08:42] I mean all of the SVGs will be in here. [08:45] The UI kits. So, if you want to check [08:47] out your actual website, you can find [08:49] that file in here. So, let's click open [08:52] and see the actual HTML. And this way, I [08:54] mean, you actually own what you're [08:56] building. All right, I guess that's it [08:57] for today. Thanks for watching and I'll [08:59] see you in the next video.  📄 **Full text:** ![[Full Document Contents/Articles/NEW Claude Design Tool Is INSANE!.md|NEW Claude Design Tool Is INSANE! by YouTube]] ## Highlights - ask Claude to add different options here. So, for example, if you want different options for the hero copy, you can just ask Claude to add that for you. Okay, that checks off high fidelity and wireframe. Let's check how you can add your own design system. This was my prompt for setting up the design system. But the reason why they use this design system and why you should configure it for your company is because again for context. It gives Claude the exact context to build something that isn't generic as well as to keep the design ([View Highlight](https://read.readwise.io/read/01kpgxbcasr21bcaad463v96z5)) - Tags: 👻 ai highlighted