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

# Getting Started

Sign in, get to know the dashboard, start a project from a prompt or a template, and walk through scope, sitemap, design, and export.


This guide takes you from signing in to exporting your first website. Follow the steps in order, or jump to the one you need.

## Before You Start

<Callout kind="info">
- A UiChemy account. Sign up at [app.uichemy.com](https://app.uichemy.com/) if you do not have one.
- A basic description of the website you want to build.
</Callout>

## Step 1: Open AI Website Creator

You can open AI Website Creator from WordPress or directly in your browser. Expand the one you want to use:

<ExpandableGroup>
  <Expandable title="From WordPress (UiChemy plugin)" default-open="false">
    Once the UiChemy plugin is installed ([Set up the UiChemy WordPress plugin](/introduction/set-up-wordpress-plugin)):

    - Go to **UiChemy → Home** in your WordPress sidebar and open the **AI Website Creator** tab.
    - You'll see **"Connect your UiChemy account"**. Click **Log in to continue** and sign in with the same credentials you use on your UiChemy dashboard.
    - You're redirected to a **"Secure sign-in to UiChemy"** confirmation screen showing which site you're providing access to (for example, `localhost:8080`).
    - Click **Allow**, wait for it to show **"Authorizing..."**, and you're sent back to WordPress.
  </Expandable>

  <Expandable title="Directly in your browser" default-open="false">
    Go to [app.uichemy.com](https://app.uichemy.com/).
  </Expandable>
</ExpandableGroup>

<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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790578497/uichemy-docs/ai-website-creator/export/export-to-wordpress/connect-account.webp" alt="" width={1917} height={908} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>UiChemy → Home → AI Website Creator tab, before you log in</em></p>

### Sign In or Create an Account

Both paths take you to the same **"Welcome to UiChemy"** sign-in page:

- **Log in with one click:** continue with Google, Facebook, or POSIMYTH Store, or sign in with a passkey.
- **Or use email and password:** enter your email and password, then click **Login**. Check **Keep me signed in** to stay logged in on this device, or click **Forgot Password?** to reset it.
- **Don't have an account yet?** Click **Create account**, then continue with Google or Facebook, or fill in your full name, email, and password and click **Create Account**. Passwords must be at least 8 characters, with uppercase, lowercase, and a number.

<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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1789453552/uichemy-docs/accounts/getting-in/sign-in/welcome-signin-page.png" alt="" width={1137} height={755} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Welcome to UiChemy sign-in page</em></p>

<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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1789453543/uichemy-docs/accounts/getting-in/sign-in/create-account-page.png" alt="" width={1138} height={755} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Create your account sign-up page</em></p>

<Callout kind="info">
Signing in with a third-party provider like Google shows a **"Secure sign-in to UiChemy"** confirmation screen. Click **Allow** to finish connecting your account.
</Callout>

## Step 2: Get to Know the Dashboard

### The Welcome Popup

Right after you sign in, a **"Welcome to UiChemy, [your name]"** popup appears: "UiChemy has 3 ways to build WordPress sites. This dashboard is for the first one." It shows three cards:

| Card | What it does | Best for | Button |
|---|---|---|---|
| **AI Website Creator** (marked **YOU ARE HERE**) | Describe your idea in a few sentences and AI builds a brand-new website you can export to WordPress. | Starting from scratch, no design file | **Start building** |
| **Figma to WordPress with Claude** | Connect Claude to your Figma file through MCP and convert your design into an editable WordPress page. See [AI to WordPress](/ai-to-wordpress). | AI-assisted conversion of an existing design | **View AI guide** |
| **Figma plugin to WordPress** | Convert designs straight from the Figma app with the UiChemy plugin. No MCP or AI model needed. See [Figma to WordPress](/introduction/what-is-figma-to-wordpress). | Pixel-perfect, direct conversion | **View Figma guide** |

- Not sure which one to pick? Click **Take the 2-question quiz** at the bottom of the popup. See [The 2-Question Quiz](#the-2-question-quiz) below.
- Tick **Don't show this again** if you don't want to see the popup on your next sign-in.
- Click **Close** or the **×** at the top right to dismiss it.

<Callout kind="tip">
**Example:** You want a brand-new site and don't have a design file. Click **Start building** on the AI Website Creator card to go straight to your dashboard.
</Callout>

#### The 2-Question Quiz

The quiz helps you pick the right way to build. The first question, **Question 1 of 2**, asks: **"Do you already have a design for this site?"**

| Answer | Means |
|---|---|
| **Not yet** | I'm starting from an idea |
| **Yes, in Figma** | I want to turn it into WordPress |

Pick the answer that fits to continue. Click **Back to all options** to return to the three cards.

<Callout kind="tip">
**Example:** You have no design yet and only an idea for a bakery website. Choose **Not yet**.
</Callout>

### The Dashboard

Once you close the popup, you're on your AI Website Creator dashboard:

- **Left sidebar:** use the **Search bar** at the top to quickly find any project by name. Below it, **Last Opened** lists the projects you worked on most recently. If you're new, it starts empty.
- **Prompt box:** sits in the center of the screen, where you describe the website you want.
- **Start with a Guided Brief:** walks you through a structured set of questions instead of a single prompt.
- **Suggestion chips:** below the prompt box, such as **Barber shop**, **Beauty salon**, **Local bakery**, **Dental clinic**, **Yoga studio**, and **Law firm**.
- **My Projects** and **Explore Templates:** two tabs below the prompt area. **My Projects** shows your own projects, and **Explore Templates** shows ready-made sites you can clone.

### My Projects

Each project card shows the project name, its number of pages, and when it was last edited.

<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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790770040/uichemy-docs/ai-website-creator/getting-started/my-projects.webp" alt="" width={1913} height={935} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The AI Website Creator dashboard, with the My Projects tab open</em></p>

<Callout kind="tip">
**Example:** A card reads **Domestic & International Travel Booking**, 5 pages, Edited 22 hours ago.
</Callout>

Click the **three-dot** icon on a card to open its menu:

| Option | What it does |
|---|---|
| **Copy Link** | Copies the project link |
| **Rename** | Changes the project name |
| **Duplicate** | Makes a copy of the project |
| **Transfer** | Transfers the project |
| **Delete** | Removes the project |

## Step 3: Start Your Project

There are two ways to start:

| | Option 1: From a Prompt | Option 2: From a Template |
|---|---|---|
| **Best for** | A site built around your own business | A quick start from a ready-made design |
| **How** | Describe your website and click **Create** | Clone a site from **Explore Templates** |
| **Credits** | Uses credits | Doesn't use any credits |

### Option 1: Start From a Prompt

Type a description of the website in the prompt box, then click **Create**. The button shows **Creating...** while AI Website Creator drafts your project.

A single sentence works ("Make a website for a restaurant"), but a short paragraph gives the AI far more to work with. Cover the business, the goal, the tone, and anything specific you need.

<Callout kind="tip">
**Example prompt:** "A boutique law firm in Austin, Texas specializing in small business and startup legal services (contracts, formation, IP). Goal: generate consultation bookings and build trust with first-time founders. Tone: premium but approachable, not corporate. Needs a services page, an about page introducing the two founding attorneys, and a blog for legal tips."
</Callout>

Concrete beats generic: naming the audience ("first-time founders," not "clients"), the goal, and a tone reduces back-and-forth later in the Design Editor. Not sure what to write? Click **Spin up an idea** below the prompt box to get a starting suggestion.

### Option 2: Start From a Template

<Steps>
  <Step title="Open Explore Templates" icon="layout-template">
    On the dashboard, click the **Explore Templates** tab. Each card shows the template name, its type, and its number of pages.
  </Step>
  <Step title="Click the copy icon" icon="copy">
    Click the **copy** icon at the bottom-right of the template's card. A **Clone** popup opens, showing how many pages you'll get.
  </Step>
  <Step title="Clone the site" icon="check">
    Click **Clone site** to add your own editable copy to your projects, or **Cancel** to close the popup.
  </Step>
</Steps>

<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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790770041/uichemy-docs/ai-website-creator/getting-started/explore-templates.webp" alt="" width={1910} height={935} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Explore Templates tab, with ready-made sites to clone</em></p>

<ExpandableGroup>
  <Expandable title="Available templates" default-open="false">
    | Template | Type | Pages |
    |---|---|---|
    | **Crema** | Café & Bakery Website | 13 |
    | **Oblik** | Design Studio Website | 10 |
    | **Luma Skin** | Skincare Website | 9 |
    | **Kabiru Studio** | Creative Portfolio Website | 7 |
    | **Oddfold** | Brand & Digital Studio | 16 |
  </Expandable>
</ExpandableGroup>

<Callout kind="tip">
**Example:** Click the copy icon on **Crema**. The popup asks **"Clone Crema?"** and notes that you'll get your own editable copy with 13 pages in your projects. Click **Clone site**.
</Callout>

<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: 478px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790770804/uichemy-docs/ai-website-creator/getting-started/clone-site.webp" alt="" width={470} height={174} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The Clone popup for the Crema template</em></p>

## Step 4: Review Your Scope

AI Website Creator drafts a full project scope from your prompt, covering Project Basics, Business & Audience, Trust & Messaging, Brand Look & Feel, Design Inspiration, and Competitors & Structure. Confirm each section as-is, or edit it with more detail, a reference website, or an uploaded brief.

<Callout kind="tip">
A good answer names specifics: the customer ("solo freelance designers," not "designers"), outcomes over generic service names, and a tone paired with a tone to avoid.
</Callout>

<Card title="Scope Editor" href="/ai-website-creator/scope-editor/overview" icon="check-square">
  Walk through all six steps of the Scope Editor in detail.
</Card>

## Step 5: Review Your Sitemap

Once you save your scope, AI Website Creator builds a full sitemap. Pages and sections appear in a visual layout. You can add, remove, reorder, or rename anything before moving to design. Nothing is locked in at this stage.

<Card title="Sitemap Editor" href="/ai-website-creator/sitemap-editor/overview" icon="map">
  Add pages, reorder sections, and manage global sections.
</Card>

## Step 6: Customize Your Design

Once your sitemap is ready, AI Website Creator generates a full visual design for every page and section. In the Design Editor, you can switch color palettes and font pairs, swap section layout variants, upload images or browse the stock photo library, edit text directly on the canvas, and preview on mobile, tablet, and desktop.

<Card title="Design Editor" href="/ai-website-creator/design-editor/overview" icon="palette">
  Colors, fonts, layouts, text, and images, in full detail.
</Card>

## Step 7: Export Your Project

When your design is ready, export it to Elementor. Gutenberg import is coming soon.

<Card title="Export to WordPress" href="/ai-website-creator/export/export-to-wordpress" icon="download">
  Download the plugin, install it, and import your project.
</Card>

## Troubleshooting

<ExpandableGroup>
  <Expandable title="The welcome popup shows every time I sign in" default-open="false">
    Tick **Don't show this again** at the bottom left of the popup, then click **Close**.
  </Expandable>

  <Expandable title="My sitemap isn't generating" default-open="false">
    Make sure your prompt has enough context (one short sentence minimum), refresh the dashboard, and try again. If the issue continues, open the project from **Last Opened** in the sidebar or the **My Projects** tab and re-run generation, or contact support from the dashboard.
  </Expandable>

  <Expandable title="I can't find my project in the sidebar" default-open="false">
    **Last Opened** shows only the projects you worked on most recently. Use the **Search bar** at the top of the sidebar to find any project by name, or open the **My Projects** tab to see all your projects.
  </Expandable>

  <Expandable title="The WordPress login doesn't finish connecting" default-open="false">
    Sign in with the same credentials you use on your UiChemy dashboard. On the **"Secure sign-in to UiChemy"** screen, click **Allow** and wait for **"Authorizing..."** to send you back to WordPress.
  </Expandable>

  <Expandable title='I see a "Secure sign-in to UiChemy" screen after signing in with Google' default-open="false">
    That's expected when you sign in with a third-party provider like Google. Click **Allow** to finish connecting your account.
  </Expandable>

  <Expandable title="I forgot my password" default-open="false">
    Click **Forgot Password?** on the **Welcome to UiChemy** sign-in page to reset it.
  </Expandable>

  <Expandable title="My password isn't accepted when creating an account" default-open="false">
    Passwords must be at least 8 characters, with uppercase, lowercase, and a number.
  </Expandable>
</ExpandableGroup>

## Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Where does my cloned template go?" default-open="false">
    When you click **Clone site**, your own editable copy is added to the **My Projects** tab.
  </Expandable>

  <Expandable title="Does cloning a template use credits?" default-open="false">
    No, cloning a template doesn't use any credits. Starting a project from a prompt does.
  </Expandable>

  <Expandable title="What should I write in the prompt?" default-open="false">
    Click **Start with a Guided Brief** to answer a structured set of questions instead, or browse the suggestion chips below the prompt box, such as **Barber shop** or **Law firm**. You can also follow the example prompt in [Step 3](#option-1-start-from-a-prompt).
  </Expandable>
</ExpandableGroup>

See the [FAQ](/ai-website-creator/faq/faq) for more.