Claude Design 2.0 for Visual Assets: The Complete Playbook

Sources:

• YouTube: "Claude Design 2.0: The Complete Guide" (all templates, design systems, UI mockups, slides, documents, animations)
• YouTube: "The Best Design Skills for Claude Code" (AI Labs: Anthropic frontend-design skill, ShadCN, GSAP animations, UIUX Pro Max, mobile skills, Higsfield)

Claude Design has had significant upgrades: massively expanded template library, relaxed usage limits (now bundled into existing Claude credits), easy export to Claude Code, and a streamlined connection between design system and all output formats.

Claude Design lives at claude.ai/design or in the side panel of the Claude desktop app. Any paid Claude account has access.

Two use cases this playbook covers:

1. Claude Design (the visual interface): templates, design systems, UI mockups, slides, documents, animations, export to Claude Code
2. Design skills for Claude Code (the terminal): the skills that stop Claude from defaulting to generic AI slop and make it produce genuinely distinctive web, mobile, and marketing UI

Why Claude Design outputs look the same without intervention

When models build UI without direction, they optimise to be correct rather than distinctive. They reach for the most common patterns from their training data: the same safe fonts, the same purple gradients on white backgrounds, the same scroll-reveal animations, the same card layouts. Every output looks passable and none of them look like anything.

Two solutions:

1. In Claude Design: create a design system first. This gives Claude your brand's style and voice so every output follows it consistently across all formats.
2. In Claude Code: install design skills. Skills are instruction files that load when needed and force the model to commit to a specific design direction before it writes any code.

Both solve the same problem. Design systems and skills are the difference between AI slop and something that actually looks like it was made for your brand.

Source: Claude Design complete guide

Create the design system before anything else. Every format you generate after (UI, slides, documents, animations) draws from it automatically.

What a design system contains

Claude Design generates a full brand system from minimal inputs. From a single logo image and a short description, it extracts and builds:

• Brand identity and voice/tone guidelines
• Colour palettes (primary, secondary, accent, neutral)
• Typography: font pairings, scale, usage rules
• Iconography style
• Button and badge styles
• Component patterns (hero layouts, navigation, cards)
• Slide style guidelines
• Monogram and wordmark
• Landing page concept

Everything is editable. You can upload the actual logo to replace a generated one, change any colour, rewrite any description, or ask Claude to modify specific sections.

How to create one

1. Go to claude.ai/design or open the side panel in the Claude desktop app, select Design
2. Click the + button or go to the Design Systems tab and click Create Design System
3. Name your design system
4. Upload inputs: logo, brand images, existing website screenshots, or any visual assets you have. The more you provide, the more accurate the system.
5. Connect additional sources if available: GitHub, Figma
6. Add a short description: what the brand is, who it is for, the vibe you want
7. Click Continue to Generation
8. In a few minutes, your full design system is ready

Minimum viable input: one image + one sentence. More inputs produce a more accurate system but even the minimum produces a usable foundation.

Once created: select your design system from the dropdown whenever you start a new creation. Claude applies it automatically. You do not need to brief it on your brand in the prompt.

Creating a design system with Claude Code

You can also create a design system from Claude Code directly. This is useful if you want to generate the system programmatically or integrate it with an existing Claude Code project.

"Create a design system for [BRAND NAME].
Brand description: [WHAT THE BRAND IS AND WHO IT IS FOR]
Visual direction: [DESCRIBE THE LOOK AND FEEL YOU WANT]

Include:
- Colour palette with hex values and usage rules
- Typography: primary and secondary fonts, scale, when to use each
- Button styles: primary, secondary, ghost, danger
- Component patterns: hero, cards, navigation, CTAs
- Voice and tone guidelines
- What to avoid visually (list specific AI slop tendencies to exclude)

Save the complete design system to design-system.md in my project folder.
This file should be referenced automatically on every design task."

Source: Claude Design complete guide

All template formats and what each produces. Use your design system across all of them for consistent on-brand output.

Full template directory

