> ## Documentation Index
> Fetch the complete documentation index at: https://we0-f8eb3f1a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Website Editing & Content Optimization

> A detailed guide to refining your website using canvas editing, section editing, magic brush, and preview-stage tools.

<Tip>
  After the first version of your website is generated, what really determines its completeness

  isn't "whether it was generated" — it's "whether you continue polishing the content and details"

  * Canvas Stage: Best for adjusting structure, copy, images, and page details
  * Preview Stage: Best for refining, expanding, and checking the website from a near-final perspective
</Tip>

***

### **A. Canvas Stage**

<Info>
  The canvas stage is the primary phase where you work with AI to polish your pages.\
  Focus on page structure, core copy, image assets, and mobile responsiveness during this stage.
</Info>

#### **1. Dialog Editing (Click "Modify Design" in canvas)**

<Tip>
  Dialog editing is best for full-page direction changes or cross-section requirements. Tell the AI what you want to change, and it will adjust the page based on your description.
</Tip>

<Columns cols={2}>
  <Column>
    Best used for:

    * Changing overall style (e.g., cleaner, more techy)
    * Adding or removing page modules
    * Adjusting page content structure
    * Unifying copy tone
    * Adding page descriptions, selling points, or conversion entry points
  </Column>

  <Column>
    Describe like this (more precise = better results):

    * Make the homepage cleaner, reduce text stacking, and highlight the main brand visual
    * Add a customer case study module to the homepage with a consultation button
    * Rewrite this website to be more suitable for overseas audiences
  </Column>
</Columns>

<Note>
  For more accurate changes, include both "what to change" and "what to change it to" in a single sentence.
</Note>

<Frame>
  <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-1-1.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=b3b2cd61656bd7a5552ab61afd4f6628" alt="7 1 1" width="1496" height="952" data-path="images/7-1-1.png" />
</Frame>

***

#### **2. Section Editing (Click section numbers in canvas)**

<Tip>
  When you know exactly which area to adjust, section editing is more efficient than full-page dialog.\
  You can make modification requests for a specific module.
</Tip>

Common sections include (automatically matched to your generated pages):

* Banner area
* Product introduction section
* Service process section
* Case study showcase
* Contact us section
* Footer information

Examples:

* Change this product intro section to a three-column card layout
* Make the case study section title more persuasive
* Remove this duplicate content and replace it with customer benefit descriptions

<Info>
  This method works best when you've confirmed the overall page direction and just want to optimize specific areas.
</Info>

<Frame>
  <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-2-1.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=0e00332e6d092e14588af7c43c9fb8ee" alt="7 2 1" width="2404" height="1454" data-path="images/7-2-1.png" />
</Frame>

***

#### **3. Box-Select Editing (Click the selection button in the top-left corner of canvas)**

<Tip>
  Box-select editing is best for handling multiple items within a local area. For example, if a section contains a title, image, button, and description text, you can select the entire block and tell the AI to adjust everything at once.
</Tip>

Best suited for:

* Adjusting an entire content block at once
* Re-laying out a specific area
* Unifying style or information hierarchy within a region
* Having the AI reorganize a block of content

Examples:

* Select this block and change it to a better converting hero section
* Select this group of content and make the layout more compact
* Select this area, keep the core information, and simplify the rest

<Info>
  If you feel "the problem is in this area, but you can't pinpoint exactly which line," box-select editing is usually very helpful.
</Info>

<Columns cols={2}>
  <Column>
    <Frame>
      <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-3-1.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=69e875813e1659f377780de64f4ab544" alt="7 3 1" width="2234" height="1962" data-path="images/7-3-1.png" />
    </Frame>
  </Column>

  <Column>
    <Frame>
      <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-3-2.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=ad09855c73b2f32bb97680e1f4fbd5f3" alt="7 3 2" width="2198" height="1948" data-path="images/7-3-2.png" />
    </Frame>
  </Column>
</Columns>

***

#### **4. Element-Select Editing (Select a container in canvas)**

<Tip>
  Element-select editing is for finer-grained content changes — a text block, an image, a button, or a small widget.

  Single-click to select the container; double-click to directly edit text.
</Tip>

Best used for:

* Editing a specific heading, subtitle, or body text
* Adjusting button copy
* Modifying a number, label, or descriptor
* Fine-tuning a specific image or small element's position and expression

Examples:

* Replace the AI-generated case image with your own product photo
* Change this button text from "Learn More" to "Book a Demo Now"

<Info>
  When you only want to change one specific point without affecting the surrounding content, use element-select editing first.
</Info>

<Frame>
  <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-4.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=88c68a31935e06f8be2971f11d455187" alt="7 4" width="3840" height="1986" data-path="images/7-4.png" />
</Frame>

***

#### **5. Mobile Preview (Click the mobile toggle in canvas)**

<Tip>
  Many websites look fine on desktop but show obvious issues on mobile — text too long, images too large, buttons too cramped, or broken layouts.
</Tip>

<Note>
  We recommend switching to mobile view to check pages during the canvas stage.
</Note>

Key things to check:

* Are titles too long?
* Are paragraphs too dense?
* Are images being cropped?
* Are buttons easy to tap?
* Is the spacing between modules comfortable?
* Are forms and contact info clearly visible?

If you find issues, tell the AI:

* Add mobile responsiveness for all pages

