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

# Scope Editor

Answer 6 steps of questions about the business, audience, brand, and references to generate a tailored sitemap and design.


The Scope Editor is a 6-step discovery wizard in AI Website Creator that captures everything about a project before any design begins. You answer questions about the business, audience, brand, and references. AI Website Creator uses your answers to generate a tailored sitemap and design. The more detail you provide, the more accurate the output.

<Callout kind="info">
**Phase 1 of 4.** You are here: **Scope**, then Sitemap, Design, Export. What you enter in the Scope Editor shapes everything AI Website Creator generates after this.
</Callout>

## Review Your Draft

As soon as you create a project from a prompt, AI Website Creator drafts answers for all 6 areas from what you typed and shows them as cards on a **Review your draft** screen: Project Basics, Business & Audience, Trust & Messaging, Brand Look & Feel, Design Inspiration, Competitors & Structure.

Each card shows where its content came from, **From your prompt**, **AI draft**, or **Manual** once you've edited it yourself, plus **Looks right** and **Edit** buttons. Click **Confirm all** to accept everything as drafted, or **Edit** any card to open its full step and refine the details, in any order. The **Project Brief** panel on the right tracks how many of the 6 areas are confirmed, for example "0 of 6 confirmed."

<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/v1790145612/uichemy-docs/ai-website-creator/scope-editor/overview/review-your-draft.webp" alt="" width={1912} height={935} 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>Review your draft: all 6 areas pre-filled from your prompt, ready to confirm or edit</em></p>

## What You Get From the Scope Editor

- **Tailored sitemap.** The AI uses your business description, audience, and goals to generate a page structure matched to the project, not a generic template.
- **Brand-matched design.** Tone, brand style, and color preferences flow into the first design pass, so the output reflects the client before any manual editing.
- **URL-crawled reference data.** Pasted reference sites are crawled automatically for colors, fonts, navigation, and tone, so you do not need to document style inspiration by hand.
- **Shareable client brief.** The completed brief is itself a deliverable you can share with the client for sign-off before any design work begins.

## Use Cases

- **Agency or client work.** Complete the brief and use it as a shareable deliverable for client sign-off before any design begins.
- **Rebrand or redesign projects.** Add the client's existing URL as a reference link in Project Basics to crawl it for brand insights automatically.
- **Projects where the client already supplied a brief.** Attach the existing document (PDF, DOC, or TXT) in Project Basics instead of starting from scratch.

## Before You Start

<Callout kind="info">
- A project created from your dashboard
- Basic information about the client's business, goals, and brand
</Callout>

## Step 1: Project Basics

Enter the project name, website type, and primary goals. This is the foundation AI Website Creator uses to decide what pages to generate. A SaaS project gets a pricing page by default; a portfolio does not.

At the top, **What you asked for** shows your original prompt, editable, with a note that the fields below were drafted from it. Below that:

- **Files and links.** Click **Attach file** to add a PDF, DOC, TXT, or image up to 25MB, or **Add link** to add a reference URL, either way, to guide your brief.
- **Project name**
- **Website type:** Business, E-Commerce, Portfolio, Blog, Digital Agency, SaaS
- **Primary goals:** Leads, Bookings, Calls, Sales, Sign-ups, Visits
- **Target locations:** Local, National, Global

<Callout kind="tip">
Attaching the client's existing site as a reference link, or uploading their brief document, is the fastest way to get an accurate first pass for a rebrand or redesign project.
</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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790145613/uichemy-docs/ai-website-creator/scope-editor/overview/project-basics.webp" alt="" width={1912} height={940} 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>Project Basics: your prompt, file/link attachments, and the core project fields</em></p>

## Step 2: Business & Audience

Describe the business so AI Website Creator understands what it offers and who it serves. This is where the copy voice is set, tone selections here flow directly into headline and body copy in the generated pages.

