# AI Site Builder — User Guide

Build and publish a fully custom website using AI, directly from your Unstoppable Domains dashboard. Describe what you want in plain English, refine it through conversation, and publish to any domain you own — all without writing a single line of code. When you publish, we handle everything: DNS configuration, SSL certificate generation, and hosting infrastructure setup, so your site is live and secure in seconds.

## Getting Started

1. Sign in to your Unstoppable Domains account.
2. Navigate to **AI Site Builder** from the main menu.
3. You'll see a blank project with a chat input and a prompt to describe the website you want.
4. Type a description of the site you'd like (or choose a template and style first), and the AI will generate a live website for you.


## The Interface

The AI Site Builder has a three-panel layout:

| Panel | What It Does |
|  --- | --- |
| **Sidebar** (left) | Lists all your saved projects. Create new projects, rename, clone, or archive existing ones. |
| **Chat Panel** (center) | Where you interact with the AI. Type messages, upload images, choose templates and styles. |
| **Preview Panel** (right) | Live preview of your generated website. Toggle between desktop, tablet, and mobile views. |


On **mobile devices**, the chat and preview panels are shown one at a time. Use the toggle button in the header to switch between them.

### Header Controls

- **Menu icon** — Show or hide the project sidebar
- **Project title** — Click the edit icon to rename your project
- **Preview button** — Open your site using a temporary URL
- **Publish button** — Publish your site to one or more domains


## Templates

Templates define the **structure and layout** of your site. Pick one before you start chatting, or let the AI choose a layout based on your description.

### Available Templates

| Template | Best For | Key Sections |
|  --- | --- | --- |
| **Business Page** | Company or service landing pages | Hero with headline, feature grid (3–4 items), testimonials, contact/signup CTA, footer |
| **Personal Portfolio** | Freelancers, creatives, developers | Header with navigation, about/hero section, work showcase (3–6 project cards), skills section, contact |
| **Event Page** | Product launches, conferences, meetups | Bold hero with date and CTA, event details, schedule/agenda, speaker or item cards, signup CTA |
| **Social Hub** | Link-in-bio style pages | Mobile-first single column: profile photo, name, bio, 5–8 link buttons, social media icons |
| **Domain Lander** | Domains listed for sale | Marketplace listing page with domain name, price, lease-to-own option, and "Make an Offer" CTA |
| **Custom** | Anything else | No predefined structure — describe exactly what you want and the AI builds it from scratch |


### How to Choose a Template

1. Click the **template icon** (grid icon) in the chat input toolbar.
2. Browse the available templates in the modal that appears.
3. Click a template card to select it — it will highlight with a blue border and checkmark.
4. Select **Custom** (dashed border card) if you want a blank slate.
5. Close the modal and start chatting. The AI will use your selected template as a structural guide.


Your template choice also sets a helpful **placeholder prompt** in the chat input to get you started.

## Design Styles (Starters)

Skip the blank canvas. Starters are professionally crafted design directions that instantly give your site a polished, cohesive look — complete with curated color palettes, typography pairings, and visual effects. Just pick a style that matches your vibe and the AI takes care of the rest, so every site you build looks like it was designed by a pro.

### Style Categories

Choose from **100 design directions** across **9 categories** — from sleek and corporate to bold and experimental, there's a starting point for every brand and personality:

| Category | Example Styles |
|  --- | --- |
| **Modern** | Glassmorphism, Neomorphic Soft, Premium SaaS, Bold Gradient Hero, Bento Grid, Aurora Glow |
| **Creative** | Memphis Design, Pop Art, Collage Scrapbook, Kinetic Typography, Neon Playground |
| **Professional** | Corporate Confidence, Luxury Fashion, Elegant Serif, Minimalist Gold, Newspaper Editorial |
| **Bold** | High-contrast, impactful designs |
| **Classic** | Timeless, traditional aesthetics |
| **Industry** | Sector-specific design patterns |
| **Artistic** | Illustration and art-inspired layouts |
| **Retro** | Vintage and nostalgic aesthetics |
| **Experimental** | Cutting-edge and unconventional designs |


### How to Choose a Style

1. Click the **style icon** (palette icon) in the chat input toolbar.
2. Use the **category chips** at the top to filter by aesthetic category. Click a chip to toggle it on or off.
3. The modal shows **5 random starters** from your selected categories.
4. Click **Shuffle Styles** to see a different random selection.
5. Click a style card to select it. Choose **Custom** if you want to describe the design yourself.


## Chatting with the AI

The chat panel is where you describe, refine, and iterate on your website. The AI understands natural language — just tell it what you want.

### Your First Message

Be as descriptive as you can. Good first messages include:

