email-marketing
|
pinned to #fb9ae97updated 3 months ago
Ask your AI client: “install skills/email-marketing”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install skills/email-marketingmetahub onboarded this repo on the author's behalf.
If you own github.com/nexu-io/open-design on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
77,070
Last commit
3 months ago
Latest release
published
- #agent-skills
- #ai-agents
- #ai-design
- #byok
- #claude-code-for-design
- #claude-design
- #codex-design
- #coding-agents
- #cursor-design
- #design-systems
- #design-tools
- #desktop-app
- #figma-alternative
- #generative-ai
- #hermes-agent
- #local-first
- #no-code
- #prototyping
- #ui-generator
- #vibe-coding
About this skill
Pulled from SKILL.md at publish time.
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.
Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.fb9ae97· 3 months ago
Documentation
4 passed1 warningDescription qualitywarn
49 words · 305 chars — manifest description is empty; graded the GitHub repo description instead
A skill's manifest description doubles as its trigger — add one to SKILL.md (15+ words, e.g. “use this skill when …”).
README is present and substantial
54,272 chars · 20 sections · 10 code blocks
Tags / topics declared
20 total — agent-skills, ai-agents, ai-design, byok, claude-code-for-design, claude-design (+14)
README has usage / example sections
found: Quick start
Homepage / docs URL declared
https://open-design.ai
Release history
1- releasecurrentfb9ae97warn3 months ago
Contents
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. Setbody { 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-idon 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.
Reviews
No reviews yet. Be the first.
Related
Verification Before Completion
Evidence before assertions, always
Writing Plans
Turn specs into phased implementation plans
Test-Driven Development
Red → green → refactor discipline for any feature or bugfix
mh install skills/email-marketing