- **What do you sell?** Add up to 5 offers.
- **Who is your customer?** A free-text description.
- **Why should customers choose you instead of competitors?** Add up to 5 differentiators.
- **Preferred tone:** Premium, Friendly, Bold, Minimal, Playful, Corporate
- **Tones to avoid:** Too salesy, Too corporate, Too casual, Too technical, Too flashy, Too luxury, use this to steer the AI away from a voice that does not fit the client.
- **Any words or phrases we should never use?** Add up to 15.
- **How do you want prices shown?** Show prices, "From" a price, On request.

<Callout kind="tip">
**Choosing a tone:** Premium for law firms, financial services, or high-ticket B2B. Friendly for coaching, wellness, and local services. Bold for agencies and SaaS. Playful for kids, food, and lifestyle brands. Corporate for enterprise or compliance-heavy industries.
</Callout>

<Callout kind="tip">
Pair a tone selection with a "tone to avoid" to narrow the AI output further, for example marking "Playful" as avoid for a law firm.
</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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790145614/uichemy-docs/ai-website-creator/scope-editor/overview/business-audience.webp" alt="" width={1914} height={940} 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>Business & Audience: what you sell, who buys it, and the voice to write in</em></p>

## Step 3: Trust & Messaging

Add proof elements that build trust with website visitors. The AI weaves these directly into hero, about, and CTA sections.

- **What usually makes customers hesitate before buying?** Add up to 5 objections.
- **What kind of proof can you show to build trust with visitors?** Testimonials, Case Studies, Results / Metrics, Certifications or Awards

<Callout kind="tip">
Scoping a service business with no testimonials yet? Leave this step blank and the AI uses generic trust cues instead.
</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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790145614/uichemy-docs/ai-website-creator/scope-editor/overview/trust-messaging.webp" alt="" width={1913} height={938} 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>Trust & Messaging: objections to overcome and the proof that overcomes them</em></p>

## Step 4: Brand Look & Feel

Define the visual identity of the project. This is where tone meets design, what you pick here sets color palette and section layout density in the first design pass.

- **Which design style best matches your brand?** Minimal, Premium, Playful, Bold, Corporate, Elegant, Techy, Organic. You can select more than one.
- **Any font preference for the site?** A dropdown, defaults to **No preference**.
- **Do you have a brand logo?** Upload as SVG, PNG, JPG, or WebP. It's used in your site's navbar and footer.
- **Any preferred brand colors?** Add one or more hex values.
- **Any colors to avoid?** Add one or more hex values.

<Callout kind="tip">
**Choosing a brand style:** Minimal or Elegant when the client wants white space and restraint. Bold or Techy for SaaS, dev tools, and growth-stage startups. Organic for wellness, food, or sustainability brands. Corporate when the client has existing brand guidelines that lean conservative.
</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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790145615/uichemy-docs/ai-website-creator/scope-editor/overview/brand-look-feel.webp" alt="" width={1912} height={940} 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>Brand Look & Feel: design style, fonts, logo, and brand colors</em></p>

## Step 5: Design Inspiration

Add websites the client likes and dislikes. AI Website Creator crawls each URL and extracts colors, fonts, navigation structure, and content tone automatically.

- **Which websites do you like?** Click **+ Add website you like**, then enter the URL, pick a reason from the dropdown, and optionally add a note.
- **Any websites you dislike?** Click **+ Add website you dislike** and fill in the same details.

<Callout kind="tip">
Use this step to shortcut a full mood-board call: three liked URLs from the client usually gives the AI enough signal to match taste on the first pass.
</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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790145616/uichemy-docs/ai-website-creator/scope-editor/overview/design-inspiration.webp" alt="" width={1913} height={942} 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>Design Inspiration: reference sites the client likes and dislikes</em></p>

## Step 6: Competitors & Structure

Add final context to sharpen the AI output.

- **Who are your competitors?** Add competitor URLs.
- **Which sections do you want?** Hero, Services Grid, Pricing, Case Studies, Testimonials, FAQ, Comparison Table, Contact Section, About / Story Section
- **Any sections you don't want?** Same list, use it to explicitly rule sections out.
- **How many pages?** Optional, leave blank and AI Website Creator decides.
- **Any specific pages you need by name?** Add up to 20, for example Careers, Case Studies, Team.
- **Do you want a blog?** Yes or No.
- **Do you need legal pages (Privacy Policy & Terms)?** Yes or No.

