Claude Design for product marketing [Bonus article]

Claude Design launched last month. So, I’ve had to squeeze in another edition to this series. 😉

It’s a new product from Anthropic, separate from everything else in the Claude ecosystem, and it changes what PMMs can produce without a designer.

Landing pages with layout and hierarchy.

Pitch decks that look like someone designed them.

Animated explainer videos.

I’ve been testing it across real PMM workflows.

Here’s how it works.

What Claude Design is

Claude Design is a separate product from everything else we’ve covered in this series. It doesn’t live inside the Claude desktop app, Cowork, or Code.

It has its own URL: claude.ai/design.

When prompted to log in, you can connect with your existing Claude account.

You open it and you see two areas: a chat on the left and a canvas on the right. You describe what you want in the chat – “build me a landing page for our new analytics feature” – and Claude generates a working design on the canvas. A fully designed, interactive page you can click through, comment on, and export.

The canvas is where everything happens visually. You can see the design taking shape, and across the top you’ve got tools to iterate: Tweaks, Comment, Edit, and Draw.

You can click on specific elements, leave comments, draw directly on the canvas, or just type feedback in the chat. Claude updates the design based on whatever you give it.

It runs on Opus 4.7 – Anthropic’s best vision model.

How to access it

If you’re on a Pro or Max plan: Go to claude.ai/design. Sign in. You’re in.

If you’re on a Team or Enterprise plan: Claude Design is off by default. Your admin needs to turn it on: Organization settings –> Capabilities –> Anthropic Labs –> toggle on.

A few things to know: Claude Design is currently a research preview, so access is rolling out gradually. If claude.ai/design redirects you to the homepage, try again in a few days. It also uses your existing plan limits and burns through tokens faster than regular Claude chat – something to be aware of if you’re on a usage cap.

What you see when you open it

When you create a new project, you’ll see four tabs across the top: Prototype, Slide deck, From template, and Other.

• Prototype is where you’ll spend most of your time as a PMM. It’s for web pages, landing pages, comparison pages, videos – anything visual. Within Prototype, you choose between Wireframe (rough layout, good for early-stage thinking) and High fidelity (polished, looks like a finished page).
• Slide deck is for presentations – sales decks, board updates, pitch decks.
• From template gives you starting points for common formats.
• Other covers everything else.

Below the tabs, you’ll see a “Set up design system” button. That’s where you upload your brand guidelines so every output follows your visual identity. Worth doing before you build anything – I’ll cover that next.

Once you create a project and land in the workspace, you’ll see a “Start with context” panel on the left. This lets you attach reference material before you start prompting:

• Design System – attach your brand system so the output matches your identity –
• Add screenshot – upload a screenshot of a page you want to recreate or use as inspiration. This is useful for competitor analysis – screenshot their landing page and tell Claude to build a better version for your product
• Attach codebase – link existing code if you’re building on top of something
• Drag in a Figma file – import designs from Figma as a starting point

On the canvas side, there’s also a “Start with a sketch” button – you actually can draw a rough layout and have Claude build from it. Such a cool feature IMO.

Setting up your brand system (do this first)

Before you start building anything, this step is worth the five minutes it takes.

If you upload your brand’s design system, every output Claude Design produces will automatically follow your visual identity. Your colors, your fonts, your component patterns – applied to everything without you specifying them each time.

On the home screen, click “Set up design system.” You’ll see a simple form:

• Company name and blurb. A one-line description of your company and what you do. This gives Claude context for the tone and style of your outputs.
• Design resources (all optional). You can link a GitHub repo, upload code from your computer, drop in a Figma file, or upload fonts, logos, and brand assets. You don’t need all of these – upload whatever you have.
• Any other notes. A free text field where you describe your visual style in plain language. Something like “We use a warm, earthy color palette with rounded corners. Our brand voice is playful but professional.” The more specific you are here, the better the output.

That’s it. Once your design system is set up, every project you create from that point forward automatically applies your brand. You never specify colors or fonts again.

Where Design changes PMM work

Here are some step-by-step instructions so you can try each one yourself. If you’ve set up your brand system above, everything below will already follow your visual identity.

1. Launch page prototypes

You need to show stakeholders what the messaging looks like on a page – not as bullet points in a doc, but as a designed page with layout, hierarchy, and visual weight.

The situation: You’re positioning a new feature launch. You need stakeholders to see the messaging in context – on a page, not a Google Doc.

How to do it:

