Claude Design and Motion

You describe a mockup, a clickable prototype or a landing page, and Claude draws it on a canvas next to the conversation. It also does one-pagers and decks. Once the first version is out, you make changes by voice, by typing, or right on the canvas.

Since October 8, 2026, Design is out of beta and included in every plan, Free included.

Where it comes from

The product has moved a lot in six months. If you read a tutorial in the spring, a good part of it is out of date.

Were you using claude.ai/design? Migrate before December 14

Your design systems don't move into Claude on their own. A single migration brings over the ones for your whole organization, and anyone with access to Design can run it.

1. Open the Artifacts page in Claude.
2. Click "Migrate team design systems" in the "Claude Design lives here now" banner. If you closed it, the option is in the Claude Design menu at the top right.
3. Confirm with "Migrate". On an individual plan, the migration starts right away.
4. Check the "Migrated" list. Anything that failed shows up under "Couldn't be migrated", with the reason (often: too large).

Two cases never go through: empty design systems, and those that started from a built-in starter theme, even if you edited them.

Your projects stay on the standalone site until it shuts down. To keep a copy, open them one by one: Share, then "Project HTML", "Project archive" and Export. You get a .zip, and it doesn't count against your limits.

What you do with it

Design is an artifact template (chapter 4): everything you create lands in the Artifacts tab.

What comes out well:

• Interactive prototypes, to get a user flow tested without writing code.
• Landing pages and full websites.
• A one-pager pulled from a sales proposal.
• App mockups: a 4-screen onboarding, a dashboard with filters.
• Marketing visuals that follow your brand guidelines.
• Three directions for the same screen, when you don't know yet what you want.

For decks, Claude switches to the Slides template (chapter 4). Same family, with your design system applied.

The design system

You import it once from a GitHub repo, design files or uploads. After that, every new project inherits it. Claude checks on its own that its output matches the system and fixes things before showing you the result.

On Team and Enterprise, an owner can set a default design system for the whole organization, and an admin role can lock a standard system so nobody changes it.

How to start

1. In a conversation, ask for a design: "Make a one-pager from this proposal". Or pick Output > Design in the message box. Or open the Artifacts tab and choose a Design template.
2. Attach the design system to use. If it lives in a React repo, /design-sync in Claude Code converts it and sends it to Design. The first sync checks every component and can take a few hours on a large repo.
3. Add context: screenshots, a deck whose style you like, a repo.
4. Describe the goal, the layout, the content and the target audience.
5. Iterate: the chat for structure, a comment pinned on an element for a targeted fix. To move, resize or align, edit directly on the canvas.
6. Export or share.

Example of a prompt that works: "Create a monthly revenue dashboard with filters by region and product line. It has to work on mobile." The more precise you are, the less you iterate.

What it looks like in real life

I rebuilt my website with Claude Design in 2 hours. And I burned through 51% of my Max plan doing it. Keep that number in mind before you start a big project.

Export, send, hand off

Export button at the top right:

You can also send your design to a third-party tool: Adobe (Express, Experience Manager, Journey Optimizer), Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel and Wix.

Handoff to Claude Code. When a design needs to become a real product, you send it to your local coding agent or to Claude Code on the web. Claude Code picks up your work as is. The other way around, /design in Claude Code imports a design into your codebase or turns your code into a live prototype.

Sharing. A design starts private. You choose who can view, comment on or edit it. On Team and Enterprise, sharing stays internal to the organization by default.

Motion: coded animations

Motion turns your content into a short animation, like a 30-second explainer for a team meeting or an animated chart to show the board. It also works for a product demo meant for client onboarding.

Motion doesn't use a video generation model. Claude writes code that animates your text, charts, shapes and images. So no filmed footage, and no generated people. The upside is that you change a word, a number or a timing without the rest moving.

Who has access. Beta since October 8, 2026, on Team and Enterprise only. On by default on Team. On Enterprise, the owner turns it on in Organization settings > Artifacts. No Motion on Free, Pro or Max for now.

How to do it.

1. Ask for an animation in a chat ("Turn this quarterly report into a 30-second explainer for the all-hands"), or pick Output > Motion.
2. Say who will watch it, where it will be shown and roughly how long it should be.
3. Attach your data, your report or your images, so the animation starts from your content.
4. Make changes in the chat ("Slow down the second scene") or directly in the editor.
5. Export to MP4.

To go further, you open the animation in Adobe, Descript, HeyGen, Higgsfield, invideo, Luma AI or Runway. Canva and Captions are announced.

Design, Slides, Canva or Figma

My take: Design gets a clean first version out fast, and it's handy for comparing options. It's less comfortable with a file several people rework for months. Anthropic says so itself: simultaneous multi-person editing is still basic, and there's no version history yet. For that kind of work, Figma keeps the edge.

The traps

• It uses a lot. My website redesign, above, gives you the order of magnitude. Large repo, many iterations: the bill climbs fast.
• Audio isn't documented. Anthropic's help center never mentions reading a sound file. To sync an animation to a voice, provide a timestamped transcript.
• Large repo, slow browser. For a very large repo, Anthropic recommends linking it from Claude Code (/design-sync) rather than in the browser.
• No version history. Before heading in another direction, tell Claude: "Save what we have and try a completely different approach."
• Comments that vanish. If Claude ignores a comment pinned on the canvas, paste the feedback into the chat. That's the official workaround.
• The design system reflects its source. A messy codebase gives messy output.
• On mobile, you can edit a design since October 8, 2026, but not change its sharing settings.

How much it costs

No separate price. Design and Motion count against your plan's limits, the same ones as chat and Claude Code: a session that resets every 5 hours plus a weekly limit. Anthropic doesn't publish any numbers.

When you hit the limit, Design is unavailable until the reset. If you turned on usage credits (paying at API rates beyond your plan), you keep going. How to read your usage and save on it: chapter 11.

Sources

• Introducing Claude Design by Anthropic Labs (April 17, 2026)
• Claude Design now stays on brand for daily work (June 17, 2026)
• Build live dashboards and animate explainers with Claude (October 8, 2026)
• Get started with Claude Design
• Migrate from standalone Claude Design to Claude