Designing Real Email Systems with AI Agents

This project focuses on building a fleet of 21 transactional email templates for MoolaMochi. The key to making this work with AI agents was setting up a structured S3 bucket system that allowed the agent to place generated images directly into Paper and Figma canvases via MCP.

The Problem: The Tedium of Transactional Emails

Designing transactional emails (receipts, billing alerts, support notices) is a slow, repetitive process. Every new template variation requires its own layout, custom assets, copy, and testing. Doing this manually for dozens of emails leads to visual drift, broken layouts, and days of wasted design time.

The Initial Speedup: Parameterized Layouts

The first win comes from defining a reusable, parameterized template structure: a standardized canvas with designated slots for a header, a mascot image, body copy, a CTA, and a footer. Once this skeleton is locked in, spinning up a new email template is incredibly fast. Instead of starting from a blank page, you just swap out the assets and text. Swapping these assets programmatically, however, introduces a new challenge when working with AI tools.

The MCP Linkage Problem: Local Paths Break Canvas Tools

When you use an AI agent to design templates inside Figma or Paper via MCP, referencing local file paths like /assets/image.png fails. The design canvas runs in a separate context and requires public HTTPS URLs to render fills.

The Solution: Predictable S3 Buckets

The trick is to organize your S3 bucket with a highly structured, semantic layout that matches your email types. Rather than uploading images with random generated IDs, use folder namespaces and stable file names:

emails/
├── receipt/
│   ├── mascot-header.webp
│   └── icon-coin.webp
├── billing/
│   ├── mascot-header.webp
│   └── icon-warning.webp
└── support/
    ├── mascot-header.webp
    └── icon-chat.webp

Because the paths are predictable, you or the agent can construct the exact HTTPS URLs in code without checking files: https://<bucket-name>/emails/${emailType}/${assetName}.webp.

Figure 1: The stable mascot asset mapped to the /receipt/ S3 folder.

Figure 2: The alert mascot asset mapped to the /billing/ S3 folder.

Programmatic Canvas Updates via MCP

With the S3 bucket structured, the AI agent can use Paper or Figma MCP tools to update artboards instantly. The agent swaps images by writing the S3 HTTPS URL directly into the node's background or image fill style:

await tool.update_styles({
  nodeIds: ['mascot-header-node-id'],
  styles: {
    backgroundImage: 'url(https://<bucket-name>/emails/billing/mascot-header.webp)'
  }
});

This completely removes the need for manual file imports. The agent runs the update, screenshots the artboard to verify layout alignment, and confirms the design is production-ready.

Figure 3: Artboard with S3 billing assets automatically loaded and checked.

Figure 4: A family template referencing its respective S3 assets.

Visual Analysis: How the AI Replicates and Divides Layouts

Modern AI models are multimodal, meaning they can process images directly. To copy an existing email template or design, the agent takes a screenshot of the reference design and analyzes its structure. It divides the layout into horizontal slices, such as header banners, message columns, CTAs, and footers.

Once the agent identifies these sections, it extracts spacing, margins, and font properties. It then uses this visual blueprint to map new assets onto the S3 directory system. For example, if a reference template has a mascot banner slot, the agent knows to generate a new WebP image and map it to /emails/{type}/mascot-header.webp, automatically copying the layout style.

Key Takeaways

• Never use random hashes for AI-generated design assets; use structured namespaces.
• Keep asset names identical across email folders to allow simple string replacements.
• Feed the base URL structure directly to the agent's system prompt so it knows how to target assets.
• Run automated visual QA using screenshots after the agent applies URL fills.

Figure 5: Consistent header layouts achieved by dynamically swapping S3 URLs.