1. Go to claude.ai/design.
2. Select the Prototype tab, choose High fidelity, and click + Create.
3. Claude Design doesn’t know your product or positioning unless you tell it. The easiest way to do this is to upload your existing messaging docs – your positioning framework, your messaging house, your value prop doc – through the “Start with context” panel or by pasting them into the chat. That way Claude has everything it needs without you trying to cram it all into a prompt. Then type something like:

Using the messaging document I've uploaded, create a high-fidelity landing page for [Product Name]. Target audience: mid-market RevOps leaders evaluating data platforms. The page needs: a hero section with headline and subhead that leads with the time-saving benefit, three value prop sections with icons, a competitor comparison table, customer quote section, and a demo request CTA. Tone should feel modern and credible.

4. Claude will ask clarifying questions – answer them or let it proceed with defaults.
5. The design appears on the canvas. Click Present to see it full-screen.

You now have a fully designed landing page. The headlines, the subheads, the layout, the visual hierarchy – all done.

To iterate: Use the Comment tool in the top right to click on specific elements and leave feedback. “Make the headline shorter.” “Swap the comparison table to lead with our strongest differentiator.” “Make the CTA more prominent.” Or just type your feedback directly in the chat. Claude updates the canvas based on either.

To test positioning angles: Tell Claude in the chat: “Show me 2-3 alternative hero sections, each with a different positioning angle.” Claude generates variations you can compare side by side. Five minutes, three options, a clear direction.

Bonus use case: Use the Add screenshot option in “Start with context” to upload a screenshot of a competitor’s landing page. Then tell Claude: “Build a page like this but for our product, with our positioning.” Fast way to match a competitor’s visual quality while leading with your own message.

Side note: what a quick prompt produces:

I asked Claude Design to build a pricing page with minimal detail – just the product name and a rough brief. What came back was a full page with hero section, tiered pricing cards, a feature comparison table, an FAQ section, and an enterprise CTA. All designed, all interactive.

The Tweaks panel on the right is worth knowing about. It lets you adjust design parameters without typing anything in the chat – accent color, which pricing tier to highlight, card style (elevated, flat, or bordered), monthly vs annual billing toggle. Quick visual changes, no prompting required.

2. Sales and pitch decks

PMMs produce decks constantly – sales enablement, board updates, partner pitches, launch readiness reviews. They take hours because the content is the easy part. The formatting, the layout, the visual consistency across 15 slides – that’s what eats the time.

The situation: Your sales team needs an updated competitive deck for a new quarter. You’ve got the messaging and the talk tracks. You need them in a polished, on-brand slide deck by end of week.

How to do it:

1. Go to claude.ai/design and select the Slide deck tab. Click + Create.
2. If you’ve already got your messaging, talk tracks, and competitive research written up – upload them. Paste them into the chat or use “Start with context” to attach your battle cards, positioning doc, or competitor research. Then keep the prompt focused on the structure you want:

Using the messaging and competitive research I've uploaded, create a 12-slide competitive sales deck for our sales team. The deck should cover: title slide, market context (1 slide), our positioning (2 slides), head-to-head comparison with specific feature differences (2 slides), objection handling for the top 3 objections (3 slides), customer proof points (2 slides), and a closing slide with next steps. Tone: confident, specific, no fluff. Include speaker notes on each slide.

3. Claude asks clarifying questions about your audience, your key differentiators, and your visual preferences. Answer them.
4. The deck appears on the canvas. Click through each slide to review.

You get a full deck with speaker notes. The layout is consistent. The visual hierarchy works. The content has structure – not placeholder text waiting for you to fill it in.

To iterate: Use chat for structural changes (”Move the objection handling section before the comparison slides”) and the Comment tool for specific tweaks (”Make this stat larger” or “Change this to a bar chart instead of a table”).

To export: Click Share in the top right. You can export as PPTX in two ways – editable (native text and shapes you can edit in PowerPoint) or screenshots (pixel-perfect but not editable). You can also export as PDF or standalone HTML.

Worth trying: One tip I’ve seen from early testers – if you want better-looking slides, first ask Claude Design to create a short animated video summarizing your content. Then, in the same chat, say: “Now convert that video into a slide deck.” The slides come out more visually dynamic because the video step forces Claude to think visually before committing to static frames.

3. Product launch videos

Claude Design can create animated videos. Motion, transitions, kinetic typography, pacing – all generated from a text prompt. Original animated content, not stock footage stitched together.

The situation: You’re launching a new feature next month. Marketing wants a short explainer video for the launch email and landing page. The video team is booked. External production is $5K minimum and takes three weeks.

