Source: raw/the-claude-design-email-playbook.md — 7-step playbook from Mike Futia (SCALE AI, go.mikefutia.com/scale-lm-delivery) on using Claude Design (the claude.ai web app feature) to rebuild high-converting marketing emails in under an hour, with a $3,000-5,000/mo email-agency-replacement framing for DTC brands.
A production-ready workflow for using Claude Design specifically for email — not websites, not slide decks, not prototypes. Covers the seven-step pipeline (design-system setup → reference capture → project creation → structured-prompt authoring in regular Claude → execution in Claude Design → inline iteration → HTML preview), the three predictable failure modes and inline fixes (hero image swap, button styling, color matching via the Color Picker Chrome extension), the Claude-Design-credit-burn discipline, and the slice-and-stack Klaviyo handoff via Figma’s HTML to Design plugin. Companion to the Claude Design entity page — same feature, narrowly scoped to email-marketing use.
Key Takeaways
The “two inputs” thesis
The playbook collapses Claude-Design-for-email to two load-bearing inputs:
- A brand design system (one-time setup). Built once inside Claude Design — logo variants (light bg / dark bg / primary / alternate), color palette with hex codes, typography (heading + body fonts), button styling. Every future email project for that brand auto-attaches this system. “The design system you build today gets reused across every email you design forever” — this is the compounding-leverage step that justifies the upfront 10-15 min.
- A reference email + structured prompt. The reference is a single image (use GoFullPage Chrome extension for long emails). The structured prompt maps every section top-to-bottom in order with specifics: promo bar → logo (specific variant) → headline block (copy, color, size) → subhead → primary CTA (text, color, full-width on mobile) → hero image → body → secondary CTA → comparison table (rows, columns) → tertiary CTA → social proof → footer. “Mapping every section in order, with specifics, is what gets Claude Design to rebuild the email accurately on the first pass instead of hallucinating a generic layout.”
When both are dialed, first-pass output is 80-90% of ship-ready. Remaining 10-20% gets fixed inline (3 predictable patches below).
The seven-step pipeline
| Step | Surface | Time |
|---|---|---|
| 1. Build design system | Claude Design (one-time per brand) | 10-15 min |
| 2. Save reference email as image | Inbox + GoFullPage | 2 min |
| 3. Create Claude Design project (high-fidelity, disable interactive prototype, drop reference image) | Claude Design | 2 min |
| 4. Write structured section-mapping prompt | Regular Claude chat (not Claude Design) | 5-10 min |
| 5. Run prompt | Claude Design | 2-4 min |
| 6. Iterate inline (3 fixes) | Claude Design editor | 10-20 min |
| 7. Preview as HTML | Claude Design Present button | 2 min |
Per-email total: under an hour once the workflow is in muscle memory. The split between regular Claude (strategy) and Claude Design (execution) is the entire cost-management argument — see below.
The three predictable inline fixes
Every email needs roughly these three patches; budget for them as part of the workflow rather than a “Claude failed” reaction.
- Hero image swap. Claude Design defaults to a placeholder or generic product shot. Fix: “Replace the hero image with the attached image. [Brief description]” + upload your real product image.
- Button styling. Most common miss: a black/gray rectangle around the button instead of a clean pill or rounded-rect. Fix: click the button, prompt “Fix the button styling. The current button has a black rectangular box around it that shouldn’t be there. The button should match the [BRAND] design system — [pill shape, full-width on mobile, brand primary color background, white text, no border, specific corner radius if known]. Apply this to all CTA buttons in the email.” Sometimes takes two prompts.
- Color matching. Install the free Color Picker Chrome extension. Hover over the exact color in the reference email, the extension copies the hex to clipboard, paste into the Claude Design color picker. Works for any element where rendered output doesn’t match the reference — headlines, backgrounds, body copy.
Claude Design credit-burn discipline
Claude Design has its own usage limits, separate from regular Claude conversations. On the Max 5X plan, ungoverned use hits the Design limit in 2-3 emails. Four rules that “probably 3x your emails-per-cycle”:
- All strategic thinking in regular Claude, not Claude Design. Prompt writing, structure mapping, copy refinement — regular Claude. Only switch to Claude Design when you have the finalized structured prompt + reference assets ready.
- Click the X on the “interactive prototype” tag before the first prompt in every new Claude Design project. Animations + hover states burn Design credits and are pure waste for static email.
- Batch inline edits in a single prompt. Four changes in one prompt costs the same as one change. “Each prompt inside Claude Design costs the same whether it does one thing or four.”
- Reference prior project IDs in new prompts. After 3-4 emails for a brand, prior projects become style-anchor references — fewer iteration cycles to land on-brand output.
Klaviyo handoff via Figma’s HTML to Design plugin
The playbook ships a complete export path:
- In Claude Design:
Share → Download as Standalone HTML File. - Open Figma + install the free HTML to Design plugin.
- Drag the HTML file into the plugin → fully editable Figma rendering in 30-60 seconds.
- In Figma, use the Slice tool to cut the email into 5-8 logical image blocks (hero / benefit grid / product row / comparison table / social proof / footer). Each slice = one clickable unit.
- Export all slices as PNGs.
- In Klaviyo (or Kit / Postscript / Customer.io), create the email, delete default content blocks, drop image blocks in order — one per slice. Add destination URL to each image.
Whole ESP handoff takes ~10 minutes once you’ve done it twice. Pattern generalizes to any ESP that accepts image-block layouts.
Naming convention worth stealing
Project names format: [BRAND]_[EMAIL TYPE]_[OFFER OR ANGLE]. Example: GRUNS_WINBACK_SURPRISE_OFFER, ASHER_JASPER_WELCOME_EMAIL_1. Makes the Claude Design project list scannable when you have 50+ emails across multiple brands.
Cost framing — the agency-replacement math
| Path | Time | Cost per email | Cost for 5-email welcome series |
|---|---|---|---|
| Email design agency | 1-2 weeks per series | 700 (within a $3-5K/mo retainer) | 3,000 + 2-week turnaround |
| Freelance email designer | ~1 week per series | 400 | 2,000 |
| Claude Design playbook | ~1 hour per email after first email | ~$0 incremental (subscription + existing tools) | ~5 hours of work, $0 incremental |
Author’s framing: “You don’t need to fire your email agency tomorrow — but you do need to know that the leverage exists, and that the brands shipping the most creative are using systems exactly like this one.” The math is the structural argument — agency replacement isn’t the immediate ask, but the unit-economics inversion is real.
Why It Matters
- Closes the “Claude wrote me copy” → “Claude shipped me a finished email” gap. Most AI-email coverage stops at copy. This playbook walks through the full handoff to a production ESP, which is where the value lives.
- Treats Claude Design credits as a budgeted resource. The credit-burn discipline section is the most operationally useful part — most users discover Design’s separate limit by running out of credits mid-project. This pre-empts that by structuring strategy work in regular Claude and execution work in Claude Design.
- Reference-driven, not greenfield. The playbook leans on rebuilding a reference email rather than designing from scratch. That’s a higher-leverage pattern — references collapse “what should this look like?” decisions and give Claude Design a concrete target to match. Generalizes beyond email: same approach works for landing pages, ad creatives, anything visual where you have a benchmark to anchor on.
- The Color Picker extension is a small but high-impact tool. Free Chrome extension that bridges the most common color-mismatch failure mode in 5 seconds. The kind of detail you only learn by shipping enough Claude Design emails to hit the pattern multiple times.
- Naming convention is portable.
BRAND_TYPE_ANGLEfor project names scales to any Claude Design use case, not just email.
Implementation
Tool/Service: Claude Design (claude.ai web app feature) + regular Claude.ai + GoFullPage Chrome extension + Color Picker Chrome extension + (optional handoff) Figma + HTML to Design Figma plugin + your ESP (Klaviyo / Kit / Postscript / Customer.io / etc.).
Setup:
- Subscribe to Claude Pro or Max (Claude Design requires a paid plan). Max 5X plan gives the highest Design quota; Pro is workable for low-volume.
- Install Chrome extensions: GoFullPage (free, screenshots long emails as one image), Color Picker (free, pulls hex codes from any rendered web page or image).
- (Optional) Sign up for Figma free tier + install the HTML to Design plugin if you plan to hand off to Klaviyo / any image-block ESP.
- Build the brand design system inside Claude Design once per brand (logo variants, colors, fonts, button styling) — see Step 1 in the source playbook.
Cost:
- Claude Pro: 20/mo monthly.
- Claude Max 5X: $100/mo. Recommended for 5+ emails / week.
- Claude Max 20X: $200/mo. For agency volume across multiple brands.
- All Chrome extensions + HTML to Design Figma plugin: free.
- Figma free tier covers the email-slicing workflow.
Integration notes:
- The playbook is ESP-agnostic — Klaviyo is the worked example but Kit / Postscript / Customer.io / Beehiiv / any image-block-friendly ESP works with the slice-and-stack pattern.
- Email rendering caveats stay the operator’s responsibility — Claude Design produces clean HTML but doesn’t run the Litmus/Email-on-Acid test matrix. Run those manually before campaign send.
- The Color Picker extension also works on a competitor’s web page when you don’t have a saved screenshot — useful for adapting a competitor flow you’re tracking live.
Try It
- Build the design system once for your primary brand inside Claude Design. Block 15 minutes; this is the highest-leverage step in the workflow.
- Pull one reference email from your inbox today — a competitor flow, an inspiration save, or your own historical top performer. Screenshot it with GoFullPage.
- Run the seven-step workflow once end-to-end on that reference. Don’t shortcut Step 4 (write the structured prompt in regular Claude, not Claude Design) — the cost discipline matters from the first email.
- Time the cycle. First email will take 1.5-2 hours. By the third, you’ll be under an hour. By the tenth, ~30-40 minutes for the design pass plus ~10 min ESP handoff.
- If you ship to Klaviyo: install the HTML to Design Figma plugin and walk the slice-and-stack handoff for the first email. The handoff sticks in muscle memory after two passes.
Related
- Claude Design (Entity) — the umbrella product page; this playbook is the email-narrowed application.
- Claude Design Walkthrough — generalist walkthrough of the feature.
- Claude Design Use Cases — broader cases beyond email.
- Claude Design Prompt Examples — prompt library; the structured-prompt template from Step 4 of this playbook is a useful addition.
- Claude Design — Build Websites — sibling playbook on the website-build path.
- Claude Design — Presentations — sibling on presentations.
- Six Agentic Patterns for Claude Design — patterns coverage.
- Email Campaigns Skill — Ira Bodnar — adjacent email-with-Claude approach using a skill-based pipeline (Claude Code) rather than the Claude Design web app.
- AI Marketing — adjacent topic for email-marketing strategy + cross-channel work.
- Awesome Claude Design — curated catalog of Claude Design assets/patterns.
Open Questions
- Litmus / Email-on-Acid test matrix coverage. Playbook doesn’t address rendering testing across the long tail of email clients (Outlook desktop, Gmail mobile dark mode, etc.). Assume operator handles this separately.
- Accessibility (alt text, color contrast, screen-reader semantics). Not addressed. For ADA-compliant email programs this is a gap that needs an additional pass.
- What “Claude Design credits” actually cost in token terms. The playbook treats it as a budgeted opaque resource but doesn’t pin numbers. Worth measuring on a Max 5X account to know the real per-email design-credit cost.
- The Figma HTML to Design plugin’s stability with long emails. “About 30-60 seconds” rendering time assumes plugin still handles current Claude Design output cleanly. Re-verify if the plugin author changes hands or stops maintaining.
- Cross-vault references the playbook implies but doesn’t fully detail: the “Figma → Klaviyo handoff deeper walkthrough” teased in the PS — author offers a longer breakdown on request but it’s not in this document.
- Agency-side scaling pattern. Single-operator workflow is clear; what does it look like when you run this across a 5-brand agency portfolio with team handoffs? Author touches on the project-naming convention but doesn’t detail multi-operator coordination.