Skill Locker
All posts
byJames Cooper

How to use Claude Design (and where it fits with Claude Code)

A practical, honest guide to Claude Design for non-designers: what it is, the describe-build-refine loop, design systems, the Claude Code handoff, exports, and real limits.

Claude DesignNon-DevelopersPresentations

If you've ever stared at a blank Figma canvas wondering where the toolbar even is, Claude Design is built for you. You describe what you want in plain English, and Claude produces a first version — a slide, a landing page, a one-pager, a clickable prototype — that you then shape by talking to it. No layers panel to learn. No constraints to wrestle. This guide covers what it actually is, how the build-and-refine loop works in practice, how it hands off to Claude Code, and where it still falls short. By the end you'll be able to make a pitch deck or a course one-pager start to finish.

One thing first, since this is a fast-moving product. Everything below marked as fact comes from Anthropic's own announcement and coverage from VentureBeat, Engadget and Fast Company. Anything I'm reasoning about myself, I'll flag as my read.

What Claude Design actually is

Claude Design is an Anthropic Labs product that launched around April 2026 and, per Anthropic, passed a million users in its first week. It had a significant update on 17 June 2026. It runs on Opus 4.7 and is currently a research preview available to Pro, Max, Team and Enterprise plans. So you need a paid Claude subscription to get in, and "research preview" means things will keep shifting under you.

The core idea is simple. You tell it what you're trying to make, it builds a first draft, and then you refine through conversation. You're not placing rectangles by hand. You're directing. That's the whole pitch, and it's why non-designers can use it where Figma asks them to first become designers.

You can feed it three kinds of input. A plain text prompt ("a one-page sales sheet for my £499 productivity course"). Uploaded files, whether images or DOCX, PPTX and XLSX documents. Or you can point it at your codebase. There's also a web capture tool that grabs elements from your live site, so a prototype matches your real product rather than a guess at it.

The build-and-refine loop, step by step

This is the part worth internalising, because it's where the tool either works for you or frustrates you.

Describe. Start broad. "Build me a pitch deck for a seed-stage fintech, ten slides, problem-solution-traction-team-ask." Claude generates the whole thing. Don't over-specify on the first pass. You're getting a draft to react to, not a final.

Refine four ways. Once you have something on the canvas, your options go well beyond "type another prompt":

  • Conversation — "make slide three less busy, drop the stat cards to two."
  • Inline comments — leave a note pinned to a specific element, the way you'd comment on a Google Doc.
  • Direct on-canvas edits — drag, resize and align elements yourself.
  • Custom sliders — Claude generates sliders for things like spacing, density or colour intensity, so you can dial a look without describing it in words.

That mix matters. The slider thing in particular is clever for non-designers. "More corporate / more playful" is easier to feel out with a slider than to phrase. My honest read is that you'll live mostly in conversation and sliders, dipping into direct edits when Claude gets something 90% right and you just want to nudge it.

Export. When it's done, you push it out: to an internal org URL, a folder, Canva, PDF, PPTX, or standalone HTML. The June update reportedly widened this to platforms like Vercel, Replit and Wix, which is the bit that turns "a mockup" into "a thing that's actually live."

Design systems: the feature that earns its keep

This is where Claude Design separates from a generic "AI makes a slide" tool. During onboarding it builds a design system from your codebase and design files: your colours, your typography, your components. Every later project automatically uses that system, and Claude self-corrects against it so things don't drift.

For a non-designer running a brand alone, this is the quiet win. The reason your materials look "a bit off" usually isn't bad taste. It's inconsistency. Slightly different blue here, a different heading font there, padding that's tight on one page and loose on the next. A design system kills that. You set it once and every one-pager, deck and landing page inherits it. The June update reportedly let you import a system from GitHub or raw files too, so you're not starting cold.

If you've read my piece on Claude skills for designers, this is the same principle from the other direction. The value of AI in design isn't originating taste. It's applying rules identically every time.

The handoff to Claude Code

Designs that stay as pictures aren't worth much when you're trying to ship a product. This, to me, is what makes Claude Design more than a Canva rival.

Claude Design packages a handoff bundle and sends it to Claude Code with a single instruction. From the Claude Code terminal, a /design command keeps the design canvas and the codebase in sync, both ways. So a change in the code can reflect back to the design, and the other way round, instead of the usual one-way "designer hands a static file to a developer and hopes."

