Produce HTML email marketing templates
email-marketingskillsetup L1★41,165
nexu-io/open-design ↗What it does
Produce single-column centered HTML email marketing
Best for
High-impact, single-message email campaigns where design consistency and display-font-first headlines are critical to brand voice.
Inputs
- · DESIGN.md with display font and color tokens
- · brand wordmark and product name
- · product benefit sentence (one real benefit, no placeholders)
- · 16:9 product image or SVG silhouette
- · product specs (2×2 grid of big number + unit + label)
- · footer: wordmark, address, unsubscribe/view-in-browser links
Outputs
- · self-contained HTML email (DOCTYPE through </html>)
- · 600–680px column centered on tinted page background
- · masthead + hero + eyebrow + headline + body + CTA + specs grid + footer
- · inline CSS, no external images
Preconditions
- · Active DESIGN.md with display font and color tokens
- · Brief with brand, product, and benefit statement
- · Product visual (image or SVG silhouette)
Failure modes
- · Multiple CTAs (spec requires one only)
- · Headline without skew parallelogram effect on accent word
- · Colors outside DESIGN.md tokens
- · External image links instead of inline SVG/gradient
- · Column width creeps outside 600–680px
- · Unreadable at 480px (type doesn't drop one step)
Trust signals
- · Explicit layout order (masthead → hero → eyebrow → headline → body → CTA → specs → footer)
- · Concrete type treatment (display font for headline, extra-tight tracking, all caps)
- · Transform effect named specifically (skew -6deg on accent word)
- · Self-check includes 8-second read time target
- · Single CTA constraint enforced
- · Specs grid as 2×2 layout with display font numbers