Web & Frontendlow risk

email-marketing

A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".

nexu-io/open-design·design-templates/email-marketing/SKILL.md

61/ 100推薦值

↓

匯入這個 Skill

選擇你的 coding agent，複製專案級或個人級安裝指令。

固定至平台收錄的 commit

匯入目前專案.agents/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a codex -y

匯入個人環境~/.agents/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a codex -g -y

手動放置目錄.agents/skills/email-marketingOfficial docs ↗

匯入目前專案.claude/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a claude-code -y

匯入個人環境~/.claude/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a claude-code -g -y

手動放置目錄.claude/skills/email-marketingOfficial docs ↗

匯入目前專案.agents/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a github-copilot -y

匯入個人環境~/.copilot/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a github-copilot -g -y

手動放置目錄.agents/skills/email-marketingOfficial docs ↗

匯入目前專案.agents/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a cursor -y

匯入個人環境~/.cursor/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a cursor -g -y

手動放置目錄.agents/skills/email-marketingOfficial docs ↗

匯入目前專案.agents/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a gemini-cli -y

匯入個人環境~/.gemini/skills/email-marketing

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/email-marketing -a gemini-cli -g -y

Native Gemini CLI

gemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path design-templates/email-marketing

手動放置目錄.agents/skills/email-marketingOfficial docs ↗

⚠ 安裝指令使用開源 skills CLI。執行前請檢查來源、腳本與權限。

Skill 指令

在 GitHub 查看原始檔案 ↗

# 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.