Claude Design is a new product from Anthropic Labs that turns plain-English prompts into polished visual work. You describe what you want, Claude builds a first version on a live canvas, and you refine it in conversation. It's powered by Claude Opus 4.7, Anthropic's most capable vision model.
A few access notes:
- Where: claude.ai/design, in your browser. Web only — no desktop or mobile app yet.
- Who: anyone on a Claude Pro, Max, Team, or Enterprise plan.
- Status: research preview, with a gradual rollout. If the design canvas isn't loading on your account, check back in a day or two.
It Can Build Decks, Prototypes, Motion Graphics, and More
Claude Design produces real interactive HTML files, not flat images. This is why prototypes can actually be clickable and animations can actually move. The most common use cases:
| Slide decks | full presentations with consistent layouts and navigation |
| One-pagers and marketing assets | partner pitches, recap sheets, internal announcements |
| Animated UI prototypes | clickable mockups of an app or website with real transitions |
| Motion graphics | title cards, lower thirds, animated charts and explainers |
| Mockups and wireframes | landing pages, dashboards, mobile screens |
| Data-driven infographics | charts, comparisons, process diagrams |
Each output exports to Canva, PDF, PPTX, or standalone HTML. For developer handoff, Claude Design produces a bundle that drops directly into Claude Code.
A Two-Paned Interface
The layout is simple – chat on the left and design on the right.
- Left side - the chat panel. This is where you talk to Claude, just like the regular chat experience. Big changes go here, for example: "make this feel calmer," "use our brand colors," "switch to a two-column layout."
- Right side - the canvas. This is where your design appears and updates live as you ask for changes. If it's a deck, you'll see slide thumbnails on one edge. If it's a prototype, you can click through it like a real interface.
Three smaller controls are also worth knowing:
- Inline comments - click any element on the canvas and request a targeted change without describing where it is in chat.
- Direct text editing - click into a text element and just type. Best for typos and quick swaps.
- Tweaks panel - toggle this on and Claude embeds sliders and color pickers right into your design (theme color, spacing, animation timing). Drag them live and watch the canvas update.
Mental model: chat is for the conversation, the canvas is the artifact, the Tweaks panel is your fine-tuning knob.
Your First Project: Build a 30-Second Animated Explainer
Pick something small and useful so you can finish in one sitting. We'll build a 30-second animated explainer for an internal idea such as a new policy, quarterly priority, or product feature. The same pattern works for any animation.
Step 1: Sign in and start a new project
Go to claude.ai/design and sign in with your Claude account. Click New design.
Step 2: Write the brief
Paste this into the chat, with your own details filled in:
Create a 30-second animated explainer about [your topic — e.g., "our new flexible work policy"]. Audience: internal employees. Style: clean, professional, on-brand. Use these brand colors: [your hex codes]. Include 4 short scenes: (1) a title card with the topic, (2) the problem in one sentence, (3) what's changing in three quick points, (4) a closing call to action. Keep text minimal — under 10 words per scene.
Step 3: Answer Claude's clarifying questions
Claude will usually ask one or two questions before it starts, like aspect ratio (16:9 for a screen, 9:16 for mobile), pacing, and tone. Answer briefly and let it build.
Step 4: Watch the first draft play
The animation appears on the right canvas and plays automatically. It will be rough but that's expected. Resist the urge to start over.
Step 5: Refine in three passes
- Big changes in chat: "Slow down scene 2 by a second. Make scene 3 use the bullet style from scene 4."
- Targeted edits inline: click directly on a piece of text or a graphic and request the change ("make this headline shorter").
- Polish in the Tweaks panel: open Tweaks and you'll see sliders for accent color, animation timing, and spacing. Drag them until the pacing feels right.
Step 6: Export
Click Export in the top right. For an animation, choose Standalone HTML to get a self-contained file you can drop into Slack, share by link, or embed on an internal page. For a static one-pager version of the same content, export to PDF or PPTX.
Step 7: Save the prompt
If the result is good, save your brief somewhere you'll find it. Next time you need an explainer, you can start from a template instead of a blank canvas.
Claude Design lowers the bar for visual work in a way most teams will feel quickly. Your next deck, one-pager, or quick animation no longer has to wait for someone with a design tool open. Pick one small project this week, sit with the awkwardness of the blank canvas, and let the first draft be rough. By the second project, you'll know exactly what kind of brief lands well — and the tool will have stopped feeling like a tool at all.
Source: Introducing Claude Design by Anthropic Labs — Anthropic, April 17, 2026 → https://www.anthropic.com/news/claude-design-anthropic-labs
