Documentation

EaseUI is an AI-powered platform that generates production-ready user interfaces from natural language prompts. Describe what you want, and receive 6 unique design variants — complete with design tokens, component libraries, and clean HTML/CSS that you can export or send directly to Figma.

Key Features

• 6-variant generation — every prompt creates 6 unique design approaches to choose from
• Design token extraction — colors, typography, spacing, radii, and shadows auto-extracted as structured tokens
• Component library — every UI element generated as a reusable, isolated specimen with state variants
• Clean export — production-ready HTML + CSS with no external dependencies
• Figma integration — import frames from Figma and export generated designs right back as editable layers
• Multi-provider AI — choose between Google Gemini, Anthropic Claude, or OpenAI models
• Properties inspector — click any element and live-edit CSS properties directly in the canvas

Quickstart

Get your first AI-generated UI in under 60 seconds.

1. 1
   Create a project

   From your dashboard, click New Project and give it a name. Choose between Desktop or Mobile mode.
2. 2
   Write your prompt

   Describe the UI you want — layout, color scheme, components, content, and mood. Be as detailed or as brief as you like. Use the ✨ Enhance button to let AI expand your prompt into a structured design brief.
3. 3
   Select and refine

   EaseUI generates 6 unique design variants. Pick the one you like and use the prompt bar to iterate. You can also generate radical variations of any variant or extract its design system.
4. 4
   Export

   Download your design as a single HTML file, a ZIP bundle with all variants and tokens, or send it directly to Figma as editable layers.

AI Models

EaseUI supports multiple AI providers and models. Select your preferred model in Settings → API & Model.

Google Gemini

Anthropic Claude

OpenAI

Editor

The editor is EaseUI's primary workspace — a 3-panel layout with an infinite canvas where you view, generate, iterate, and export your designs.

Infinite Canvas

A Figma-style infinite canvas serves as the primary workspace. Artboards float in world-space and are projected to screen coordinates — zoom, pan, and drag artboards to any position. Your layout is automatically saved across sessions.

Level of Detail (LOD)

To maintain 60fps at any zoom level, artboards render at different detail tiers based on your current zoom:

Canvas Controls

• Minimap — black & white overview in the corner with click-to-navigate
• Zoom toolbar — zoom in/out, fit-all (⌘0), percentage display
• Dot grid — infinite repeating dot pattern for spatial orientation
• Drag-to-reposition — move artboards anywhere on the canvas with auto-save
• Selection ring — teal ring highlights the active artboard

Variant Iteration

Select any completed artboard and type an adjustment prompt to generate a child variant. An @VariantName chip appears in the prompt bar showing which variant you're iterating on. The AI generates a child based on the parent's HTML with lower temperature (0.9) for surgical, targeted edits.

• Auto-placement — child variants are positioned to the right of the parent with collision avoidance
• Connection lines — SVG bezier curves with ● circle → ▸ arrow markers link parent and child artboards
• Parent indicator — a dashed dark ring appears around artboards that have children

Context Menu

Right-click any artboard to access quick actions:

Left Sidebar

Two tabs: Editor shows the variant list with status indicators (green dot = complete, hollow = pending). System shows the design system tree — foundations (colors, typography, spacing, etc.) and generated components.

Right Sidebar

Prompt Bar

A bottom-docked textarea where you describe your UI. Features include a style dropdown, attachment button for reference images, device mode selector, and the ✨ Enhance button that rewrites your short prompt into a structured design brief for better results. When a variant is selected in canvas mode, an @VariantName chip appears — pressing Enter triggers variant iteration instead of a new generation.

Layer Tree

When inspector mode is active, the left sidebar switches to a Figma-style layer tree showing the full DOM hierarchy. Click any layer to select it in the canvas, or click any element in the canvas to highlight it in the tree. Expand/collapse with chevrons or keyboard arrows.

Design Systems

EaseUI can extract a structured design system from any generated variant, then generate isolated component specimens from it — giving you a complete, reusable design language.

3-Layer Structure

How to Extract

1. 1
   Select a variant

   Click any completed variant in the grid or sidebar to enter preview mode.
2. 2
   Click “Extract Design System”

   In the right sidebar under Generate. The AI analyzes the HTML and produces a full design system.
3. 3
   Browse foundations and components

   Switch to the System tab in the left sidebar to see the extracted tokens and generated component specimens.

Token Export

