# How to Build a Custom Design System in Claude Design: From Moodboard to Animated Mascot > Complete practical guide to building a brand design system in Claude Design: visual references, 4 diverging concepts, tokenization, stress-testing, and animated SVG mascot design. Modern AI-driven interface generation often suffers from "visual drift": every time you ask a model to create a new layout or promotional asset, it introduces arbitrary color shades, inconsistent margins, and random typefaces. The product loses its visual identity and degrades into a disjointed patchwork. Anthropic's **Claude Design** fundamentally solves this problem. It is a dedicated design environment designed to architect and persist cohesive design systems: from global tokens (palettes, grids, typography) to interactive UI components and animated brand characters. In this practical engineering guide, we walk through the end-to-end workflow: curating curated references, generating four radically contrasting style concepts on an interactive canvas, extracting system tokens, syncing with your codebase via Claude Code, and authoring an animated SVG brand mascot. > [!NOTE] > A design system in Claude Design is not a static Figma mock-up; it is an active set of enforceable rules and design tokens. Once saved, Claude applies your approved color palettes, border radii, and type scales to every subsequent generation, code block, or marketing asset. --- ## 1. What is Claude Design and Why Rule Systems Matter A design system is the Single Source of Truth for your brand's visual identity. It governs: - **Color Tokens:** primary, neutral, surface, background, and accessible semantic contrasts. - **Typography Hierarchy:** font families, scale ratios, line heights, and weight distributions. - **Geometry & Spacing:** base grid increments (e.g. 4px/8px), border-radii, and elevation shadows. - **Reusable UI Components:** buttons, input fields, cards, modal dialogs, and navigation bars. - **Motion & Interaction Principles:** micro-interaction curves, hover responses, and mascot animation states. Without an anchored system, generative models reinvent the wheel with every prompt. With an active design system attached, Claude generates pixel-consistent artifacts on the first pass, saving hours of manual clean-up in vector editors. --- ## 2. Curating Visual References: Extracting Brand DNA Before opening any generator or typing your first prompt, assemble a solid reference foundation. Avoid browsing generic "pretty websites" — dissect identity, typography, layout grids, and motion as distinct engineering layers. > [!TIP] > For a structured visual catalog of aesthetic styles, explore our guide [50 Visual Design Styles for Design Systems & Art Direction](/en/guides/prompts/50-design-styles-for-better-prompting), breaking down aesthetic movements from Bauhaus to Neo-Brutalism into concrete interface tokens. ### 2.1. Branding, Identity & Aesthetic Directions Use these curated galleries to pin down the overarching mood, primary color temperatures, and typographic weight. | Resource | Core Focus & Engineering Utility | Link | | :--- | :--- | :--- | | **50 Design Styles (GotBurnout)** | Comprehensive visual dictionary of 50 design styles, palettes, and UI tokens | [Read Our Guide →](/en/guides/prompts/50-design-styles-for-better-prompting) · [UX Planet](https://uxplanet.org/50-design-styles-every-designer-should-know-for-better-prompting-56c09d55db62) | | **Pinterest** | Moodboards, physical materials, surface textures, lighting setups | [Open Pinterest →](https://www.pinterest.com/) | | **Behance** | In-depth brand identity case studies and comprehensive guidelines | [Open Behance →](https://www.behance.net/) | | **Brand New** | Critical rebrand analysis and corporate identity case reviews | [Read Brand New →](https://www.underconsideration.com/brandnew/) | | **Rebrand Gallery** | Curated catalog of refreshed logos, palettes, and typography pairs | [Browse Rebrand Gallery →](https://www.rebrand.gallery/) | | **Recent Design** | Modern graphic design trends, cutting-edge UI patterns, and motion | [Explore Recent Design →](https://recent.design/) | **Usage Scenario:** Initial briefing stage to isolate 2–3 divergent stylistic avenues that resonate with your product positioning. For an in-depth breakdown of each style, explore our guide [50 Visual Design Styles](/en/guides/prompts/50-design-styles-for-better-prompting). ### 2.2. Web Design, Product Showcases & Landing Pages For macro-composition, layout rhythm, typographic hierarchy, and conversion structure. | Platform | Specialization | Link | | :--- | :--- | :--- | | **Awwwards** | Avant-garde web experiences, experimental layouts, and WebGL | [Open Awwwards →](https://www.awwwards.com/) | | **Land-book** | High-converting marketing landing pages and product teasers | [Open Land-book →](https://land-book.com/) | | **One Page Love** | Benchmark single-page architectures and micro-sites | [View One Page Love →](https://onepagelove.com/inspiration) | | **Curated Design** | Sites rigorously categorized by digital industry and visual theme | [Open Curated Design →](https://curated.design/) | | **Landing Love** | Scroll video recordings, kinetic transitions, and dynamic interactions | [Watch Landing Love →](https://www.landing.love/) | | **Saaspo** | SaaS marketing layouts, pricing tables, and user onboarding flows | [Open Saaspo →](https://saaspo.com/) | | **SaaSFrame** | Marketing conversion funnels and B2B interface patterns | [Explore SaaSFrame →](https://saasframe.io/) | | **WebInspoo** | Filterable SaaS directory organized by color palette and tech stack | [Visit WebInspoo →](https://webinspoo.com/) | ### 2.3. Specific Sections & High-Conversion Modules Targeted inspiration when the global style is set but specific page modules require refinement. | Component / Catalog | Practical Role | Link | | :--- | :--- | :--- | | **Navbar Gallery** | Header architecture: floating bars, mega-menus, and mobile trays | [Browse Navbars →](https://www.navbar.gallery/) | | **Supahero** | Hero sections with high-impact value propositions and primary CTAs | [Explore Heroes →](https://supahero.io/) | | **Unsection** | Specialized blocks: social proof, feature comparison tables, testimonials | [Open Unsection →](https://www.unsection.com/) | | **Footer Design** | Multi-tier navigation footers, copyright standards, and trust badges | [View Footers →](https://www.footer.design/) | | **CTA Gallery** | High-conversion lead-capture cards and subscription prompts | [Browse CTAs →](https://www.cta.gallery/) | | **404s Design** | Creative error 404 recovery layouts and interactive retention screens | [404 Collection →](https://www.404s.design/) | | **One Page Love (OG)** | High-impact Open Graph social preview banners | [Explore OG Banners →](https://onepagelove.com/og) | ### 2.4. Modular Grids & Bento Box Layouts Content rhythm through asymmetric card layouts and controlled spacing. | Utility | Description | Link | | :--- | :--- | :--- | | **Bento Grids** | Modular asymmetric layouts popular in modern product showcases | [Browse Bento Grids →](https://bentogrids.com/) | | **Griddy** | Interactive training environment for mastering CSS Grid properties | [Launch Griddy →](https://griddy.io/) | | **One Page Love Sections** | Modular page section compositions from real-world digital products | [View Sections →](https://onepagelove.com/sections) | ### 2.5. UI Components, Design Tokens & Open Design Systems Reusable interface elements: buttons, inputs, badges, cards, and design token manuals. | Library | Utility | Link | | :--- | :--- | :--- | | **Component Gallery** | Definitive interface component encyclopedia: comparing button, modal, and card patterns across 50+ real design systems | [Open Component Gallery →](https://component.gallery/) | | **Astryx by Meta** | Official open-source design system by Meta engineered for AI coding agents | [Astryx Docs →](https://astryx.atmeta.com/) | | **21st.dev** | The "npm for design engineers": curated UI components with instant AI prompts | [Open 21st.dev →](https://21st.dev/) | | **Refero** | Massive catalog of over 30,000 real-world iOS and web application screens | [Explore Refero →](https://refero.design/) | | **Refero Styles** | Gold-standard design systems featuring ready-to-use tokens and `DESIGN.md` | [Open Refero Styles →](https://styles.refero.design/) | | **VantaUI** | UI component kits, responsive states, and Figma community kits | [Explore VantaUI →](https://www.vantaui.com/) | | **ButtonCraft** | Curated CSS button collection with interactive hover and active states | [Open ButtonCraft →](https://www.buttoncraft.co/) | | **OpenBridge** | Open-source maritime and industrial UI system with extreme contrast standards | [OpenBridge Docs →](https://www.openbridge.no/) | > [!TIP] > The **Refero Styles** archive, **Component Gallery**, and Meta's **Astryx** provide exceptional benchmarks for Claude: their structured guidelines can be directly mirrored into a system `DESIGN.md` file for Claude 3.5 and 3.7 models. ### 2.6. Micro-Interactions, Motion & 3D | Resource | Focus | Link | | :--- | :--- | :--- | | **React Bits** | 60+ open-source animated React components: shaders, kinetic typography, transitions | [Open React Bits →](https://reactbits.dev/) | | **21st.dev** | Interactive micro-animations and production UI blocks with Framer Motion and Tailwind | [Browse 21st.dev →](https://21st.dev/) | | **Amicro** | Lightweight, tree-shakeable micro-interactions and transitions for React | [Open Amicro →](https://amicro.dev/) | | **Paper Shaders** | Interactive WebGL canvas shaders, procedural noise, and organic backgrounds | [Open Paper Shaders →](https://shaders.paper.design/) | | **ThreeUI** | Production 3D interface components and interactive WebGL canvases | [Explore ThreeUI →](https://threeui.com/browse) | | **60fps Design** | Smooth motion patterns, state changes, and click feedback | [Open 60fps →](https://60fps.design/) | | **Design Spells** | Playful micro-interactions, native gestures, and subtle hovers | [Open Design Spells →](https://designspells.com/) | | **Mesh3D Gallery** | Interactive 3D web environments, WebGL shaders, and Three.js setups | [Explore 3D Gallery →](https://www.mesh3d.gallery/) | ### 2.7. Typography Systems & Palettes | Utility | Usage | Link | | :--- | :--- | :--- | | **Google Fonts** | Open-source type families with multi-language glyph coverage | [Google Fonts Catalog →](https://fonts.google.com/) | | **Fontpair** | Tested heading-and-body font pairings across serif and sans families | [Font Pairings →](https://www.fontpair.co/) | | **Coolors** | Palette generator, tint generator, and WCAG contrast ratio validator | [Launch Coolors →](https://coolors.co/) | ### 2.8. The Golden Reference Formula Do not overwhelm Claude with dozens of random URLs. The optimal reference bundle consists of: - **2–3 identity examples:** color temperature, primary tone, and typography spirit. - **2–3 full website layouts:** negative space philosophy and content hierarchy. - **2–3 component examples:** button geometry, form fields, and card anatomy. - **1–2 motion references:** corner radii, transition easing, or elevation style. - **3 definitive brand descriptors:** e.g., *"technical, austere, premium monochrome"*. --- ## 3. Initializing Your Design System in Claude Design You can start a new design system in Claude through two distinct paths: 1. **Via Workspace Settings:** Navigate to `Settings` → `Design systems` → click `New design system`. 2. **Directly from Chat Context:** Click the `+` icon next to the prompt input → select `Design system` → `New design system`. ```mermaid graph LR A[Start] --> B{Creation Mode} B -->|From Scratch / No Code| C[Using Claude] B -->|Existing Codebase| D[Using Claude Code] C --> E[Upload References & Brief] D --> F[Scan CSS / Tailwind Tokens] E --> G[Interactive 2x2 Canvas] F --> G ``` ### Choosing Between Modes: Using Claude vs Using Claude Code - **Using Claude:** Best for authoring a brand or product identity from a clean slate. Upload screenshots, moodboards, or textual briefs, and Claude will assemble the system visually. - **Using Claude Code:** Tailored for teams with an established codebase. The terminal agent inspects your Tailwind config, CSS variables, and component libraries to extract live tokens into Claude Design. > [!IMPORTANT] > If your product serves international audiences, specify complete Unicode and Cyrillic support during font selection to avoid glyph fallback glitches (FOUT/FOIT) in production builds. --- ## 4. Aesthetic Exploration: Generating 4 Contrasting Concepts A common trap is locking down strict design tokens prematurely. Professional design workflows rely on divergent exploration before convergent refinement. Instruct Claude to synthesize **four radically distinct stylistic directions** rendered on a single 2×2 interactive canvas, using uniform dummy content. ### Master Prompt #1: Divergent Style Exploration ```markdown Act as a principal art director engineering a brand design system in Claude Design. Do not assemble the final design system immediately. Your first objective is to propose four fundamentally divergent stylistic directions for evaluation. Brand Context: - Name & Sector: [Specify brand name and business model] - Target Audience: [Describe core user persona and expectations] - 3 Brand Descriptors: [e.g., technical, minimalist, high-end monochrome] - Required Assets: [Logo mark, core accent hue, or legacy requirements] - Anti-Patterns to Avoid: [e.g., childish pastels, heavy neon, generic gradient meshes] Reference Analysis: Review the attached assets and URLs. In three concise sentences, summarize common aesthetic threads (palette balance, type scale, grid density). Use them strictly as inspiration without direct replication. Four Contrasting Directions: Generate 4 distinct concepts: light vs dark, warm vs cool, serif-anchored vs geometric sans. For each concept, specify: 1. Concept Name (2–3 words) and brief aesthetic justification. 2. Font Pairing from Google Fonts with broad character coverage (Heading + Body). 3. 5–6 color palette with exact HEX codes. 4. Two identical test artifacts: [e.g., desktop hero section + product showcase card]. Delivery Requirements: Arrange all 4 concepts on a single interactive canvas in a 2x2 grid, each on its own Artboard. Keep all vector shapes, typography, and containers fully editable. Stop here and wait for my feedback or direction selection before proceeding to tokenization. ``` Reviewing the 2×2 canvas matrix allows you to evaluate color harmony and typographic rhythm side by side. You can pick one concept directly or instruct Claude to blend the typography of Option 1 with the palette of Option 3. --- ## 5. Tokenization & Final System Construction Once a concept direction is locked in, convert it into an engineering-grade specification containing discrete tokens and reusable components. ### Master Prompt #2: Token Specification & Component Assembly ```markdown I select Concept #[Insert Number] with the following modifications: [e.g., shift background gray to a warmer charcoal slate]. From this foundation, build the complete design system in Claude Design. Include the following specification sections: 1. Colors (Design Tokens): - Primary, Secondary, Background, Surface, Muted, Accent, Error, and Success. - Exact HEX values with semantic role definitions and WCAG AA contrast notes. 2. Typography: - Google Fonts family names. - Type scale (H1, H2, H3, H4, Body Large, Body, Caption) with px/rem values, line-heights, and letter-spacing. 3. Spacing & Layout: - 4px / 8px scale tokens (space-1 = 4px, space-2 = 8px ... space-16 = 64px). - Container max-widths and responsive grid columns (12-column desktop, 4-column mobile). 4. Geometry & Elevation: - Corner radii (radius-sm, radius-md, radius-lg, radius-full). - Border-width tokens and box-shadow elevation levels. 5. Core UI Components: - Button (Primary, Secondary, Ghost, Destructive) across Default, Hover, Active, and Disabled states. - Text Input, Card, Badge, and Modal Dialog. 6. Asset Guidelines: - Logo safe zones and imagery treatment rules. Format as a structured DESIGN.md and token tree. Enforce strict adherence to the approved aesthetic without reverting to discarded concepts. ``` ### Critical Feature: Usage Notes Inside Claude Design, always document the **Usage Notes** field. This functions as a system prompt directive instructing Claude on when and where specific styles may be used. For example: - *"The accent yellow (#FFC700) is reserved exclusively for the primary CTA button; never use it as a card background."* - *"Section headers must always use uppercase styling with 0.05em tracking."* Usage notes eliminate stylistic hallucinations in future conversations. ### The DESIGN.md Ecosystem: Ready-Made Token Vaults & AI Extractors To avoid crafting token files from scratch or to import an existing brand into Claude Design, leverage the open `DESIGN.md` ecosystem: | Tool | Capabilities & Utility | Link | | :--- | :--- | :--- | | **getdesign.md** | Comprehensive directory of real-world `DESIGN.md` specs for AI coding agents | [Open getdesign.md →](https://getdesign.md/) | | **designmd.me** | AI token extractor: input any website URL to generate full tokens and `DESIGN.md` | [Launch designmd.me →](https://designmd.me/) | | **designmd.ai** | Open-source catalog of hundreds of free design systems for Cursor and Claude Code | [Explore designmd.ai →](https://designmd.ai/) | --- ## 6. Stress-Testing the System on Real-World Formats Before distributing the design system to your team or production code, validate its consistency across three diverse formats. ### Master Prompt #3: Cross-Format Consistency Audit ```markdown Using our newly defined design system, generate three distinct deliverables for our brand: 1. Desktop Web Hero Section (Header bar, value proposition headline, primary CTA, and preview frame). 2. Presentation Slide (Key operational metric, data chart, and takeaway callout). 3. Social Announcement Card (Square 1080x1080 graphic announcing a new feature). Requirements: - All three assets must share an unmistakable, cohesive visual grammar. - Strictly adhere to approved tokens: colors, type scale, border radii, and padding. - Verify typography legibility and WCAG AA contrast on every text element. ``` > [!TIP] > **Format Validation Benchmarks:** > - For evaluating the presentation slide, consult [Deck Gallery](https://deck.gallery/) — an elite archive of pitch decks and slide designs from top technology startups. > - For evaluating the social announcement card, reference [Posts Design](https://posts.design/) — a curated showcase of high-converting social graphics, carousels, and announcement cards. If a typeface feels illegible on the slide or an accent color overwhelms the social card, do not patch the mockup manually. Adjust the root token inside the design system, propagating the fix across all downstream outputs. --- ## 7. Working in New Projects & Syncing with Claude Code Once saved, your design system is instantly available across your Claude workspace. ### Activating in Standard Chats To apply your rules to a new conversation, click the `+` icon beside the chat box → choose `Design system` → select your saved system. Every subsequent request for React code, HTML email templates, or dashboard views will automatically adhere to your tokens. ### Codebase Sync via `/design-sync` For developers using the terminal agent **Claude Code**, bridging visual design systems with production source code takes a single CLI command: ```bash /design-sync ``` This automated sync step: - Pulls live tokens from Claude Design and maps them to `tailwind.config.ts` or CSS variables in `globals.css`; - Generates or updates the root `DESIGN.md` specification; - Flags discrepancies between active design tokens and existing React UI components. ### Master Prompt #4: Iterative Token Updates ```markdown Open our active design system. I need to update tokens for [specify: buttons / form inputs / typography scale]. Propose three alternative styling variations for this module while preserving the brand's core identity (color harmony, spacing rhythm, and overarching tone). Provide a clear Before vs After comparison for each option. Do not apply changes globally until I explicitly approve a final variation. ``` --- ## 8. Authoring an Animated Brand Mascot (SVG & Claude Motion) A memorable brand mascot humanizes digital products, elevates empty states, softens error pages, and strengthens community marketing. Claude Design can generate vector mascot assets following your system rules and synthesize a full animation state library. ```mermaid flowchart TD DS[Brand Design System] --> Concept[Generate 3 Mascot Concepts] Concept --> Approval{Direction Selection} Approval --> Vector[Export Clean Vector SVG] Vector --> States[Build 15 Motion States] States --> WebDev[CSS / Lottie / JS for Web] States --> Video[Claude Motion MP4 / WebM] ``` ### Master Prompt #5: Mascot Concept & 15-State Animation Library ```markdown Act as a principal Character Designer and Motion Engineer. Using our approved brand design system, design an original brand mascot. The character must naturally reflect the brand's aesthetic: incorporating our color tokens, corner radii, and emotional tone. Phase 1: Character Concept (Vector SVG) - Propose 3 mascot concepts with distinct personalities (e.g., technical engineer bot, minimal geometric character, friendly cyber companion). - Author clean, semantically structured SVG code for each direction. - Detail facial expressions, eye design, and signature silhouettes. - Display all 3 variations side by side for evaluation. Phase 2: 15-State Motion Library (Post-Approval): 1. Idle — calm breathing and subtle resting state. 2. Blink — natural eye blink cycle. 3. Wave — welcoming hand gesture. 4. Walk — continuous walking cycle. 5. Jump — dynamic celebratory hop. 6. Think — contemplative pose (for AI response loading). 7. Talk — active speech or vocalization state. 8. Happy — celebration of a successful task. 9. Sad — sympathetic state for 404 or connection loss. 10. Surprise — wide-eyed discovery reaction. 11. Celebrate — confetti burst or achievement unlocked. 12. Point — directing user attention toward a key CTA or element. 13. Loading — looping spinner interaction. 14. Sleep — dormant state for idle user tabs. 15. Goodbye — polite parting gesture on exit. For now, provide only the 3 initial SVG mascot concepts and pause for my selection. ``` ### Master Prompt #6: Motion Polish & Interactive Gallery ```markdown I choose Mascot #[Insert Number]. Now create an interactive gallery showcasing all 15 animation states: 1. Maintain strict scale, proportions, and color tokens across all scenes. 2. Implement fluid CSS keyframes directly within the SVG code. 3. Include a reduced-motion media query fallback for accessibility compliance. 4. Provide a UI control strip: Play/Pause toggles and a speed multiplier slider. ``` > [!TIP] > **Visual Effects & Motion Vocabulary:** For exact stylistic terms when prompting character motion (e.g., *morphing*, *kinetic typography*, *rotoscoping*, *claymation*, *glitch*), consult the visual encyclopedia [Eyecannndy](https://eyecannndy.com/). > > **Claude Motion (Video Export):** For video production pipelines (Premiere Pro, DaVinci Resolve, After Effects), Anthropic offers **Claude Motion** (in beta for Team and Enterprise tiers), enabling direct rendering of character states into high-resolution MP4 or transparent WebM video files. --- ## 9. Summary Roadmap & Authoritative Resources Building a scalable design system follows eight sequential stages: | Phase | Core Objective | Key Deliverable | | :--- | :--- | :--- | | **1. References** | Curate moodboards across 7 domains | Pack of 10 targeted URLs and 3 brand keywords | | **2. Setup** | Initialize Claude Design | New active system workspace | | **3. Exploration** | Master Prompt #1 on 2×2 canvas | 4 contrasting directions tested on uniform content | | **4. Tokenization** | Master Prompt #2 + Usage Notes | `DESIGN.md` specification and color/type tokens | | **5. Stress-Test** | Master Prompt #3 on 3 formats | Verified desktop hero, slide deck, and social card | | **6. Code Sync** | Run `/design-sync` in Claude Code | Synchronized Tailwind / CSS tokens in repository | | **7. Evolution** | Master Prompt #4 for micro-updates | Controlled component refinement without redesigns | | **8. Mascot & Motion** | Prompts #5 & #6 + Claude Motion | Vector SVG mascot with 15 animation states and MP4 | ### Official Anthropic Documentation & Community Guides - **Anthropic Academy:** [Create a Design System Tutorial](https://academy.claude.com/tutorials/create-a-design-system-with-claude) - **Claude Design Help Center:** [Getting Started with Claude Design Guide](https://support.claude.com/en/articles/14604416-get-started-with-claude-design) - **Claude Motion Documentation:** [Motion Beta Guide & Video Rendering](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion) - **Related GotBurnout Guide:** [50 Visual Design Styles for Design Systems & Art Direction](/en/guides/prompts/50-design-styles-for-better-prompting)