- *"Create a portfolio for a graphic designer named Sarah. She specializes in brand identity and packaging design. Use a clean, modern look with a dark color scheme."*
- *"Build a landing page for my coffee shop, Bean There. We're in Portland, OR. Show our menu, hours, and location."*
- *"I need an event page for a Web3 developer conference on April 15, 2026 in Miami. Include a speaker lineup and registration CTA."*


### Refining Your Site

After the AI generates your site, you can keep chatting to make changes:

- *"Make the hero section taller and add a background gradient"*
- *"Change the color scheme to blue and white"*
- *"Add a testimonials section with 3 customer quotes"*
- *"Replace the placeholder text in the About section with: ..."*
- *"Make the navigation sticky on scroll"*
- *"Add a contact form at the bottom"*


Each message costs AI credits based on the model you're using and the complexity of the response (see [Credit Costs](#credit-costs)).

### Keyboard Shortcuts

| Key | Action |
|  --- | --- |
| **Enter** | Send your message |
| **Shift + Enter** | Add a new line without sending |
| **Ctrl/Cmd + V** | Paste an image directly into the chat |
| **Escape** | Exit fullscreen preview |


## Guided Interview

If your first message is brief or vague — for example, *"Make me a website"* — the AI will ask **2–4 focused clarifying questions** before generating anything. This ensures the result matches what you actually need.

**Examples of questions the AI might ask:**

- What is the name of your business or project?
- Who is your target audience?
- What is the primary goal of this site (sell a product, showcase work, share information)?
- Do you have specific colors, branding, or a style in mind?


Once you answer, the AI generates the site on the next turn. If you provide a detailed first message, the guided interview is skipped entirely.

The AI will also remind you that you can **upload images** (logos, photos, banners) to include in your site.

## Choosing an AI Model

You can switch between three AI models at any time using the **AI model selector** (brain icon) in the chat input toolbar:

| Model | Speed | Quality | Cost |
|  --- | --- | --- | --- |
| **Claude Haiku** | Fastest | Good for simple changes and quick iterations | Lowest (~0.25–0.5 credits per message) |
| **Claude Sonnet** | Balanced | Best all-around choice for most tasks (default) | Moderate (~1–2 credits per message) |
| **Claude Opus** | Slowest | Highest quality, best for complex or detailed sites | Highest (~5–10 credits per message) |


**Recommendation:** Start with **Sonnet** for your initial site generation. Switch to **Haiku** for quick refinements like color changes or text updates. Use **Opus** when you need the most sophisticated design or complex functionality.

You can change models between any messages — the AI maintains full context of your conversation regardless of which model you use.

## Uploading Images

You can upload images to include in your website or to give the AI visual context.

### Two Types of Image Uploads

| Type | Icon | What It Does |
|  --- | --- | --- |
| **Content** | Paperclip icon | The image is **stored and embedded** in your generated website. Use this for logos, hero images, product photos, team headshots, etc. |
| **Reference** | Brain icon | The image is shown to the AI for **context only** — it is NOT included in the final site. Use this to show the AI a design mockup, color palette, or competitor site you'd like to emulate. |


### How to Upload

1. Click the **+** button in the chat input area.
2. Choose **Upload Content** or **Upload Reference**.
3. Select up to **5 images** from your device.
4. You'll see thumbnail previews with a small badge icon. Click the badge to toggle between content and reference modes.
5. Click the **X** on any thumbnail to remove it before sending.
6. Type your message describing what to do with the images, then send.


**You can also paste images** directly into the chat with **Ctrl+V** (or **Cmd+V** on Mac).

### Image Requirements

- **Supported formats:** PNG, JPEG, JPG, WebP, GIF
- **Maximum file size:** 1.5 MB per image
- **Maximum per message:** 5 images


All uploaded images are scanned for safety before being processed. Images that don't pass the safety check are excluded automatically.

## Previewing Your Site

The preview panel shows a live rendering of your generated website.

### Device Modes

Toggle between different screen sizes using the device icons in the top-left of the preview panel:

| Mode | Width | Use Case |
|  --- | --- | --- |
| **Desktop** | Full width | See how the site looks on a laptop or monitor |
| **Tablet** | 768px | Check the tablet layout |
| **Mobile** | 375px | Verify the mobile experience |


### View Modes

Toggle between views using the controls in the top-right of the preview panel:

| Mode | What It Shows |
|  --- | --- |
| **Preview** | The rendered website in an iframe (default) |
| **Code** | The raw HTML source with syntax highlighting |


While the AI is actively generating, the view automatically switches to **Code** mode so you can watch the HTML stream in real time. It switches back to **Preview** when generation completes.

### Fullscreen Preview

Click the **fullscreen button** to expand the preview to fill your entire screen. Press **Escape** to exit.

### Shareable Preview Link

