The Claude Design Playbook: Supercharging Your Design Workflow

Most DTC brands and agencies are running the same bottleneck: one designer, a Shopify theme that takes two weeks to update, and a brief queue that means a landing page variation won't be live before the next Meta budget decision. Claude Design eliminates that bottleneck.

This is the operator's field guide — setup, prompt discipline, five distinct editing modes, and three production workflows that ship on-brand landing pages this week, not next month.

Who This Playbook Is For

This playbook is written for three operator profiles.

The DTC founder or head of growth who needs more landing page variations to support Meta Ads testing but has one designer, a Shopify theme that takes forever to update, and no appetite for another SaaS subscription. Every new angle means a brief, a Figma mock, dev time, and 2–3 weeks of runway before you can even test it.

The agency owner or creative director whose clients need presell pages, advertorials, and pitch decks yesterday. You're pitching new clients on Monday, briefing designers on Tuesday, and shipping production pages that look the same as every other DTC brand on Meta.

The creative strategist or media buyer who has the angle, the hook, and the offer figured out — but needs to see it as a real page before the creative lead will greenlight the build. You want a clickable prototype by EOD, not a wireframe in Figma.

Claude Design turns all three of those workflows from a multi-week cycle into a single-conversation prototype that hands off to production code with one click.

What Claude Design Actually Is (And Why It's Different)

Claude Design is Anthropic's AI-native design product. Open claude.ai/design, describe what you want, and Claude generates a working design on a canvas. Refine it through conversation, inline comments, direct edits, or custom sliders — then export as PDF, PPTX, HTML, Canva, or hand off to Claude Code for the production version.

Three things make it different from everything else in the AI design space:

Your brand is built in. During onboarding, Claude reads your codebase, design files, or even just your website and extracts a design system — colors, typography, components, layout patterns — that gets applied automatically to every project after that. You set it up once. Every page, deck, and prototype you generate afterward looks like your brand.

It asks clarifying questions before generating. This is the single biggest workflow difference from tools like Google Stitch, Lovable, or v0. When you describe what you want, Claude asks 7–10 targeted questions — length, tone, layout, audience, what should be tweakable, how it should end. Only then does it generate. If you don't have a strong opinion on a question, "decide for me" is always an option. This front-loaded spec means the first generation usually lands much closer to what you actually want.

It hands off to Claude Code. Every design can be packaged into a handoff bundle that Claude Code consumes directly — your design intent, your components, your brand system, all in one transfer. That's the piece nobody else has. Most AI design tools end at the prototype. Claude Design hands you a production-ready starting point for your engineering team or your solo-builder Claude Code workflow.

The mental model: think of Claude Design as AI Studio for visual work, not Figma for AI. You're prototyping real interactive applications — landing pages, advertorials, pitch decks, dashboards — with full control over the editing layer and a direct path to production code.

Step 1: Set Up Your Brand System (Once, Then Never Again)

The single most important step in the entire Claude Design workflow is setting up your design system before you generate anything. If you skip this, every page you generate will look generic. If you do this right, every page you generate will look like it came straight out of your brand's Figma library.

The Three Ways to Feed Your Brand In

Open claude.ai/design and click "Set up design system" at the bottom of the project picker. You'll land on the onboarding flow. Give Claude your company name, then provide source material in one of three ways:

Option 1: Link your GitHub repo. If your Shopify theme or website lives in a Git repo, this is the strongest source. Claude reads the components, CSS, and patterns directly from code. Important caveat: for large monorepos, link a specific subdirectory rather than the whole repo — linking a massive codebase causes lag and browser issues, and Claude only needs the styling layer anyway.

Option 2: Drag your local codebase folder. If you have the site files on your computer, drag the folder in. Claude figures out which files actually matter for design extraction. Expect a 15–20 minute processing window for anything substantial. A warning pop-up will tell you this upfront.

Option 3: Upload individual brand assets. If you don't have a codebase to point at, upload your logo, color palette spec, typography guidelines, and a PDF of your brand book or a few screenshots from your site. Even a well-designed PowerPoint deck that reflects your brand can work — Claude extracts colors, layout patterns, and typographic choices from visual examples.

For most DTC brands, the fastest path is Option 3 with two or three screenshots from your highest-trafficked landing pages plus your logo and a rough color list. The whole setup takes 5–10 minutes.

What Claude Actually Extracts

After processing, Claude generates a full UI kit for your brand: a primary, secondary, and accent color palette pulled from your assets; a typography system with font families, sizes, and weights; a library of reusable components — buttons, cards, navigation, headers, form elements; and layout patterns including spacing, grid systems, and page structures. You'll be walked through the generated system step by step and asked to approve each piece. Click "looks good" to accept, or ask Claude to adjust anything that feels off.

Validate Before You Publish

Before you flip the "Published" toggle, create a test project and verify the output actually matches your brand expectations. Try prompts like: "Create a landing page for our best-selling product" or "Design a hero section for a Black Friday promo" or "Make an advertorial page for our supplement in the style of our current brand."

If the output looks like your brand, publish. If it doesn't, iterate — add more source material. The key insight from the official docs is worth repeating: include real examples, not just specs. A finished landing page tells Claude more about your brand's feel than a color palette alone.

Once published, every project you or your team creates from the Claude Design home screen uses your system automatically. No uploading brand assets per-project. No configuring anything. It just works.

Step 2: The Prompt Framework That Actually Works

Claude Design responds to the same prompt discipline as every other high-quality AI tool: specificity wins. Generic prompts produce generic pages. Specific prompts produce pages you can ship.

The framework is five parts: Goal (what you're building), Layout (how it should be arranged), Content (what information to display), Audience (who will use it), and Reference pattern (what proven format it should follow).

Bad Prompt vs. Good Prompt

Bad: "Make me a landing page for my supplement."

This produces something generic. Claude has no idea who it's for, what structure to use, or what matters.

Good: "Build an advertorial-style landing page for our magnesium sleep supplement. Target audience: women 35–55 who struggle with sleep and have tried melatonin without results. Follow the classic DR advertorial structure: a story-based hero about the mechanism of magnesium deficiency, pain escalation about the costs of poor sleep, a root-cause reframe that positions our product as the missing piece, 3 customer testimonials with photos, a single offer with a 60-day guarantee, and a strong CTA. Use our brand system. Mobile-first layout."

This produces something you can ship. The goal is clear. The structure is specified. The audience is named. The proven pattern is referenced. Claude's clarifying questions will tighten the rest.

The Clarifying Question Loop

After any prompt, Claude asks 7–10 targeted questions before generating. This is where most people rush through with lazy answers — and it's the single biggest lever for output quality.

For DTC landing pages, expect questions like: How long should the page be — short-form or long-form advertorial? What's the tone — authoritative, conversational, story-driven? What's the hero visual direction — product-focused, lifestyle, founder story? Should it include video? What's the primary CTA? What proof elements matter most — testimonials, press mentions, before/after, clinical results? How many sections and in what order? Mobile-first or desktop-first?

Answer every question with intent. "Decide for me" is available for every question — but it's a lever, not a default. The more questions you answer deliberately, the closer the first generation lands to shippable.

Step 3: The Five-Mode Editing Workflow

This is where Claude Design separates itself from every other AI design tool. Once Claude generates your first version, you have five distinct ways to edit — and knowing when to use each one is the difference between a 30-minute iteration loop and a 3-hour one.

Mode 1: Chat (for structural changes)

Use chat when you need to change the overall direction, add or remove sections, or shift the aesthetic. Good chat prompts: "Rearrange this so the testimonials are above the fold instead of the product shots." / "Add a FAQ section between the offer and the footer." / "Show me 3 alternative hero layouts for this page." / "Make the color scheme darker and more editorial."

Chat is for anything that requires context, explanation, or changes that span multiple elements. If you can't describe the change by pointing at one spot on the canvas, it's a chat prompt.

Mode 2: Inline Comments (for component-level changes)

Click directly on an element and leave a comment. This is faster than describing the location in chat. Good inline comments: "Change this button text to 'Claim Your Bottle' and make it our primary brand color." / "Swap this radio group for a dropdown." / "Add a countdown timer above this CTA." / "Make this section collapsible."

Queue up multiple comments and send them to Claude as a batch — ideal when you're doing a full review pass. A known limitation: inline comments occasionally disappear before Claude reads them. If you see this happen, paste the comment text directly into chat as a workaround.

Mode 3: Edit Mode (for direct manual tweaks)

Edit mode lets you select an element and change its properties directly — no prompting needed. You can change colors, heights, widths, text content, and spacing through a properties panel. This is the "last 10%" mode — use it for manual polish after Claude has done the heavy lifting. Classic use cases: swapping out placeholder copy for your actual product name, tweaking button padding, adjusting exact color values to match your brand spec.

Mode 4: Draw Mode (for spatial ideas)

You can literally draw on the canvas and Claude interprets what you're drawing. Sketch a box where you want a new section. Circle an element and add a note next to it. This is most useful when you're describing something spatial that would take 50 words to explain in text.

Mode 5: Tweaks Panel (for Claude-generated sliders)

Claude generates custom adjustment sliders specific to your project — color palette swaps, spacing controls, rotation speed for animations, glow intensity, layout variants. Open the tweaks panel and scrub sliders to test variations live without re-prompting. For a landing page, you might get palette sliders (warm, ink, clay), hero layout toggles, and offer emphasis controls. The sliders are context-specific to whatever Claude built, so they'll be different on every project.

The Workflow Order That Works

For most landing page work: start with chat for any structural pivots → work through the page top-to-bottom with inline comments queued as a batch → send the batch and let Claude apply everything at once → drop into edit mode for manual copy tweaks and final polish → use the tweaks panel to test 2–3 palette or layout variants before you commit.

This pattern gets you from first draft to ready-to-ship in under 30 minutes on most pages.

Step 4: The Handoff to Claude Code (Production in One Click)

Every other AI design tool ends at the export. Claude Design ends at production code.

When your design is ready, click Export in the upper right corner. You'll see seven options:

• Download as .zip
• Export as PDF
• Export as PPTX
• Send to Canva
• Export as standalone HTML
• Handoff to Claude Code — local coding agent
• Handoff to Claude Code — Claude Code Web

Standalone HTML is your go-to for landing pages you want to drop into a Shopify page template, a WordPress landing page, or a ClickFunnels clone. You get a clean HTML file with inline CSS that renders exactly like what you saw on the canvas. Paste it into a custom HTML block and you're live.

PPTX is for pitch decks. Export straight to PowerPoint and it opens with all your animations and brand styling intact.

Canva handoff is for anyone who wants to do the last 10% in a tool their team is already fluent in. Export from Claude Design, land in Canva, collaborate on final polish.

Claude Code handoff is where everything changes. Claude packages the entire design — including your brand system, component structure, and design intent — into a handoff bundle. One command in Claude Code and it starts building the production version. For DTC brands running a custom Shopify theme or a headless storefront, this means you can prototype a landing page in Claude Design in the morning and have a pull request open on your theme by the afternoon.

One important limitation: at time of writing, you cannot export animated videos as .mp4 or .mov files. If you generate an animated video in Claude Design, the only way to save it is to screen-record the playback. This rules out Claude Design for produced Meta video ad creative today. Statics, landing pages, advertorials, decks, and mockups are fully in scope. Animated video ads are not — yet.

Workflow 1: The Landing Page Variation Factory

This is the workflow that pays for itself in a single week.

The problem: you're running paid media on Meta and you know landing page variation is a bigger lever than creative variation. The brands scaling hardest are running 5–10 different landing pages, each targeting a different angle, pain point, or offer structure. Building those pages manually means briefing a designer, waiting 2–3 weeks, and getting back something close to what you asked for.

The workflow:

1. Set up your brand system once using your existing site as source material — 15 minutes, one time.
2. Create a new Prototype project named after the angle — e.g., "Magnesium — Advertorial — Sleep Mechanism."
3. Prompt with the full framework: goal, layout, content, audience, reference pattern. Use the DR advertorial structure as your scaffolding.
4. Answer the clarifying questions deliberately. Don't rush. The better your answers, the closer the first generation lands.
5. Use inline comments to batch-edit section by section. Fix headlines, swap images, tighten copy.
6. Tweak the palette and hero layout via the tweaks panel to test 2–3 visual variants.
7. Export as standalone HTML and drop into your Shopify or landing page tool.
8. Repeat with a different angle. Duplicate the project, swap the angle in the prompt, generate variation #2.

A single operator can ship 5 landing page variations in a single afternoon using this workflow. That's 5 angles testing simultaneously on Meta next week, instead of 1 angle testing next month.

The pro tip — duplicate projects for angle variations: instead of starting from scratch for every variation, duplicate your first project once it's dialed in. The duplicate inherits everything — brand system, structure, copy. Then in the new project, prompt: "Rewrite this page for a different angle: instead of the sleep mechanism story, lead with a customer transformation story. Keep the offer, testimonials, and CTA exactly the same." You'll get a new variation in 2–3 minutes.

Workflow 2: The Agency Pitch Deck in 20 Minutes

The problem: you're pitching a new DTC client on Monday and you don't have time to hand-build a deck in Figma. Your team's slide templates look fine but generic. You want a deck that feels native to the prospect's brand.

The workflow:

1. Get the prospect's brand system ingested. Give Claude Design their website URL or upload screenshots of their site, ads, and packaging. You're building a temporary brand system for this pitch only.
2. Write your deck copy in regular Claude first. Open a normal Claude conversation, paste your pitch structure, and iterate on the copy slide-by-slide until it's tight.
3. Generate a video first, then convert to a deck. Asking for a static deck directly produces something boring. Asking for an animated video first, then converting it into a deck, produces something animated and engaging you can click through slide-by-slide. This is the single most-cited pro tip from operators who've tested both paths.
4. Refine each slide using the 5-mode editing workflow — inline comments for targeted fixes, edit mode for copy polish, tweaks panel for palette variants.
5. Export as PPTX or send to Canva depending on where your team does final polish.

Time from blank page to deliverable deck: 20–30 minutes for a 10-slide pitch deck.

Workflow 3: The DTC Advertorial Clone

The problem: you found a competitor advertorial that's been running on Meta for 3+ months — clearly profitable, clearly converting. You want to clone the structure and rebuild it for your brand.

This workflow connects directly to content strategy and advertorial production. Claude Design handles the structural extraction and brand application; you own the voice, the product-specific claims, and the hook rewrite.

The workflow:

1. Open Claude Design and prompt: "Recreate [competitor URL] as an advertorial, but swap in my brand and product." Claude will find the page, analyze the structure, and rebuild it using your brand system.
2. Review the generated version. Expect ~80% match on the first pass. The DR structure — hook, pain escalation, root-cause reframe, authority, social proof, offer — will all be intact.
3. Swap product details with inline comments. Click each section and replace claims, testimonials, and product specifics with yours.
4. Rewrite the hook in edit mode. Generic AI-generated hooks underperform. Swap the headline for something hand-written that matches your voice and speaks directly to your customer.
5. Export as standalone HTML and ship to a Shopify page or landing page tool.

The whole workflow takes 30–45 minutes end-to-end. Compare that to briefing a designer and a copywriter to rebuild from scratch — that's a 2-week project collapsed into an afternoon.

The bigger insight: the pages scaling hardest on Meta all follow the same 6–8 section DR structure. Claude Design lets you apply that proven structure with your brand automatically, so every page you ship is built on a foundation that's already converting somewhere else.

Best Practices From Operators Actually Using This

Set up the design system first. Always. Skipping this is the single biggest reason people get bad output. Spend the 15 minutes upfront. Everything after that is 10× faster.

Answer clarifying questions deliberately. "Decide for me" is a tool, not a default. The more questions you answer with intent, the closer the first generation lands.

Build the first 90% with AI. Handcraft the last 10% yourself. Every operator who uses AI design tools well says the same thing. Claude gets you 90% of the way there fast. The final polish — exact copy tuning, subtle spacing fixes, voice corrections — is still faster done manually in edit mode than by re-prompting.

Generate a video first, then convert to a deck. If you need a slide deck, don't prompt for a static deck. Prompt for an animated video, then ask Claude to convert it into a slide deck you can toggle through. The output is dramatically more engaging.

Duplicate projects for variations. Don't start from scratch for every angle. Duplicate a dialed-in project and swap one variable in the prompt. This is how you get to 5 landing page variations in an afternoon.

Use full-screen mode to evaluate. Designs almost always look better in full-screen than in the canvas preview. Review in full-screen before deciding something needs more work.

Ask Claude for feedback on your own designs. Claude will review your work for accessibility, contrast ratios, information hierarchy, and general usability. Prompt: "Review this landing page as a conversion rate optimization expert. What's likely to underperform?"

Batch inline comments before sending. Don't ping Claude after every single comment. Queue 5–10 comments up, then send the batch. Faster iteration, cleaner output.

Known Limitations

Claude Design is in research preview. A few things to know before committing major production workflows:

• Inline comments occasionally disappear before Claude reads them. Workaround: paste the comment into chat instead.
• Compact view can trigger save errors. Switch to full view and retry.
• Large codebases lag. Link specific subdirectories, not full monorepos.
• Chat upstream errors happen occasionally. Start a new chat tab within the same project as a reset.
• No video export. Animated videos can only be saved via screen recording for now.
• Token usage is real. Setting up a full design system with a large codebase can consume significant usage on Pro plans. Time-box your design system setup and be aware that generation is more expensive than chat.

Quick-Start Checklist

Related Guides

If you're building landing pages and advertorials at scale, the infrastructure behind them matters as much as the design. These guides cover the architecture and visibility layer that determines whether those pages get found after they go live:

• The AI Knowledge Graph Playbook — How to build a machine-readable brand ecosystem that AI systems can parse, trust, and reuse across ChatGPT, Gemini, and answer engines.
• Schema Markup for AI: JSON-LD Templates — Copy-paste schema templates for every page type you're building, including landing pages and service pages.
• GEO: AI SEO in 2026 — The complete guide to generative engine optimization for brands that need to appear in AI-generated search answers.
• Website & Conversion Design — If you want our team to build the production versions of your Claude Design prototypes, with full CRO strategy built in.
• Paid Client Acquisition — Performance media strategy and landing page testing built for DTC and service brands on Meta and Google.