skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

email-marketing

Generate single-column HTML email layouts with inline CSS and design-system tokens.

1|Updated Jul 9, 2026
Search Tags:#html#newsletter#design system#product launch#email marketing#cta
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill email-marketing-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: email-marketing
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/email-marketing
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill email-marketing-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the time-consuming, design-heavy work of producing a polished product-launch email that matches a brand design system.

Core Features & Use Cases

  • Single-column HTML email layout: Produces a centered, table-fallback-friendly structure with inline CSS.
  • Brand + design-system driven styling: Uses required DESIGN.md tokens for color, typography, layout, and components to keep output consistent.
  • Full email sections in one pass: Creates masthead, hero image block (inline SVG/gradient), eyebrow, headline lockup (with skew accent), body copy, one primary CTA, specs 2×2 grid, and footer.

Quick Start

Ask the AI to design an email template for a product launch for a brand of your choice using the active DESIGN.md design system tokens, ensuring it includes a single CTA and a 2×2 specifications grid.

Frequently Asked Questions about email-marketing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a production-ready HTML product launch email?▼

A brand-consistent HTML email layout is generated by applying your design system tokens to a marketing brief, producing a single-column structure with inline CSS, inline SVG hero graphics, and standardized section attributes.

What is the structure of a single-column newsletter email layout?▼

A single-column newsletter email layout structures content sequentially with a masthead, inline SVG hero block, eyebrow, headline lockup, body copy, primary CTA, 2x2 specifications grid, and footer using table-fallback-friendly inline CSS.

Can I use external images in my HTML email template?▼

External images are not supported; the HTML email template requires inline SVG or CSS gradients for the hero image block to ensure immediate previewability without external asset dependencies.

How do I style an email blast to match an existing design system?▼

Styling an email blast to match a design system requires reading DESIGN.md tokens for color, typography, layout, and components, then applying them directly into the output HTML's inline CSS.

Does the HTML email generator support multi-column newsletter layouts?▼

Multi-column newsletter layouts are not supported; the generator specifically produces centered, single-column structures designed for desktop-first and previewable product launch scenarios.

Related Skills

Explore More Marketing & Sales Skills→
Gull-StackGull-Stack

brand-building

Define brand foundations, voice, and messaging for cohesive identity.

Official
Basic
themadorgthemadorg
6

bedrud-email-cerberus

Create and maintain Cerberus-based HTML email templates for consistent rendering.

Official
Advanced
vessuxvessux
1

plannotator-visual-explainer

Generate self-contained HTML visual explanations with Plannotator theming.

Community
Advanced
wshaddixwshaddix
71

mjml-email-templates

Generate responsive HTML email templates using MJML with .NET Razor syntax.

Community
Intermediate