Design Editor

Customize colors, fonts, buttons, layouts, text, and images on an infinite canvas, then preview and pitch the result.

Phase 3 of 4: Scope → Sitemap → You are here: Design → Export. The Design Editor is where your website comes to life visually. Every page and section from your sitemap is rendered here as a real design you can customize.

The Design Editor is an infinite canvas where you customize the visual design of every page and section. AI Website Creator generates a starting design from your prompt and sitemap. You then adjust colors, fonts, layouts, images, and text to match the client's brand. Every change is saved automatically.

You get here by clicking Continue to design on the Sitemap Editor's status bar once your sitemap is ready.

Use Cases

Matching a client's exact brand before handoff. Palette, font, button, and card controls apply globally, so you're not restyling section by section.
Presenting design options before a WordPress site exists. Share a live preview link by clicking the eye icon on any page tab, or Preview in the top-right corner.
Fixing AI-generated copy or images quickly. The text quick actions (Rewrite, Shorten, Expand) and AI image tools replace manual rewrites and re-uploads.

The Canvas

The canvas shows your full website design, every page, every section, in order. Use these controls to navigate:

Pan: click and drag on any empty area of the canvas
Zoom: scroll while holding Ctrl
Fit to screen: click the Fit to screen icon in the bottom-left toolbar to zoom the canvas so every page fits on your screen at once
Switch pages: click a page tab above the canvas to jump between pages

Page Actions. Each page has its own tab above the canvas, with two icons on the right:

Preview (eye icon): opens a full live preview of that page, with real interactive elements (hover states, forms, motion). Click Back to return to the canvas at the same scroll position you left it.
Three-dot menu: opens page-level actions:
- Shuffle Components: swap the layout variant of every section on the page at once
- Regenerate Text: have AI rewrite the copy across the whole page
- Move Page Left / Move Page Right: reorder the page relative to its neighbors
- Rename Page, Duplicate Page, Delete Page
- Add Section: insert a new section at the end of the page

Clicks, forms, and motion (hover states, carousels, animations) don't run on the canvas itself. Click Open preview at the bottom of the screen to test interactive behavior in a live preview.

Design Panel

The Design Panel is the left sidebar in the Design Editor. It controls the global styles for your entire site: Colors, Typography, Buttons, Badges, Cards, Section Style, and Spacing. Changes made here apply across every page and section instantly.

1. Colors

AI Website Creator provides multiple pre-built color palettes organized by industry. Switching palettes updates the entire design instantly.

Browse palettes by industry: Tech, Health, Finance, Creative, and more
Create a custom palette using hex color input
Adjust the global saturation slider to make all colors more vivid or more muted
Click any swatch (Main, Background, Accent, or an added Extra color) to open its color picker: a gradient and hue picker, a hex code field, and a row of your previously used colors to pick from directly
Click Randomize colors (cube icon) to instantly generate a new color combination based on your current palette
Add a new color using the + button under Primary Colors (labeled Extra 1, Extra 2, and so on), or remove one by clicking its delete icon
Toggle between Light and Dark mode using the sun and moon icons to preview how your palette looks in both themes

The Colors panel, with the Primary color picker open

Try several palettes before settling on one. Switching is instant and you can always go back.

CSS Tokens. Click CSS Tokens to expand the full set of derived color tokens AI Website Creator generates from your Main, Background, and Accent colors.

Token Group	What's Included
Brand	Primary, Secondary, and Accent colors, plus a tint of each
Text	Title and description colors for light and dark backgrounds, plus an alternate text color
Backgrounds	Two light background colors, two dark background colors, and an alt background color
Shades	A deeper shade variant of each brand and background color
Utility	Neutral light and dark colors, plus spark and glow colors for effects

2. Typography

Choose from 1,000+ Google Fonts for your heading and body text.

Heading and Body tabs let you style each independently, headings and paragraph text keep separate font, size, and spacing settings
Click the current font name to open the font picker: search by name, and each result shows a live preview in that font before you choose it
Adjust Size, Weight, Case (Aa for sentence case, the default as-typed option, or AB for all caps), Letter spacing, and Line height with the sliders and dropdowns below the font, separately for the Heading and Body tabs
Font changes apply globally and update every section instantly
Click Randomize fonts (cube icon) to instantly swap to a new heading and body font pairing

The Typography panel, with the Heading font picker open