<Info>
  Mobile isn't something to add at the end — we recommend perfecting it during the canvas stage.
</Info>

<Columns cols={2}>
  <Column>
    <Frame>
      <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-5-1.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=f99b9e04934a5fa1b05ded5acc411251" alt="7 5 1" width="3840" height="1986" data-path="images/7-5-1.png" />
    </Frame>
  </Column>

  <Column>
    <Frame>
      <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-5-2.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=51982c64cddbd2804e52a6212af909e2" alt="7 5 2" width="2676" height="1922" data-path="images/7-5-2.png" />
    </Frame>
  </Column>
</Columns>

***

### **B. Preview Stage**

<Info>
  The preview stage is closest to the final live state. At this stage, put yourself in the shoes of a real visitor and continue refining the website from the perspective of "can they understand it, can they use it, can they convert."
</Info>

#### **1. Dialog Editing**

<Tip>
  In the preview stage, dialog editing is better suited for "experience-level" issues, not just visual tweaks.
</Tip>

Examples:

* The homepage looks good, but the selling points aren't clear enough
* Contact info is there, but the conversion entry isn't obvious enough
* Some pages have incomplete content
* The user browsing path isn't smooth enough

You can say:

* Check this website's homepage conversion logic and optimize the CTA
* Unify the copy across these pages to a more professional brand voice
* Fill in the missing content on this page

<Info>
  The focus at this stage isn't "adding more content" — it's making the website more complete, smoother, and closer to a usable final state.
</Info>

<Frame>
  <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-b-1.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=2bd87febfe911a25a2965deb231bf2e5" alt="7 B 1" width="3840" height="1986" data-path="images/7-b-1.png" />
</Frame>

***

#### **2. Magic Brush**

<Tip>
  The Magic Brush is best for quickly pointing out issues and making fast local fixes. You can mark a specific area on the page and let the AI understand exactly where you want changes.
</Tip>

Best suited for:

* A section that looks inconsistent
* An element in the wrong position
* A local area that needs a quick copy or style change
* Quickly fixing a batch of small issues before launch

Examples:

* Too much whitespace here — tighten it up
* This button isn't prominent enough — make it stand out more
* This image doesn't match the copy — replace it

<Info>
  If you already know exactly where the problem is on the page, the Magic Brush is usually more efficient than re-describing the entire page.
</Info>

<Frame>
  <img src="https://mintcdn.com/we0-f8eb3f1a/JbJE5oJ02g5T3WXj/images/7-b-2.png?fit=max&auto=format&n=JbJE5oJ02g5T3WXj&q=85&s=d8661289d36f5132c7e34e60b0a4d6c8" alt="7 B 2" width="3840" height="1986" data-path="images/7-b-2.png" />
</Frame>

***

#### **3. Plugin Extensions**

<Tip>
  Once the main website is essentially complete, you can use plugin extensions during the preview stage to enhance capabilities.
</Tip>

* Email integration
* Social media links
* Video embedding
* Custom watermarks

<Info>
  We recommend finalizing core pages, copy, and conversion paths first, then considering plugin extensions — this approach is more stable.
</Info>

<Frame>
  <img src="https://mintcdn.com/we0-f8eb3f1a/U97Adn1SHZoxAM7I/images/7-b-3.png?fit=max&auto=format&n=U97Adn1SHZoxAM7I&q=85&s=739218a4ccd6dc18ae6afa0129a93fe9" alt="7 B 3" width="3840" height="1986" data-path="images/7-b-3.png" />
</Frame>

***

#### **4. Images & Documents**

<Info>
  During the preview stage, images and documents are often the key factors that determine a website's "authenticity" and "completeness."
</Info>

<Tip>
  You can continue to add or replace:

  <Columns cols={2}>
    <Column>
      * Brand logo
      * Product images
      * Team photos
      * Scenario images
    </Column>

    <Column>
      * Posters or promotional graphics
      * Company introduction documents
      * Product manuals
      * Marketing materials
    </Column>
  </Columns>
</Tip>

<Columns cols={2}>
  <Column>
    The value of this content:

    * Makes the website more than an empty shell
    * Makes brand expression more authentic and credible
    * Gives the AI more reference material for future optimization
    * Helps users understand your business faster
  </Column>

  <Column>
    Pre-launch checklist:

    * Are images clear and copyright-cleared?
    * Are documents the latest version?
    * Are brand materials consistent?
    * Are contact info, company name, and product names consistent throughout?
  </Column>
</Columns>

<Frame>
  <img src="https://mintcdn.com/we0-f8eb3f1a/U97Adn1SHZoxAM7I/images/image-9.png?fit=max&auto=format&n=U97Adn1SHZoxAM7I&q=85&s=a7e42b746d9e0a26eb38f7f1db848617" alt="Image" width="874" height="410" data-path="images/image-9.png" />
</Frame>

***

### **C. Practical Tips for Website Editing**

* Edit structure first, then copy, then details — don't start by obsessing over small styling tweaks
* Ensure the homepage, core pages, and conversion entry points are clear before enriching secondary pages
* Include goals with each edit request, such as "more professional," "better for conversion," or "more suitable for overseas audiences"
* For local issues, use section editing, box-select editing, or Magic Brush — you don't always need to redo the entire page
* Check mobile view after every round of edits to avoid last-minute rework
* Before launch, browse through the homepage, key inner pages, form pages, and contact page at least once

***