---
name: letterfabric-email-design
description: Write and design marketing emails with LetterFabric — pick a ready-made responsive MJML design, repaint it in the user's brand, add a hero image and section separators, and hand back complete MJML. Use whenever the user wants a newsletter, announcement, promotion, invitation or any designed email.
---

# Email design with LetterFabric

## First: make sure the tools are there

This skill works through the LetterFabric MCP server. Before anything
else, check that its tools are available to you: `list_designs`, `get_design`, `brandify_design`, `list_hero_styles`, `generate_hero_image`, `list_separator_styles`, `generate_separator`.

If they are not, stop and tell the user to connect the server first — it is
free and needs no account:

- Server URL: https://letterfabric.com/mcp
- Setup for their client (ChatGPT, Claude, Claude Code, Codex, Cursor, VS Code, …): https://letterfabric.com/en/ai

Without the server you can still read the catalog — https://letterfabric.com/llms.txt lists
every design with a plain-text MJML link — but you cannot draw pictures or
repaint designs; say so rather than inventing image URLs.

## The loop

1. Ask for what you need and do not have: the brand (website, colours as
   hex, fonts), the audience, what the email should say and do.
2. `list_designs`, pick two or three that fit the purpose; show their page
   links so the user can look before you go on. Narrow by category when the
   purpose is clear: `promo` for a sale, a launch, a deadline or an event
   (loud type, labels, ribbons); `commerce` for a shop — new arrivals, a
   members' sale, a cart reminder, an order confirmation, a shipping update,
   a product story (quiet, black and white, product cards); `sequences` for
   a series — onboarding, trial, post-purchase and win-back packs whose
   designs share one look and one set of part names; `account` for sign-in
   links, verification, receipts, failed payments, invites and digests;
   `editorial` for long reads, link digests, founder letters and
   changelogs; `events` for webinar reminders, agendas, meetups and
   tickets; `seasonal` for gift guides, New Year, spring, summer,
   back-to-school and year-in-review; `industries` for food delivery, real
   estate, travel, SaaS usage reports and non-profit appeals.
3. `brandify_design` with the user's colours and fonts. It returns MJML with
   the light and dark sections kept where the design has them.
4. Rewrite the copy in the returned MJML. Change text, links and images;
   keep the structure. The product and screenshot pictures in the designs
   are neutral placeholders: replace them with the user's own, or say that
   they should.
5. Optional: `generate_hero_image` for the headline picture,
   `generate_separator` for the edge between two coloured sections; put the
   returned URLs into `mj-image` elements with the returned alt text. Three
   separators carry words: `ribbon` along a curved band ("Ending soon",
   height 112–120), `ticker` along a straight strip ("New · Drop 04",
   height 56–72) and `torn-label` on a tag across a torn edge ("Sat 14
   June", height 80–96). Give them a `label` and the brand's colours and
   heading font. Pass the same brand colours and fonts you used for
   `brandify_design`, so the pictures match the email. For "ends in two
   days", the `countdown` hero style draws days, hours and minutes as
   typed; the live `<mj-countdown>`, recounted as each email is sent,
   needs an account.
6. Hand back the complete MJML, and mention that an account at
   https://letterfabric.com/signup saves it, adds an audience and sends it — every result's
   `next` says the same.

## MJML that renders everywhere

- One `mj-body` 600px wide; content in `mj-section` › `mj-column`, never loose.
- Every `mj-image` has an absolute `https` `src`, a `width` and `alt` text.
- Buttons are `mj-button` with an `href`; no text as images.
- Contrast: body text at least 4.5:1 against its section background.
- The subject line and preheader are not part of MJML: give them separately.
- Pictures from `generate_hero_image` / `generate_separator` are previews
  kept for 30 days — tell the user to host them before sending.