✺ Anthropic Labs · New

Design landing pages,
prototypes & decks
with Claude.

Describe what you want. Claude generates a first version in minutes, sticks to your design system, and lets you refine it through conversation — then export to Canva, PPTX, HTML, or hand off to Claude Code.

Free with Claude Pro Works with your design system Export anywhere
✺ Claude Design · untitled project
Landing Deck Prototype
⏎ Generate
01 · Hero — Version A
1440 × 900
A
Aria · commented
"make the headline bolder"
Brand tokens synced
from acme/design-system
C
Handoff ready
→ Claude Code
Landing pages Clickable prototypes Pitch decks Marketing sites Social assets Onboarding flows Wireframes Design explorations One-pagers Brand systems
01 · What you can make

Polished work,
four ways.

Claude Design isn't a single-purpose generator. From the same conversation, produce the landing page, the pitch deck, the clickable prototype, and the social campaign — on-brand, ready to share, ready to ship.

✺ Preview landing-page.html · 1440 × 900
Brewed on purpose.
01 · ONBOARDING
Welcome to
Ember.
Start tracking your morning in a cozy, gentle way.
Get started →
02 · HOME
TUE · 7:42 AM
Good morning,
Marcus.
Coffee12 oz
Journal3 min
Walk
03 · STREAK
14
day streak
03 / 14 · MARKET
The opportunity
Every team is a design team now — whether they know it or not.
more design assets shipped per quarter since 2022
71%
of new collateral ships from non-designers
02 / 14
A short story about a long problem.
04 / 14
Enter — the workflow nobody has yet.
05 / 14
1 / 4
Every team is a design team.
↓ swipe
2 / 4
PMs make pages. Founders ship pitches.
Claude Design
3 / 4
But most tools still assume you have a designer.
— 2026
4 / 4
We built one
that doesn't.
Try it →
02 · Why it's different

Not another
AI canvas.

Generators make pretty pictures. Editors require you to already know what you want. Claude Design sits between them — a design partner that understands your brand, your intent, and the full production chain.

vs. a blank canvas

Start with a first version, not a blank page.

Describe what you're making. Claude proposes a complete, on-brand direction you can react to — then refine through conversation, inline comments, and direct edits. Not pixel-painting from zero.

vs. generic generators

On-brand, by default.

Point Claude at your codebase or design files and it builds your team's design system — colors, type, components. Every new project stays in family.

vs. Figma / Framer

Generate, don't just edit.

Make the first version happen in a sentence. Then drop into a canvas you know — with tweaks, variants, and fine-grained control.

vs. Canva

Start from context, not a template.

Upload a doc, paste a URL, reference your repo — output that understands what you're making. Export back to Canva when you need deep manual polish.

vs. v0 / Lovable

Visual craft, not just code output.

Covers landing pages, decks, prototypes, and campaign assets — not only apps — and still hands the design straight off to Claude Code when you're ready to build.

03 · How it works

From prompt to
production.

One conversation. Five moves. Watch the story of a landing page go from a sentence to something a developer can ship.

01

Prompt

Describe what you're making — or paste a brief, doc, URL, or repo link.

02

Refine

Ask for variants. Comment inline. Drag, edit text, swap colors — or just keep talking.

03

Share

Invite your org. Viewers, commenters, editors — all the permissions you'd expect.

04

Export

Canva, PPTX, PDF, HTML. The file lands where your workflow already lives.

05

Handoff

One click sends the design straight to Claude Code as a build-ready bundle.

✺ Conversation Step 01 · Prompt
A
YOU · 09:14
Landing page for Ember — a cozy morning journal app. Warm, confident, not startup-y. Waitlist CTA.
📎 brief.pdf
🔗 github.com/acme/ember
CLAUDE · 09:14
I read your brief and synced tokens from your repo. Here's a first version — warm cream background, Fraunces display, Claude orange accent. Variants explore a serif-heavy hero, a split image lockup, and a dark editorial direction.
HERO · A
Mornings,
gently tracked.
A
make it bigger & more italic
You: bolder, more italic headline.
Claude: got it — bumped display to 108px, pulled the italic forward, and nudged line-height down a notch. Want me to apply this to the section headers too?
Apply to all headers Try less italic Show 3 variants
SHARED WITH ACME · SET PERMISSIONS
AR
Aria Rahimi
Can edit ▾
MK
Marcus Kline
Can comment ▾
P
Anyone at Acme
acme.com · org domain
View only ▾
🔗 Link copied
C
Send to Canva
fully editable · 14 pages
P
Export .pptx
editable shapes + text
Save as PDF
print-ready, tagged
</>
Standalone HTML
one file · works offline
HANDOFF BUNDLE · ember-landing v1.2
$ claude code open ember-landing.bundle
→ routing /app · /pricing · /waitlist
→ tokens synced from acme/design-system
→ 14 components · 3 variants · 1 hero animation
scaffold ready — switching to Claude Code…
Open in Claude Code →
Download bundle
04 · Brand consistency

