> ## 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.

# 网站编辑与内容完善

> 从画布到预览，详解对话编辑、板块修改、神奇画笔等网站打磨方式。

<Tip>
  当第一版网站生成出来后，真正决定网站完成度的

  往往不是“有没有生成”，而是“有没有继续把内容和细节打磨好”

  * 画布阶段：适合调整结构、文案、图片和页面细节等
  * 预览阶段：适合从接近正式上线的视角继续完善、扩展和检查网站等
</Tip>

***

### **A、画布阶段**

<Info>
  画布阶段是你和 AI 一起打磨页面的主要阶段\
  这个阶段建议优先处理页面结构、核心文案、图片素材和移动端适配
</Info>

#### **1. 对话框编辑（画笔阶段点击修改设计）**

<Tip>
  对话框编辑适合处理整页方向或跨板块需求。你可以直接告诉 AI 你想改什么，会根据你的描述调整页面
</Tip>

<Columns cols={2}>
  <Column>
    适合这样用：

    * 修改整体风格，例如更简洁、更科技感
    * 添加或删除页面模块
    * 调整页面内容结构
    * 统一文案语气
    * 增加页面说明、卖点或转化入口
  </Column>

  <Column>
    建议这样描述：（描述的越精准改动效果越好）

    * 把首页改得更简洁，减少文字堆叠，突出品牌主视觉
    * 在首页增加客户案例模块，并补充一个咨询按钮
    * 把这套网站整体改成更适合海外用户阅读的表达方式
  </Column>
</Columns>

<Note>
  如果你希望改动更准确，建议在一句话里同时说清楚“改哪里、改成什么”
</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. 板块修改（画笔阶段点击板块序号）**

<Tip>
  当你已经明确知道要调整哪个区域时，板块修改会比整页对话更高效。\
  你可以针对某一个模块单独提出修改要求。
</Tip>

常见板块包括：（根据您网站生成的页面自动匹配板块区域）

* Banner 区
* 产品介绍区
* 服务流程区
* 案例展示区
* 联系我们区
* 页脚信息区

例如：

* 把这个产品介绍板块改成三列卡片形式
* 把案例板块的标题改得更有说服力
* 删除这一段重复内容，换成客户收益说明

<Info>
  这种方式适合你已经确定页面大方向，只想局部优化的时候使用
</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. 框选修改（画布阶段点击左上角框选多选按钮）**

<Tip>
  框选修改适合处理一个局部范围内的多项内容。比如某个区域同时包含标题、图片、按钮和说明文字，你可以直接框选这一块，告诉 AI 一起调整。
</Tip>

适合的场景：

* 一次性调整一个完整区块
* 对某个区域重新排版
* 统一修改一块区域内的风格或信息层级
* 让 AI 重新组织这一块内容

例如：

* 框选这一块，改成更适合转化的首屏结构
* 框选这一组内容，把排版改得更紧凑一些
* 框选这个区域，保留核心信息，其余内容尽量精简

<Info>
  如果你觉得“问题在这一块，但说不清具体是哪一句”，框选修改通常会很有帮助。
</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. 选中修改（画布阶段选中容器）**

<Tip>
  选中修改适合处理更细颗粒度的内容，例如一段文字、一张图片、一个按钮或一个小组件

  单击选中对应容器，双击可直接编辑文字
</Tip>

适合这样使用：

* 单独修改标题、副标题或正文
* 调整按钮文案
* 修改某个数字、标签或描述词
* 微调某张图或某个小元素的位置与表达

例如：

* 把AI生成的案例图改为自己的产品图
* 把这个按钮文案从“了解更多”改成“立即预约演示”

<Info>
  当你只想改一个具体点位，而不想影响整块内容时，优先使用选中修改
</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. 切换手机（画布阶段点击切换手机）**

<Tip>
  很多网站在桌面端看起来没问题，但切到手机端后，文字过长、图片过大、按钮太挤、排版断层等问题会比较明显。
</Tip>