How to do it:

1. Go to claude.ai/design. Select the Prototype tab, choose High fidelity, and click + Create.
2. Claude doesn’t know what your product is – your design system covers visual identity, not product context. So your prompt needs to include the specifics: what the product does, who it’s for, what the key messages are. The more detail you give, the better the output. Type something like:

Create a 45-second animated explainer video. Our product is [Product Name], a data analytics platform that lets non-technical teams query their data in plain English instead of writing SQL. Target audience: mid-market RevOps leaders. Structure: 0-5 seconds - title card with the hook "Your data has answers. Now it speaks your language." 5-15 seconds - the problem: analysts spend 6 hours a week building reports manually, show data flowing into a messy dashboard. 15-30 seconds - the solution: show someone typing a question in plain English and getting an instant visualization. 30-40 seconds - three stat cards sliding in: "80% faster insights," "zero SQL required," "works with your existing stack." 40-45 seconds - closing card with product name and CTA. Visual style: clean, modern, thin-line illustrations, blue and white palette. Smooth transitions, no hard cuts.

You can also give Claude visual context before prompting. In the “Start with context” panel, try uploading a screenshot of your product’s UI – Claude can reference it when building the video, so the visuals match what users actually see.

If your team has mockups in Figma, drop those in. If you have a frontend codebase, attach that too – Claude can pull visual elements directly from your existing product.

3. Claude builds the video in pieces – characters, scenes, animation files. It takes a few minutes and runs a verifier to check everything plays correctly.
4. The finished video appears on the canvas with a timeline scrubber at the bottom. You can play it, pause it, and navigate through it frame by frame.
5. To iterate, type feedback in the chat: “Slow down the transition at 15 seconds.” “Change the color palette to match our brand.” “Add a product screenshot in the solution section.”

A 45-second animated video from a text prompt. The quality is strong enough for a launch email, a landing page hero, or a social media teaser. For a polished brand film, you’d still want a production team. For everything else, this changes the speed and cost calculation completely.

Current limitation: There’s no “export as video file” option yet. You can export as standalone HTML (the animation plays in a browser), or use screen recording to capture it as a video file (on Mac: Command+Shift+5). Not ideal, but workable.

4. Comparison and feature pages

Comparison pages are one of the highest-impact PMM assets – and one of the most tedious to produce. The content is straightforward. The layout, the visual balance between “fair comparison” and “we clearly win,” the formatting of feature tables – that’s what takes the time.

The situation: Sales keeps losing deals to a competitor who just launched a new pricing tier. You need a comparison page that highlights where you’re stronger without being heavy-handed about it.

How to do it:

1. Go to claude.ai/design. Select the Prototype tab, choose High fidelity, and click + Create.
2. This is the use case where context matters most. Claude can’t look up your competitor’s features or pricing – you need to provide the details. Before prompting, consider uploading your competitor’s pricing page or feature page as a screenshot through “Start with context.” Then type something like:

Create a comparison page for our website. [Product Name] vs [Competitor Name]. We're a data analytics platform for non-technical teams. They're an enterprise BI tool that requires SQL knowledge. Layout: hero section with a headline like "Choosing between [Product Name] and [Competitor]? Here's what matters." Then a feature comparison table covering: ease of use (us: natural language queries, them: SQL required), pricing (us: $30/seat, them: $80/seat), integrations (us: 50+, them: 30+), support (us: dedicated CSM on all plans, them: enterprise only), security (both SOC 2). Below the table, three sections highlighting where we're strongest, each with a short paragraph and an icon. End with a CTA to book a demo. The tone should feel balanced and credible - not aggressive, not defensive.

3. Claude builds the page. Review on the canvas.
4. Use the Comment tool or the chat to adjust: “Add a row for API access.” “Mark our support as a differentiator.” “Tone down the language on pricing – be factual, not salesy.”

You’ve now got a comparison page ready to hand to your web team for implementation, export as standalone HTML and host directly, or hand off to Claude Code for development using the Handoff to Claude Code option in the Share menu.

5. One-pagers and leave-behinds

The situation: Your sales rep has a meeting with a prospect in two hours and needs a one-pager tailored to their industry.

How to do it:

1. Go to claude.ai/design. Select the Prototype tab, choose High fidelity, and click + Create.
2. Type:

Create a one-page sales leave-behind for a meeting with a healthcare company evaluating our data platform. Include: a 2-line value prop specific to healthcare data challenges, three key benefits with healthcare-specific proof points, a mini case study from a similar customer, and contact details at the bottom. Layout should be clean, scannable, and printable on a single page.

