Everything you need to go from zero to your first branded design. Getting started, design system setup, example prompts, best practices, and known limitations.

Available for: Pro | Max | Team | Enterprise (admin-enabled)

Research Preview: Claude Design is currently in research preview. Enterprise plans have it disabled by default; admins can enable it in settings.

In This Guide

  1. What is Claude Design?
  2. Who Can Access It
  3. Getting Started in 5 Steps
  4. Two Ways to Interact
  5. What You Can Attach as Context
  6. Setting Up Your Design System
  7. What Claude Extracts From Your Assets
  8. Export and Sharing Options
  9. 20+ Example Prompts to Try
  10. Best Practices for Better Results
  11. Known Limitations and Workarounds

1. What is Claude Design?

Claude Design is an experimental tool from Anthropic Labs that lets you create designs, interactive prototypes, presentations, and more by having a conversation with Claude.

It works through a dual-interface system: a chat panel on the left where you describe what you want, and an interactive canvas on the right where your designs take shape in real time.

Key Concept: Think of it as a design partner that understands natural language. You describe your vision, Claude builds it. You give feedback, Claude iterates. No design tools or skills required.

2. Who Can Access It

Claude Design is in research preview. Here is what each plan gets:

  • Pro: Full access to Claude Design from day one
  • Max: Full access with higher usage limits for power users
  • Team: Full access for all team members with shared design systems
  • Enterprise: Available but disabled by default. Admins enable it in organization settings.

3. Getting Started in 5 Steps

Step 1: Create a project and add context Open claude.ai/design and start a new project. Attach screenshots, existing assets, code repositories, or design files to give Claude context about what you are building.

Step 2: Describe what you want Tell Claude your goal in plain language. Include what you are building, the layout you want, the content it should contain, and who the audience is.

Step 3: Review the canvas Your design appears on the canvas (right side). The chat stays on the left. Claude generates a first draft based on your description.

Step 4: Iterate and refine Use the chat panel for broad structural changes (new sections, layout shifts, color schemes). Use inline comments for targeted tweaks (button padding, font size, specific text changes).

Step 5: Export or share Download your design as ZIP, PDF, PowerPoint, HTML, or send it to Canva. You can also hand it off directly to Claude Code for development.

4. Two Ways to Talk to Claude

Claude Design gives you two distinct interaction methods. Choosing the right one for each change makes your workflow faster and your results more precise.

Chat Panel (Broad Changes)

Use the chat for structural, layout-level, and exploratory requests:

  • Change the overall color scheme or visual direction
  • Rearrange the layout or add entirely new sections
  • Generate alternative approaches to a design
  • Ask Claude to explain its design decisions
  • Request accessibility audits or improvement suggestions

Inline Comments (Targeted Edits)

Click on any element on the canvas and leave a comment for precise, component-level changes:

  • Adjust button padding, border radius, or color
  • Swap a dropdown for radio buttons
  • Apply a specific brand color to an element
  • Make a section collapsible
  • Change text or copy on a specific element
Rule of Thumb: Chat for the forest. Comments for the trees. If your change affects more than one component, use chat. If it is about a single element, comment on it directly.

5. What You Can Attach as Context

The more context you give Claude, the better your first draft will be. Here is what you can upload:

  • Screenshots and images: Reference designs, competitor pages, wireframes, or visual inspiration
  • Code repositories: React component libraries, existing design systems in code, or frontend repos
  • Slide decks and documents: PowerPoint or PDF presentations that reflect your brand identity
  • Design files: Existing prototypes, mockups, or product design files
  • Brand assets: Logos, color palette files, typography specimens
  • Individual images: Photos, icons, or illustrations you want included in the design
Tip: You only need one source to get started, but uploading multiple assets gives Claude a richer understanding of your brand and design patterns.

6. Setting Up Your Design System

A design system lets Claude Design generate outputs that match your brand automatically. Upload your assets once, and every new project inherits your colors, typography, and component patterns.

Prerequisites

  • Admin permissions for design system setup in your organization
  • At least one source material: a codebase, slide deck, document, or brand assets

Setup Steps

Step 1: Create or switch to your organization Open claude.ai/design. Click your organization name in the lower-left corner of the project picker. Select an existing organization or create a new one, then complete the onboarding flow.

Step 2: Upload your brand and product assets Add codebases (React component libraries, design systems in code), prototypes (screenshots, web flows), slide decks or PDFs reflecting your brand, and individual assets (logos, color palettes, typography specimens).

