一键在 Manus 中运行任何 Skill

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

在 Manus 中运行

星标66,163

分支7,420

更新时间2026年5月18日 04:56

来源

nexu-io

nexu-io/open-design

打开 GitHub 仓库查看创作者相关仓库

安装命令

下载

在 Manus 中运行

适用职业SOC

网页开发工程师计算机与数学类职业15-1254L4

文件资源管理器

2 个文件

SKILL.md

readonly

name	email-marketing
description	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".
triggers	["email","email template","newsletter","email blast","product launch email","mjml","邮件营销","邮件模板"]
od	{"mode":"prototype","platform":"desktop","scenario":"marketing","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"example_prompt":"Design a launch email for a sporty running shoe brand — masthead, hero, big headline lockup, specs grid, CTA."}

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

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.
Pick the brand + product from the brief. Generate a real wordmark, a real product name, and one real benefit sentence — no placeholders.
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.
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.
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.

同仓库更多 Skills

同仓库

social-media-matrix-tracker-template

nexu-io/open-design

社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.

2026-06-1766.2k

audio-jingle

nexu-io/open-design

Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.

2026-06-1666.2k

blog-post

nexu-io/open-design

A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".

2026-06-1666.2k

clinical-case-report

nexu-io/open-design

Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".

2026-06-1666.2k

critique

nexu-io/open-design

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".

2026-06-1666.2k

dashboard

nexu-io/open-design

Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.

2026-06-1666.2k

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

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.

Pick the brand + product from the brief. Generate a real wordmark, a real product name, and one real benefit sentence — no placeholders.

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.

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.

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.