> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Convert or Rebuild an Existing Email Design

> Choose AI Import, an agent-led design-system migration, or a manual rebuild for an existing email design

You can bring an existing email into Email Love. The right route depends on how much you have and what you want to reuse afterward.

## Choose the smallest route that fits

<CardGroup cols={3}>
  <Card title="One email or section" icon="wand-magic-sparkles" href="/plugin/ai/ai-import">
    Use **AI Import** to convert a screenshot, PNG, or Figma design into an editable Email Love frame.
  </Card>

  <Card title="A full email library" icon="arrow-right-arrow-left" href="/plugin/getting-started/migrate-design-system">
    Use **Claude or Codex** to audit the source, build foundations, and migrate reusable modules in reviewed batches.
  </Card>

  <Card title="Build it by hand" icon="pen-ruler" href="#rebuild-manually">
    Recreate the design with Email Love components when you want direct control over every section.
  </Card>
</CardGroup>

<Tip>
  Not sure which route fits? [Ask Claude or Codex to compare them](/plugin/ai/agent-help#prompts-for-common-jobs). Tell it how many emails you have and whether you need one converted template or a reusable design system.
</Tip>

## Convert one design with AI Import

AI Import is the fastest route for one email, one section, or a small set of designs.

<Steps>
  <Step title="Prepare the source">
    Put a clean screenshot, PNG, or Figma frame on your canvas. Use the highest-resolution source you have.
  </Step>

  <Step title="Select the source">
    Select the frame or image you want to convert.
  </Step>

  <Step title="Run AI Import">
    Open **AI Studio → Import Design**, then click **Convert Selected Frame(s)**.
  </Step>

  <Step title="Review the result">
    Replace image placeholders, check fonts and spacing, apply mobile settings, and preview before export.
  </Step>
</Steps>

AI Import gives you real Email Love structure, not a screenshot slice. It is a strong first draft, but it will not reproduce every design pixel for pixel. See [Import Existing Designs with AI Import](/plugin/ai/ai-import) for batch limits, recache controls, and cleanup guidance.

## Migrate a library with Claude or Codex

Do not convert a large library one email at a time. Repeated emails usually share the same headers, heroes, content rows, buttons, and footers. A migration finds those repeated modules and builds each one once.

The Email Love migration workflow:

1. Audits the source without changing it
2. Produces an inventory and effort estimate
3. Builds brand foundations in a separate Figma file
4. Converts reusable modules in small batches
5. Pauses for design review between batches

It can start from Figma, local HTML or `.eml` files, screenshots, cloud folders, and supported ESPs. See [Migrating an Existing Design System or Template](/plugin/getting-started/migrate-design-system) for sources, setup, and the exact install steps.

## Rebuild manually

Choose this route for a single design when you want to make every structural decision yourself.

### 1. Break the design into rows

Identify each horizontal band: header, hero, content, product grid, CTA, and footer. For each band, note:

* The number of columns
* The text, image, button, divider, or spacer in each column
* The background, padding, alignment, and mobile behavior

### 2. Create an Email Love frame

Open the plugin and create a new email frame. Set the email width and theme colors before you add content.

### 3. Rebuild from components

Start with the closest pre-built Wrapper or use **Build Your Own** to add an empty layout. Keep the Email Love hierarchy intact:

1. Wrapper
2. Section
3. Column
4. Text, image, button, divider, or spacer

Do not paste ordinary Figma frames into the email and expect them to export. Standard layers do not carry the Email Love structure the exporter needs.

### 4. Apply brand styling

* Set brand fonts and an email-safe fallback
* Apply colors and spacing through the existing component controls
* Replace image placeholders with 2x assets
* Add real links and useful alt text
* Add an unsubscribe link in the footer

### 5. Check mobile and export

Use [Mobile Styles](/plugin/mobile/styles-tab) to adjust stacking, padding, alignment, and visibility. Then run [Copilot](/plugin/ai/copilot), check [Preview](/plugin/preview/overview), and follow the [export checklist](/plugin/export/overview#before-you-export).

## Ask an agent to inspect your rebuild

If you built the design manually, Claude or Codex can check the result without changing it:

```text theme={null}
Use the Email Love workflow and the Figma MCP to inspect this rebuilt email: [frame link].
Do not edit the canvas. Check the Email Love hierarchy, fixed-height text,
image structure, mobile risks, alt text, CTA count, and anything likely to
flatten into an image on export. Return a prioritized checklist.
```

See [Get Help from Claude or Codex](/plugin/ai/agent-help) for setup and more troubleshooting prompts.

## Common questions

### Can I paste my existing Figma design into an Email Love frame?

Not directly. Ordinary Figma layers do not contain Email Love's export structure. Select the existing frame and run AI Import, migrate the library with an agent, or rebuild it with Email Love components.

### Can I import an HTML email?

For one email, render the HTML as a screenshot and use AI Import. For a folder or library of HTML and `.eml` files, use the agent-led migration workflow so repeated modules are audited and deduplicated first.

### Should I convert every email I have sent?

Usually not. Start with the templates and modules your team still uses. A migration audit can show how many distinct blocks your library actually contains before you commit to the rebuild.

### What if the design uses animation, forms, or complex web layouts?

Some web patterns do not translate safely to email. Interactive forms, embedded video players, hover states, and complex CSS animation usually need a simpler email-friendly replacement. See [Email Fundamentals](/plugin/getting-started/email-fundamentals) and [Email Client Compatibility](/plugin/getting-started/client-compatibility).

## Related articles

* [Import Existing Designs with AI Import](/plugin/ai/ai-import)
* [Migrating an Existing Design System or Template](/plugin/getting-started/migrate-design-system)
* [Build Emails in Figma with Claude or Codex](/plugin/ai/agents-in-figma)
* [Add Wrappers, Sections, and Content](/plugin/components/build-structure)
* [Creating and Managing Design Systems](/plugin/components/design-systems)