How to Improve Claude Designs With Better Systems

TL;DR

Start by creating a reusable design system with deliberate fonts, colors, components, assets, and copy rules. Improve Claude’s output further by combining reference systems, reusing past projects, supplying proven UI components and icon packs, requesting editable SVGs, connecting external media generators, and auditing drafts for hierarchy, spacing, accessibility, and empty states.

Transcript

These are the Claude design tricks that can take you from a complete beginner to creating beautiful websites, user interfaces, and motion graphics like the ones you're seeing in this video. So, today we're going from the easy stuff that anyone can do within minutes all the way to some advanced power user tricks including some bonus ones that I have... Read More

Key Insights

• A design system is the foundation for consistent Claude output because it defines colors, fonts, components, logos, and other assets. Claude can extract these elements from an existing deck, website, or screenshot, so users do not always need to construct the system manually.
• Structured design galleries can give Claude thousands of readable references with documented color, typography, and spacing choices. Instead of browsing every option manually, users can provide a gallery link and ask Claude to shortlist the three systems most closely aligned with their business.
• A custom Claude Code skill can store a design system close to local project files. This approach makes the system reusable whenever the skill is invoked and avoids relying only on a web-based workflow that requires computer files to be uploaded individually.
• Font selection is one of the clearest ways to improve an AI-generated interface because leaving Claude’s default typography can make the result look generic. Users can identify a brand-appropriate font or pairing, name it in the prompt, or upload its file to the design system.
• Copy rules are part of effective design because polished visuals cannot compensate for language that sounds generically AI-generated. Claude can study patterns used by five leading players in a niche, while a separate tone-of-voice skill can preserve preferred phrasing and banned words.
• Mixing design systems can create a distinct visual direction by assigning different responsibilities to each reference. For example, Claude can take typography from one system and colors or motion from another, producing a controlled blend instead of copying one brand’s complete presentation.
• Proven component libraries can improve quality and reduce unnecessary generation work. The transcript recommends 21st.dev for agent-ready interface sections, React Bits for effects such as animated text and glass cards, and Canvas UI for free liquid, shatter, glass, and particle-reveal effects.
• SVG and Lottie formats make generated graphics more useful in production. SVG icons, illustrations, and diagrams remain scalable, editable, recolorable, and animatable, while Lottie files provide compact code-based icons whose animation is already included.
• More videos from this channel:
  • How to turn ideas into a mobile app with Stitch Flutter
  • How to Install and Start Using Hermes Agent
  • How to Prompt Opus 5.5 for Faster, Cheaper Work
• More from this channel: Jay E | RoboNuggets

Questions & Answers

Q: How do you create a design system for Claude?

Open Claude Design, go to design systems, and create a new system by describing the business and adding its fonts, logos, and assets. A system can also be derived from a deck, website, or screenshot that reflects the desired style. Claude can extract colors, typography, and components from that reference, creating a reusable foundation for later design work.

Q: How can Claude choose a suitable visual style for a business?

Give Claude a link to a gallery of structured design systems and ask it to identify the three options closest to the business and provide their links. The transcript specifically describes a gallery containing more than 2,000 systems with colors, type, and spacing documented. This process reduces manual browsing and narrows a large collection into relevant starting points.

Q: How can a design system be reused in Claude Code?

Create a custom skill that contains the design system, then invoke that skill whenever new material should follow the same visual language. This is especially useful when work depends on files stored on the computer because the web-based Claude Design workflow cannot access those files unless they are uploaded individually. The skill makes the design rules reusable within local project workflows.

Q: How can fonts improve Claude-generated designs?

Replace the default typography with fonts that match the intended brand and audience. The transcript suggests finding free options through FontShare or Fontesk and using Font Joy when a coordinated heading and body pairing is needed. The selected fonts can be named directly in a prompt or uploaded as files to the design system for consistent reuse.

Q: How can Claude produce less generic marketing copy?

Ask Claude to study the top five players in the relevant niche, identify recurring patterns in their copy, and incorporate those patterns into the design system. A separate tone-of-voice skill can add banned words, preferred expressions, and examples of how the brand speaks. The transcript also suggests adding established writing guides as ready-made rules for clearer and more consistent language.

Q: How do you combine multiple design systems without copying one brand?

Add the relevant design systems to the same conversation and tell Claude exactly which elements to take from each. For example, one reference can supply typography while another supplies color and motion. Assigning specific roles to each source creates a deliberate blend that reflects the project’s needs, rather than reproducing the complete visual identity of a single admired company.

Q: What resources can provide ready-made UI components for Claude?

The transcript recommends 21st.dev for open-source interface components designed to be handed directly to an agent. React Bits offers more stylized choices, including animated text, glass cards, and cursor effects, while Canvas UI provides 35 free effects such as liquid, glass, shatter, and particle reveals. Copying proven components into Claude can save tokens and avoid rebuilding every section from scratch.

Q: Why should Claude create graphics as SVG or use Lottie files?

SVG is useful for new icons, illustrations, and diagrams because the graphics scale without becoming blurry and remain editable. Their colors can be changed manually, and Claude can animate them later. Lottie files extend that idea by packaging an animated icon as compact code, so the motion is already included when the downloaded asset is added to a Claude project.

Summary & Key Takeaways

• Claude design work should begin with a reusable system containing the brand’s fonts, colors, logos, assets, components, and copy conventions. Claude can derive this foundation from a description, website, deck, or screenshot, while external galleries can supply structured examples and help identify suitable visual directions for a particular business.

• Professional results depend on carefully selected inputs rather than untouched defaults. Custom fonts, natural copy, consistent icon packs, prior project assets, and a curated reference library give Claude stronger constraints. Mixing selected elements from multiple systems can also produce an original identity without directly reproducing one admired brand’s complete visual language.

• Reusable components and graphics can accelerate front-end production while improving consistency. The transcript recommends agent-ready libraries for standard and animated interface elements, SVG output for editable and scalable graphics, and Lottie files for prepared icon animation. A dedicated auditing skill can then refine hierarchy, spacing, typography, accessibility, and empty states.