Designing Emails with AI

When you ask a connected AI for an email, the work is split in two. The AI writes the content and chooses the sections. Flomailr owns layout, typography and colour, so the result follows a theme, uses your brand, and renders in the major inboxes including Outlook. Connect your AI first: Connect Your AI.

The workflow

  1. Read the design kit. The AI calls get_design_kit, which returns the themes, the section patterns and your brand kit (if you have one). If there is no brand kit and you have a website, it should offer to import one.
  2. Compose. The AI calls compose_email with an ordered list of sections and save: { name, subject }. Saving creates a draft campaign and returns its id. It never sends anything.
  3. Preview. The AI calls preview_email with that campaign id. You see the real email in the chat, with desktop, mobile and dark inbox views, and the deliverability grade.
  4. Revise. For small changes the AI uses edit_campaign. For a new look it uses restyle_email. Neither needs the whole design sent again.
  5. Finish in Flomailr. The draft appears in Campaigns and opens in the visual builder, where you can adjust anything by hand, pick a list and send. Or ask your AI to send it with a dry run first (see Sending Safely with AI).

The AI is told never to invent prices, statistics, quotes, dates or links. If it needs one, it should ask you.

Themes

A theme sets colours, fonts, spacing and corner shapes for the whole email. The AI picks one by its id. If you do not name a theme, your brand kit's base theme is used when you have one, and Clean otherwise.

ThemeIdWhat it is for
CleancleanCrisp and neutral. Product updates, onboarding, SaaS, anything that should feel trustworthy and modern
EditorialeditorialA printed-magazine feel with serif headlines on paper tones. Newsletters, essays, long reads, publishers
StudiostudioGallery-white, black type, uppercase tracked headings, square corners. Fashion, retail, design studios, architecture
HearthhearthWarm cream and terracotta with a friendly serif and pill buttons. Restaurants, cafes, bakeries, wellness, local shops
MidnightmidnightDark, glowing, confident. Launches, tech, events, nightlife, anything that wants to feel like a keynote
PosterposterLoud condensed headlines and a hot accent. Sales, drops, promos, sports, concerts, anything with a deadline
FreshfreshAiry mint and leaf green with soft corners. Health, food, eco, outdoors, fitness, nonprofits
MonomonoTypewriter headings, plain layout, no decoration. Developer tools, changelogs, technical newsletters
LuxeluxeRefined serif capitals, ivory and gold, generous space. Hospitality, jewelry, real estate, weddings, fine dining

Text and link colours in every theme are adjusted so they stay readable on the background they sit on. To compare looks, ask for the same email in two themes.

Section patterns

An email is an ordered list of sections, up to 20. A typical order is header, hero, one to four body sections, a call to action, then footer. Each section uses one of these patterns:

PatternWhat it does
headerLogo (from the brand kit when set) or wordmark, optional nav links. Usually first
heroThe opening statement. With an image it becomes a photo hero, without one a bold typographic band
textA heading and Markdown body copy, optional button. The workhorse for letters and updates
features2 to 4 benefits or items, as columns (short copy) or a list (longer copy, optional thumbnails)
products1 to 4 product cards with image, price, optional compare-at price and a buy button
articles1 to 6 article or blog teasers with optional thumbnails. Newsletters and digests
testimonialOne customer quote with name, role and optional avatar and star rating
stats2 to 4 big numbers with labels. Only real figures
ctaA focused closing call to action on a contrasting band
eventEvent details (what, when, where) with an RSVP button and optional add-to-calendar links
imageA single image with alt text, optional link and caption
countdownA live countdown to a deadline with an optional button
tableA simple data table (schedule, pricing, order summary). The first row is the header
signoffA personal sign-off: closing line, name, title, optional headshot
footerBrand name, links and social icons. The unsubscribe link and postal address are added at send
dividerA thin rule between sections
spacerVertical breathing room

Body copy is written in Markdown (bold, italic, links, bullet lists). Links must be http, https, mailto or tel. Images must be public https URLs. If you have a file instead of a URL, the AI can upload it with upload_asset (PNG, JPEG, GIF or WebP up to 5 MB; SVG is refused) and use the permanent URL it returns.

The footer pattern does not need your unsubscribe link or address. Flomailr adds both when the campaign is sent. A campaign send is blocked until you add a business mailing address under Settings > Workspace, in the Email sending card.

Brand kits

A brand kit holds your logo, colours, fonts, voice and social links. When one exists, every composed email uses it, layered over the theme.

Set it up in either place:

  • Settings > Brand. Enter your website and click Import from website. Flomailr reads your homepage for a logo, colours, fonts and social links and fills the form. Nothing is saved until you press Save. You can also fill the fields yourself. Only the primary colour is required. Saving the brand needs an owner or admin role.
  • Through your AI. Ask it to import your brand from your URL. The import_brand_from_url tool returns a proposal with logo candidates and where each value came from, and saves nothing unless asked to. The AI should show you the proposal, let you correct it, then save it with set_brand.

Fonts found on a website are mapped to email-safe equivalents. The voice field is free text, for example "warm, plain-spoken, no exclamation marks". The AI is told to write in it.

Changing a draft

  • get_campaign returns an outline of the draft: each block's id, type and a one-line summary. Use format: "full" for the whole design.
  • edit_campaign applies edits by block id. The operations are update (merge new values into a block), remove, move, insert (a themed section or a raw block, placed at, after or before a position), settings (such as the preview line) and restyle (a new theme). Up to 50 operations run in order and either all apply or none do. It can also change the subject and name, and it returns the new outline and audit.
  • restyle_email reassigns every colour, font, size and corner radius by role from a theme and your brand, and leaves content and structure alone. Use it for "make this match our brand" or to try another look. It also repairs low-contrast text.

Only drafts can be edited by the connector. A campaign that is scheduled, sending or sent is refused.

Checks that run on every design

Every compose, edit and preview returns a deliverability and accessibility audit with an A to F grade and findings. The audit covers deliverability, accessibility, spam, content, structure and design. The design checks look at text contrast against the real background, too many fonts, heading order, and leftover sample copy. The same findings appear in the builder's preflight panel. Ask your AI to fix every error-level finding before sending.

Preview notes

The preview fills merge tags with a sample contact, Alex Morgan. Images hosted outside Flomailr may not load inside the preview, and the real email is not affected. If the preview does not appear in your AI app, the tool also returns a link to open the draft in the builder.

Prompts that work well

  • "Import our brand from https://example.com and show me the logo, colors and fonts you picked up."
  • "Write this month's newsletter in our brand: a short intro, the three blog posts I'm pasting below as article cards, and a button to the shop. Show me a preview."
  • "Make an email for our open house on Saturday, 10am to 2pm, with an RSVP button. Try it in the Editorial and Hearth themes so I can compare."
  • "Open the 'Spring sale' draft, change the button text to 'Shop the sale', then check it for deliverability and accessibility problems."
  • "Restyle the 'Spring sale' draft in the Midnight theme and keep the copy the same."
  • "Add a testimonial section after the features in the 'Welcome' draft. The quote is: ..."

Give the AI the real details: dates, prices, links and image URLs. The more specific the brief, the fewer questions it has to ask.

Related