3. Buttons

The Buttons section lets you control the global style of all buttons across your design. Changes here apply to every button on every page. Click the Primary or Secondary preview to open the full Buttons panel:

Size: choose the default button size, Small (S), Medium (M), or Large (L)
Corner Radius: select from four options ranging from sharp square corners to fully rounded
Label Color: choose Auto, Light, or Dark for the button text color
Display Icon: toggle Yes or No to show or hide icons inside buttons

Select a Button Design from the list (Button Design 1 through 6) to choose the overall button style. Each design shows a preview of how your Primary, Secondary, and Link buttons will look across the site. Click Randomize buttons (cube icon) to instantly generate a new button style combination.

The Buttons panel, with the full list of Button Designs

4. Badges

The Badges section controls small label elements like "New" or "Since 1998" shown on some sections. It is marked Coming Soon and not yet editable.

5. Cards

The Cards section lets you control the global style of all cards across your design. Changes here apply to every card on every page. Click either card preview to open the full Cards panel:

Corner Radius: select from four options ranging from sharp square corners to fully rounded
Select a Card Style from the list (Card Style 1 through 4) to choose the overall card layout. Each style shows a preview of how the card image, heading, and description are arranged.

Click Randomize cards (cube icon) to instantly generate a new card style combination.

The Cards panel, with the full list of Card Styles

6. Section Style

Sets the default background style for sections across your design. Changes here apply site-wide. Click the style preview to open the full Section Background panel and select a style (Style 1, 2, 3, and so on), for example a light background, dark background, or alternate light layout. Click Randomize style (cube icon) to instantly preview a different background style.

The Section Background panel, with the full list of styles

7. Spacing

Controls the gap between content across your design.

Vertical: adjust the spacing between sections stacked on top of each other
Horizontal: adjust the side padding within each section

Click Randomize spacing (cube icon) to instantly preview a different spacing combination.

The Spacing panel, with Vertical and Horizontal sliders

Editing a Section

Beyond the global styles in the Design Panel, you can edit each section, its text, and its images individually.

1. Section Content Panel

Click any section on the canvas to open its detail panel, titled "[Section] Content" (for example "Navbar Content"). Click the Global Section icon in the top-right of the panel to turn that section into a Global Section, shared across every page. The icon turns green when the section is global, click it again (now labeled Remove Global Section) to turn it back into a page-specific section.

The panel is organized into a few groups:

Section Content Panel, with Logo, Context, Layout, Style, and Assets

Sections without a logo, like the Hero, skip the Logo group and open straight to Context.

Hero Content panel, with Assets split into Images and Icons

Not every section shows every Style option. The Footer, for example, includes the Logo group but its Style group has only Theme and Vertical, with no Overlay.

Footer Content panel, with Logo, and Style limited to Theme and Vertical

2. Layout Variants

Click the current layout name in the Section Content Panel to open the full-screen layout picker for that section type.

Use the search bar to find a layout by name
Your current layout appears under ACTIVE
AI Picks are highlighted below, these are variants recommended based on your brief, and the one already applied to your section is marked In Preview
Click any layout to switch to it

3. Icon Assets

Click an icon card under Assets in the Section Content Panel to open its editor.

Site icon style: toggle between Outline and Filled
Color: choose Auto, Primary, Accent, Dark ink, Light ink, Secondary, or Custom
Content tabs: Icon Pack to browse and search a library (filter by pack, Lucide, Tabler, Solar, Heroicons, Phosphor, Material Design, Remix Icon, Myna UI, IconaMoon, or Huge Icons, and by style, All Styles, Filled, or Outline), or Uploads to drag and drop your own SVG, PNG, or JPG

Icon editor, with Site icon style, Color, and the Icon Pack library

4. Editing Text

Click any text element on the canvas to open its Text panel. Edit the content directly in the text field, changes are saved automatically.

AI quick actions: Rewrite (rewrites the text from scratch using your brief as context), Shorten (reduces length while keeping the meaning), or Expand (adds more detail)
Alignment: left, center, or right
Size: choose Auto, or a fixed size from XS (20px) up to 4XL (170px)
Color: choose Auto, Title ink, Body ink, or a swatch from your color palette (Light Blue, Orange, and so on)

5. Images & AI Tools

Click any image or video on the canvas to open its panel. Two tabs at the top switch between Image and Video, each with its own Edit and Replace tabs.