3. Claude builds it on the canvas. Click Share –> Export as PDF.

Two hours before a meeting, your rep has a tailored one-pager. No template hunting. No reformatting. No “can you update the case study section” back-and-forth with marketing.

Every project in Claude Design can be exported through the Share button in the top right. The full list of options:

• Export as PDF – print-ready. Good for one-pagers, leave-behinds, anything that needs to be printed or attached to an email.
• Export as PPTX (editable) – native text and shapes that you can edit in PowerPoint. Use this when your team needs to make changes after you hand it off.
• Export as PPTX (screenshots) – pixel-perfect flat images. Use this when you want the design to look exactly as Claude built it, no edits needed.
• Export as standalone HTML – a single self-contained file that works offline in any browser. Good for hosting landing pages or sharing interactive prototypes.
• Download project as .zip – everything in the project, including the underlying code files.
• Send to Canva – sends the design to Canva for further editing.
• Handoff to Claude Code – creates a dev-ready package with specs and structure. Download it, then tell Claude Code “create this design.” If you’ve prototyped a landing page and want to turn it into a production-ready page, this is the bridge.

You can also share projects with teammates using the Copy link option, with access controls for who can view or comment.

There’s a dedicated Comments tab in the left panel where feedback from teammates lives separately from the chat – useful for collecting input from stakeholders without cluttering the conversation with Claude.

How Design fits with everything else

Claude Design doesn’t replace Cowork or Code. It adds a visual layer to the system.

• Cowork produces written documents: battle cards, positioning docs, launch briefs, research summaries. Text-heavy deliverables where the content is the product.
• Code builds interactive systems: dashboards, monitoring automations, internal tools. Things that run, update, and compute.
• Design produces visual assets: landing pages, slide decks, videos, comparison pages, one-pagers. Things where how it looks matters as much as what it says.

The three work together. Write your messaging framework in Cowork. Build your competitive monitoring dashboard in Code. Design your launch page, your sales deck, and your explainer video in Design – all using the same brand system, all pulling from the same strategic foundation.

And the handoff between them is direct. Claude Design has a “Handoff to Claude Code” option in the Share menu that sends your design to Code for development. Your Cowork work informs what you build in Design. The ecosystem connects.

Honest limitations

Worth knowing upfront rather than discovering mid-project.

It burns through tokens FAST. Claude Design uses significantly more of your usage allowance than regular Claude chat. A complex landing page or video can eat through your daily limit quickly. Be aware of your plan’s cap and prioritize the assets that matter most.

It’s still in research preview. Access is rolling out gradually and some features are buggy. These are early-stage issues that will get fixed, but they’re worth knowing now.

Video export is limited. You can’t download animated videos as video files yet. You can export as standalone HTML (the animation plays in a browser) or use screen recording to capture it. Works, but adds an extra step.

Fine-grained control isn’t there yet. If you’re a trained designer, the lack of precise pixel-level control will frustrate you. The output is strong for PMM use cases – stakeholder prototypes, sales assets, launch materials. For final production-ready creative, you’ll likely still want your design team.

The bottom line

Every PMM has a backlog of visual assets they’d love to have but can’t justify the time or budget for.

The comparison page that’s been “next quarter” for six months. The launch video that would cost $10K and take three weeks. The sales deck that needs updating but nobody’s going to brief a designer for.

Claude Design makes a real dent in that backlog. A landing page prototype in 10 minutes. A competitive deck in 15. An animated explainer video in 20. All following your brand guidelines. All ready to iterate on, export, and share.

It’s early. The tool has rough edges. But I’d recommend getting in and testing it now – the PMMs who build this into their workflow early are going to move faster than the ones who wait.

The full series: Mastering Claude as a product marketer

Part 1: Mastering Claude for product marketing – What everything actually is. The map.

Part 2: Claude Cowork for product marketing – How to set it up, the PMM workflows that benefit most, and how to go from “chat responses” to “finished deliverables in your folder.”

Part 3: The complete product marketing Claude skills pack – Everything you need to master Claude skills for product marketing

Part 4: The Claude marketplace for product marketing – Skills, plugins, and connectors. How to find them, install them, and build your own PMM toolkit.

Part 5: Claude Code for product marketing – When and why you’d go here. And why the jump from Cowork is smaller than you think.

Part 6: Bringing it all together – Claude for product marketing – How Chat, Cowork, Code, Skills, and Connectors work as one system. The full PMM Claude setup, from first install to daily workflow.