As you complete steps, a **Ready to generate** panel tracks your overall completion percentage (for example, "Your scope is 93% complete") and lets you jump back to fill in more detail before moving on.

<Callout kind="tip">
Use this step when the client has explicitly asked for a section that is not standard (for example, a "press" section or an interactive calculator), or when you want to compare against a specific competitor.
</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: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1790145617/uichemy-docs/ai-website-creator/scope-editor/overview/competitors-structure.webp" alt="" width={1918} height={940} 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>Competitors & Structure: sections, page count, named pages, blog and legal pages</em></p>

## Final Review

After you've gone through the areas you wanted to refine, you're back on the same **Review your draft** screen you started on. Each card's badge now reflects where its content actually came from, **From your prompt**, **AI draft**, or **Manual** for any step you edited yourself, and the **Project Brief** card on the right updates its confirmed count (for example, "1 of 6 confirmed").

Click **Edit** next to any card to revisit it. When everything looks right, click **Save changes** (or **Continue**, if you haven't reached the end of the areas yet). A **"Scope updated"** toast appears with a countdown, closing on its own after a few seconds (or click **Close** to dismiss it immediately), then you're taken to the **Site Map** tab.

## What AI Website Creator Does With Your Brief

Once you complete the brief, AI Website Creator analyzes everything you entered and generates a full sitemap. The AI uses your business description, brand direction, tone preferences, and reference sites to build a page structure matched to the project.

<Callout kind="tip">
You can always edit the sitemap after it is generated. The brief sets the starting point. Nothing is locked in.
</Callout>

## URL Crawling

When you paste a website URL anywhere in the brief, AI Website Creator crawls it automatically and extracts:

- Color palette
- Typography (heading and body fonts)
- Navigation structure
- Contact information and social links
- Testimonials and CTAs
- Brand tone and style

This works for the client's existing site, reference sites they like, and competitor URLs.

## Troubleshooting

<ExpandableGroup>
  <Expandable title="My Scope Editor isn't saving" default-open="false">
    Your progress saves automatically as you move between steps. If a step won't save, check your internet connection and make sure no required field on the current step is blank. If it still won't save, refresh the project from the dashboard and return to the brief. Answers on the current step may need to be re-entered, but your earlier steps are kept.
  </Expandable>
</ExpandableGroup>

## Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Do I have to complete all 6 steps?" default-open="false">
    No. You can skip steps and generate a sitemap with partial information. More detail produces a more accurate result, but a basic project description in Project Basics is enough to get started.
  </Expandable>

  <Expandable title="Can I edit the brief after generating the sitemap?" default-open="false">
    Yes. You can return to the brief at any time and update it. Changes to the brief do not automatically regenerate the sitemap, you would need to regenerate manually.
  </Expandable>

  <Expandable title="What if I do not have all the client information yet?" default-open="false">
    Fill in the fields you have and leave the rest blank. You can return to the brief later as you gather more information from the client.
  </Expandable>

  <Expandable title="Can I share the brief with my client?" default-open="false">
    Yes. You can invite the client to the project with a Client role. They can view the brief and leave comments without accessing the design or export.
  </Expandable>

  <Expandable title="Do I need the Scope Editor, or can I use a quick prompt instead?" default-open="false">
    Both options generate a sitemap. Type directly into the prompt box on your dashboard when you already know what you want and need a fast starting point. Use the Scope Editor (or **Start with a Guided Brief**) when you are scoping a client project, need a shareable brief for sign-off, or want a more tailored result on the first pass.
  </Expandable>
</ExpandableGroup>

## Related Docs

<Columns cols="2">
  <Card title="Getting Started" href="/ai-website-creator/getting-started/create-your-first-project" icon="rocket">
    See the full AI Website Creator flow from prompt through export.
  </Card>
  <Card title="Sitemap Editor" href="/ai-website-creator/sitemap-editor/overview" icon="map">
    Review and refine the sitemap generated from your brief.
  </Card>
</Columns>
