What is Claude Design?

Claude Design launched on the weekend and turns a written brief into real design files. Decks, prototypes, wireframes, one-pagers, landing pages. You describe what you want, it builds a first version, you refine it through chat, inline comments, direct edits on the canvas, or sliders Claude generates for you on the fly.

It's live at claude.ai/design.

Who this is for:
Anyone who needs to make visuals but isn't a designer. Founders mocking up landing pages, PMs putting together decks, solo operators who've been putting off shipping because the design part always kills the momentum.

How to build a landing page in Claude Design

Step 1: Open the canvas and pick "Make a landing page"

Go to claude.ai/design and sign in. The screen splits in two: chat pane on the left, canvas on the right. Across the top of the chat are template buttons: Make a deck, Make a prototype, Make a one-pager, Make a wireframe, Make a landing page.

Click New Prototype. The canvas stays blank. Claude is now primed to think in landing-page sections instead of slides.

Step 2: Attach context before you write a word

This is the step most people skip. They jump straight to the prompt, get a generic page back, and assume the tool isn't very good. The tool is fine. The input was thin.

Before you type your prompt, drag 2 or 3 things into the chat pane:

1) A screenshot of a landing page you wish yours looked like (Stripe, Linear, Notion, whatever you'd point at and say "like that, but for me")

2) A short text file with your brand colors, fonts, and a one-line voice description ("dry, confident, no exclamation marks")

3) An existing logo or product screenshot if you have one

3 or 4 files, not 30. Claude has to read each one, and dumping a folder makes the first draft worse, not better.

Step 3: Write the brief that does the heavy lifting

Here's the prompt pattern that consistently produces a usable first draft. Copy it, fill in the brackets, paste it into the chat:

Hit send. Claude generates the first version onto the canvas in about 60 seconds. It won't be perfect. It'll be 80% of the way there, which is the only part that matters, because you can fix the other 20% in 5 minutes instead of writing it from scratch.

Step 4: Refine with all 4 tools, not just chat

This is what separates Claude Design from "ChatGPT but it makes pages." You have 4 refinement tools. Everyone defaults to chat and never tries the other 3.

The chat pane works the way you'd expect: "Tighten the hero copy." "Swap the benefits and the testimonial." "Cut the FAQ to 3 questions."

Inline comments are the underused move. Click any element on the canvas and drop a comment directly on it: "this button is the wrong shade of blue," "the headline is fine, the subhead is what's killing me." Claude treats them like sticky notes from a stakeholder and acts on them.

Direct edits let you click into any text on the canvas and just type. No prompt round-trip. Use this for one-word copy fixes.

Custom sliders are the feature I am loving. Ask Claude "give me sliders to tweak the hero spacing and the CTA button's corner radius." It generates real sliders inside the canvas. You drag, the design updates live. No more "make it 8% rounder" guessing.

Here's the order I worked through on mine:

1) Chat to fix the structure (cut a section, reorder 2)

2) Inline comments on the hero ("subhead is too long, cut it in half")

3) Direct edits on the FAQ to rewrite 3 of the 5 questions in my own words

4) Sliders at the end to dial in spacing once everything else was right

Step 5: Lock in your brand in 5 minutes

If you have a real codebase or design system, Claude can read it during onboarding and build a design system from it: your colors, your typography, your components. Every project after that uses your brand by default.

If you don't, spend 5 minutes giving it the basics by hand:

Claude applies it across the whole page. The defaults before this step are tasteful (your page won't look bad even if you skip it), but it won't look like you. For an internal page or soft launch, defaults are fine. For something you're actually putting your name on, spend the 5 minutes.

Step 6: Export to standalone HTML and host it today

This is what makes Claude Design more than a demo. Hit export, choose Standalone HTML, and you get a single self-contained .html file with the CSS inlined and the assets bundled.

If you'd rather hand it to a developer to ship as a real component, choose Claude Code handoff instead. Claude packages the components, tokens, and structure into a bundle Claude Code can pick up with one instruction.

If you want it editable by a non-technical teammate later, Canva export keeps the layout and lets them tweak text in a tool they already know.

To actually put it on the internet right now: drag the exported file into app.netlify.com/drop. You'll have a public URL in about 15 seconds. Free, no account required for the first deploy.

How this all connects

If you set up Cowork properly, you already have the scaffolding to make Claude Design pay off faster on the next project, not just this one.

Your TEMPLATES folder becomes the source of brand context. Your colors, your fonts, your voice notes, a screenshot of the page you just built. Drop those into any future Claude Design project and you skip the brand setup entirely.

Your CLAUDE OUTPUTS folder is where the exported HTML lands. 3 months from now when you want a v2, you're not starting from a blank canvas. You're remixing this one.

The Claude Code handoff closes a loop that used to take a week. You write the brief in Cowork, Claude Design generates the page, Claude Code picks up the handoff bundle and produces real React components ready for the engineer to review. Same context flowing from chat to design to code. No copy-paste.

Here's what I keep thinking about. Claude Design isn't a Carrd competitor. That comparison is too small. It's a piece of a system that takes "I have an idea" to "the page is live" without changing tools 4 times. The timing isn't accidental either. Claude Design, Claude Code, Cowork, and the new Opus 4.7 model all shipped inside 3 months of each other. This is infrastructure.

Try this now

You have a side project. Or a meetup. Or a product launch. Or a wedding. Something you've been meaning to make a page for.

Open claude.ai/design, click Make a landing page, and run the brief from Step 3 with your project plugged in. Skip the brand step the first time. Skip the inline comments the first time. Just see what Claude generates from one good prompt, then export to standalone HTML and drag it into Netlify Drop.

Total time: under 15 minutes. If you like the result, do the proper version with brand notes and refinement and ship it for real. If you don't, you've still learned the prompting pattern, which is the part you'll use 100 times over the next year.

Hit reply with your URL. I read every response.