Template	What it produces	Best for
UI mockup	Multi-page interactive website with navigation, hover states, add-to-cart, forms	Product sites, landing pages, e-commerce
Mobile app design	iOS/Android app screens with mobile navigation patterns	App prototyping, pitching to devs
Wireframe	Low-fidelity layout sketches	Early-stage planning, stakeholder alignment
Slides	On-brand presentation deck with speaking notes	Pitch decks, internal presentations
Document	On-brand branded documents	Invoices, contracts, reports, legal forms
Animation	Motion graphics synced to a transcript	Video intro sequences, explainer motion
Resume	Branded CV/resume layout	Personal branding
3D object	Interactive 3D model with sliders and exportable asset formats	Product visuals, creative concepts
Research report	Formatted research document with data layout	Reports, whitepapers
HTML email	Responsive email template	Product launches, newsletters
Colour and type pairing	Font and colour combination exploration	Brand development
Diagram	Workflow, process, and system diagrams	Documentation, presentations
Flyer	Print and digital flyer layouts	Events, promotions
Cards	Individual card components	Social media, UI elements

UI mockup: the most powerful template

UI mockup produces fully interactive multi-page websites with navigation, hover states, and working UI components. It is the template most people will use most often.

What it handles automatically:

• Multi-page navigation (homepage, shop, about, etc.)
• Working buttons and interactive elements (add to cart, toggles, tabs)
• Hero layout variants (Claude generates 2-3 options per prompt if asked)
• Responsive layout
• On-brand colour, typography, and component styles if a design system is selected

Prompt approach:

"Create the [BRAND NAME] website with pages for homepage, [PAGE 2], [PAGE 3], and [PAGE 4].
Hero: give me 2-3 layout variants to choose from.
Write all copy. One build with top navigation."

After generation:

• Use the tweaks panel to request a list of customisation options to experiment with
• Make inline edits directly (click any element to change text, font, size, spacing)
• Annotate and draw on the mockup for revision notes
• Drop in video or image assets and ask Claude to integrate them
• Ask: "Add a bunch of different tweaks for me to experiment with across the site" to get inspiration you might not have thought of

Exporting to Claude Code:

When the mockup is ready, click Share > Send to Claude Code. Download the zip file, open it as a Claude Code project, and kick off from there. Use Claude Code for anything that requires a database, payment processing, or production deployment. Claude Design is for fast iteration. Claude Code is for building toward deployment.

Slides

Generates a full presentation deck using your design system. Output includes slide layouts, copy, speaking notes, and the same tweaks feature as UI mockup.

Export options: editable PowerPoint, PDF, or straight to Canva if you have the Canva connector enabled in Claude settings.

"Create a presentation about [TOPIC] for [AUDIENCE].
Tone: [DESCRIBE]
Slides needed: [LIST KEY POINTS OR SECTIONS]
Include speaker notes."

Documents

Produces on-brand branded documents: invoices, contracts, reports, legal forms. Works well as an electronic document. Not suitable for complex print layouts that require precise physical dimensions.

"Create a [DOCUMENT TYPE] template for [BRAND NAME].
Include: [LIST REQUIRED FIELDS OR SECTIONS]"

Source: Claude Design complete guide

The most used feature for video creators and content teams. Motion graphics synced to a transcript, generated entirely from a text prompt. No After Effects, no motion designer required.

What animations produce

Claude Design generates motion graphics from a prompt and a transcript with timestamps. The output is a looping or time-synced animation sequence that:

• Follows the timing in the transcript so visuals match what is being said
• Leaves space for a talking head if requested
• Can be exported as MP4 and dropped directly into a video editor
• Is editable with plain English follow-up prompts

Two primary use cases:

1. Video intro sequences and chapter headers for talking head YouTube content
2. Concept visualisations to illustrate what a presenter is explaining

This is not suitable for: full faceless explainer videos, complex 3D animation, or broadcast-quality motion design. For the type of motion graphics that go into talking head content, the output is fully usable with minimal editing.

How to get the transcript

The fastest method: drop the video into Gemini and ask for the transcript with timestamps. It returns a formatted transcript with a one-click copy button. Paste that directly into Claude Design.

Alternatively: export the transcript from your video editor or use any transcription tool (Descript, Whisper, etc.).

The transcript must include timestamps for Claude to sync the animation correctly. Without timestamps, Claude cannot align visuals to speech.

The animation prompt

