Coze CLI：10 分钟开发并上线 Web 应用

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

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

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

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

通过本教程，你将学会

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

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

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

开始前确认

打开 coze.cn 并登录扣子。扣子已经预安装 Coze CLI，无需自行配置开发环境。

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

步骤一：创建 Web 应用

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

使用 Coze CLI，帮我制作一个 Coze CLI 产品落地页。页面需要介绍 Coze CLI 是什么、核心能力、典型使用场景和使用方式，并提供查看官方文档的入口。整体风格简洁、有科技感，适配电脑和手机。创建完成后告诉我项目状态，并把项目链接发给我。

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

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

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

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

步骤二：预览应用

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

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

把这个项目的在线预览链接发给我，并简要说明这次实现了哪些页面和功能。

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

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

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

步骤三：调试和修改应用

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

补充页面内容

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

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

添加功能

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

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

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

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

调整页面风格

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

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

修复运行问题

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

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

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

配置敏感信息

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

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

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

对话过程	调试结果

步骤四：部署到线上

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

在扣子对话中输入：

确认这个项目当前没有仍在运行的开发任务，并检查最新预览。确认没有问题后，把网页部署到正式环境，并把线上地址和部署结果发给我。

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

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

相关操作

部署失败时，让 AI 帮你修复

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

可以直接说：

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

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

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

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

配置自定义域名

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

例如：

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

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