Step 3: Review the generated design system Claude analyzes your uploads and extracts a reusable system: color palette, typography, components (buttons, cards, nav elements), and layout patterns (spacing, grids, page structures).

Step 4: Publish for team access Toggle "Published" to ON. All projects created from your organization's Claude Design homescreen will automatically use your custom design system instead of defaults.

Updating Your Design System Later

Go to Claude Design organization settings. Click "Open" next to your design system, then click "Remix" (upper right corner). Use the chat interface to modify the system with Claude's help.

Best Practice: Include real examples, not just specs. A finished landing page or marketing site tells Claude more about your brand's feel than a color palette alone.

7. What Claude Extracts From Your Assets

When you upload brand materials, Claude automatically generates a UI kit that includes:

Color Palette: Primary, secondary, and accent colors pulled from your assets. Claude identifies dominant and supporting colors and maps them to a usable system.

Typography: Font families, sizes, and weights. If your uploads use specific fonts, Claude matches them. Otherwise it picks complementary options.

Components: Buttons, cards, navigation elements, form inputs, and other reusable UI patterns extracted from your existing designs.

Layout Patterns: Spacing rules, grid systems, and page structures. Claude learns your preferred alignment, padding, and composition style.

Validation Test Prompts

After your design system is generated, test it with these prompts to verify it matches your brand:

"Create a landing page for [your product]"

Check: Are the colors, fonts, and button styles correct?

"Design a dashboard showing [relevant metrics for your business]"

Check: Do cards, charts, and navigation match your brand?

"Make a presentation about [a topic your team commonly presents on]"

Check: Are slide layouts, headings, and colors on brand?

8. Export and Sharing Options

Claude Design supports six export formats:

  • ZIP file: Full project download with all assets, code, and configuration files
  • PDF: Print-ready document export for presentations or handoffs
  • PowerPoint (.pptx): Editable slide deck you can open and modify in PowerPoint or Google Slides
  • Canva: Direct import into Canva for further editing with Canva's tools
  • Standalone HTML: Self-contained web page ready to deploy or host
  • Claude Code handoff: Send directly to Claude Code (local agent or web) for development

Sharing and Collaboration

Generate shareable links with three access levels: view-only (recipients can see but not change), comment (they can leave feedback on specific elements), and edit (full collaboration). Links work within your organization.

9. 20+ Example Prompts to Try

These prompts use the four-component formula that gets the best results: Goal (what you are building) + Layout (how it should be arranged) + Content (what information it contains) + Audience (who will use it).

Dashboards and Data

Revenue Dashboard

"Create a dashboard showing monthly revenue with filters for region and product line. Include a summary row at the top with total MRR, growth rate, and churn. Use bar charts for monthly trends and a table for the breakdown."

Analytics Overview

"Design an analytics dashboard for a marketing team. Show website traffic, conversion funnel, top-performing campaigns, and lead sources. Make it filterable by date range and channel."

KPI Tracker

"Build a weekly KPI tracker for a 10-person sales team. Show individual quota attainment, pipeline value, meetings booked, and deals closed. Include a leaderboard and trend arrows."

Landing Pages

Product Launch

"Build a landing page for a new API product with a hero section, code examples in a dark terminal block, a pricing table with three tiers, customer logos, and a CTA to start a free trial."

SaaS Homepage

"Design a SaaS homepage for a project management tool. Include a hero with headline and demo screenshot, a features grid with icons, social proof with testimonials, a pricing section, and a final CTA. Target audience is mid-market engineering teams."

Event Registration

"Create a landing page for a virtual AI conference. Include event date, speaker lineup with photos and bios, an agenda/schedule section, sponsor logos, and a registration form. Make it feel premium and modern."

Mobile and App Design

Onboarding Flow

"Design a mobile app onboarding flow with 4 screens that walks users through core features. Include progress indicators, illustrations, short copy, and a skip button. The app is a personal finance tracker for millennials."

Mobile E-commerce

"Create a mobile e-commerce product detail page for a fashion brand. Include product images with a carousel, size selector, color options, add-to-cart button, reviews section, and related products. Keep it clean and premium."

Internal Tools

Content Approval Tool

"Design an internal tool for an ops team to review and approve content submissions. Include a submission queue, preview panel, approve/reject buttons with comment fields, and a status history log."

Employee Directory

"Build an internal employee directory with search, department filters, profile cards showing name, role, team, location, and contact info. Include an org chart view toggle."