# Basic animation from transcript
"Create motion graphics for this video segment.
Leave space for a talking head on the [left/right].
Design system: [SELECT YOUR SYSTEM]

[PASTE TRANSCRIPT WITH TIMESTAMPS]"

# Animation from a reference image
"Here is an image of the concept I want animated: [UPLOAD IMAGE]
Animate it as follows: [DESCRIBE THE MOTION: zoom in on X, highlight Y, pan across Z]
Duration: [N] seconds"

# Full-screen animation (no talking head)
"Create a full-screen motion graphic for this video segment.
No talking head space needed.
[PASTE TRANSCRIPT WITH TIMESTAMPS]"

Follow-up edits in plain English:

"At around [TIMESTAMP], the animation should [DESCRIBE CHANGE].
Also, [ELEMENT] is slightly overlapping [OTHER ELEMENT]. Move it [DIRECTION] a bit."
# Drop in a screenshot to show exactly what you mean

Export: click Share > Export as MP4. Drop directly into your editing platform.

Workflow: using Claude Design animations in a video

1. Record your talking head segment
2. Get the transcript with timestamps (Gemini or your editor)
3. Open Claude Design > Animation template > select your design system
4. Paste the transcript and describe the visual direction
5. Review the output: check timing against the script
6. Make follow-up edits in plain English
7. Export as MP4
8. Drop into your editor alongside the talking head footage
9. Composite the talking head over the animation

For fast concept communication with an editor: generate the animation as a reference, describe how you want it refined, share the MP4 with your editor as a style brief. They build the polished version from your reference.

Source: AI Labs (YouTube: The Best Design Skills for Claude Code)

Design skills are .md instruction files that load into Claude Code when a relevant task begins. They prevent Claude from defaulting to safe generic choices and force it to commit to a specific design direction. Install via Claude Code skills: download and upload .md files or install via the Anthropic skill marketplace.

Anthropic Frontend Design Skill

What it does: forces Claude to commit to a real, specific design direction before writing any code, rather than defaulting to the most common patterns it has seen.

The skill explicitly names and blocks the AI slop tendencies: the same overused fonts, purple gradients on white backgrounds, the standard card-with-shadow layout. It pushes the model to pick a direction and stay consistent with it instead of drifting toward safe generic defaults.

AI Labs note: the original Anthropic version has become slightly outdated for newer models (Opus 4.8 and Fable 5). They have modified it by folding in prompting guidance from the Opus 4.8 and Fable 5 shipping notes, which explains how the models have changed and how instructions need to change alongside them. If you are using a newer model, use the modified version or update the instructions yourself.

Best for: landing pages and portfolios where the design itself is part of the product. Do not use it for functional UI like dashboards (see ShadCN below for that).

Install: download from the Anthropic skill marketplace or from the Anthropic GitHub repo. Upload via Claude settings > Skills > Upload a skill.

ShadCN: for functional UI and dashboards

What it does: instead of generating components from scratch, Claude pulls pre-built professional-grade components from ShadCN's registry. The result feels like a real product because you are starting from parts that were already built to ship.

The distinction matters: a marketing landing page needs design distinctiveness. A functional dashboard needs reliability and consistency. Trying to make a dashboard look distinctive usually just makes it look broken. ShadCN solves the dashboard problem.

Two parts that work together:

1. The ShadCN skill file: the rulebook. Holds all of ShadCN's correct patterns and checks your project setup so outputs fit how your project already works. Only loads when needed (not always in context like an MCP).
2. The ShadCN MCP: a live connection to ShadCN's registry. Lets Claude browse and pull real components directly into your project.

Skill gives Claude the rules and patterns. MCP gives Claude the components. Together they give it the judgment to use them correctly.

For dashboards specifically: there is a separate Dashboard skill (from an independent developer) that focuses on information arrangement rather than component consistency. Dashboards have a different core problem: how to group data and how much can live on one screen before it gets cluttered. The Dashboard skill makes Claude reason through that arrangement first, which is why the result actually feels like a real analytics tool.

GSAP: for animations in Claude Code

What it does: when you ask Claude Code to add animation without guidance, it almost always does one thing: items slide into view as you scroll. That one scroll-reveal is the only move it knows and it is the same animation on half of all AI-built sites.