Click the **Preview** button in the header to launch your site on a real, hosted temporary URL. This isn't a local-only mockup — it's your actual site running on live infrastructure, pixel-for-pixel identical to what your visitors will see once you publish. Share the link with your team, client, or collaborators to get feedback before going live.

## Viewing the Code

You can view the raw HTML source of your generated website:

1. Switch to **Code** view in the preview panel using the toggle in the top-right.
2. The code is displayed with syntax highlighting for easy reading.


## Managing Projects

### Creating a New Project

Click the **+ New Project** button at the top of the sidebar, or start fresh from the main page.

### Switching Between Projects

Click any project in the sidebar to load it. Your conversation history, generated site, and all settings are preserved.

### Project List

Each project in the sidebar shows:

- **Title** — editable name
- **Last updated** — relative timestamp (e.g., "2 hours ago")
- **Green dot** — indicates the project has a generated site


### Project Actions

Click the **three-dot menu** on any project to access:

| Action | What It Does |
|  --- | --- |
| **Rename** | Change the project title |
| **Clone** | Create an exact copy of the project (conversation, site, and settings — but not domain attachments) |
| **Archive** | Soft-delete the project. It's removed from the sidebar and its files are cleaned up. |


### Project Limit

You can have up to **20 active projects** at a time. Archive old projects to make room for new ones.

## Publishing to a Domain

Once your site looks the way you want, publish it to one or more domains you own.

### How to Publish

1. Click the **Publish** button in the header. (It's disabled if you don't have a generated site yet.)
2. A dialog opens with two tabs:
  - **My Domains** — domains you already own
  - **Find Domain** — search for and purchase a new domain. Buy it right from the Site Builder and your site is automatically published to it the moment registration completes — no extra steps, no waiting around.
3. In **My Domains**, search or scroll to find the domain(s) you want.
4. Click domain names to select them (checkmark appears). Click again to deselect.
5. The **Publish** button at the bottom shows the number of selected domains and the total credit cost — e.g., *"Publish 2 Domains — 2 credits"*.
6. Click **Publish**.


### What Happens When You Publish

With a single click, we handle the entire deployment pipeline that would normally require a web host, DNS provider, and SSL certificate authority:

1. Your site's HTML, images, and assets are uploaded to globally distributed hosting infrastructure.
2. DNS records are automatically configured to point your domain to the hosting servers.
3. An SSL certificate is generated and provisioned, so your site is served over HTTPS from day one.
4. The hosting environment is stood up and optimized to serve your site to visitors worldwide.
5. The domain shows a **"Pending Deployment"** status with a spinner while this is in progress.
6. Once complete, your site is live at your domain — fully hosted, secured, and ready for traffic. A success notification appears with a **"View"** link.


No DNS settings to configure, no certificates to manage, no hosting provider to set up. You click Publish and we do the rest.

### Publishing to Multiple Domains

You can select and publish to **up to 100 domains** in a single operation. Each domain costs **1 AI credit** to publish. Domains are processed in parallel (up to 5 at a time).

If any individual domain fails, the others still succeed, and credits are **refunded** for the failed domains.

### Re-Publishing Updates

When you update your site through further conversation, the **Publish** button re-enables. Click it again to push your latest changes to your attached domains. Each re-publish costs **1 AI credit** per domain, the same as the initial publish.

### External Nameservers

Domains that use external nameservers (DNS managed outside Unstoppable Domains) cannot be published to from the AI Site Builder. You'll see an error if you attempt this.

## Auto-Publish for Newly Purchased Domains

If you find and purchase a domain from within the AI Site Builder (via the **Find Domain** tab), you can set it up to auto-publish your site once the domain registration completes.

1. Search for a domain in the **Find Domain** tab.
2. Click **Add to Cart** on an available domain.
3. Complete the purchase.
4. Once the domain is registered, your site is automatically published to it.
5. You'll receive a confirmation email when the auto-publish is complete.


## AI Credits

AI credits are the currency that powers the AI Site Builder. Every interaction with the AI and every domain you publish to consumes credits.

### How Credits Work

Credits are deducted for two types of operations:

1. **Chat messages** — each message you send to the AI costs credits based on the AI model used and the length/complexity of the response.
2. **Publishing** — each domain you publish to costs a flat **1 credit**.


Credits are tracked in your account and deducted in real time. You can see your current balance in the credit purchase modal.

### Free Starter Credits

Every new user receives **5 free AI credits** automatically. These starter credits **never expire** — use them whenever you're ready.

### Credit Costs

#### Chat Messages

Credit cost per message depends on the AI model:

| Model | Approximate Cost Per Message |
|  --- | --- |
| Claude Haiku | ~0.25 – 0.5 credits |
| Claude Sonnet | ~1 – 2 credits |
| Claude Opus | ~5 – 10 credits |


