Klaviyo email design

/klaviyo-email-design

Produces a paste-ready prompt for claude.ai/design that renders a complete, on-brand email template for any public brand. Claude Code handles the research (brand colours, voice, navigation, product claims) and assembles the prompt. You paste that prompt into claude.ai/design → get the rendered email.

Built by @yourbrand.ai — part of the email-design starter pack. Share freely.

---

Usage

/klaviyo-email-design drinkag1.com newsletter
/klaviyo-email-design lululemon.com welcome
/klaviyo-email-design notion.so announcement
/klaviyo-email-design "https://www.apple.com" launch

Arguments:

1. Brand URL or domain (required) — e.g. drinkag1.com or https://lululemon.com
2. Email type (required) — one of:
   • newsletter — editorial / educational, long-form
   • welcome — onboarding, post-signup, warm intro
   • announcement — product launch, feature release, event
   • transactional — order confirmation, shipping update
   • winback — re-engagement, lapsed customer

If you don't know which type, default to newsletter — it's the most template-like.

---

Workflow

Phase 1 — Fetch brand context

Use WebFetch on the brand's homepage to extract:

• Primary brand colour — identify the dominant colour (not red-stop-sign obvious; a nuanced primary). If not deducible, ask the user.
• Secondary / accent colour — usually a cream, off-white, or complementary tone
• Typography direction — is it sans-serif-only? Does it pair a serif with a sans? Humanist grotesque? Monospace? Work out the character, not the exact font name (Inter is always the safe default for email rendering).
• Tagline — the primary positioning line (e.g. AG1's "Your Daily Health Drink", Apple's "Think different", Notion's "One workspace. Every team.")
• Main product claim — verified from their site (e.g. AG1's "over 75 high-quality ingredients")
• Key navigation items — the top 4–6 nav items (used in email footer)
• Voice patterns — confident/warm/clinical/playful? Key phrases they reuse. How do they describe their product?
• Photography direction — what does their imagery feel like? Lifestyle? Product-first? Editorial? People-centric?

If WebFetch fails (site blocks scrapers, timeout, etc.), ask the user to provide the details manually.

Phase 2 — Confirm with user

Show a short summary of what was extracted:

Brand: [brand name]
Primary colour: [hex approximation]
Typography feel: [description]
Voice: [description]
Ready to generate [email type] prompt? (y/n/edit)

If edit, let user correct any detail before continuing.

Phase 3 — Assemble the prompt

Use the template in templates/[email-type].md (relative to this skill file) as the skeleton. Substitute the brand-specific values extracted in Phase 1.

If a template file isn't present, fall back to the universal structure described in templates/fallback.md.

The generated prompt must:

• Include real, verified brand elements (colours, tagline, claims, navigation)
• Never fabricate statistics, pricing, or scientific claims about the brand
• Use [placeholder] brackets for content that varies per issue (e.g. the actual article headline, date, issue number)
• Output as a paste-ready text block Claude Design can execute
• Specify 640px max email width, mobile-responsive, table-based layout for email-client compatibility

Phase 4 — Output

• Print the assembled prompt to chat in a single code block (so user can copy directly)
• Save to ~/Desktop/klaviyo-email-designs/[brand-slug]-[email-type].md (create folder if missing)
• Remind user: paste into claude.ai/design to render

---

Prompt template shape (what goes inside the generated prompt)

Every generated prompt follows this structure:

You are designing a [EMAIL TYPE] email for [BRAND]. Match [BRAND]'s existing brand exactly — real elements, real voice. Render as a responsive HTML email in an Artifact, mobile-first, max 640px content width, table-based layout for Gmail/Outlook/Apple Mail compatibility.

I will drop in real images in post — leave every image area as a labelled empty region with a 1px dashed border.

=== Brand: [BRAND NAME] ===
[Positioning description from Phase 1]
Tagline: "[verified tagline]"
Product claim: "[verified claim]"
Voice: [description]

=== Visual system ===
Colours (exact hex):
- Primary: [hex]
- Secondary: [hex]
- Paper / background: #FFFFFF
- Text: #1A1A1A
- Muted: #666666

Typography: Inter (Google Fonts), weights 400–700. [Rationale for substitution if brand uses custom font.]

Type scale:
- H1: 34px, weight 600, line-height 1.1
- H2: 24px, weight 600
- Body: 16px, weight 400, line-height 1.65
- Eyebrow: 12px, weight 600, UPPERCASE, +0.12em tracking
- Meta: 13px, weight 400, muted

=== Imagery direction ===
[Description of the brand's photography style. E.g. "morning light, stone counters, product in context, people in active routines."]

=== Layout rules ===
- Max 640px centred
- Outer body: [secondary colour]
- Inner: white
- Section padding: 48px top/bottom, 40px sides
- Separators: 1px lines in muted-warm tone
- Mobile @media 640px breakpoint

=== THE TEMPLATE — exact structure and copy ===
[Full section-by-section template, filled with brand-specific content]

=== HARD RULES ===
1. Typography: Inter only. No other fonts.
2. Colours: exactly the hex codes specified.
3. Copy is locked — real brand elements only. Do not fabricate statistics or claims.
4. No imagery — every image area is a dashed-border placeholder with a monospace label.
5. No emoji, icons, decorative flourishes.
6. Email-client-safe: table layout, inline styles, max 640px, no external CSS beyond Inter from Google Fonts.
7. Mobile-first @media query at 640px.

=== OUTPUT ===
Render a single HTML email as an Artifact. Table-based. Inline styles. Inter imported from Google Fonts. Show rendered preview AND raw HTML source. No commentary.

---

Email type specifications

Newsletter (editorial / educational)

Long-form weekly content. 7 sections:

1. Header with wordmark + issue meta
2. Hero with full-width image + H1 + intro
3. 3 body subsections with H2s
4. Pull quote on contrasting background
5. Product tie-in with CTA
6. "Continue reading" 3-up article grid
7. Footer with tagline, nav, social, address

Welcome

Onboarding email, sent post-subscribe. 5 sections:

1. Header with wordmark
2. Hero: big "Welcome to [brand]" + warm intro paragraph
3. "What to expect" 3-point bulleted section
4. Product / first-action CTA block
5. Footer

Announcement

Product launch or feature release. 4 sections:

1. Header (minimal)
2. Hero with product shot + announcement headline + release date
3. 3 key-benefits grid
4. CTA + footer

Transactional

Order confirmation or shipping. Clean and utilitarian. 3 sections:

1. Header
2. Confirmation message + order details
3. Footer

Winback

Re-engagement for lapsed customers. 3 sections:

1. Header
2. Personal-sounding message ("It's been a while") + value reminder + offer
3. Footer

---

Hard rules for the generated prompt

1. Never fabricate brand claims. Use only content verified from the brand's website. If a statistic or claim can't be verified, leave it as a placeholder.
2. Colours must be hex codes, not "approximately" or "close to" — pick a specific value.
3. Inter is always the default font unless the brand has a clearly public custom-font license for email use.
4. Imagery is always placeholder — the generated prompt tells Claude Design not to generate or embed any actual images.
5. Email-client-safe HTML — table-based layout, inline styles, max 640px width. Always.
6. Mobile-first — always include the @media (max-width: 640px) breakpoint.
7. Signature line at the bottom of the generated prompt: "Generated by /klaviyo-email-design — built by @yourbrand.ai"

---

Installation (for new users)

1. Drop this SKILL.md file into ~/.claude/skills/klaviyo-email-design/SKILL.md on your Mac
2. Restart Claude Code (or run /hooks to reload)
3. Test: /klaviyo-email-design drinkag1.com newsletter
4. Copy the output prompt → paste into claude.ai/design
5. Render. Done.

Prerequisites

• Claude Code installed (VS Code extension or terminal)
• Anthropic API key (for Claude Code usage itself)
• Access to claude.ai/design (included with Claude.ai Pro or Max)

No other API keys or tool setup required.

---

Built by @yourbrand.ai — AI workflows for creative pros. Share freely.