GSAP is the animation library many professional sites already run on. This skill comes from the team that builds it, so Claude works from the correct patterns rather than guessing.

What the skill covers:

• Basic movement to complex scroll-driven animations
• Performance: the skill steers Claude toward movement the browser can handle easily. Most AI animations feel janky because the model moves things by changing their size or position, which forces the browser to rebuild the full page on every frame. GSAP skill prevents this.
• Scroll-driven storytelling where elements are revealed progressively as the user scrolls

Best for: landing pages and scroll-driven marketing sites. Not suited for data visualisation animations or complex 3D.

AI Labs integration: their marketing UI skill explicitly instructs Claude to use the GSAP skill whenever animations are required on landing pages. They treat it as a dependency of their marketing design system.

UIUX Pro Max: industry-matched design systems

What it does: instead of applying general design principles, this skill runs an engine before generating any code. The engine fires five searches simultaneously across an open-source database on GitHub, pulling design styles from 161 industry categories. It picks a colour palette, font pairing, and page layout that suit the specific industry you are building for.

Why this is different: most skills give the model better taste. UIUX Pro Max gives it a decision before it starts, tuned to the kind of product you are actually making. It does not invent a design and hope it works. It builds from one that was reasoned out for your exact use case.

Best for: any project where the industry context should directly shape the visual language. A legal tech product should not look like a creative agency. A fintech dashboard should not look like a wellness app. This skill prevents that.

Taste preset skills: pick one and use it

These are not full systems. They are direction presets that push Claude toward a specific aesthetic. Pick the one that matches the vibe and let it steer.

Skill	Visual direction	Best for
Minimalist UI	Open, content-first, lots of white space	Blogs, newspapers, documentation
Industrial Brutalist UI	Raw, heavy, anti-corporate, high contrast	Creative agencies, art projects
Frontend UIUX	Clean, professional, safe defaults	Business landing pages, SaaS products
Premium Frontend UI	Luxury fashion brand aesthetic	High-end products, luxury services

Do not stack multiple taste presets. Pick one. They conflict with each other.

Higsfield: real images and video in Claude Code

What it does: plugs image and video generation directly into your Claude Code agent. Without it, Claude mostly grabs stock images from the internet that do not match what you need. With Higsfield, you ask for a hero image or a background video clip right where you are working without leaving the terminal.

Higsfield is not tied to one model. It connects to most of the leading image and video models, so you use whichever suits the task.

For video: Seeddance is the recommended model for video generation as of 2026.

Result: real visuals instead of static text or grey placeholder boxes.

Source: AI Labs

Mobile is not a smaller web. Models treat it like one by default. These skills enforce the actual rules of mobile design per platform.

Mobile App UI Design skill: the principles layer

What it does: bakes in the rules of good mobile design that Claude normally treats loosely.

What it enforces:

• Thumb zone: primary buttons placed where the thumb can actually reach
• Consistent spacing and a clean, limited set of font sizes (not 10 different ones)
• Navigation patterns that work on a phone, not a shrunken website

These are the same principles behind Airbnb, Duolingo, and Spotify. The skill bakes in that sensibility instead of having Claude guess at it.

Material 3: Android and Google design language

What it does: gives Claude Google's actual design system, the one behind most Android and Pixel apps.

What it includes:

• Full component library in Google's Material 3 style
• Bold, colourful, rounded shapes with springy motion
• Colour system: give it one colour and it builds a full matching theme
• Compliance checking: verifies your app matches Google's guidelines

Best for: Android-first apps or any app that wants Google's expressive design language.

SwiftUI skill: native iPhone design

What it does: pulls Apple's own documentation straight from Xcode on your Mac and gives it to Claude as the rules. Claude is not guessing what an Apple app should feel like. It is working from Apple's actual guidance.

Apple's design sits at the opposite end from Google: restrained, with the translucent glassy look Apple now calls liquid glass. The skill produces something that actually feels native rather than something that only roughly looks like an iPhone app.

Best for: iOS-only apps or any project where native Apple feel is the priority.

Expo skill: build once for both platforms

