/email-newsletter

name: email-newsletter
description: Drafts and designs a complete HTML email newsletter from a topic or content brief. Outputs paste-ready HTML for Loops, Mailchimp, Beehiiv, Resend, or any standard email platform. Includes subject line options and plain-text fallback. Trigger when a user says "write a newsletter", "draft an email newsletter", "create an HTML email", "design an email for my subscribers", or "write a newsletter about [topic]".
compatibility: [claude-code, gemini-cli, github-copilot]
author: OpenDirectory
version: 1.0.0

Email Newsletter

Draft and design a complete HTML email newsletter from a topic or content brief. Output is paste-ready for Loops, Mailchimp, Beehiiv, Resend, or any standard email platform.

---

**Critical rule:** Table-based HTML with inline styles only. No CSS classes, no flexbox, no grid, no `<style>` blocks. Every element gets `style=""` directly. This is not optional -- email clients strip everything else.

---

Step 1: Brief Intake

Need three things to start. If all three present in the message: skip to Step 2.

If any missing, ask exactly:

> "To get started, I need three things: > 1. **Topic** -- what is this newsletter about? > 2. **Audience** -- who is reading? (role, company size, how they know you) > 3. **Primary CTA** -- what one action do you want readers to take?"

Wait for all three before continuing.

---

Step 2: Complete Intake

Ask all questions in one message, grouped by category. User can skip any -- defaults apply.

> "A few questions before I draft -- answer what you know, skip the rest: > > **Content** > 1. **Length** -- brief (300 words, punchy) / standard (500-700) / deep dive (800+ words)? > 2. **Format** -- editorial article / numbered breakdown / personal story / data report? > 3. **Issue context** -- one-time send / part of weekly series / monthly digest? > 4. **CTA URL** -- what's the actual link? (or I'll use a placeholder) > > **Brand** > 5. **Company / brand name** -- for header and footer > 6. **Tagline** -- one-line description (optional, for footer) > 7. **City & country** -- for footer (e.g. "San Francisco, US") > 8. **Primary brand color** -- hex? (e.g. #856FE6) > 9. **Secondary accent** -- keep default yellow-green (#D8F90A) / use brand color / something else? > > **Design** > 10. **Background** -- dark (editorial/SaaS) / light (clean/corporate) / custom hex? > 11. **Display font** -- editorial serif (Instrument Serif) / clean modern sans / system fonts only? > 12. **Button style** -- pill (very rounded) / softly rounded / sharp corners? > 13. **Visual style** -- editorial / technical+data / warm+founder / bold+campaign? > > **Platform & Technical** > 14. **Platform** -- Loops / Mailchimp / Beehiiv / Resend / other? > 15. **Tone** -- educational / conversational / bold+direct / formal / playful? > 16. **Personalization** -- none / first name / first name + company? > 17. **Subject line** -- have one / want 3 options? > 18. **Secondary sections** -- sponsor block / product callout / event / quick links / none? > 19. **Plain-text version** -- yes (recommended) / no?"

**Defaults if skipped:**

| Question | Default | |---|---| | Length | standard (500-700 words) | | Format | editorial article | | Issue context | one-time send | | CTA URL | `[CTA_URL]` placeholder | | Company name | `[YOUR BRAND]` placeholder | | Tagline | none | | City & country | `[CITY, COUNTRY]` placeholder | | Brand color | none (use `#D8F90A` for all accents) | | Secondary accent | `#D8F90A` (yellow-green default) | | Background | dark | | Display font | Instrument Serif (editorial serif) | | Button style | pill | | Visual style | editorial | | Platform | generic | | Tone | conversational | | Personalization | none | | Subject line | generate 3 options | | Secondary sections | none | | Plain-text | yes |

---

Step 2.5: Design Direction (internal -- not shown to user)

From Step 2 answers, determine:

• Visual character (from question 13, or inferred from tone + format if skipped)
• ONE unmissable element -- identify before Step 3
• Template path (see Step 5)

Character defaults if question 13 skipped:

• Educational / formal tone: Editorial
• Metrics-heavy content (stats, benchmarks, reports): Technical/data-forward
• Product launches, events, campaigns: Bold/campaign

Never ask the user for design direction separately -- derive it from their answers.

---

Step 3: Structure Design

Read `references/html-email-guide.md` for layout rules before choosing sections.

Based on topic + audience + CTA + secondary sections requested, select sections from this library:

| Section | Include when | |---|---| | header | Always -- logo placeholder + issue number or date | | hero | Always -- big headline + 1-2 sentence hook | | intro | Conversational or educational tone -- short personal note | | main-content | Primary article or insight (text-heavy) | | stat-callout | There is a compelling stat, quote, or data point | | secondary-section | Secondary CTA was requested | | product-cta | Brand context present and soft product plug fits | | sponsor-block | Sponsor section was requested | | quick-links | Curated links section was requested | | footer | Always -- unsubscribe link + company name |

Output the chosen structure as a numbered list with one-line purpose per section:

Proposed structure:
1. Header -- logo + Issue #1 / [date]
2. Hero -- headline + hook paragraph
3. Intro -- short personal framing
4. Main Content -- [topic] breakdown
5. Stat Callout -- key data point from the story
6. CTA -- [cta text]
7. Footer -- unsubscribe + company

Does this structure work, or should I adjust any sections?

Wait for confirmation before Step 4.

---

Step 4: Content Draft

Write copy for each section in sequence. No HTML yet -- clean prose only.

**Rules per section:**

• **Header**: Issue number + date. No copy needed.
• **Hero headline**: 8 words max, outcome-focused, no starting with "I/We/Our"
• **Hero hook**: 1-2 sentences, probl