<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Fei Zhang</title>
    <description>The latest articles on DEV Community by Fei Zhang (@zqf2013111).</description>
    <link>https://dev.to/zqf2013111</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3861004%2F20425303-f600-47d3-9823-15fccccb5348.png</url>
      <title>DEV Community: Fei Zhang</title>
      <link>https://dev.to/zqf2013111</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zqf2013111"/>
    <language>en</language>
    <item>
      <title>I Built an AI Tool to Fix Outlook Email Compatibility Issues (Here's How)</title>
      <dc:creator>Fei Zhang</dc:creator>
      <pubDate>Wed, 08 Apr 2026 13:49:34 +0000</pubDate>
      <link>https://dev.to/zqf2013111/i-built-an-ai-tool-to-fix-outlook-email-compatibility-issues-heres-how-1ck1</link>
      <guid>https://dev.to/zqf2013111/i-built-an-ai-tool-to-fix-outlook-email-compatibility-issues-heres-how-1ck1</guid>
      <description>&lt;p&gt;If you've ever tried to create HTML emails, you know the pain. What looks perfect in Gmail falls apart in Outlook 2016. Flexbox? Grid? CSS variables? Forget about it. We're still coding like it's 1999.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;Last month, I spent &lt;strong&gt;2 hours&lt;/strong&gt; debugging a simple promotional email. ChatGPT gave me clean, modern HTML. It looked great in Chrome, fine in Gmail, and completely broken in Outlook.&lt;/p&gt;

&lt;p&gt;The issues?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Divs don't render consistently&lt;/li&gt;
&lt;li&gt;Flexbox is a no-go&lt;/li&gt;
&lt;li&gt;CSS variables aren't supported&lt;/li&gt;
&lt;li&gt;Outlook has its own special "features"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I needed table-based layouts, inline CSS, and conditional comments. Writing that by hand feels like time travel to the &lt;/p&gt;

&lt;h2&gt;
  
  
  The Secret Sauce: Prompt Engineering
&lt;/h2&gt;

&lt;p&gt;The magic isn't in the model—it's in the constraints:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;You are an expert email HTML developer.

CRITICAL RULES:
1. Use &amp;lt;table&amp;gt; layout only. NO &amp;lt;div&amp;gt; for structure.
2. All CSS must be inline (style="..."). NO &amp;lt;style&amp;gt; tags.
3. NO Flexbox, Grid, or CSS variables.
4. Images must have width/height and alt attributes.
5. Buttons must be table-based for Outlook compatibility.
6. Max-width: 600px for desktop consistency.
7. Include Outlook conditional comments where needed.

OUTPUT: Complete HTML email code only. No explanations.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Real Results
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Before:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;2 hours manual coding&lt;/li&gt;
&lt;li&gt;30 minutes testing in Litmus&lt;/li&gt;
&lt;li&gt;Still finding Outlook bugs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;After:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;30 seconds to generate&lt;/li&gt;
&lt;li&gt;5 minutes to customize&lt;/li&gt;
&lt;li&gt;Works in all major clients&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Try It Yourself
&lt;/h2&gt;

&lt;p&gt;🚀 &lt;strong&gt;&lt;a href="https://mvp-ten-roan.vercel.app" rel="noopener noreferrer"&gt;Live Demo&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Current features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;5 email types (Welcome, Promotional, Newsletter, Transactional, Event)&lt;/li&gt;
&lt;li&gt;Natural language input&lt;/li&gt;
&lt;li&gt;Live preview&lt;/li&gt;
&lt;li&gt;One-click HTML copy&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;It's free&lt;/strong&gt; — I'm validating whether this solves a real problem.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;If people find this useful, I'm planning:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Custom brand colors/logos&lt;/li&gt;
&lt;li&gt;Export to Mailchimp/HubSpot&lt;/li&gt;
&lt;li&gt;Litmus/Email on Acid integration&lt;/li&gt;
&lt;li&gt;Template library&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Bigger Picture
&lt;/h2&gt;

&lt;p&gt;Email HTML is a perfect example of &lt;strong&gt;AI doing what humans hate&lt;/strong&gt;. Nobody wants to write table-based layouts in 2025. But millions of emails are sent every day, and they need to work everywhere.&lt;/p&gt;

&lt;p&gt;AI won't replace email developers. But it can handle the boilerplate, letting humans focus on strategy and design.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;What do you think?&lt;/strong&gt; Would you use something like this? What features would make it actually valuable for your workflow?&lt;/p&gt;

&lt;p&gt;Drop a comment — I'm building this in public and need real feedback.&lt;/p&gt;




&lt;p&gt;*P.S. If you're an email developer, I'd love your brutal honesty. Does this help, or am I solving the wrong problem?*GeoCities era.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Solution
&lt;/h2&gt;

&lt;p&gt;So I built an AI tool that generates &lt;strong&gt;email-client-compatible HTML&lt;/strong&gt; from plain English descriptions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example input:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;A welcome email with a header image, personalized greeting, 
3 feature bullets, and a primary CTA button in brand blue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;What it generates:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Table-based layout (yes, really)&lt;/li&gt;
&lt;li&gt;Inline CSS only&lt;/li&gt;
&lt;li&gt;Outlook conditional comments&lt;/li&gt;
&lt;li&gt;Mobile-responsive structure&lt;/li&gt;
&lt;li&gt;Image fallbacks&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Tech Stack
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;AI Model&lt;/strong&gt;: OpenAI GPT-4o-mini&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cost: ~$0.003 per email (basically free)&lt;/li&gt;
&lt;li&gt;Speed: ~3 seconds generation time&lt;/li&gt;
&lt;li&gt;Quality: Excellent for structured HTML&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Why GPT-4o-mini?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cost-effective for high-volume use&lt;/li&gt;
&lt;li&gt;Great at following strict formatting rules&lt;/li&gt;
&lt;li&gt;Fast enough for real-time use&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Frontend&lt;/strong&gt;: Next.js 14 + Tailwind CSS + shadcn/ui&lt;br&gt;
&lt;strong&gt;Deployment&lt;/strong&gt;: Vercel (free tier)&lt;br&gt;
&lt;strong&gt;Code&lt;/strong&gt;: &lt;a href="https://github.com/zqf013111/mailcraft-ai" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>email</category>
      <category>outlook</category>
    </item>
  </channel>
</rss>