What it does: Expo is a framework for building one app that runs on both Android and iOS. The Expo skill covers everything you need for a real cross-platform app: navigation, styling, and platform-specific features, all from one codebase.

Best for: when you need iPhone and Android and do not want to build the same app twice.

Everything from this playbook in one place.

Claude Design workflow (the visual interface)

# 1. ACCESS
# claude.ai/design or side panel in Claude desktop app
# Any paid Claude account has access

# 2. CREATE YOUR DESIGN SYSTEM FIRST
# Click + or Design Systems tab > Create Design System
# Upload: logo, brand images, website screenshots
# Add a short brand description
# Takes ~3 minutes to generate

# 3. CREATE WITH TEMPLATES
# Select template > select your design system > prompt

# UI mockup
"Create the [BRAND] website with pages for [LIST PAGES].
Hero: give me 2-3 layout variants to choose from.
Write all copy. One build with top navigation."

# Slides
"Create a presentation about [TOPIC] for [AUDIENCE].
Key sections: [LIST]. Include speaker notes."

# Document
"Create a [DOCUMENT TYPE] template. Include: [FIELDS/SECTIONS]"

# Animation from transcript
"Create motion graphics for this video segment.
Leave space for talking head on the [right/left].
[PASTE TRANSCRIPT WITH TIMESTAMPS]"

# 4. ITERATE
# Tweaks panel: ask for a list of tweaks to experiment with
# Inline edits: click any element to change text, font, spacing
# Annotations: draw on the mockup for revision notes
# Drop in assets: add video or images and ask Claude to integrate them

# 5. EXPORT
# Slides: PowerPoint / PDF / Canva
# Animation: MP4
# UI mockup: Share > Send to Claude Code (download zip or copy prompt)

Claude Code design skills: which to use when

Task	Skill to use
Marketing landing page that needs to look distinctive	Anthropic Frontend Design Skill
Dashboard or functional product UI	ShadCN skill + ShadCN MCP
Data-heavy dashboard with complex layout decisions	Dashboard skill
Scroll-driven marketing site with animations	GSAP skill
Site where the industry should shape the visual language	UIUX Pro Max
Minimal content-first site (blog, docs, news)	Minimalist UI skill
Raw anti-corporate creative site	Industrial Brutalist UI skill
Standard clean business landing page	Frontend UIUX skill
Luxury or premium product site	Premium Frontend UI skill
Real images and video without stock photos	Higsfield
Android app	Mobile App UI Design skill + Material 3 skill
iOS app	Mobile App UI Design skill + SwiftUI skill
Cross-platform app (iOS and Android)	Mobile App UI Design skill + Expo skill

AI Labs design system structure (model to follow):

• Marketing UI skill: includes the Anthropic frontend design skill (modified as break-the-default) + explicit instruction to use GSAP skill for animations
• Functional UI skill: ShadCN skill + ShadCN MCP
• Higsfield: used across both for real visuals

Design system creation prompt

# Use in Claude Code to create a design system file
"Create a design system for [BRAND NAME].
Brand: [WHAT IT IS AND WHO IT IS FOR]
Visual direction: [DESCRIBE THE LOOK AND FEEL]

Include:
- Colour palette with hex values and usage rules
- Typography: primary and secondary fonts, scale, usage rules
- Button styles: primary, secondary, ghost, danger
- Component patterns: hero, cards, navigation, CTA blocks
- Voice and tone guidelines
- What to visually avoid: list the AI slop tendencies to exclude
  (e.g. purple gradients on white, generic card with shadow layouts,
  scroll-reveal animations on everything, the same sans-serif stack)

Save as design-system.md in my project folder.
Reference this file automatically on every design task."

Animation prompt for video creators

# Get transcript from Gemini
# Drop video into Gemini > ask for transcript with timestamps > copy

# Animation prompt
"Create motion graphics for this video segment.
Leave space for talking head on the right (or left, or full screen).
Design system: [SELECT YOUR SYSTEM]
[PASTE TRANSCRIPT WITH TIMESTAMPS]"

# Follow-up edit
"At around [TIMESTAMP], [DESCRIBE CHANGE].
[DROP IN SCREENSHOT to show what you mean]"

# Export
# Share > Export as MP4
# Drop into editing platform
# Composite talking head over animation