Extracted tokens can be exported as CSS custom properties (--color-primary: #3582FF) or a Tailwind config — ready to drop into your project.

Properties Inspector

Click the Inspector toggle in Quick Actions (or press ⌘I) to enter inspector mode. Click any element in the preview to see and edit its CSS properties in real time.

Context-Aware Sections

The inspector intelligently shows/hides property sections based on what you select:

Editing Properties

All property values are read from getComputedStyle() in the iframe, ensuring they reflect the actual rendered state. Changes are applied in real-time via a postMessage bridge between the parent window and the iframe.

Element Breadcrumbs

A breadcrumb bar at the top of the inspector shows the full DOM ancestry path (e.g., div > main > h1 > span). Click any segment to navigate to that ancestor element.

Inline Text Editing

For text elements, the inspector shows a Content section with an inline editor. Click the pencil icon to edit text, press Enter to commit, or Escape to cancel.

HTML & ZIP Export

Export your designs in multiple formats. All exports go through an automatic cleanup pipeline that adds proper document structure, accessibility enhancements, and removes unnecessary whitespace.

Automatic Cleanup

Before export, HTML is enhanced with: <!DOCTYPE html> declaration, charset and viewport meta tags, lang="en" on the html tag, alt attributes on images,rel="noopener noreferrer" on external links, and accessibility attributes on SVGs.

ZIP Bundle Structure

Figma Import

Import any Figma frame into EaseUI and generate a pixel-perfect HTML reproduction using AI vision.

How It Works

1. 1
   Copy a Figma frame URL

   Right-click any frame or component in Figma and copy its link.
2. 2
   Paste in EaseUI

   Click “Import from Figma” on the dashboard (creates a new project) or in the editor (adds a variant).
3. 3
   AI generates HTML

   EaseUI fetches the frame's node tree and screenshot, extracts design tokens, and sends everything to the AI for multimodal generation. Asset images are embedded as data URIs.

Setup

Go to Settings → Developer → Figma and enter your Figma Personal Access Token (PAT). The token is stored securely in your browser's IndexedDB and is only ever sent to Figma's API.

Figma Export

Send any generated design from EaseUI directly to Figma as editable, structured layers — not a flat image, but real frames, text nodes, and auto-layout.

How It Works

1. 1
   Click “Send to Figma”

   In the editor, this reads every element's computed styles from the live preview iframe.
2. 2
   JSON payload is copied

   A structured tree of frames, text, images, and SVGs is built and copied to your clipboard.
3. 3
   Paste in the Figma plugin

   Open the EaseUI Figma plugin, paste the JSON, and the plugin recreates the design as native Figma layers with auto-layout, typography, colors, and vector icons.

What Gets Captured

• Layout — flex direction, gap, padding, alignment, wrap
• Visual — background, border, border-radius, box-shadow, opacity
• Typography — font family, size, weight, line-height, letter-spacing, color
• Icons — full SVG vector paths with resolved colors
• Images — fetched from URL and applied as image fills
• Pseudo-elements — ::before/::after decorative shapes

Dashboard

The dashboard is your home screen for managing all projects, samples, and design systems.

Project Cards

Each card shows a thumbnail preview (first variant), project name, variant count, creation date, favorite star, and tag chips. Click any card to open it in the editor.

Organization Tools

Views

Projects — your main grid of project cards. Design Systems — a table listing all design systems across projects. Archive — archived projects. Trash — deleted projects with restore and permanent delete options.

Sample Projects

Pre-built projects that showcase EaseUI's capabilities. Click Remix to clone any sample to your workspace with all 6 variants intact.

Authentication

EaseUI uses Supabase Auth for secure sign-in. Two methods are supported:

Google OAuth

Click Sign in with Google on the sign-in page. You'll be redirected to Google's consent screen, then back to your dashboard after authentication. Fast, secure, and no password to remember.

Email & Password

Enter your email and password on the sign-in page. New users can create an account on the sign-up page with email, password, and an optional display name.

Protected Routes

The dashboard, editor, settings, changelog, and billing pages are all protected. Unauthenticated users are automatically redirected to the sign-in page.

Trial Mode

You can try EaseUI without signing in. On the sign-in page, enter a prompt or click a sample card to get one free generation. After that, sign up to continue.

Billing & Plans

EaseUI uses a simple two-tier billing model. Pay once, use forever.

Feature Gates

When a free-tier user attempts a premium action, a contextual upgrade modal appears explaining the feature and offering a one-click upgrade path to Polar.sh checkout.

Settings

Access settings from the sidebar. Here you can configure your account, AI preferences, and developer integrations.

Profile

Update your display name, avatar. Manage your password if you signed up with email. View your billing status and access the Polar customer portal.

API & Model

Select your preferred AI provider (Gemini, Claude, or OpenAI), choose a model, and enter your API key. Free users can use Flash and Auto. Premium users unlock all models.

Developer

Configure your Figma Personal Access Token for Figma import/export, adjust the variant count per generation (default 6), and manage style presets.

Multi-Provider LLMs

EaseUI supports 3 AI providers through a unified abstraction layer. Switch between providers any time — your projects work with any provider.

API keys are stored per-provider in your browser's IndexedDB. They're never sent to our servers — only to the respective AI provider's API. Each generated variant records which model it was built with, so you can compare outputs across providers.

Cost Tracking

EaseUI tracks token usage and estimated costs for every API call. See your spending in the Project Cost panel in the editor's right sidebar.

How It Works

Every generation, design system extraction, and component generation records token counts and calculates costs based on model-specific pricing. Records are stored locally and pruned to a 30-day rolling window.

Cost Breakdown

The Project Cost panel shows a tree-structured breakdown:

• Project total — aggregate cost, token count, and API call count
• Shared costs — style direction, image analysis
• Per-variant costs — generation cost per variant with design system children
• Selected variant highlight — the currently selected variant is auto-expanded and highlighted

Keyboard Shortcuts

Power-user shortcuts available in the editor. Press ⌘K to open the command palette.

Data & Privacy

EaseUI is a zero-backend, browser-first application. Your designs, API keys, and project data live in your browser's IndexedDB and localStorage — never on our servers. API keys are sent only to the respective AI provider (Google, Anthropic, or OpenAI) and to Figma when using import/export.

Authentication is handled by Supabase. Billing is processed through Polar.sh. Neither service has access to your design data.