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

使用 Coze CLI，只需要描述需求，就可以让扣子调用编程 AI 创建、调试并部署 Web 应用。本教程将带你制作一个 Coze CLI 产品落地页，完整体验从创建项目、在线预览、持续修改到部署上线的流程。你不需要下载 IDE，也不需要了解 React 等前端框架。

我们要制作的落地页将包含 Coze CLI 的产品介绍、核心能力、典型场景和文档入口，并满足以下要求：

* 页面可以根据反馈持续增加功能、调整文案和修改视觉风格。
* 开发完成后可以在线预览，发现问题时可以让 AI 继续调试和修复。
* 确认效果后可以部署到正式环境，并按需要绑定自定义域名。

实际开发时间会受需求复杂度影响。对于结构清晰的单页 Web 应用，通常可以在较短时间内完成第一个可预览版本。

:::tip 说明
* 除了 Web 应用，Coze CLI 还支持创建 App、小程序、Agent、工作流和 Skill 等不同类型的项目。本教程只以 Web 应用为例。
* 想进一步了解 Coze CLI  定位、典型场景和完整能力，可以阅读 [Coze CLI 介绍](https://bytedance.larkoffice.com/docx/IARVd9vqRogNg7xmyvVc1neLnVl#doxcnsghvf4KDN8bk9RkBVI38Mg)。
:::

## 通过本教程，你将学会 {#hHAWmQwf8}

通过本教程，你将走完 Web 应用从创建到上线的完整流程，并体验 Coze CLI 的以下能力：

* 通过自然语言创建 Web 项目并跟踪开发任务。
* 获取在线预览，持续修改内容、样式和功能。
* 使用模型、工具和 Skill 扩展项目能力。
* 通过环境变量管理敏感配置。
* 部署生产版本，查看部署状态和历史记录。
* 使用 AI 分析并修复部署问题。
* 为线上应用绑定自定义域名。

如果你已经有现成代码，可以继续阅读《导入已有项目并通过 AI 持续开发》；如果应用需要保存业务数据，可以阅读《构建带数据库的 AI 应用》。

## 开始前确认 {#hEPCwDwY0}

打开 [coze.cn](https://www.coze.cn/) 并登录扣子。扣子已经预安装 Coze CLI，无需自行配置开发环境。

如果是第一次使用 Coze CLI，扣子会先引导你完成账号授权。授权成功后，创建的项目会保存在你的扣子账号下。具体流程请参考《账号登录与授权》。

## 步骤一：创建 Web 应用 {#hyvdK6RI6}

Coze CLI 可以调用扣子编程，通过自然语言创建 AI 编程项目。创建时，建议把页面用途、需要展示的内容、视觉风格和交付要求一起告诉扣子。描述越清楚，生成的第一个版本越接近预期。

<!-- @cols-width: 530,339 -->
| | | \
|**你的指令** |**对话过程** |
|---|---|
|Plain Text |\
| |\
|```Plain Text |\
|使用 Coze CLI，帮我制作一个 Coze CLI 产品落地页。页面需要介绍 Coze CLI 是什么、核心能力、典型使用场景和使用方式，并提供查看官方文档的入口。整体风格简洁、有科技感，适配电脑和手机。创建完成后告诉我项目状态，并把项目链接发给我。 |\
|``` |![Image=316x280](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/37e553761b6645a1a0da3b7e64460d0c~tplv-goo7wpa0wc-topic.webp) |

扣子会通过 Coze CLI 创建 Web 项目，并将需求发送给编程 AI。编程 AI 会生成项目结构、编写页面代码、安装所需依赖并完成构建。

项目创建成功后，首次开发任务可能仍在运行。扣子会继续跟踪任务状态，直到编程 AI 返回结果。你不需要重复发送相同需求，也不要因为暂时没有预览链接就重新创建项目。

如果等待时间超过 3 分钟，可以继续询问：

```Plain Text
帮我检查刚才创建的项目目前是什么状态。如果开发任务还在进行，告诉我当前进度；不要重复创建项目。
```

## 步骤二：预览应用 {#hw10h6mts}

开发完成后，扣子会通过 Coze CLI 获取项目的在线预览链接。预览页面运行在开发环境中，适合检查页面效果和测试功能，不等同于正式上线地址。

如果扣子没有主动返回预览链接，可以直接说：

<!-- @cols-width: 294,289,325 -->
| | | | \
|**你的指令** |**对话过程** |**生成的落地页** |
|---|---|---|
|```Plain Text |\
|把这个项目的在线预览链接发给我，并简要说明这次实现了哪些页面和功能。 |\
|``` |![Image=1560x1382](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4a678123dabf4766b473420138454139~tplv-goo7wpa0wc-topic.webp) |![Image=479x284](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/639b7d0d0b2f464b94e9e5edcfa50e80~tplv-goo7wpa0wc-topic.webp) |

打开预览链接后，可以重点检查以下内容：

* **内容是否完整：​**产品介绍、核心能力、使用场景和文档入口是否都已展示。
* **交互是否正常：​**按钮和链接是否可以点击，跳转地址是否正确。
* **视觉是否符合预期：​**字体、配色、间距和页面层次是否清晰。
* **不同设备是否适配：​**在电脑和手机上打开时，内容是否出现遮挡、溢出或错位。

第一次生成的页面不需要一次达到最终效果。先确认核心内容和页面结构可用，再根据实际预览结果逐步调整，通常比一次提交大量细节更高效。

## 步骤三：调试和修改应用 {#holDxnlqX}

预览后如果发现内容、样式或功能不符合预期，不需要重新创建项目。直接在当前对话中提出修改要求，扣子会继续通过 Coze CLI 与编程 AI 对话，在原项目上完成迭代。

### 补充页面内容 {#hYj50QbUd}

例如，发现落地页缺少官方文档入口时，可以说：

```Plain Text
帮我在落地页的首屏和页尾各增加一个“查看文档”按钮，链接到 Coze CLI 官方文档。保留现有页面结构，修改完成后把最新预览链接发给我。
```

### 添加功能 {#hEWGmZ5gf}

如果需要为应用增加新能力，可以直接描述用户如何使用这项功能。例如：

```Plain Text
帮我在页面中增加一个示例体验区。用户输入一句图片描述后，可以生成一张图片，并把生成结果显示在页面中。
```

这类功能可能需要使用项目工具、Skill 或外部服务。你可以让扣子先查看当前项目可用的模型、工具和 Skill，再选择适合的能力：

```Plain Text
查看这个项目当前可以使用的模型、工具和 Skill，告诉我哪些适合实现图片生成。先说明方案，等我确认后再修改项目。
```

### 调整页面风格 {#hm7ORBUer}

描述风格时，除了使用“简洁”“科技感”等关键词，还可以说明希望保留或改变的具体元素：

```Plain Text
把页面调整为深色科技风，使用蓝紫色作为强调色。保留现有内容结构和按钮文案，重点优化首屏视觉、卡片层次和移动端间距。
```

### 修复运行问题 {#hSaYZVEcQ}

如果某个功能出现问题，尽量说明操作步骤、实际结果和预期结果，方便编程 AI 定位：

```Plain Text
点击“查看文档”按钮后没有跳转。请检查按钮事件和链接配置，修复后测试电脑端和手机端，并把最新预览链接发给我。
```

如果你有错误日志、需求文档或其他本地文件，也可以让扣子将文件作为开发上下文发送给编程 AI。

### 配置敏感信息 {#hFZLhYoOa}

应用需要 API Key、服务地址等配置时，不要直接写在页面代码或公开对话示例中。可以让扣子使用项目环境变量：

```Plain Text
把图片生成服务的 API Key 配置为项目环境变量，不要写入代码，也不要在回复中展示完整密钥。
```

配置完成后，再让扣子检查开发环境中功能是否正常。生产环境需要使用同一项配置时，也要在部署前确认对应环境变量已经准备好。

<!-- @cols-width: 394,418 -->
| | | \
|**对话过程** |**调试结果** |
|---|---|
|![Image=1424x666](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/25c9e5e2266342ddb2793dd73496c446~tplv-goo7wpa0wc-topic.webp) |![Image=299x179](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/930d10b00a06480c9365365d49ad68c2~tplv-goo7wpa0wc-topic.webp) |

## 步骤四：部署到线上 {#hSx0Zv6yw}

在线预览并确认页面内容、核心功能和移动端效果没有问题后，就可以将应用部署到正式环境。部署前，扣子应先确认当前开发任务已经结束，避免将尚未完成的版本发布上线。

在扣子对话中输入：

<!-- @cols-width: 524,395 -->
| | | \
|**你的指令** |**对话过程** |
|---|---|
|Plain Text |\
| |\
|```Plain Text |\
|确认这个项目当前没有仍在运行的开发任务，并检查最新预览。确认没有问题后，把网页部署到正式环境，并把线上地址和部署结果发给我。 |\
|``` |![Image=1444x1060](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4ee5902f192247aeab859b484345d9b2~tplv-goo7wpa0wc-topic.webp) |

扣子会通过 Coze CLI 发起部署，并持续查询部署状态。部署完成后，打开正式地址重新检查页面内容、按钮跳转和核心功能，确认线上环境与预览效果一致。

如果项目配置了环境变量，应在部署前确认生产环境所需配置已经齐全。带数据库的项目还可能需要在部署时同步数据表，详细操作请参考《构建带数据库的 AI 应用》。

## 相关操作 {#hfLXA27FE}

### 部署失败时，让 AI 帮你修复 {#hCYJBvWed}

部署失败时，不需要重新创建项目。Coze CLI 可以查询部署状态和历史记录，也可以把部署日志发送给编程 AI，由 AI 分析失败原因并尝试修复。

可以直接说：

```Plain Text
查看这个项目最近一次部署的状态和失败日志，让 AI 分析原因并修复。修复完成后先重新生成预览让我确认，不要直接再次部署。
```

常见问题包括开发任务尚未结束、项目没有有效代码提交、生产环境变量缺失，或生产环境配置不完整。修复后应先重新预览，再决定是否再次上线。

如果需要确认线上运行的是哪个版本，可以让扣子查看部署历史：

```Plain Text
帮我查看这个项目最近的部署记录，告诉我当前线上版本的部署时间和状态。
```

### 配置自定义域名 {#hf1eNiaWe}

基础部署完成后，项目会获得可访问的线上地址。如果希望使用自己的品牌域名，可以让扣子通过 Coze CLI 查看和管理项目域名。绑定前需要确认你拥有该域名，并已根据所在地区要求完成备案。

例如：

```Plain Text
帮我查看这个项目当前的域名配置，并将已备案的域名 app.example.com 绑定到项目。
```

如果需要更换域名或停止使用某个域名，也可以让扣子查询现有绑定关系并执行解绑。域名变更会影响线上访问，操作前应核对目标项目和域名。