email-marketing
This Claude Code skill generates a single-column HTML marketing email built on a design system foundation. Use it to create brand-aligned promotional emails with a masthead, hero product image, headline lockup with typographic emphasis, body copy, single call-to-action button, specs grid, and footer, all optimized for rapid scanning and mobile responsiveness without external dependencies.
git clone --depth 1 https://github.com/nexu-io/open-design /tmp/email-marketing && cp -r /tmp/email-marketing/design-templates/email-marketing ~/.claude/skills/email-marketingSKILL.md
# Email Marketing Skill
Produce a single HTML email — centered, single column, no chrome around the
email body. Treat it like a marketing artifact: one big idea, one CTA.
## Workflow
1. **Read the active DESIGN.md** (injected above). Email leans on the display
font more than any other surface — pick the loudest type token in the DS
for the headline lockup.
2. **Pick the brand + product** from the brief. Generate a real wordmark, a
real product name, and one real benefit sentence — no placeholders.
3. **Layout**, in order, all centered inside a 600–680px column on a tinted
page background (so the email body looks like an email, not the page):
- **Masthead** — wordmark on the left + 3 short nav links (SHOP, JOURNAL,
MEMBERS) on the right. Thin underline.
- **Hero block** — a 16:9 product image placeholder. Use a DS-tinted
gradient or a stylized SVG silhouette of the product (shoe, bottle,
headphones, whatever the brief implies). Add a tiny brand stamp on the
top-left and a colorway tag on the bottom-left.
- **Eyebrow** — small caps, accent color, separated by `·` characters
(e.g. "NEW · MAX-CUSHION TRAINER · EMBER FLARE").
- **Headline lockup** — 2–3 line headline using the display font, all caps,
extra-tight tracking. Apply a slight skew (`transform: skew(-6deg)`) on
one accent word to give it a sporty parallelogram feel.
- **Body** — 2–3 sentence paragraph, left-aligned, body font.
- **Primary CTA** — solid pill or block button. One only.
- **Specs grid** — 2×2 grid of (big number + unit + label) callouts using
the display font for the numbers.
- **Footer** — wordmark, address line, unsubscribe + view-in-browser links.
4. **Write** a single HTML document:
- `<!doctype html>` through `</html>`, CSS inline.
- Center the column with `margin: 0 auto`. Set `body { background: <tint> }`
so the email-on-page metaphor reads.
- No external images — use inline SVG or DS-tinted gradient blocks for the
product photo.
- `data-od-id` on the masthead, hero, headline, CTA, specs.
5. **Self-check**:
- Email reads top to bottom in 8–10 seconds.
- One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).
- Looks legible on a 480px window (column reflows, type drops one step).
## Output contract
Emit between `<artifact>` tags:
```
<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
<!doctype html>
<html>...</html>
</artifact>
```
One sentence before the artifact, nothing after.One-click contribution flow for Open Design (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship my OD skill, ship my OD design system, translate OD docs, report an OD bug, od-contribute.
|
|
|
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
|
|