Forms and Surveys

Customer Feedback

"Create a form for collecting customer feedback with conditional questions. Start with a satisfaction rating, then branch: if rating is low, ask what went wrong with multiple choice; if high, ask what they liked most and whether they would refer a friend."

Job Application

"Design a multi-step job application form for a tech company. Steps: personal info, work experience, portfolio upload, culture-fit questions. Include a progress bar and save-draft functionality."

Presentations and Decks

Pitch Deck

"Create a 10-slide investor pitch deck for a Series A SaaS startup. Include: problem, solution, market size, product demo screenshots, business model, traction metrics, team, competitive landscape, financials, and ask. Keep it visual with minimal text per slide."

Quarterly Business Review

"Design a QBR presentation for a marketing team. Include: executive summary, performance by channel, campaign highlights with ROI, budget vs. actual spend, learnings, and next quarter priorities. Use charts and data visualizations."

Iteration and Refinement Prompts

Use these after Claude generates your initial design:

Save and Explore

"Save what we have and try a completely different approach. Keep the same content but use a card-based layout instead of the current section-based one."

Accessibility Review

"Review this design for accessibility. Check color contrast ratios, font sizes, button hit areas, and screen reader compatibility. Suggest specific improvements."

Responsive Adaptation

"Adapt this design for mobile. The desktop version is done. Show me how it should reflow on a 375px wide screen, keeping all content but reorganizing the layout for thumb-friendly navigation."

Design Feedback

"What would you improve about this design? Look at visual hierarchy, whitespace usage, consistency, and whether the CTA stands out enough. Give me 3 specific suggestions."

Version Comparison

"Show me two variations of the hero section. Version A: large product screenshot with text overlay. Version B: split layout with text on the left and an animated demo on the right."

Brand Alignment Check

"Does this design match our brand system? Check the colors, typography, button styles, and spacing against our design system. Flag anything that is off-brand."

10. Best Practices for Better Results

1. Start simple, then layer complexity Begin with a basic layout and core content. Once Claude nails the structure, add details incrementally. Trying to specify everything in one prompt leads to missed details.

2. Be specific in your feedback Instead of "make it look better," say "increase the padding around the CTA button to 24px and change the background to our brand blue." Precision gets precision.

3. Reference design system components by name If your design system has named components (e.g., "primary button," "hero card"), use those exact names. Claude maps them to your system's definitions.

4. Think about responsiveness early Ask Claude to consider mobile and desktop from the start, not as an afterthought. Say "design this for desktop and mobile" in your initial prompt.

5. Request 2 or 3 variations When you are not sure which direction to go, ask Claude for multiple options. Comparing variations is faster than iterating on a single path that might be wrong.

6. Ask Claude for its opinion Claude can review its own designs for accessibility, hierarchy, contrast, and usability. Use it as a built-in design reviewer, not just a generator.

7. Upload finished examples, not just specs A real marketing page or product screenshot teaches Claude more about your brand feel than a color palette document alone.

8. Use version management Before making a big change, ask Claude to "save this version." If the new direction does not work, you have not lost anything.

11. Known Limitations and Workarounds

Inline comments occasionally disappear

Problem: Sometimes a comment you leave on the canvas vanishes before Claude processes it.

Workaround: Copy your comment text and paste it into the chat panel instead. Chat always processes reliably.

Compact layout mode can trigger save errors

Problem: The compact view option sometimes causes errors when saving your project.

Workaround: Switch to full view mode before saving. Your work will save correctly.

Large codebases may cause browser lag

Problem: Uploading an entire monorepo or very large codebase can slow down the browser.

Workaround: Link specific subdirectories instead of the full repo. Point Claude at the component library or design system folder, not everything.

Chat upstream errors

Problem: Occasionally, the chat panel shows an error and stops responding.

Workaround: Start a new chat tab within the same project. Your design and context carry over; only the chat history resets.

Quick Reference

  • Access: claude.ai/design
  • Plans: Pro, Max, Team, Enterprise (admin-enabled)
  • Exports: ZIP, PDF, PPTX, Canva, HTML, Claude Code
  • Collaboration: View-only, Comment, Edit access links
  • Design System: Upload once, auto-applied to all projects

Want more Claude breakdowns like this? Follow @rananjayraj on LinkedIn for weekly AI tool guides, marketing automation workflows, and practical Claude tutorials.

LinkedIn | The AI Driven Marketer | Website | Github | Youtube