> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 为 LanderLab AI 添加上下文：文件、截图和页面

> 为 LanderLab AI 助手提供更好的上下文。附加文件、截取屏幕截图，并引入其他落地页的内容，获得更准确的结果。

有了合适的上下文，AI 助手的效果会更好。与其用文字描述所有细节，不如直接给它看文件、截图和你的其他落地页。本指南介绍每种方式及其适用场景。

## 添加上下文的方式

点击 AI 助手输入框中的 **+**，查看所有选项。

| 选项 | 最适合 |
| - | - |
| **Attach files** | 产品图片、logo、品牌素材或参考文件。 |
| **Take a screenshot** | 向 AI 展示布局问题，或你希望它匹配的设计。 |
| **Add context** | 复用其他落地页中的区段、文案或样式。 |

## 如何从其他页面添加上下文

当你希望 AI 复用你已经做好的内容时，比如另一个落地页中的首屏（Hero）区段、offer 区块或效果好的布局，就使用 **Add context**。

<Steps>
  <Step title="打开 + 菜单">
    在 AI 助手输入框中，点击 **+**。
  </Step>

  <Step title="将鼠标悬停在 Add context 上">
    菜单旁边会打开你的落地页列表。
  </Step>

  <Step title="找到页面">
    在 **Search pages** 中输入关键词，或滚动列表。将鼠标悬停在某个页面上，可以看到预览卡片，其中包含缩略图、发布状态、创建时间和最后更新时间。这能帮你确认选对了页面。

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/7oYUvQRdpj3cDy1e/images/3a222c7c-9581-44c9-be0d-df0614e5819c.png?fit=max&auto=format&n=7oYUvQRdpj3cDy1e&q=85&s=1ecfa0d5fc1252ef9638fa9f721a92d7" alt="AI 助手中的 Add context 菜单，包含 Search pages 字段、落地页列表以及悬停页面的预览卡片" width="952" height="525" data-path="images/3a222c7c-9581-44c9-be0d-df0614e5819c.png" />
    </Frame>
  </Step>

  <Step title="选择页面">
    点击该页面，将其作为上下文添加到你的消息中。
  </Step>

  <Step title="告诉 AI 如何使用它">
    写下你的请求，并提到你添加的页面。例如：

    ```text theme={null}
    Use the hero section and testimonials from the added page on this page. Keep this page's colors and fonts.
    ```
  </Step>
</Steps>

<Tip>
  明确说出你想要另一个页面的哪一部分。“复制 FAQ 区段”比“做得和另一个页面一样”效果好得多。
</Tip>

## 如何截取屏幕截图

截图可以让 AI 准确知道你指的是页面的哪个部分。你还可以在截图上绘制标注，指出问题所在。

<Steps>
  <Step title="点击 Take a screenshot">
    在输入框中点击 **+**，然后点击 **Take a screenshot**。画布会切换到截图模式。
  </Step>

  <Step title="选择区域">
    拖动鼠标，选择你想截取的页面区域。使用控制点调整大小。所选区域的尺寸会显示在角落。
  </Step>

  <Step title="添加标注（可选）">
    使用底部的工具栏突出重点：

    * **Rectangle**：框选某个区域。
    * **Arrow**：指向某个元素。
    * **Pen**：自由绘制。
    * **Undo** 和 **Redo**：纠正错误。
    * **X**：取消截图。
  </Step>

  <Step title="点击 Attach">
    点击 **Attach**。截图会被添加到你的消息中。

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/uWHxd5IAWWFP2kM-/images/download-(9).png?fit=max&auto=format&n=uWHxd5IAWWFP2kM-&q=85&s=55dd3c5cd13857b9cac175c2e1bceab5" alt="LanderLab 编辑器的截图模式，显示已选区域以及包含矩形、箭头、画笔、撤销、重做和 Attach 的标注工具栏" width="1922" height="958" data-path="images/download-(9).png" />
    </Frame>
  </Step>

  <Step title="描述修改内容">
    告诉 AI 需要修复什么。例如：

    ```text theme={null}
    The pricing cards overlap on mobile. Stack them in one column and add more space between them.
    ```
  </Step>
</Steps>

## 如何附加文件

<Steps>
  <Step title="点击 Attach files">
    在输入框中点击 **+**，然后点击 **Attach files**。
  </Step>

  <Step title="上传文件">
    从电脑中选择文件，它会出现在输入框中。
  </Step>

  <Step title="说明如何使用">
    告诉 AI 这个文件用在哪里，例如“把这张图片用作首屏背景”或“匹配这个 logo 的颜色”。
  </Step>
</Steps>

## 提供更好上下文的技巧

* **只添加相关内容。** 多余的上下文可能会让 AI 偏离任务。
* **点明重点。** 指出文件或页面中确切的区段、元素或细节。
* **在截图上添加标注。** 在问题区域加一个箭头或方框，就不用让 AI 去猜。
* **组合使用。** 一张截图加一句简短说明，往往是修复设计问题最快的方式。

## 相关内容

<CardGroup cols={2}>
  <Card title="技能" icon="book-open" href="/zh/features/ai/skills">
    保存 AI 可在重复任务中复用的指令。
  </Card>

  <Card title="用 AI 优化" icon="chart-line-up" href="/zh/features/ai/optimize-landing-pages">
    写出能打造高转化页面的提示词。
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.