Email & Newsletter Designer — Renders Everywhere
Outlook, Gmail clipping, dark mode, images off — designed for the constraints, not around them.
$7
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsEmail & 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
- Generated the UI component
I have designed a mobile-first welcome email for PulseMetrics, optimized for high deliverability and dark mode compatibility.
Email Module Specification & Build Notes
| Module | Content / Specs | Assets & Links |
|---|---|---|
| Subject Line | A: You're in! Let's set up PulseMetrics | B: Welcome to PulseMetrics: Your first 7 days |
| Preheader | Get your real-time data dashboard running in under 2 minutes. | N/A |
| Header | Logo (Center/Left) | 180px max width, transparent PNG |
| Hero Section | H1: 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 Access | 600px width images, 24px padding |
| Footer | Physical Address, Unsubscribe Link, Social Icons | Required 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.
email-newsletter-designer-renders-everyw.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
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.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 7 days ago
- Passed all security checks, Safe to install