<Note>
  所以在画布阶段，建议你切换手机视图检查页面
</Note>

重点建议查看：

* 标题是否过长
* 段落是否太密
* 图片是否被裁切
* 按钮是否容易点击
* 模块之间的上下间距是否舒服
* 表单和联系方式是否清晰可见

如果发现问题，可以直接告诉 AI：

* 为所有页面增加手机版适配性

<Info>
  移动端不是最后再补的步骤，建议在画布阶段就一起完善
</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、预览阶段**

<Info>
  预览阶段更接近正式上线前的使用状态。这个阶段建议你把自己代入成真实访客，从“能不能看懂、能不能使用、能不能转化”的角度继续完善网站。
</Info>

#### **1. 对话框编辑**

<Tip>
  在预览阶段，对话框编辑更适合处理“体验层”的问题，而不仅仅是视觉调整。
</Tip>

例如：

* 首页虽然好看，但卖点还不够清晰
* 联系方式有了，但转化入口还不够明确
* 某些页面内容完整度不够
* 用户浏览路径还不够顺畅

你可以直接这样说：

* 帮我检查这个网站的首页转化逻辑，并优化 CTA
* 把这几个页面的文案统一成更专业的品牌语气
* 帮我补充这个页面缺失的说明内容

<Info>
  这个阶段的重点不是“继续堆内容”，而是让网站更完整、更顺畅、更接近正式可用状态。
</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. 神奇画笔**

<Tip>
  神奇画笔更适合快速指出问题、快速局部修正。你可以直接对页面上的某个区域提出修改意见，让 AI 更准确地理解你想改哪里。
</Tip>

适合的场景：

* 页面上某一块看起来不协调
* 某个元素位置不对
* 某个局部区域需要快速改文案或改样式
* 临近发布前需要快速修一批小问题

例如：

* 这一块留白太大，帮我收紧
* 这个按钮不够明显，帮我强化一下
* 这张图和这一段文案不太搭，帮我换掉

<Info>
  如果你已经知道问题就在页面某个位置，神奇画笔通常会比重新描述整页更高效。
</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. 插件拓展**

<Tip>
  当网站主体已经基本完成后，如果还需要更多功能，可以在预览阶段结合插件拓展继续增强网站能力
</Tip>

* 集成邮箱
* 社交媒体链接
* 视频嵌入
* 定制水印

<Info>
  建议先把核心页面、核心文案和核心转化路径做好，再考虑插件拓展，这样会更稳妥
</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. 图片与文档**

<Info>
  在预览阶段，图片与文档通常是决定网站“真实感”和“完整度”的关键部分
</Info>

<Tip>
  你可以继续补充或替换：

  <Columns cols={2}>
    <Column>
      * 品牌 Logo
      * 产品图
      * 团队照片
      * 场景图
    </Column>

    <Column>
      * 海报或宣传图
      * 公司介绍文档
      * 产品手册
      * 宣传资料
    </Column>
  </Columns>
</Tip>

<Columns cols={2}>
  <Column>
    这类内容的价值在于：

    * 让网站不只是一个空壳页面
    * 让品牌表达更真实可信
    * 让 AI 在后续优化时有更多依据
    * 帮助用户更快理解你的业务
  </Column>

  <Column>
    建议在发布前重点检查：

    * 图片是否清晰且版权可用
    * 文档内容是否为最新版本
    * 品牌资料是否统一
    * 联系方式、公司名称、产品名称是否前后一致
  </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、网站编辑时的实用建议**

* 先改结构，再改文案，再改细节，不要一开始就反复抠小样式
* 先保证首页、核心页面和转化入口清楚，再去丰富次级页面
* 每次修改尽量带上目标，例如“更专业”“更适合转化”“更适合海外用户”
* 发现局部问题时，优先用板块修改、框选修改或神奇画笔，不一定每次都重做整页
* 每改完一轮都看一次手机端，避免最后集中返工
* 上线前至少完整浏览一遍首页、核心内页、表单页和联系页

***