Your design
system, learned.

Point Claude at your codebase and design files. It studies them on the way in — colors, type, components, spacing — and uses them in every project after. New work feels like it came from your team, because it did.

Input · acme/design-system
REPO
tokens/colors.ts
tokens/type.ts
components/Button.tsx
components/Card.tsx
FILES
figma/foundations.fig
brand/guidelines.pdf
brand/logo.svg
↓ Claude reads, synthesizes, adopts ↓
Output · tokens, in use
/accent
/ink
/paper
/sage
/butter
/lilac
displayFraunces 72/400
bodyGeist 16/500
monoGeist Mono 12/400
✺ New landing page · using acme tokens ✓ on-brand
Ship the site,
not the pixel arguments.
Uses /accent, Fraunces 72/400, and your Button component — every new project, automatically.
Get started → Learn more
// on every new project
import tokens from "acme/design-system"
apply tokens to "new landing page"
→ colors · type · components · spacing · motion
05 · Who it's for

Built for anyone
who ships.

Designers use it to explore faster. Everyone else uses it to clear the starting line — with work that holds up next to what a designer would make.

Designers

Explore twenty directions in the time it took to make one. Keep the taste; drop the grunt work.

  • Variant exploration
  • System-wide edits
  • Late-stage polish

Founders

Put a landing page, pitch, and one-pager in front of investors before lunch — without waiting on a designer you don't have yet.

  • Investor pitches
  • Launch sites
  • Early brand

PMs

Turn a spec into a clickable prototype. Review-ready, stakeholder-proof, same afternoon.

  • Clickable flows
  • Spec mockups
  • Review readouts

Marketers

Campaign pages, launch emails, social sets — shipped as a family, not stitched together in five tools.

  • Campaign pages
  • Social sets
  • One-pagers
06 · Proof

Teams are
already shipping.

Early partners are using Claude Design to compress the messy middle of design work — with numbers their comms teams can actually say out loud.

2
Complex interactive pages that used to need more than twenty prompts now take two.
1
What used to be a week of back-and-forth from rough idea to working prototype is now a single conversation.
Designs land in Canva fully editable — our marketers pick up where Claude left off without losing a pixel.
Anthropic Labs Canva Brilliant Datadog Linear Ramp
07 · Export & handoff

Designs that
keep moving.

Most AI design tools die at the last mile. Claude Design was built the other way around — every output is portable, editable, and ready for the person who has to ship it.

C Canva editable P PowerPoint .pptx PDF print-ready </> HTML standalone F Figma import P Keynote .key M Markdown docs Public share link
→ Claude Code

Ship the design itself.

One click bundles your design — tokens, components, routes, copy — and sends it to Claude Code as a build-ready project.

$ handoff → claude-code
14 components · 3 routes · tokens wired
switching context…
08 · Questions

Good questions,
straight answers.

The honest stuff. What it's for, what it isn't, how it fits, what it costs.

Who is Claude Design actually for?+
Designers, PMs, founders, and marketers. Designers use it to explore and accelerate; non-designers use it to ship first versions of landing pages, decks, prototypes, and campaign assets without waiting on design bandwidth. It doesn't replace a skilled designer on complex work — it removes the blank page.
Will it match our brand?+
Yes. Point Claude at your codebase, design files, or brand guidelines during onboarding. It extracts your colors, type, spacing, and components into a team design system that every new project inherits automatically.
Can my team work on it together?+
Share with your org, a link, or specific people. Set viewer, commenter, or editor permissions. Leave inline comments, edit text directly, adjust spacing, colors, and layout — same collaboration surface you're used to.
What can I actually export?+
Canva (fully editable), PPTX, PDF, HTML, and a developer handoff bundle straight to Claude Code. The handoff includes tokens, components, and routes, so the person building it starts with a running scaffold — not a flattened mockup.
How does it compare to Figma, Framer, Canva, or v0?+
Those tools each win at one slice: editing, publishing, templates, or app-scaffolding. Claude Design sits earlier — turning a description into a first version — and then exports into whichever of those tools your team actually uses.
What does it cost?+
Included with Claude Pro, Max, and Team plans. Complex generations consume usage faster than text-only work, so teams on heavier projects should plan for higher token consumption.
Will this replace our designers?+
No. It replaces the blank page and the thirty-minute-warmup phase. Designers we've talked to treat it like a tireless junior who hands over directions to react to — which is exactly when experienced taste pays off.
Ready when you are

Design with
conversation.

Free with Claude Pro. Bring your design system. Ship your first page today.

Tweaks live preview