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

# Introduction

UiChemy turns Figma designs, client briefs, prompts, and AI builds into real, editable WordPress pages. Everything lands in Elementor, Gutenberg, or Bricks.


**UiChemy** brings your Figma design, client brief or prompt, or a site prebuilt with an AI tool
like Claude or Cursor directly into WordPress. You can also start from nothing: describe what you
want, and AI writes real HTML, CSS, and JS straight onto the page.

Either way, you get editable pages inside the builder you already use: Elementor, Gutenberg, or
Bricks. Your colors, typography, spacing, and responsive settings come through as real WordPress
styles you can keep working on.

## Where are you starting from?

<Columns cols={2}>
  <Card title="A Figma design" icon="figma" href="/ai-express-mode/overview/what-is-ai-express-mode">
    Use the UiChemy Figma plugins to convert it into your page builder.
  </Card>
  <Card title="A client brief or prompt" icon="lightbulb" href="/ai-website-creator/overview/what-is-ai-website-creator">
    Use AI Website Creator to turn it into a scope, a sitemap, and a full site design you can adjust. Exports to Elementor, with Gutenberg coming soon.
  </Card>
  <Card title="A site prebuilt with AI" icon="bot" href="/ai-to-wordpress">
    Use UiChemy MCP to move your AI build into real WordPress, straight from Claude, Cursor, Codex, or any other such AI tool.
  </Card>
  <Card title="Directly in your builder" icon="blocks" href="/uichemy-composer/getting-started/what-is-uichemy-composer">
    Add the Composer widget to a page, describe what you want, and AI writes the HTML, CSS, and JS.
  </Card>
</Columns>

<Callout kind="tip">
Not sure which fits you? [Where do I start?](/which-path) compares all four in one page.
</Callout>

## Composer

Composer isn't a separate app, it's a widget you add to a page right inside your
builder's own editor. As soon as you add it, a side panel opens with three tabs, **AI Chat**,
**Editor**, and **Code**. On Elementor, your conversions arrive as a Composer ready to refine,
and if you started by describing what you want, that's the same panel you were already working
in. The same Theme Builder, Global Style, dynamic data, and forms tools apply.

<Card title="Native, editable output" icon="blocks" href="/uichemy-composer/getting-started/what-is-uichemy-composer" horizontal={true} cta="Explore Composer">
  Your output is native and editable, never a flat export or a locked image. On Elementor it
  becomes a Composer you refine visually, in code, or by describing the change to AI. On
  Gutenberg and Bricks it becomes blocks and elements.
</Card>

## Why use Composer?

- **[Genuinely editable](/uichemy-composer/uichemy-widget/what-is-a-uichemy-widget)**, output is native and editable. No locked exports, no images pretending to be layouts.
- **[Your styles carry over](/uichemy-composer/global-style/overview)**, colors, typography, spacing, and responsive settings arrive as reusable global styles.
- **[Works with your builder](/ai-express-mode/overview/what-is-ai-express-mode)**, Elementor, Gutenberg, and Bricks, depending on how you start.

## Start here

<Columns cols={2}>
  <Card title="Quick Start" icon="zap" href="/quickstart">
    Set up your account and plugin, then choose how to start. About five minutes.
  </Card>
  <Card title="Where do I start?" icon="help-circle" href="/which-path">
    Compare all four and choose the one that fits.
  </Card>
</Columns>