Edit Image. Adjust how the current image is displayed without replacing it.

Ratio: Choose the aspect ratio for the image frame, Original, 1:1, 4:3, 16:9, or 3:2
Overlay: Toggle Yes or No to add a color overlay on top of the image

Use AI Tools to edit the image itself with AI. Each tool costs credits to run:

Tool	What It Does	Credit Cost
Remove Bg	Removes the background from the image	100
Generative Fill	Fills or extends parts of the image using AI	300
Expand Image	Extends the image beyond its original borders	300
Magic Eraser	Removes unwanted objects from the image	300

Edit Image panel, with Ratio, Overlay, and AI Tools

Replace Image. Swap the current image with a new one from three tabs:

Stock: Browse the built-in stock photo library. Filter by Photos, Art, or 3D, and use the search bar to find a specific image.
Library: Browse images already tied to this project, filter by All, Uploads, Generated, or Stock. Hover any image to see the prompt that generated it.
Generate: Describe the image you want, pick a Model (Gemini 2.5 Flash, Nano Banana Pro at 1K or 4K resolution, GPT Image Mini, or GPT Image), and check Match this site's brand to keep the result on-palette. Click Generate Image.

Edit Video. With no video added yet, click Upload a video or Add a video URL to add one.

Switching to Video keeps the current image as the poster frame, so nothing is lost if you switch back to Image. A video added by URL has no size limit and isn't re-hosted.

Replace Video. Swap in a new video from two tabs:

Stock: Search the built-in stock video library, each result shows its duration.
Library: Browse videos already tied to this project, filter by All, Uploads, or Stock, or drag and drop your own (MP4, WebM, or MOV, up to 10MB).

Logos. Logos are uploaded from the Logo group of the Section Content Panel on Navbar and Footer sections.

Design Variants & Pitch

Design Variants let you create multiple complete versions of your site's design, so you can explore different directions or present options to a client. This is different from a section variant, which only changes the layout of one section.

Both the Variant dropdown and Pitch are marked Coming Soon at the bottom of the Design Panel and are not yet available.

The Variant dropdown at the bottom of the Design Panel will switch between your saved design variants
+ Add New Variant will create a new design variant

Pitch Concept. Pitch will open Pitch Concept to generate a shareable link for your client.

View up to three design variants side by side under Top Three Concepts
Add a description to each variant for context
Click Copy Link to share the preview, your client can view it without logging in to AI Website Creator

Responsive Preview

Click the monitor, tablet, or phone icon in the bottom-right corner of the canvas to switch between Desktop, Tablet, and Mobile at any time and check how the design looks at different screen sizes.

Viewport	Width
Desktop	Full canvas
Tablet	768px
Mobile	375px

Design edits are made in Desktop view. Tablet and Mobile views are for previewing only.

AI Agent

AI Agent is marked Coming Soon and is not yet available.

AI Agent is the sparkle icon in the left icon strip of the Design Editor, just below the pencil (edit) icon. Once available, it will let you review your design or apply changes by chatting instead of using the Design Panel manually:

Review my design: Ask the agent to review your current design and suggest improvements
Change fonts: Ask the agent to swap your heading and body fonts
Suggest color palette: Ask the agent to recommend a new color palette
Change layout variants: Ask the agent to switch section layouts

Top Bar Actions

The top-right corner of the Design Editor has a few controls beyond navigating between Scope, Site map, and Design:

Preview (eye icon): Opens a live preview of your site.
Share: Marked Coming Soon, not yet available.
Add comments: Marked Coming Soon, not yet available.
Save status: Shows how long ago your project last saved (for example, "Saved 5m ago"). Hover it for the exact time it last saved.
Credits remaining: Hover the circular icon in the top-right to see your current balance (for example, "You have 19,915.5 credits left"). Click it to open the AI Credits page.

Export

Click Export to open the export modal, with two tabs:

WordPress: Follow the three steps shown (download the UiChemy WordPress plugin, install it and log in with your UiChemy account, import your project into Elementor, with Gutenberg coming soon), or click Read Docs for the full walkthrough. See Export to WordPress for details.
Other: Vote for a platform you'd like UiChemy to support next, React, Bricks, Divi, Gutenberg Core, Webflow, Framer, Wix, or type in your own under Platform Name, then click Submit Request.