Email & Newsletter Designer — Renders Everywhere

    1

    Outlook, Gmail clipping, dark mode, images off — designed for the constraints, not around them.

    $7

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Email & Newsletter Designer — Renders Everywhere

    Example session with this skill installed

    Design a welcome email for a new SaaS tool called 'PulseMetrics'. We need a hero area, three benefit blocks, and a clear CTA to start the trial. Use a dark mode friendly blue theme.

    • Read your context and instructions
    • Compiled the email & newsletter

    I have designed a mobile-first welcome email for PulseMetrics, optimized for high deliverability and dark mode compatibility.

    Email Module Specification & Build Notes

    ModuleContent / SpecsAssets & Links
    Subject LineA: You're in! Let's set up PulseMetricsB: Welcome to PulseMetrics: Your first 7 days
    PreheaderGet your real-time data dashboard running in under 2 minutes.N/A
    HeaderLogo (Center/Left)180px max width, transparent PNG
    Hero SectionH1: Data that beats. Text: Start tracking your metrics in real-time.Button: [Start Free Trial] (Hex #0052FF)
    Benefits (3)1. Real-time Sync 2. Custom Alerts 3. Team Access600px width images, 24px padding
    FooterPhysical Address, Unsubscribe Link, Social IconsRequired for compliance

    Design Directions

    The Pulse Blue: Primary CTA uses #0052FF. In dark mode, we use @media (prefers-color-scheme: dark) to ensure the blue remains legible against dark backgrounds without being auto-inverted by Gmail.
    2.

    Typography: Primary font is 'Inter' or 'Helvetica', falling back to sans-serif. Headlines at 28px for mobile readability.
    3.

    Bulletproof CTA: The "Start Free Trial" button is built as a padded table cell with a background color, not an image, ensuring it appears even if images are blocked.

    Technical Implementation (Snippet)

    <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://pulsemetrics.com/start" style="height:44px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#0052FF" fillcolor="#0052FF">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Start Free Trial</center>
</v:roundrect>
<![endif]-->
<a href="https://pulsemetrics.com/start" style="background-color:#0052FF;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:44px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Start Free Trial</a>

    Next steps

    • Export your logo as a 360px PNG (for 2x retina) with a transparent background.
    • Paste the provided HTML into your ESP's "Code Editor" or "Custom HTML" block.
    • Send a test to an Outlook desktop client to verify the VML button rendering.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    The problem

    Email is a hostile rendering environment where Outlook ignores CSS, Gmail clips long files, and dark mode ruins brand colors. Designing a newsletter that looks professional across every device and client is a technical minefield.

    What it does

    • Generates bulletproof, table-based HTML with inline CSS and Outlook conditionals.
    • Structures content into mobile-first modules including preheaders, hero sections, and accessible footers.
    • Optimizes for dark mode using color-scheme meta tags and transparent asset strategies.
    • Produces platform-specific build notes for Mailchimp, Klaviyo, HubSpot, Beehiiv, and Substack.
    • Audits existing email designs for hierarchy, accessibility, and deliverability risks.

    Frameworks & tools

    Mailchimp, Klaviyo, HubSpot, Beehiiv, Substack, MJML-style logic, and legacy Outlook VML.

    Why this beats prompting it yourself

    Standard LLMs often output modern CSS like Flexbox or Grid which break instantly in Outlook. This skill enforces strict table-based architecture, mandatory CAN-SPAM compliance elements, and specific character limits for preheaders that generic prompts ignore.

    Use cases

    • Building a responsive product launch campaign with high-contrast CTAs.
    • Converting a brand style guide into an email-safe design system with web-safe fallbacks.
    • Fixing broken layouts in Outlook or preventing Gmail message clipping.
    • Drafting a weekly recurring newsletter with a 60:40 text-to-image ratio for better deliverability.

    Known limitations

    Does not support advanced CSS animations, video embeds, or complex multi-column layouts that don't stack. Does not host images.

    Does not support CSS Flexbox/Grid due to Outlook limits. Max HTML size 102KB to prevent Gmail clipping. Requires external image hosting.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 1 month ago

    Permissions

    No special permissions declared or detected

    Listed1 month ago

    What's inside

    Frequently Asked Questions

    This skill generates "bulletproof" HTML using table-based layouts and legacy Outlook VML, ensuring your designs don't break in problematic clients like Outlook or get clipped by Gmail.

    Yes, the code includes specific color-scheme meta tags and transparent asset strategies to ensure your brand colors remain readable and professional when a user toggles dark mode.

    The skill provides platform-specific build notes and compatible code for major platforms including Mailchimp, Klaviyo, HubSpot, Beehiiv, and Substack.

    You will receive the full functional logic for the email designer skill, which you can immediately deploy within your preferred AI agent environment or LLM workspace.

    While the skill handles complex responsive modules, it does not support advanced CSS animations, embedded video, or multi-column layouts that fail to stack on mobile devices.

    This skill includes built-in logic to enforce mandatory CAN-SPAM elements, accessible footer structures, and optimal text-to-image ratios to help prevent your emails from hitting the spam folder.

    New in Marketing & SEO