> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# How AI Express Mode Works (Conversion Workflow)

The 7 steps of an AI Express Mode conversion, from picking a design to opening your finished page.


Once you've [installed the Figma plugin](/introduction/install-figma-plugin) and chosen **AI Express Mode**, here's what happens, step by step.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 360px;">
  <video controls width="100%" style="display: block;">
    <source src="https://res.cloudinary.com/ekxmy1t9/video/upload/v1789457352/uichemy-docs/ai-express-mode/overview/what-is-ai-express-mode/full-conversion-walkthrough.mp4" type="video/mp4" />
  </video>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>A full AI Express Mode conversion, from selecting a frame to opening the finished page</em></p>

<Callout kind="tip">
First time seeing the **Connect site** step above? See [Connect Your Site](/introduction/connect-your-site) for how to get your Connection Link and link your WordPress site.
</Callout>

## Step 1: Select Design

Click **Select a frame** to open a picker showing your Figma file's pages and frames as thumbnails with checkboxes. Check the one you want to convert, then click **Done**. It works best on optimized, auto-layout designs (see [Design Optimization](/design-optimization/auto-layout/convert-your-design)).

<Callout kind="info">
Screenshot: Step 1 "Select a page or frame" picker, showing the grid of pages and frames with checkboxes and the Done button.
</Callout>

You'll land back on Step 1 with a large preview of your chosen page, with an **X** to remove it if you picked the wrong one. Click **Next** to continue, or **Back** to pick a different one. After you click Next, UiChemy checks your frame and reads its structure, you'll see an "Analyzing your design" step with an "Assessing design health" progress indicator while it works.

<Callout kind="tip">
If the check flags an issue, select the **main (top-level) frame**, not an inner layout or nested element, and put your design in **Auto Layout** first.
</Callout>

## Step 2: Connect Site

Choose the WordPress site to publish your page to. This uses the same connection as Live Import.

Pick your site from the **Select Site** list, each connected site has its own **edit** and **delete** icons if you need to update or remove it. Don't see it? Click **+ Add another site** (requires **UiChemy Pro**, connecting more than one site is a Pro feature). First time here? Set up the connection once in [Connect your site](/introduction/connect-your-site).

<Callout kind="info">
Screenshot: Step 2 "Connect your site" with the site selected.
</Callout>

UiChemy then runs a quick **Site Check** to confirm your site is ready, verifying that WordPress, UiChemy, Elementor, UiChemy Pro, Nexter Extension, and Nexter Theme are present and active. When everything passes, click **Next**.

<Callout kind="tip">
- **Your site isn't listed.** Click **+ Add another site** (Pro), or set up the connection in [Connect your site](/introduction/connect-your-site).
- **A Site Check item is missing or inactive.** Install or activate it (the Nexter theme may need an **Activate** click), then re-check.
</Callout>

## Step 3: Choose Setup

Decide how much of your site this conversion changes: **Full Setup** or **Page Only**.

**Full Setup**, tagged **"Fresh sites"** in the plugin, imports this page **and** sets up your global colors, typography, and the header and footer. Best for a **fresh site**. To save your header and footer as templates, UiChemy needs somewhere to put them, it looks for **Elementor Pro** first, then **the Nexter theme with its free extension**. If you have neither, Full Setup is disabled, since there's nowhere to store those templates, use Page Only instead.

**Page Only** imports **just this page**. Your existing colors, header, and footer stay untouched. Choose this when you're adding a page to a site that already has its branding set up.

<Callout kind="warning">
Full Setup replaces your site's existing global colors, typography, header, and footer. Only use it on a new or empty site, if you're adding a page to a site that already has branding in place, use Page Only instead.
</Callout>

<Callout kind="info">
Screenshot: Step 3 "What should we set up?" showing Full Setup and Page Only.
</Callout>

<Callout kind="tip">
Building a brand-new site → **Full Setup**. Adding to an existing site you don't want to change → **Page Only**.
</Callout>

## Step 4: Fix Gaps

Decide whether AI Express reproduces your design exactly, or tidies up small issues as it converts.

- **Keep my design exactly**, your design is reproduced as you built it, nothing is changed. Choose this when your Figma file is polished and you want a faithful, one-to-one result.
- **Clean it up as it converts**, AI Express fixes minor issues while converting, such as spacing, contrast, interactive states, and tap targets. Choose this when your design has small inconsistencies you'd like smoothed out.

<Callout kind="tip">
For example, if two buttons in your Figma file have slightly different padding, **Clean it up as it converts** will even them out automatically. **Keep my design exactly** leaves them as-is.
</Callout>

<Callout kind="info">
Screenshot: Step 4 "Convert exactly or clean it up?" with both options.
</Callout>

Either way, the result is fully editable afterward, so you can still adjust anything in the [Composer](/uichemy-composer/uichemy-widget/what-is-a-uichemy-widget).

## Step 5: Add Motion

Add smooth animations that enhance interactions without changing your layout or content. Motion is applied during the conversion. Pick one of three tiers:

- **Static**, nothing moves. Everything sits still and the page loads fastest.
- **Subtle**, small, tasteful movement. Sections fade in as you scroll, light and fast.
- **Immersive**, rich movement. Shifting backgrounds, depth as you scroll, and effects that follow your cursor, kept smooth.

<Callout kind="info">
Video: the same page previewed at each tier, Static, Subtle, and Immersive.
</Callout>

<Callout kind="tip">
Want the lightest, calmest page → **Static**. Want a bit of life without distraction → **Subtle**. Want a rich, animated feel → **Immersive**. You can also add or change motion later by asking [AI Chat](/uichemy-composer/uichemy-widget/ai-chat-tab) inside the Composer.
</Callout>

<Callout kind="tip">
Static suits a simple business page. Subtle fits most modern sites, portfolios, SaaS pages, service businesses. Immersive suits creative portfolios or premium marketing pages where extra motion supports the brand.
</Callout>

## Step 6: Review

Your last check before the page is built. You'll see the frame you're converting plus a summary of your choices, each with an **Edit** link so you can jump back and change it: **Site**, **Setup** (Full or Page Only), **Fix gaps** (on or off), **Motion** tier, and **Model**. Below that, a **Direction** toggle sets the page's text direction, Left to right by default. A **Credits** line shows roughly how many Credits this conversion needs and how many you have left, click it to expand the breakdown.

<Callout kind="info">
The Credits estimate updates if you change your Setup or Motion choice, richer motion and Full Setup typically cost more.
</Callout>

This is also where the plugin confirms your design is in Auto Layout. When it looks right, click **Convert**.

<Callout kind="tip">
If the Auto Layout check flags an issue, fix your design in Figma, then return to this screen. See [Design Optimization](/design-optimization/auto-layout/convert-your-design).
</Callout>

<Callout kind="info">
Screenshot: the "Ready to convert" review screen with the selections summary and the convert button.
</Callout>

By default, UiChemy picks the right conversion model for you, so you don't need to touch this. If you'd like to experiment, you can change the model from this screen, there's no single "best" choice, so try the default first and only switch if you want to compare.

<Callout kind="tip">
If you see "Could not connect," make sure the UiChemy plugin is active and your Connection Link is correct, then click **Retry**. See [Troubleshooting](/ai-express-mode/troubleshooting) if it persists.
</Callout>

## Step 7: Build & Open Your Page

Once you click **Convert**, UiChemy builds your page. An overall progress percentage tracks the whole process while it works through a few stages:

- **Warming up the AI engine**, getting ready to process your design.
- **Reading your design**, parsing your frames, layers, and auto layout.
- **Syncing your design tokens**, your colors and typography.
- **Converting and publishing**, mapping your design to widgets and pushing them to your site, section by section. You'll see a live list of which sections are composing, for example "Header composing," "Our Product composing," and so on.

You can **Stop** at any point.

<Callout kind="info">
Video: the "Building your page" progress, reading design, syncing tokens, converting and publishing.
</Callout>

When it finishes, UiChemy saves your page as a **draft** on your site. The screen also shows how much time you saved and how many Credits the conversion used, click that line to expand the breakdown. Click **Open** to see your converted page in your browser, ready to review and publish when you're happy.

<Callout kind="info">
Screenshot: the "Your page is ready" screen with the page preview and the Open button.
</Callout>

## Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Does my converted page go live right away?" default-open="false">
    No. UiChemy saves it as a **draft** on your site. Click **Open** to review it, then publish when you're happy.
  </Expandable>

  <Expandable title="Can I stop a conversion once it's started?" default-open="false">
    Yes. You can click **Stop** at any point while your page is being built.
  </Expandable>

  <Expandable title="Why is Full Setup disabled?" default-open="false">
    Full Setup needs somewhere to save your header and footer as templates. UiChemy looks for **Elementor Pro** first, then the **Nexter theme with its free extension**. If you have neither, use **Page Only**.
  </Expandable>

  <Expandable title="Why can't I add a second site?" default-open="false">
    Connecting more than one site requires **UiChemy Pro**. The **+ Add another site** option unlocks once Pro is active.
  </Expandable>
</ExpandableGroup>

## What to Do Next

Click **Open** to see your page on your site and publish it. Want to change something first? Pick a path below.

<Columns cols={2}>
  <Card title="Editor Tab" href="/uichemy-composer/uichemy-widget/editor-tab">
    Fine-tune the section visually in the Composer, no code.
  </Card>
  <Card title="Code Tab" href="/uichemy-composer/uichemy-widget/code-tab">
    Drop into the raw HTML, CSS, and JS behind the section.
  </Card>
  <Card title="AI Chat Tab" href="/uichemy-composer/uichemy-widget/ai-chat-tab">
    Describe the change you want and let AI make it for you.
  </Card>
  <Card title="Troubleshooting" href="/ai-express-mode/troubleshooting">
    Something looks off? Find the fix here.
  </Card>
  <Card title="Export to WordPress" href="/ai-express-mode/export-to-wordpress">
    Ready to publish? See the full export walkthrough.
  </Card>
</Columns>