The exact cost is calculated based on actual token usage (how much the AI reads and writes). Each assistant message in your chat shows its credit cost, so you always know what you spent.

#### Publishing

| Operation | Cost |
|  --- | --- |
| Publish to a domain | **1 credit** per domain |


If a publish fails for a specific domain, the credit for that domain is **automatically refunded**.

### Buying More Credits

1. Click the **credit balance** indicator in the AI Site Builder, or click **"Get More Credits"** when prompted.
2. The purchase modal opens with a **Select** step and a **Pay** step.


#### Available Credit Packs

| Credits | Price | Per Credit |
|  --- | --- | --- |
| 5 | $5.00 | $1.00 |
| 25 | $15.00 | $0.60 |
| 50 | $25.00 | $0.50 |
| 100 | $40.00 | $0.40 |
| 500 | $150.00 | $0.30 |
| 1,000 | $250.00 | $0.25 |


Larger packs offer significantly better value — the **1,000 credit pack** is 75% cheaper per credit than buying 5 at a time.

#### Payment Methods

When purchasing credits:

1. **Promo credits** are applied first (if you have any).
2. **Account balance** is applied next.
3. Any remaining amount is charged to your **credit or debit card** via Stripe.


If your promo credits and account balance fully cover the purchase, no card payment is needed.

### Credit Expiration

- **Purchased credits** expire **30 days** after the purchase date.
- **Free starter credits** (the initial 5) **never expire**.
- **Refunded credits** expire 30 days from the date of refund.
- Expiration follows a **FIFO** (first-in, first-out) model — your oldest credits are consumed first.
- A daily job processes expirations, so credits expire at the end of their 30-day window.


## Limits and Quotas

| Limit | Value |
|  --- | --- |
| Active projects | 20 |
| Domains per publish request | 100 |
| Message length | 10,000 characters |
| Images per message | 5 |
| Image file size | 1.5 MB each |
| Supported image formats | PNG, JPEG, JPG, WebP, GIF |
| Conversation history | ~50 back-and-forth turns retained |


## Tips for Best Results

### Writing Good Prompts

- **Be specific.** Instead of *"Make me a website,"* try *"Create a landing page for a SaaS product called TaskFlow that helps remote teams manage projects. Use a clean, modern design with blue and white."*
- **Include real content.** Give the AI your actual business name, tagline, services, team member names, etc. This saves you from having to replace placeholder text later.
- **Upload your logo and photos** as content images in your first message. The AI will incorporate them into the design.
- **Use reference images** to show the AI a style you like. Upload a screenshot of a site you admire as a reference image and say *"I want a similar style to this."*


### Iterating Efficiently

- **Use Haiku for small tweaks.** Changing a color, swapping text, or adjusting spacing is quick and cheap with Haiku.
- **Use Sonnet for structural changes.** Adding new sections, reorganizing layout, or significant redesigns work best with Sonnet.
- **Use Opus sparingly.** Reserve it for when you need the highest quality output or complex interactive features.
- **Be incremental.** Make one or two changes per message rather than asking for 10 things at once.


### Design Tips

- **Pick a template first** — it gives the AI a strong structural foundation to work from.
- **Choose a style starter** — it sets the visual tone and saves you from describing colors, fonts, and aesthetics in detail.
- **Check all three device sizes** (desktop, tablet, mobile) before publishing.


## Troubleshooting

### "Insufficient AI Credits"

Your credit balance is too low for the requested operation. Click **"Get More Credits"** to purchase a credit pack.

### Publish button is disabled

The Publish button is disabled when:

- No site has been generated yet
- The AI is currently processing a message
- There are no unpublished changes since your last publish


### "Domain not found or not owned by you"

The domain must be in your Unstoppable Domains account and registered under your user. Domains that are pending registration or owned by another account cannot be published to.

### "Domain uses external nameservers"

Domains whose DNS is managed outside of Unstoppable Domains cannot have GCS hosting enabled. To publish, update the domain's nameservers to point to Unstoppable Domains first.

### Image was excluded from generation

Images that don't pass the automated safety check are silently excluded. Try a different image. The AI will work with whatever images pass the check.

### Site looks truncated or incomplete

If the AI ran out of its output token budget, it may produce an incomplete page. The system automatically attempts to continue where it left off. If the result is still incomplete, send a follow-up message asking the AI to *"finish the page"* or *"complete the remaining sections."*

### Chat is taking a long time

Complex sites with Opus can take up to 2 minutes. A timer in the chat shows elapsed processing time, along with rotating status messages. If it exceeds 2 minutes, the request may have timed out — try sending your message again.

### "Maximum projects reached"

You have 20 active projects. Archive projects you no longer need to free up a slot.