Here's a fun fact: 89% of AI-generated email templates break in Outlook. Not "look slightly off"—completely break. Tables collapsing, images stacking weirdly, CTAs disappearing into the void.
I learned this the hard way after shipping a "perfect" welcome email that looked like abstract art on half my users' screens.
The problem isn't the AI. It's the prompts. Email HTML is ancient, quirky, and nothing like modern web development. Your AI doesn't know that unless you tell it.
Key Takeaways:
- Email HTML uses table-based layouts (yes, like it's 2005)—your prompts must specify this
- Always include "Gmail and Outlook compatible" in your prompts or risk broken layouts
- React Email and MJML produce cleaner results than asking for raw HTML
- Mobile-first is non-negotiable—60%+ of emails are opened on phones
In This Article
- Why AI Email Templates Break
- The Email Prompt Framework
- Welcome Email Prompts
- Transactional Email Prompts
- Newsletter Layout Prompts
- Marketing Email Prompts
- Mobile-First Email Prompts
- React Email Integration
- Testing Your Emails
- Common Mistakes
- FAQ
Why AI Email Templates Break
Let me be blunt: AI thinks email is just HTML. It's not.
Email HTML is its own cursed ecosystem where:
flexboxdoesn't work (Outlook ignores it completely)divlayouts collapse randomly- CSS
marginbehaves unpredictably - Background images need VML hacks for Outlook
- Web fonts? Forget it. You get Arial or Georgia.
When you prompt "create a beautiful email template," the AI reaches for modern CSS. The result looks gorgeous in your browser preview—and explodes in production.
The fix is simple: be painfully specific about email constraints.
The Email Prompt Framework
Every email prompt needs these five elements:
| Element | What to Include | Why It Matters |
|---|---|---|
| Layout Type | "table-based layout" or "MJML" or "React Email" | Prevents flexbox/grid disasters |
| Client Support | "Gmail and Outlook compatible" | Forces fallback-friendly code |
| Width | "max-width 600px" | Standard email container width |
| Mobile | "mobile-responsive with media queries" | 60%+ opens are mobile |
| Framework | "using React Email" or "using MJML" | Cleaner, more reliable output |
Here's the base template I use for every email prompt:
Create a [EMAIL TYPE] email template using React Email components. Requirements: - Table-based layout for Gmail and Outlook compatibility - Max-width 600px, centered - Mobile-responsive (stacks on screens under 480px) - Inline CSS for email client compatibility - [SPECIFIC REQUIREMENTS]
That framework alone eliminates 80% of the "why is this broken" moments.
Welcome Email Prompts That Convert
Welcome emails have 4x higher open rates than regular emails. Don't waste that attention on generic garbage.
Simple Welcome Email
Create a welcome email for a SaaS product using React Email. Requirements: - Table-based layout, 600px max-width - Gmail and Outlook compatible with inline CSS - Header with logo placeholder (120px height) - Personalized greeting: "Welcome, {{firstName}}!" - 2-3 sentences of welcome copy - Single primary CTA button ("Get Started" - blue, 48px height) - Simple footer with unsubscribe link Style: Clean, minimal, lots of white space. No heavy graphics.
Want to try this yourself?
Feature-Highlight Welcome Email
This one works great when you need to show users what they can do:
Create a welcome email for a project management app using React Email. Layout: - Table-based, 600px container, centered - Gradient header (blue to purple) with white logo area - Personalized "Hey {{name}}, you're in!" headline Content sections: 1. 3 feature cards in a row (stack on mobile) - Each card: icon placeholder, feature name, one-line description - Features: "Create Projects", "Invite Team", "Track Progress" 2. Primary CTA: "Open Dashboard" (centered, rounded button) 3. Secondary text: "Questions? Reply to this email" 4. Footer: social icons, unsubscribe, company address Mobile: Feature cards stack vertically. CTA full-width.
The key insight? Welcome emails work best when they give users exactly ONE thing to do next. Two CTAs? You've already lost them.
Transactional Email Prompts (Order Confirmations, Receipts)
Transactional emails are the unsung heroes of user experience. They're also where most AI prompts fail spectacularly because they involve structured data.
Order Confirmation Email
Create an order confirmation email using React Email components. Header: - Logo area (centered) - "Order Confirmed" badge/checkmark Order details section: - Order number: #{{orderNumber}} - Order date - Shipping address block Items table: - Columns: Product (with small image placeholder), Quantity, Price - Support for 1-5 items dynamically - Subtotal, shipping, tax, and total rows Shipping section: - Estimated delivery: {{deliveryDate}} - Tracking link placeholder Footer: - "Need help?" with support link - Unsubscribe and company address Style: Professional, clean. Blue accent color. 600px width. Table must render correctly in Outlook.
Want to try this yourself?
Shipping Notification Email
Create a shipping notification email with React Email. Hero section: - Package icon/illustration area - "Your order is on its way!" headline - Tracking number: {{trackingNumber}} Tracking visualization: - Simple 3-step progress bar (Order Placed → Shipped → Delivered) - Current step highlighted (step 2) Shipment details: - Carrier: {{carrier}} - Estimated delivery: {{deliveryDate}} - Large "Track Package" button What's in your box: - Simple list of item names (no images needed) Footer with support link and unsubscribe. Width: 600px. Table layout for Outlook.
Pro tip: The progress bar is a visual element that AI often gets wrong. If it looks broken, simplify to just text showing "Shipped - Estimated delivery: [date]".
Newsletter Layout Prompts
Newsletters are where AI really shines—IF you structure the prompt right. The biggest mistake? Asking for too many sections.
Single-Column Newsletter
The format that actually works for most use cases:
Create a newsletter email template using React Email. Structure: - Header: Logo left, "View in browser" link right - Hero image area (full-width, 600x300 placeholder) - Main article: headline, 2-paragraph preview, "Read More" link - Divider - 2 secondary stories (each: small image left, title + snippet right) - Divider - CTA section: centered headline + button - Footer: social icons, unsubscribe, preferences link Style: Editorial, clean. Serif font for headlines (Georgia fallback), sans-serif for body. 600px width. Mobile: images stack above text.
Curated Links Newsletter
Perfect for weekly roundups:
Create a "weekly links" newsletter email using React Email. Header: - Newsletter name/logo - Issue number and date Content (5 link cards): Each card: - Source name (small, muted) - Link title (bold, clickable) - 1-2 sentence description - Category tag Cards separated by subtle dividers. Sponsor section: - Clearly labeled "[Sponsor]" - Company name, one-line pitch, CTA button Footer with social links and unsubscribe. Width: 600px. Clean, minimal design. Works in Outlook.
I've written about how to structure content hierarchies in our AI landing page prompts guide—the same principles apply to newsletter layouts.
Marketing Email Prompts
Marketing emails need to sell without being sleazy. That's a fine line to walk.
Product Launch Email
Create a product launch announcement email using React Email. Hero: - Product image area (centered, 400x400) - "Introducing [Product Name]" headline - One-line value proposition 3 benefit blocks (icon + headline + short description): 1. [Benefit 1] 2. [Benefit 2] 3. [Benefit 3] Social proof: "Trusted by 10,000+ teams" with small logo strip Pricing preview: - Starting at $X/month - "See Pricing" secondary link Primary CTA: "Try It Free" (large, centered button) Footer with unsubscribe. Style: Modern, bold. 600px width. Outlook-safe tables.
Flash Sale Email
Create an urgent sale email using React Email. Header: - Bold "48 HOURS ONLY" banner (red/orange background) - Logo below Hero: - Large "30% OFF" text treatment - Discount code: {{code}} (styled as a copyable box) - Countdown timer PLACEHOLDER (note: show static "Ends Sunday") Product grid (2x2): - 4 product cards: image, name, original price strikethrough, sale price - On mobile: 2x2 stays but smaller CTA: "Shop Now" (full-width button, urgent color) Urgency text: "Sale ends {{endDate}} at midnight" Footer with unsubscribe. Width: 600px. High contrast, attention-grabbing.
A word of warning: Don't ask AI to generate an actual working countdown timer. Email countdown timers need specialized services. Use a static "ends in X hours" instead.
Mobile-First Email Prompts
Here's the thing nobody tells you: most email clients handle responsive design poorly. You need to design for mobile FIRST, then let it expand on desktop.
Create a mobile-first promotional email using React Email. Mobile design (primary): - Full-width header with centered logo - Stacked content sections - Buttons minimum 44px tap target - Font size minimum 16px for body - Single column layout Desktop enhancement: - 2-column layout for product features - Inline images next to text - Max-width: 600px centered Include media query breakpoint at 480px. Test: Must look good when viewed at 320px width.
For more mobile-specific patterns, check out our mobile responsive prompts tutorial—the principles carry over directly.
React Email Integration Tips
React Email is the best framework for AI-generated emails right now. Why? It outputs clean, email-safe HTML and has built-in Outlook fixes.
Tell your AI to use React Email components explicitly:
Use these React Email components: - <Html>, <Head>, <Body>, <Container> - <Section>, <Row>, <Column> for layout - <Text> for paragraphs (not <p>) - <Button> for CTAs - <Img> for images - <Link> for links Do NOT use: - <div> for layout - flexbox or grid - External CSS files
MJML Alternative
If React Email isn't working, MJML is solid:
Create this email using MJML markup. Use: - <mj-section>, <mj-column> for layout - <mj-text> for copy - <mj-button> for CTAs - <mj-image> for images MJML handles Outlook compatibility automatically.
Testing Your AI-Generated Emails
Never trust the preview. Ever.
Here's my testing workflow:
At minimum, test these clients:
- Gmail (web + mobile app)
- Outlook (desktop + web)
- Apple Mail
- Yahoo Mail
If that sounds like a lot of work—it is. Tools like Litmus or Email on Acid can preview across 90+ clients instantly. Worth the cost if you send volume.
Common Mistakes and How to Fix Them
| Mistake | The Fix |
|---|---|
| Using flexbox/grid | Always specify "table-based layout" |
| Forgetting Outlook | Add "Gmail and Outlook compatible" to every prompt |
| Too many CTAs | One primary action. Maybe one secondary. That's it. |
| No mobile consideration | Always include "mobile-responsive" + breakpoint |
| Generic styling | Specify exact colors, fonts (email-safe!), spacing |
| Web fonts | Stick to Arial, Georgia, Times New Roman for body text |
Here's the most common one I see: asking for "a beautiful modern email." That prompt will fail 100% of the time because "modern" in web terms means CSS that breaks in email.
Be specific. Be boring. Email HTML rewards explicitness, not creativity.
What About Dark Mode?
Dark mode in email is... complicated. Some clients invert colors, some don't, some do it partially.
Basic dark mode support:
Include dark mode support: - Add meta tag: <meta name="color-scheme" content="light dark"> - Use @media (prefers-color-scheme: dark) styles - Provide light AND dark versions of logo if possible - Test background colors for inversion issues
For a deeper dive into dark mode patterns, see our dark mode theme guide. Many concepts apply to email too, with caveats.
You Might Also Like
- AI Form Prompts Guide - Forms in emails use similar table-based patterns
- AI Mobile Responsive Prompts - Mobile-first principles for all your UI work
- AI Prompt Templates Collection - 300+ prompts for every component type
Frequently Asked Questions
What's the best AI tool for generating email templates?
Any AI coding tool works—it's the prompt that matters. Specify React Email or MJML, require Outlook compatibility, and demand table-based layouts. The framework does the heavy lifting.
How do I make AI-generated emails work in Outlook?
Always include "Outlook compatible" and "table-based layout" in your prompts. Avoid flexbox, CSS grid, and complex backgrounds. React Email handles most Outlook quirks automatically.
Can AI generate transactional emails with dynamic data?
Yes, but use placeholders like {{firstName}} or {{orderTotal}}. The AI generates the template; you wire up the data in your email service (SendGrid, Resend, etc.).
What width should email templates be?
600px maximum. It's the industry standard. Some go 640px, but 600px works reliably across all clients.
Should I use HTML or a framework like React Email?
Use React Email or MJML. Raw HTML email is painful to write correctly. Frameworks handle the quirks (Outlook VML, spacing issues, mobile stacking) automatically.
Written by the Fardino Team. We build AI tools for frontend developers. Try Fardino free →
