Claude Design launched on April 17, 2026 and it is the most accessible design tool ever built for people without design backgrounds. If you can describe what you want in plain language, you can create professional prototypes, pitch decks, landing pages, and design systems in minutes. This tutorial walks you through every step, from opening the tool to exporting a shippable asset.
Before You Start
Claude Design requires an active subscription to Claude.ai. The following plans include access:
- Claude Pro — $20/month, includes Claude Design with standard usage limits
- Claude Max — $200/month, higher usage limits, better for heavy design sessions
- Team — Per-seat pricing, shared workspace features
- Enterprise — Organization-level billing and controls
Important for Enterprise users: Claude Design is turned off by default for Enterprise accounts. If you are on an Enterprise plan and do not see the palette icon in Claude.ai, your organization’s administrator needs to enable Claude Design access in the admin settings panel. Contact your workspace admin before troubleshooting on your own.
Free Claude accounts do not include Claude Design access. You must be on a paid plan.
Content created by Pro and Max subscribers is not used for training Claude models.
Step 1: Open Claude Design
- Navigate to claude.ai in your browser and sign in
- Look at the left-hand navigation sidebar — the vertical panel on the left side of the interface
- Find the palette icon (it looks like an artist’s color palette)
- Click it — Claude Design opens in a dedicated workspace separate from your regular Claude conversations
The Claude Design workspace has three main areas: a prompt input at the bottom, a canvas preview that shows your generated design, and a right-side panel with export and refinement controls. If you have uploaded brand assets previously, you will see them listed in a “Brand Assets” section at the top of the sidebar.
The workspace remembers your brand assets across sessions. Anything you upload in one project is available in future projects automatically.
Step 2: Upload Your Brand Assets (Optional but Recommended)
Skipping this step means Claude Design will generate designs in a generic style. Uploading brand assets ensures every output matches your actual brand. Spend five minutes here to save hours across every future session.
Option A — Upload files directly:
- Logo files (SVG preferred, PNG acceptable)
- Font files (OTF or TTF) or a link to your Google Fonts/Adobe Fonts specification
- A color palette document, screenshot of your brand colors, or a hex code list
Option B — Point to your GitHub repository: Click “Import from repository” and paste your GitHub URL. Claude reads your codebase and automatically extracts design tokens — CSS custom properties, Tailwind config values, color variables, typography definitions, and spacing scales. This is the fastest way to make Claude Design match an existing product’s visual language.
Option C — Upload a Figma export: Export your design system or any polished frame from Figma as a PDF or image, then upload it. Claude analyzes the visual output and infers your brand’s color palette, typeface choices, and spacing conventions.
After uploading, Claude confirms what it extracted: “I found your brand colors (#1A1A2E, #16213E, #0F3460), primary typeface (Inter), and a 4px base spacing scale. These will apply to all projects in this workspace.”
Step 3: Write Your First Prompt
The quality of your first prompt determines the quality of your first draft. Good prompts describe three things: what you want to create, who it is for, and what it should feel like.
Weak prompt: “Make a landing page.”
Strong prompt: “Create a landing page for a B2B project management tool targeting small engineering teams. Professional, minimal, dark mode preferred. Include a hero section with a headline and subheading, a three-column feature breakdown, a customer logo bar, a pricing section with three tiers, and a sign-up CTA at the bottom.”
The difference in output quality is significant. The strong prompt gives Claude the context to make good decisions about layout density, visual hierarchy, tone, and component selection.
What to include in your prompt:
- Document type (landing page, pitch deck, UI mockup, one-pager, design system)
- Target audience and their context
- Visual style or aesthetic references (minimal, bold, warm, corporate, playful)
- Required sections or screens
- Color preferences if not using uploaded brand assets
- Any constraints (must fit one printed page, mobile-first, etc.)
Step 4: Refine the Output
Your first draft will be close but not perfect. That is expected and normal. Claude Design is built for iterative refinement. You have four tools for getting from first draft to final output:
Direct Inline Editing
Click any text element in the canvas and edit it directly — no prompts needed. Change a headline, update a price, fix a typo, swap a placeholder stat for a real one. Direct editing is fastest for small, specific changes.
Inline Comments
Click any element or section and leave a targeted comment. “This section feels too busy.” “The CTA button needs more visual weight.” “The font size here is too small for the target audience.” Claude reads the comment, applies the change to that specific area, and leaves the rest of the design intact. This is more precise than a full chat prompt when you want to adjust one area without risking changes elsewhere.
Conversational Chat Refinement
Type your refinement instruction in the prompt input as if continuing a conversation:
- “Make the hero section more minimal — remove the background illustration and increase white space”
- “Change the pricing section to show annual billing by default with a toggle”
- “The color palette feels cold — warm it up with amber accents instead of blue”
- “Reduce the overall density, increase padding on all sections by 20%”
Claude applies your instructions and regenerates the affected areas. You can chain multiple rounds of refinement without losing the work from previous iterations.
Custom Sliders
For certain design parameters, Claude automatically generates interactive sliders. These appear in the right-side panel and might include controls for:
- Intensity: From subtle and minimal to bold and high-contrast
- Spacing: Tight and dense to open and airy
- Warmth: Cool blues to warm ambers
- Typography weight: Light and editorial to heavy and impactful
Sliders are context-aware — Claude generates them based on what is tunable in your specific design. Drag a slider and the canvas updates in real time. This is the fastest way to explore directional variations without writing prompts.
Step 5: Export Your Work
When your design is ready, click the export menu in the bottom-right corner of the workspace. You have six export options:
PDF — Best for printed materials, pitch decks shared as attachments, and investor one-pagers. Print-ready formatting, embedded fonts.
PPTX — Exports as an editable PowerPoint file. Each slide is individually editable in PowerPoint or Keynote. Best when your audience needs to make changes to the deck themselves.
Standalone HTML — A self-contained HTML file with embedded CSS and any included assets. Open in any browser without a server. Best for sharing a working preview or doing a quick deploy.
ZIP Archive — A structured folder with HTML, CSS, image assets, and a fonts directory. Best when you want to edit the code or hand it to a developer to integrate into a larger project.
Canva — Direct export to your Canva account. The design opens in Canva as an editable project. Best when your client or marketing team works in Canva and needs to make ongoing edits.
Send to Claude Code — This is the most powerful export for builders. It sends a structured handoff bundle to Claude Code containing the full design specification: layout, components, styles, interactions, and annotations. Claude Code then generates production code — React, plain HTML/CSS, or Tailwind — that matches the design. The resulting code is deployable. This is the pipeline from design to working application.
Common Prompt Patterns That Work
Here are five proven prompt structures with the outputs they reliably produce:
1. Pitch deck for a Series A round
“10-slide Series A pitch deck for [Company Name], a [one-line description]. Cover: problem, solution, product demo, market size (TAM/SAM/SOM), traction ($X MRR, Y% MoM growth), competitive landscape, team, go-to-market, financial projections, and the ask ($X raise, terms). Confident, clean, dark background. Brand colors: [your colors].”
Output: A complete 10-slide deck with appropriate chart placeholders, quote callouts, and metric highlight boxes.
2. Product one-pager for a SaaS launch
“Single-page product overview for [Product Name]. Designed to be printed and handed to a potential enterprise buyer. Include: product headline, three core value props, customer logos, key metrics, pricing summary, and a contact CTA. Clean, professional, fits on one letter-sized page.”
Output: A dense, structured one-pager ready for print or PDF distribution.
3. UI mockup for a mobile banking app
“Three-screen mobile app mockup for a neobank targeting freelancers. Screens: home dashboard showing balance and recent transactions, transfer money flow, and savings goals overview. iOS design conventions, dark mode, minimal and trustworthy aesthetic.”
Output: Three mobile-format screens with realistic UI components and navigation patterns.
4. Landing page for a B2B tool
“Landing page for [Product], a [category] tool for [target audience]. Sections: hero with headline and sign-up form, social proof bar with three customer logos, feature breakdown (three columns), a testimonial quote, pricing (two tiers), and footer. Professional, clean, [preferred color palette].”
Output: A full-length landing page with appropriate visual hierarchy and conversion-focused layout.
5. Design system for a new brand
“Design system documentation for [Brand Name]. Include: color palette with primary, secondary, and neutral scales; typography scale from H1 to body text and captions; spacing scale; button variants (primary, secondary, ghost, danger); card components; form inputs; and usage guidelines for each element.”
Output: A structured design system document usable as a shared reference for designers and developers.
How to Get Better Results
Always specify the audience: The same design brief produces very different output for “enterprise procurement managers” versus “teenage mobile gamers” versus “solo founders.” Audience context shapes every decision Claude makes about tone, density, and visual style.
Reference aesthetic anchors: Claude understands references like “in the style of Linear” (minimal, dark, technical), “like Notion” (clean, neutral, document-first), “like Stripe” (precise, confident, blue-heavy), or “like Airbnb” (warm, photographic, friendly). These references compress a lot of style direction into a few words.
Set structural constraints explicitly: “Must fit on one printed page,” “mobile-first with three screens,” “exactly five sections,” or “no more than 200 words total” — constraints help Claude make better layout decisions and prevent over-engineering the output.
Iterate in small focused changes: Asking Claude to “redo everything” often produces inconsistent output. Asking it to “fix just the hero section” while leaving the rest intact is more controllable. Targeted refinement produces better results than full regeneration.
Build and reuse a style guide file: Upload a screenshot of your best Claude Design output as a brand asset. Future sessions use it as a visual reference, making brand consistency more reliable across projects.
Pro Tips From Early Power Users
Upload Figma exports first: If you already have designed assets in Figma, export any polished frame as a high-resolution PNG or PDF and upload it before starting a new project. Claude Design will match the visual language without you having to describe it.
Use “Send to Claude Code” for deployable prototypes: The HTML export looks right in a browser but is not structured for production use. The Claude Code handoff produces clean, component-based code that a developer (or you) can actually ship.
Export to Canva for client handoff: If you are doing client work and your client needs to make ongoing edits without your involvement, export to Canva. Clients already know Canva and can manage the design independently after the initial creation.
Build a personal style guide file: Create a document in Claude Design that captures your preferred visual style — color palette, typography preferences, spacing system, and component conventions. Save the output and re-upload it as a brand asset at the start of every new project. This creates personal brand consistency across all your work.
Combine with Claude’s analysis capabilities: Before designing, paste in your product positioning doc or landing page copy and ask Claude to analyze it. Use that analysis to inform your design prompt. Better strategy inputs produce better design outputs.
FAQ
Q: How do I access Claude Design?
A: Claude Design is inside Claude.ai — click the palette icon in the left navigation sidebar. You must be on a Pro, Max, Team, or Enterprise subscription. Enterprise access may require admin approval from your organization’s Claude workspace administrator. The tool is rolling out gradually, so if you do not see the palette icon yet, check again within a few days.
Q: Do I need a design background to use Claude Design?
A: No. Claude Design is specifically built for people without design skills. You describe what you want in plain language and Claude generates a professional first draft. Refinement happens through conversation, inline comments, or direct editing — no knowledge of layers, frames, constraints, or design tool conventions required.
Q: Can Claude Design read my existing brand assets?
A: Yes. Upload logos, fonts, color specifications, Figma exports, or point Claude at your GitHub repository. Claude extracts design tokens — colors, typography scales, spacing values, border conventions — and applies them automatically to every future project in your workspace. This is the fastest path to brand-consistent output from the first draft.
Q: How long does it take to create a design in Claude Design?
A: A first draft typically takes 30 to 90 seconds from prompt to rendered output. Full refinement to a shippable asset usually takes 5 to 20 minutes, depending on complexity. A pitch deck that would take 3 to 5 hours in Figma can be done in 15 minutes in Claude Design. A landing page that would take a full day with a freelance designer can be production-ready in under an hour.
Q: Can I turn a Claude Design prototype into a working app?
A: Yes — click “Send to Claude Code” in the export menu. Claude Code receives a handoff bundle with the full design specification and generates production code in React, HTML/CSS, or Tailwind that matches the design exactly. You can then deploy the code to Vercel, Netlify, or any hosting provider. The pipeline from first design prompt to live deployed URL can be completed in under two hours.