If you're non-technical, don't switch off here. You don't have to write the code yourself. The realistic version of this for a solo founder: you design a landing page in Claude Design, hand it to Claude Code, and Claude Code builds the actual working page. If the terminal still feels like a wall, my how founders use Claude Code and the non-developer starting point cover the on-ramp. It's one install, then plain English.

A worked example: a course one-pager

Say you're a course creator who needs a one-page sales sheet by tonight. Here's the flow.

  1. Prompt: "A one-page sales sheet for my course, Ship Your First Newsletter in 30 Days. Sections: the promise, who it's for, what's inside (six modules), the outcome, price (£249), and a single call to action to enrol."
  2. React to the draft. Claude lays it out. You decide the promise needs more punch and the modules should be a tidy two-column grid. You say so.
  3. Slider pass. Pull the "density" slider down because it feels cramped. Nudge the accent colour to match your brand pink.
  4. Inline comment on the CTA: "make this button impossible to miss, and the copy should say Enrol now — doors close Friday."
  5. Export to PDF for the email, and to HTML if you want it as a live page.

Fifteen minutes, no designer, and it's on-brand if you set up the design system first. The actual words are still your job, and worth doing well. A course sales page lives or dies on copy, not layout. But the blank-canvas paralysis is gone.

A pitch deck works the same way. Founders, the structure of your narrative matters more than the pixels. Claude Design will make ten slides look sharp, but it won't tell you that your traction slide should come before your team slide, or that investors fund a story, not a metrics dump. Get the narrative right first, then let Claude Design dress it.

What it can't do (be realistic)

I won't oversell this. A few honest limits, some from coverage and some from my own read:

  • No real multiplayer. Concurrent editing the way a Figma team works isn't there. This is a solo-or-async tool today, and the annotation-based collaboration is reportedly clunky.
  • Pixel-precise control is limited. You can drag and align, but if your instinct is "move this button exactly three pixels left," the WYSIWYG control is looser than a dedicated design tool. The June update improved this, but it's not Figma-grade.
  • It needs a paid Claude plan. No free tier; it's Pro/Max/Team/Enterprise only.
  • Token cost has a history. Early on, this kind of canvas work could burn through usage quickly. Anthropic's June update reportedly included token-efficiency improvements, but if you're on a usage-sensitive plan, keep an eye on it. That's my flag, not a published figure.

Set against Figma's roughly 80–90% grip on professional design teams, Claude Design isn't trying to replace the pro's tool. It wins on speed to first draft and brand consistency for people who were never going to learn Figma anyway. Against Canva's enormous template library, it's weaker on ready-made templates and stronger on custom, on-brand work that hands off to code.

Where this fits, and a soft pointer

For a non-designer, the pattern that works is this: let Claude Design handle layout and polish, and bring the things only you can. The offer, the narrative, the words. The layout was never really what was holding you back.

That last mile is what we build skills for. Skill Locker has pillars for Presentations and Websites & Landing Pages, and a Claude Design stack in the works, encoding the deck structure, the sales-page copy framework and the brand consistency so you're not re-explaining your standards every session. Honest framing, since this is my product: you can do all of this with raw prompts and a bit of patience. The skills just save you the iteration and stop the quality drifting. Five are free, no card, so you can judge before you pay.

Claude Design collapses the blank canvas. The skills make sure what fills it is actually good.

FAQ

Can a non-designer really use Claude Design?

Yes. That's the entire point. You describe what you want and Claude builds it, then you refine by talking, dragging sliders, or leaving comments. There's no layers panel or constraints system to learn first.

Do I need to pay for it?

Yes. It's a research preview for Pro, Max, Team and Enterprise plans. There's no free tier, and "research preview" means features will keep changing.

Can I turn a Claude Design into a working website?

Yes, via the handoff to Claude Code. Claude Design packages the design and a /design command keeps the canvas and codebase in sync, so the design becomes a real, working page without you writing the code yourself.

How is it different from Canva or Figma?

Faster to a first draft than Figma and stronger on brand consistency; weaker than Canva on ready-made templates but better for custom, on-brand work that needs to hand off to code. It's not a replacement for a pro design team's tooling yet.

What's the catch?

No real-time multiplayer, looser pixel-level control than a dedicated design tool, a paid plan required, and a history of heavy token use that the June 2026 update reportedly improved. Good for solo and async work; not yet a team design platform.

Ready to supercharge Claude Code?

296 pre-built skills across 33 categories. One purchase, lifetime updates.

Browse skills