Claude Design is Anthropic's visual creation tool built directly into Claude. You describe what you want to build, and Claude generates a working visual draft on a live canvas. Then you refine it through conversation, inline comments, or direct editing until it is exactly what you need.
It is not a simple image generator. Claude Design produces fully interactive prototypes, working presentations, editable documents, and code-powered visualizations. The output is real HTML, CSS, and JavaScript that you can export, hand off to developers, or hand off to another tool using an available export option.
Claude Design is on every plan, including Free, and it is on by default. It shares your plan's usage limits (Claude Code included), so there is no separate allowance and bigger projects use more.
How to Access It
In a conversation, request a design or choose Output > Design. In the Artifacts tab, choose a Design template. Claude Code also supports /design. The old standalone site at claude.ai/design still works until December 14, 2026, when it closes and sends you to Claude.
Heads up. Made projects on claude.ai/design? Before December 14, download the ones you need, migrate your design systems from the banner on the Artifacts page, and save anything you need from those chats and comments. Chats and comments do not carry over, and public project links stop working.
On your phone you can request, view and edit designs from the Artifacts tab. Change sharing settings on web or desktop. Want to see where Design fits next to everything else in Claude? The Claude Chat, Cowork, Code and Design guide lays it all out.
Start with a clear brief: what the design is for, who will use it, the sections it needs, its dimensions and any real brand assets. Give it the content before asking it to polish the layout.
Your first design
Build me a landing page for a fitness app called PeakForm. Dark theme with neon green accents. Include a hero section with headline, three feature cards, pricing table with 3 tiers, and a footer with social links.
Use sample content for this first practice project. Label invented prices, testimonials and business details as placeholders.
What You Can Build
Interactive Prototypes
Fully clickable prototypes with working navigation, hover states, animations, and transitions. These are not static mockups. They behave like real apps.
Build an interactive prototype for a task management app. Include: - A sidebar with project categories - A kanban board with drag-and-drop columns (To Do, In Progress, Done) - A task detail modal with due date, assignee, and description fields - Dark mode toggle in the top bar Make all interactions functional.
Presentations and Pitch Decks
Full slide decks with consistent styling, transitions, and speaker-ready layouts. Claude handles the structure, design, and content.
Create a 10-slide pitch deck for a Series A fundraise. The company is an AI-powered legal research platform. Include: title slide, problem, solution, market size, product demo screenshots, business model, traction metrics, competitive landscape, team, and ask. Use a clean, modern design with navy blue and white. Professional but not corporate.
Social Media Graphics
Instagram posts, carousel slides, story templates, LinkedIn banners, Twitter headers, and any other social format. For carousels you make every week, the Instagram Carousel Generator sets up a Claude Project that does it on repeat.
Design an Instagram carousel (5 slides) about '5 AI Tools You Need in 2026.' Style: bold sans-serif headings, dark gradient backgrounds, neon blue accent color. Each slide should have one tool name, a one-line description, and a visual icon. First slide is the hook, last slide is the CTA.
Posters and Marketing Materials
Design a poster for a tech conference called 'Build 2026.' Date: September 15-17. Location: San Francisco. Style: futuristic, dark background, holographic gradient accents. Include speaker headshot placeholders, sponsor logos area, and QR code for registration.
Documents and Resumes
Professional documents with proper typography, layout, and formatting. Resumes, one-pagers, case studies, and reports.
Design a modern resume for a senior product designer. Two-column layout. Left column: contact info, skills bar charts, education, certifications. Right column: experience with role, company, dates, and 3 bullet points each. Clean sans-serif font. Subtle color accents. Print-ready.
3D and Interactive Visualizations
Claude Design can build code-powered prototypes with 3D graphics, animations, WebGL shaders, and even voice or video integration. This is what Anthropic calls "frontier design." If you want to take this all the way to a full website, Claude Can Build Insane Cinematic 3D Websites is the next step.
Build an interactive 3D solar system. Let me click on each planet to see its facts: diameter, distance from the sun, orbital period, number of moons, and surface temperature. Use realistic colors and relative sizing. Add orbital paths and a slow rotation animation. Include a zoom control.
The Edit Mode
Refine through chat, inline comments or direct canvas controls. Use chat for structure, comments for a particular element, and direct editing for spacing or alignment. If a comment disappears, repeat it in chat.
Give a precise revision
Keep the current colors, typefaces and content. Move the primary button directly below the opening paragraph. Reduce the space above the next section. Check the layout at 375px and 1440px, including keyboard focus and text wrapping. Show me the result before making any other changes.
Review a complete section before polishing every detail. A correct layout with rough copy is easier to fix than an attractive page with the wrong structure.
Design Systems
New projects pick up your organization's design system automatically. You can also import one from a GitHub repo, design files or uploads, or from a local codebase with /design-sync in Claude Code. Include colors, typography, components and examples.
Give Claude the real logo and fonts you want it to use. A screenshot is a reference for placement and style, not a replacement for editable text and components. Ask it to identify missing assets instead of inventing a substitute.
Use the attached brand files and reference design. Preserve the supplied logo, colors and typefaces. Create reusable button, card, heading and spacing styles from those assets. Explain any missing information before choosing a substitute. Apply this system to the current design and show the core components together for review.
Import and Export
Bring the content, screenshots and relevant project files into your brief. Click Export at the top right and choose what matches the next step: PDF for review, PPTX or Export to Google Slides for slides, standalone HTML for a browser or .zip for a file bundle. Export also lists a few third-party tools and a handoff to Claude Code. Designs stay private until you use Share.
Open the exported file in its destination. Check fonts, page breaks, links, images and interactions. A clickable prototype still needs its real data, authentication and other production behavior implemented before launch.
For a developer handoff, include the purpose, responsive layouts, expected interactions and a list of unfinished behavior. For a presentation, check every slide in the app you will actually present from.
Tips and Best Practices
- Be specific about dimensions. "1080x1080" or "16:9" gets you the right size on the first try.
- Use reference images. Upload a screenshot of a design you like and say "make something like this."
- Start broad, then refine. Get the full layout first, then use Edit mode or comments for details.
- Save before a large revision. Built-in version history is not available yet, so ask Claude to "save what we have and try a completely different approach," or keep an export.
- Export early and often. Check how your design looks in the target tool before finalizing.
If a request fails, save your latest prompt, refresh and inspect the current project before retrying. Do not assume an error means the previous change was saved.
20 More Use Case Prompts
These are the complete examples from the downloadable guide. Replace the sample details with your own. Any prices, companies, reviews, statistics or guarantees in an example are placeholders until you supply real ones. Test prototype controls before using them with real people.
1. Business Card
Design a professional business card. Front: name, title, company logo area. Back: phone, email, website, LinkedIn QR code. Minimal design, dark theme.
2. Email Newsletter Template
Design an email newsletter template for a SaaS company. Header with logo, hero image area, 2-column feature section, blog post previews (3), CTA button, and footer with unsubscribe.
3. Product Launch Announcement
Create a product launch graphic for social media. Show the product name prominently, key features as icons, launch date, and a 'Coming Soon' badge. Size: 1080x1080 for Instagram.
4. Brand Style Guide
Build a brand style guide showing: - Color palette with hex codes - Typography scale (h1 through body) - Button styles (primary, secondary) - Card components - Spacing and grid system - Do's and don'ts examples
5. Analytics Dashboard
Build an analytics dashboard with: - Top bar: date range picker, filters - KPI cards: revenue, users, churn, MRR (with trend arrows) - Line chart: monthly revenue trend - Bar chart: signups by channel - Table: top 10 customers by spend Dark theme, make it interactive.
6. Financial Report Dashboard
Design a quarterly financial report dashboard. Include P&L summary, cash flow waterfall chart, revenue by segment donut chart, YoY comparison table, and expense breakdown. Clean, corporate style.
7. Interactive Quiz
Build an interactive quiz about world geography. 10 multiple-choice questions with immediate feedback (correct/wrong with explanation). Show score at the end with a results breakdown. Add a 'Try Again' button.
8. Course Curriculum Overview
Design a visual course curriculum for a 12-week data science bootcamp. Show each week as a card with topic, key skills learned, and a progress bar. Make it scrollable and interactive.
9. Portfolio Website
Build a portfolio site for a UX designer. Sections: hero with name and tagline, case study grid (6 projects with thumbnails), about me with photo placeholder, skills list, contact form. Minimalist, lots of white space.
10. Wedding Invitation
Design a digital wedding invitation. Elegant serif fonts, watercolor floral borders, names of the couple, date, venue, RSVP button, and a countdown timer. Soft blush and sage palette.
11. Mobile App Onboarding
Design a 4-screen mobile onboarding flow for a meditation app. Each screen: illustration area, headline, body text, progress dots, and 'Next' button. Last screen has 'Get Started.' Calming blue and purple palette.
12. Saas Pricing Page
Build a SaaS pricing page with 3 tiers: Starter ($19/mo), Pro ($49/mo), Enterprise (custom). Feature comparison table below the cards. Annual/monthly toggle. Highlight the Pro tier as 'Most Popular.' Add FAQ section.
13. Interactive Map
Build an interactive world map where I can click on any country to see: population, capital, GDP, and flag. Use color coding by continent. Add zoom controls and a search bar.
14. Music Visualizer
Create a music visualizer with audio- reactive bars, waveforms, and particle effects. Let the user choose between 3 visualization styles. Include play/ pause and volume controls. Use WebGL.
15. Product Page
Design a product page for premium wireless headphones. Image carousel, color selector (3 options), price with strikethrough original, Add to Cart button, specs table, customer reviews (star ratings + text), and related products section.
16. Checkout Flow
Build a 3-step checkout flow: Step 1: Cart summary with quantities Step 2: Shipping info form Step 3: Payment with card fields Include a progress bar at the top, order summary sidebar, and trust badges. Make all steps interactive.
17. Infographic
Create an infographic about 'The State of AI in 2026.' Include: timeline of major launches, market size comparison chart, adoption rates by industry, and a prediction section. Vertical scroll layout, modern flat design.
18. Comparison Chart
Build an interactive comparison chart for 5 project management tools. Let the user toggle which tools to compare. Categories: pricing, features, team size, integrations, mobile app, and overall rating.
19. Mini Game
Build a simple memory card matching game. 4x4 grid of face-down cards. Click to flip, match pairs. Track moves and time. Add a win screen with confetti animation. Fun color scheme.
20. Animated Logo
Create an animated logo intro for a YouTube channel called 'TechPulse.' The letters should animate in one by one with a pulse effect. Add a subtle sound wave graphic behind the text. Loop the animation.
Four More Layout and Revision Prompts
Mobile Wireframe
Create a wireframe for a mobile banking app. Include screens for: - Home dashboard (balance, recent transactions, quick actions) - Send money flow (3 steps) - Transaction history with filters - Settings page Low-fidelity, grayscale, with annotations explaining each section.
Course Landing Page
Build a landing page for an online course called 'AI for Beginners.' Include: hero with headline and CTA button, course curriculum accordion, instructor bio section, student testimonial cards (3), pricing with money-back guarantee badge, and FAQ section. Light theme, friendly colors.
Chat Refinement Examples
# Broad changes Make the entire design darker. Switch to a navy/charcoal color scheme. # Structural changes Move the pricing section above the testimonials. Add a FAQ section below. # Style changes Make all headings larger. Use Inter font instead of the default. Round all button corners to 12px. # Content changes Rewrite the hero headline to be more action-oriented. Change the CTA from 'Learn More' to 'Start Free Trial.'
Describe a Design System
Create a design system for my brand. # Colors Primary: #1B3A5C (dark navy) Secondary: #C88B2E (gold) Accent: #2E8B7A (teal green) Background: #F8F9FA (light gray) Text: #3A3A3A (dark gray) # Typography Headings: Inter Bold Body: Inter Regular, 16px Captions: Inter Light, 14px # Components Buttons: rounded (8px), primary color Cards: white, subtle shadow, 12px rounded corners Icons: outlined style, 24px Save this as my default design system and apply it to all future projects.
After the design-system prompt, confirm where it was saved and attach or select that system when starting another project. A request in a prompt is not proof that every future workspace has inherited it.
Common Problems
- The design looks right but a button does nothing: describe the exact click and expected result, then ask for that interaction to be implemented and checked.
- A brand detail keeps changing: attach the actual asset and name the elements that must remain fixed.
- The mobile version feels cramped: give the target width and ask for a full-page review, including long titles and empty states.
- The export differs from the canvas: inspect the export in its destination app and return a screenshot of the specific problem.
Quick Reference
| Job | Best starting point |
|---|---|
| Start a design | Conversation, Output > Design, or a Design artifact template |
| Revise structure | Explain the change in chat |
| Fix one element | Leave an inline comment |
| Tune spacing | Use canvas editing on web or desktop |
| Keep brand consistency | Import the existing design system and assets |
| Save a milestone | Ask Claude to save the project, or export a copy, before a large revision |
| Handoff | Export the format the next person needs and list unfinished behavior |
DO THIS TODAY: Pick one small design, give Claude your real content and build the complete first version. Make three specific corrections, export it, and open the export before calling it finished.
Published · Checked