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

# 使用编辑器

> 掌握 AISiteBuilder 编辑器界面

## 编辑器概述

AISiteBuilder 编辑器提供了一个强大而直观的界面，用于构建和自定义您的网站。

## 主界面

### 聊天面板

聊天面板是您与 AI 交互的主要方式：

* **描述更改** 您想要进行的
* **提出问题** 关于您的网站
* **请求功能** 添加
* **获取建议** 改进

<Tip>
  在请求中要具体。不要说"让它更好"，而是尝试"增加标题的字体大小并在各部分之间添加更多间距。"
</Tip>

### 预览面板

预览面板实时显示您的网站：

* **实时更新** 当 AI 进行更改时
* **交互式预览** - 点击并浏览您的网站
* **设备切换** - 测试桌面、平板和移动视图
* **响应式设计** 测试

### 代码视图

访问您网站的底层代码：

* **查看所有文件** 在您的项目中
* **直接编辑代码** 如果您愿意
* **了解结构** 您的网站
* **复制代码** 供外部使用

## 构建模式

### 构建模式

创建和修改网站的标准模式：

1. 描述您想要的
2. AI 生成代码
3. 预览实时更新
4. 迭代直到满意

### 计划模式

在构建之前规划您的网站：

1. 描述您完整的网站愿景
2. AI 创建详细计划
3. 审查并调整计划
4. 批准并构建

<Note>
  建议对复杂网站使用计划模式。它有助于确保 AI 在编写代码之前理解您的完整愿景。
</Note>

### 讨论模式

在不使用令牌的情况下进行头脑风暴和完善想法：

* 讨论功能和功能
* 获取建议和推荐
* 澄清需求
* 规划您的方法

## 可视化编辑

### 元素检查器

点击预览中的任何元素以：

* 编辑文本内容
* 更改颜色和样式
* 调整间距和大小
* 修改图像

### 组件库

访问预构建的组件：

* 标题和导航
* 英雄区块
* 功能网格
* 推荐
* 联系表单
* 页脚

将组件拖放到您的网站中，然后自定义它们。

## 项目管理

### 文件浏览器

浏览您的项目结构：

* 查看所有页面和组件
* 创建新文件
* 组织您的项目
* 删除未使用的文件

### 版本历史

跟踪您网站的更改：

* 查看所有以前的版本
* 比较更改
* 恢复以前的版本
* 创建备份

### 设置

配置您的项目：

* 常规设置
* SEO 配置
* 分析设置
* 自定义域名
* 身份验证

## 键盘快捷键

使用快捷键加快工作流程：

| 快捷键                    | 操作     |
| ---------------------- | ------ |
| `Cmd/Ctrl + S`         | 保存更改   |
| `Cmd/Ctrl + Z`         | 撤销     |
| `Cmd/Ctrl + Shift + Z` | 重做     |
| `Cmd/Ctrl + K`         | 打开命令面板 |
| `Cmd/Ctrl + /`         | 切换代码视图 |
| `Cmd/Ctrl + P`         | 预览模式   |

## 有效编辑的技巧

<AccordionGroup>
  <Accordion title="从结构开始">
    首先构建整体结构，然后完善细节。这有助于 AI 理解大局。
  </Accordion>

  <Accordion title="使用具体语言">
    不要使用模糊的请求，而是要具体："添加一个带有图标、标题和描述的 3 列功能网格。"
  </Accordion>

  <Accordion title="边构建边测试">
    定期在不同设备上检查您的网站，以便及早发现响应式设计问题。
  </Accordion>

  <Accordion title="保存版本">
    在进行重大更改之前创建版本快照，以便在需要时轻松恢复。
  </Accordion>
</AccordionGroup>