Email Design Skill

Distinctive, on-brand emails. Produces a structured brief, then hands it to the connected sending tool. Self-contained.

When to use

Triggered for:

• "draft / write / compose / design / build an email" (newsletter, campaign, blast, broadcast, announcement, welcome, win-back, post-purchase, abandoned cart, promo, transactional)
• "make this email less generic / less plain / more on brand"
• "redesign / critique / polish this email"
• "send a campaign through Nitrosend / Klaviyo / etc."

Skip for:

• Strategy-only ("what frequency should I send at?")
• Deliverability-only ("why am I in spam?")
• Platform selection ("Klaviyo vs Mailchimp?")
• Copywriting in isolation, no design

The flow (five steps)

1. Context check — pull brand state from the connected ESP and project files. No questions yet.
2. Ask up to three questions — only the highest-leverage gaps. Bundle into one message.
3. Pick an archetype, write the brief. Commit before composing.
4. Resolve image slots — fetch from brand site, brand assets, or prompt the user.
5. Translate the brief into the sending tool's format and run a dry-run preview before approval.

Step 1 — Context check (silent)

Pull what is already known. Do not ask the user yet.

If Nitrosend MCP tools are available (nitro_*):

• Read the nitro://account resource for brand fields (company name, brand colour, logo, fonts, physical address, voice document if present).
• Call nitro_get_status for onboarding state and any obvious gaps.
• Call nitro_query({ entity: "templates", limit: 3 }) to see prior design language. Look at the actual sections, colours, typography, and tone.

If the connected ESP is something else, look for the equivalent — most ESPs expose a brand or settings endpoint. If the ESP is unknown, fall back to project files: BRAND.md, email-brand.md, PRODUCT.md, or a top-level README.md for tone clues.

Build a brand profile in your head with these fields, marking each as known, inferable, or missing:

• Company name, from-name, from-email, mission/tagline
• Primary brand colour (hex), secondary if any
• Logo URL
• Voice descriptors (e.g. founder-personal, editorial, cheeky, technical, premium-restrained)
• Footer essentials: physical address, social handles, unsubscribe handler

If three or more fields are missing, you can ask. Otherwise default to inferred values and note them in the brief.

Step 2 — Up to three questions (only if needed)

Hard cap: three questions, in one message, as a numbered list. If more fields are missing, fill with sensible defaults and note them in the brief — do not interrogate.

Priority order — pick the top three that are missing and matter for this specific email:

1. Email purpose — what does this specific email need to do? (Drive a click? Tell a story? Confirm an action? Re-engage a lapsed user? Tease a launch?) Almost always worth asking on first email of a session.
2. Tone register — editorial, bold-mono, minimal-lux, founder-letter, punk/character, or lookbook? Ask only if voice is unclear from prior templates.
3. Primary brand colour — hex preferred. Ask only if missing AND no logo to extract from.
4. Mission line — one sentence on why the company exists (not what it sells). Ask only if footer-critical and absent.
5. Socials + physical address — handles + one mailing address for footer / CAN-SPAM. Ask only if footer would otherwise be incomplete.

If the user has already answered these earlier in the session, do not re-ask.

Step 3 — Pick an archetype, then write the brief

Anti-slop wins. Commit to an archetype before drafting. The most common failure mode is defaulting to "minimal-lux" because it feels safe — it is the right answer maybe 30% of the time. For the rest, pick deliberately.

Archetypes

Shared visual laws

Apply to every archetype. Implementation should match the aesthetic — bold needs committed; minimal needs precision.

Colour

• Pick a strategy before picking colours:
  • Restrained — tinted neutrals + one accent ≤10% of the surface. Default for transactional and minimal-lux only.
  • Committed — one saturated colour carries 30–60% of the surface. Default for brand-identity emails.
  • Drenched — the surface IS the colour. For heroes and statement emails.
• Never pure #000 or #fff. Tint every neutral toward the brand hue.
• High chroma at extreme lightness looks garish; pull saturation back as you approach black or white.
• Category-reflex check. If someone could guess the palette from the category alone — fintech → navy + gold, wellness → white + sage, AI → black + neon, ecommerce → millennial pink + cream — rework it. Training-data reflexes make emails forgettable.

Typography

• One typeface family per email. Add a second only with a clear functional reason.
• Body 14–16px. Headline 22–34px. Hierarchy ratio ≥1.25 between steps.
• Cap line length 50–65 characters.
• No gradient text. No background-clip: text. Emphasis through weight or size, not effects.

Layout

• Single column. Width 472–600px. Wider feels desktopy and breaks on mobile.
• Vary spacing for rhythm. Same padding everywhere reads as wireframe.
• Cards are the lazy answer. Use only when truly the best affordance. Nested cards are always wrong.
• Touch targets ≥44×44px.

Whitespace (this is where most AI-drafted emails fail)

The default LLM behaviour is to over-pad — every section gets generous top and bottom padding, plus standalone spacer rows. The result is a moonscape. Counteract:

• No orphan spacers. Two spacer sections in a row, ever, is wrong. Collapse.
• Asymmetric padding. Most sections: padding_top: 0, padding_bottom: 32. Let the next section's top padding (or its lack) own the rhythm.
• Hero hugs. Hero image sits flush to header (≤8px gap), generous space below the hero, not both sides.
• End rule. Final content section before footer: padding_bottom: 32–48px, never more. Footer has its own top padding.
• Never: two consecutive empty paragraphs, double <br> between blocks, margin AND padding on the same side, an empty text section used as a spacer.

This applies regardless of platform whitespace-trimming passes — belt and braces.

Imagery

• Real photography or commissioned illustration only. No stock, no AI slop, no flat geometric shapes as decoration.
• Hero must serve a purpose: product, person, place, or moment. Decoration is not enough.
• Each image ≤200KB; total payload ≤800KB.
• Alt text on every image. Treat as fallback for the ~33% who block images.
• Dark mode: transparent PNGs for logos and icons; off-white (not pure white) backgrounds.

Copy

• Inverted pyramid. Lead with the answer.
• Short paragraphs. Every word earns its pl