Describe it, see it, ship it — and how to make everything it makes look like your brand, not like AI.
| Part | Topic | Note |
|---|---|---|
| 01 | What it is | the map — interface, inputs, the brand feature |
| 02 | How to work it | the craft · example briefs · live demo |
| 03 | From canvas to shipped | sharing, exports, Claude Code handoff |
Claude Design is a beta — all product claims are date-stamped July 2026 and sourced on the closing slide.
The map before the craft: the canvas, what it makes, what you can feed it — and the brand feature that sets it apart.
Under the canvas, a frontier Claude model (Opus 4.7 at launch) writes actual working code — which is why outputs can be interactive, and why the Claude Code handoff in part 03 works.
Two panes, one rule: the conversation drives structure, the canvas takes the detail work.
Pitch decks, presentations, briefs — the classic "I need slides by Thursday."
Landing pages, social assets, campaign material — marketing without the queue.
Product screens to react to — before engineering spends a sprint on them.
Clickable flows without writing code — stakeholders drive it, not squint at it.
"Show me four directions" — compare side by side instead of marrying idea #1.
Because it writes real code: prototypes with voice, video, shaders & 3D.
One tool, one skill to learn — the same describe → refine loop drives every output type.
Codebase tip from early users: attach the relevant subdirectory, not the whole monorepo — very large repos cause lag.
| Question | Answer — July 2026 |
|---|---|
| Which plans? | Pro, Max, Team, Enterprise — included, from ~$20/mo. No separate license. |
| What does it burn? | The same usage pool as chat & Claude Code — no separate design allowance; optional extra usage. |
| What burns most? | Complex projects on large codebases — attach less, spend less. |
| Enterprise? | Admin must enable it in org settings first. |
| Where does it run? | Web & desktop app only — no mobile yet. |
Budget mindset: a design session spends the same tokens your coding sessions do — plan heavy design days like heavy coding days.
The craft: the loop, the brief, the three refinement channels — with example prompts to steal, and a live build.
If you remember one thing from this part: don't judge generation one.
"Make me a landing page for our new API."
→ a generic template with placeholder everything.
"Build a landing page for our new Payments API, aimed at backend developers. Hero with a one-line tagline and a curl snippet, three feature cards with icons, a pricing section with two tiers."
→ reviewable in one shot.
The formula: who it's for · which sections · what goes in each. You're not designing — you're briefing, like you would an agency.
The classic mistake: structural work via twenty inline comments — or asking chat to nudge one button. Match the channel to the size of the change.
"Rearrange the dashboard: metrics in the top row, the chart below."
"Turn this one-pager into a 6-slide deck — one section per slide."
"Tighten the spacing between form fields to 8px."
"Use the primary brand color here."
"Change this to a dropdown instead of radio buttons."
Vague feedback is the #1 failure mode — "this doesn't look right" gives the model nothing. Name the component, give a number when you have one.
Treat the canvas like a cheap sketchbook, not a precious file — branching costs one sentence.
"A 8-slide pitch deck for [product] for non-technical execs: problem, solution, demo screenshot, market, pricing, roadmap, team, ask."
"An analytics dashboard: revenue, active users & churn as top-row metric cards, a monthly trend chart below, filterable by region and plan."
"A 4-screen mobile onboarding flow: welcome, permissions, profile setup, first-run tips — clickable, with a progress indicator."
"A request-intake form for the legal team: requester info, request type dropdown, conditional fields per type, urgency, file upload."
Same formula every time: audience · sections · content per section · one constraint. Copy, adapt, iterate.
Live The point is the method, not a finished artifact — five minutes, hard stop.
Use only if the live build stalls. Narrate the captured before/after per channel, then move on.
Share it, export it, or hand it to Claude Code — pick by where the design needs to end up.
Stakeholder comments become refinement input — the review round and the iteration round are the same round.
Export button, upper right. Rule of thumb: URL for feedback, file for meetings, handoff for engineers.
Design explores, Code ships — and the shared design system keeps both honest.
Brief like a creative director: audience · sections · content · one constraint. Start from text, a file, a site, or a codebase.
Chat for structure, comments for tweaks, hands for the rest. Judge iteration 4, not 1 — and branch with one sentence.
URL for feedback, file for meetings, handoff for engineers — the design system rides along everywhere.
Homework: steal one brief from slide 14 and run it on a real task this week — on your plan, it's already included.
Claude Design is a beta — features, limits and plan details move. Re-check the Help Center before quoting externally. The 1M-users-in-week-one figure follows the series fact pass for deck 01 (July 2026).