Skip to content

Product Launch Email Designer

Generates a single-column HTML marketing email for product launches, styled to a design system.

Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent produces one complete HTML email for a product launch, with a masthead, a placeholder hero image drawn as an SVG or gradient, a bold headline, short body copy, one call-to-action button, and a specs grid. It follows a fixed layout and asks the agent to read a design system file first so colours and fonts match a brand. The output is a single HTML document meant to be previewed in a browser.

Great for

  • Marketers drafting a product launch email mockup for review
  • Designers who want a quick layout starting point for a newsletter blast
  • Developers prototyping an email layout before handing it to an email platform

Skip it if

  • Sending real email campaigns: the skill only writes HTML and does not send, test in email clients, or handle unsubscribe compliance
  • Teams needing production-tested email code, since it uses no external images and has no client-compatibility testing beyond a table fallback mention

Try asking

  • “Design a launch email for a sporty running shoe brand with masthead, hero, headline, specs grid and CTA”
  • “Create a product launch email template for our new headphones”
  • “Make a newsletter blast layout for a skincare brand's autumn release”
Step-by-step guide: how to use Product Launch Email DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    email-marketing.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip email-marketing.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip email-marketing.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide a design system (DESIGN.md) first so the headline and colours match your brand
  • Give a specific product name and benefit in the request, since the skill generates placeholder-free copy
  • Review the generated HTML in a browser and test in your email platform before sending

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.

Find exactly what
you're looking for