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

通过与扣子编程对话，你可以在浏览器中直接开发移动应用。无需编写代码或搭建复杂的开发环境，你只需通过自然语言清晰地描述开发需求，即可从零开始完成移动应用的代码编写、打包构建与部署。
## 功能概述 {#cb578d75}
扣子编程是一个基于 Web 的 AI 编程开发环境。你可以在网页中与扣子 AI 对话，描述应用的功能、界面、逻辑等需求，扣子 AI 便会自动完成从需求分析、代码生成、迭代优化到部署的完整流程。
目前，扣子编程支持开发各类移动应用，例如工具类应用（如待办清单、健康打卡）、互动类应用（如小游戏、社交聊天）、内容类应用（如资讯阅读、短视频社区）、电商类应用（如商品展示、电商订单管理）等。
:::tip 说明
应用开发完成后，可通过 Android 或 iOS 设备扫码预览应用效果。部署应用时，仅支持生成 Android APK 安装包。
:::
## 费用说明 {#29198d0a}
开发、测试、线上使用应用时，以下操作将消耗你的扣子积分。

* [编程任务](https://docs.coze.cn/coze_pro/task_fee)：与扣子 AI 的每轮对话。
* [内置集成](https://docs.coze.cn/coze_pro/internal_integrations_fee)：调用大语言模型、联网搜索、图像生成等内置集成服务。

## 配额与限制 {#df783671}
开发应用时，存在可创建的项目数量、可回滚版本数、可部署的次数等配额限制，详细说明，请参考[配额与限制](/guides/vibe_coding_limit)。
## 开发应用 {#f52fc4db}
参考以下流程，通过 AI 编程开发移动应用。
### 步骤一：需求澄清 {#53e47469}

1. 创建应用并输入你的需求。
   1. 在扣子编程首页，单击**移动应用**选项卡。
   2. 在文本框输入你的提示词。
      你需要尽可能清晰地描述应用的功能、界面设计、业务逻辑等方面的要求。例如，你可以输入以下提示：
      ```Plain Text
      请帮忙开发一款「极简日常记账App」，具体要求如下：
      1. 实用性要求：
      - 核心用户：20-45岁的普通上班族，核心场景是日常消费后10秒内快速记账、睡前/月末查看收支明细。
      - 核心功能：仅保留“快速记账（选择收支类型+输入金额+备注）”“收支明细查询（按日/月筛选）”“简单统计（月度收支饼图）”，剔除所有冗余功能（如社交分享、广告推送等）。
      2. 易用性要求：
      - 界面设计：首页仅展示“+记账”主按钮（占屏幕下方固定位置）、今日收支概览，无复杂菜单栏。
      - 交互逻辑：记账时默认选中“支出”类型，金额输入支持数字键盘快速录入，备注可选填，点击“完成”即记账成功并给出“已保存”的视觉反馈。
      ```

      ![Image=563x235](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d7a4039b0bf34820af400e099ce6bbb9~tplv-goo7wpa0wc-image.image)
   3. （可选）进阶配置：通过上传附件、选择协作模式、添加技能、选择编程模型，让扣子 AI 生成的结果更精准、更符合你的预期。
      ![Image=414x210](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bf5f349b753e440a9361c3f1ed500fc7~tplv-goo7wpa0wc-image.image)
      
      :::: tabs
      @tab ① 上传附件
      酌情上传一些图片或文件，作为附加信息提供给扣子 AI，以便扣子 AI 能更理解你的需求。例如上传一张你想参考的应用截图、想要的风格示例图片等，这些都能帮助扣子 AI 更精准地把握细节要求。 
      
      @tab ② 选择协作模式
      默认情况下为 **Agent 模式**，如果你对需求不确定，可以先切换到**问答模式**讨论方案，在方案确认后，再切换到**Agent 模式**，由扣子 AI 根据此前的讨论结论执行开发任务。更多信息，请参考[如何选择协作模式？](/guides/vibe_coding_faq#3069a332)。
      
      @tab ③ 调用技能
      扣子 AI 现已支持添加编程技能（Skill），在执行编程任务时，扣子 AI 可以按需加载技能，从而具备相应的专业领域知识和能力。例如，前端设计技能可以有效指导模型如何排版、设计配色和动画效果、处理背景等等，能显著提升模型的 UI 生成能力，减少产物视觉效果的“AI 味”。
      AI 编程项目中，扣子 AI 可用的编程技能如下：
      
      * **官方技能**：扣子编程官方提供的集成服务，可一键集成各种常见能力，例如图片生成、视频生成等。
      * **我的技能**：开发者自行上传的编程技能。你可以上传扣子编程或扣子制作的技能包，也可以上传外部开源技能包。制作及上传技能的方式可参考[开发技能](/guides/vibe_coding_skill)、[使用技能](/guides/using_skill)。
      
      ![Image=321x254](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f619a2030a8640b6aa3f71275b648353~tplv-goo7wpa0wc-image.image)
      
      @tab ④ 选择编程模型
      扣子编程已集成 GLM 4.7、GLM 5、Kimi K2.5 等主流的编程模型，用于开发应用。为了达到较好的开发效果，系统会自动为你选择适合当前场景的模型，你也可以根据模型的官方介绍自行选择。
      
      ::::

   4. 在键盘中敲击回车，开始开发你的项目。
      扣子 AI 会根据你输入的提示词来开始设计应用、创建项目，并自动为项目设置应用名称。
2. （可选）澄清你的需求。
   扣子 AI 收到你的提示词之后，如果判断提示词不明确、缺失关键信息，不足以支撑 AI 生成合适的 PRD 和产品原型，则会向你发送提示，请求补充缺失的关键信息。
   澄清需求时，你同样可以上传附件，为扣子 AI 提供更丰富的信息。 

### 步骤二：AI 编程开发应用 {#e20eae98}
扣子 AI 收到你的需求之后，将立即启动需求分析，并规划开发流程和步骤，逐步生成应用的前后端代码。代码生成完毕后，自动构建并启动服务，以提供一个可视化的界面供你预览。
如果扣子 AI 判断你的应用需要数据库、存储、身份认证、AI 等能力，则会自动添加和配置对应的集成，为你的应用设计数据库表、配置存储系统，实现相关功能。
![Image=252x395](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c021b63c70554e73b30bbe147ded0321~tplv-goo7wpa0wc-image.image)
### 步骤三：预览与测试 {#53d3f6b2}
初步生成后端代码后，扣子 AI 会自动生成测试用例并完成一轮单元测试。测试通过后扣子 AI 会提供后端代码的预览，同时提醒你对后端开发部分进行验收，你可以在右侧预览页面查看后端功能的实际运行效果。 
预览界面如下：
![Image=593x342](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9936cfb5c0ea45dd8187c707af4367b3~tplv-goo7wpa0wc-image.image)
在预览与测试的环节中，你可以通过以下操作预览并测试扣子 AI 为你生成的应用。
<!-- @cols-width: 197,423,239 -->
| | | | \
|**操作** |**说明** |**示例** |
|---|---|---|
| | | | \
|预览应用 |代码生成完毕后，系统会显示应用的预览页面。你也可以在右侧开启一个新的标签页，并单击**预览**以进入预览页面。 |\
| |预览页面支持在新标签页中查看、刷新页面或重启应用，你可以在预览区域右上角单击对应的图标来执行这些操作。 |![Image=3011x1623](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7b9f67eb97634355950cd3ee0b4ee80f~tplv-goo7wpa0wc-image.image) |\
| | | |
| | | | \
|全面测试 |在预览区全面测试你的应用，通常建议关注以下问题： |\
| | |\
| |* **功能是否可用**：验证应用的核心链路是否完整可操作、数据的增删改查是否能成功执行。 |\
| |* **交互是否完善**：检查页面元素是否完整显示、布局是否合理、样式是否符合设计要求、各个按钮是否都能正确触发。  |\
| |* **AI 能力是否正常**：如果你的应用集成了 AI 能力，例如文本生成、图片生成等，验证 AI 模型的输出是否符合预期。 |![Image=617x1293](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e70f92439a704de691f9d1a4660b2258~tplv-goo7wpa0wc-image.image) |\
| | | |
| | | | \
|修复故障 |通常情况下，扣子 AI 会自动识别并提示你修复故障，你可以根据页面提示，单击一键修复，允许扣子 AI 尝试修复这些问题。 |\
| |如果你在体验应用的过程中触发页面报错，但扣子 AI 没有提示你修复，你也可以主动复制报错信息并粘贴到对话中，将其发送给扣子 AI，要求它修复故障。 | |\
| | |\- |

### 步骤四：扫码预览应用 {#d3f7c726}
请单击右下角二维码的**操作说明**，使用扣子 App 扫码预览您的应用。
你可以使用 Android 或 iOS 设备进行预览。在[部署移动应用](/guides/deploy_a_mobile_app)后，Android 用户还可以下载生成的 APK 文件，以便将其上架到应用市场。

::::cols
@col 50
单击操作说明：
![Image=329x301](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a3e33615b92d4f39bad4636907a2036a~tplv-goo7wpa0wc-image.image)


@col 50
扫码预览应用：
![Image=240x258](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/223bc1a5d52644648f4e39e397f1407a~tplv-goo7wpa0wc-image.image)

::::

## 迭代应用 {#ec516e6a}
修复问题和故障之后，这个应用的雏形就基本搭建完成了，你可以选择直接将其部署为移动应用。但是通常情况下，这些应用在功能或交互上仍有可改进之处，此时你可以通过自然语言或编写代码的方式，和扣子 AI 一起迭代你的应用。
### 调整需求 {#c8822147}
如果之前某次对话中你输入的描述有误或不准确，导致扣子 AI 生成的应用无法满足你的需求，相对于回滚版本再重新对话生成应用，直接修改你发送的历史消息会更加高效。你可以在对话记录中找到该历史消息，对其进行修改后敲击回车，扣子 AI 会根据新的描述对应用进行调整和优化。同时扣子 AI 的版本记录里也会另起一个分支来记录本次及后续的变更。
![Image=500x361](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b739403140014e62a86d096fa09685d0~tplv-goo7wpa0wc-image.image)
### 编辑应用 {#d7ca7795}
和扣子 AI 一起持续优化应用，直到实现预期的效果。你可以在对话区中通过自然语言描述你的修改建议，和扣子 AI 一起优化你的应用。例如输入以下提示词：
```TypeScript
优化「极简记账App」视觉设计：统一主色为#6366f1，收入/支出分别用柔和的#10b981/#ef4444区分，核心操作按钮（+记账/查看明细）采用填充式样式并增加轻微悬浮阴影，强化视觉焦点与操作引导性。
```

### 调试代码 {#f4159827}
扣子编程提供了一个基于 Web 的 AI 编程开发环境，你可以在代码编辑器中修改代码文件、在终端中执行命令调试代码，和扣子 AI 一起开始开发你的应用。关于 AI 编程开发环境的使用技巧，可参考[AI 编程环境](/guides/vibe_coding_environment)。
<!-- @cols-width: 197,423,239 -->
| | | | \
|**操作** |**说明** |**示例** |
|---|---|---|
| | | | \
|通过扣子 AI 修改代码 |在页面右上角单击文件树图标进入代码编辑器，找到你想修改的前端代码文件或代码片段，并单击**引用到对话**，然后通过自然语言描述你的修改建议。 | |\
| | |![Image=2440x1877](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/63c5556857d04840b0d93541388f83cd~tplv-goo7wpa0wc-image.image) |\
| | | |
| | | | \
|手动编写代码 |在页面右上角单击文件树图标进入代码编辑器，你可以在其中查看扣子 AI 生成的所有代码文件，并直接修改代码。 |\
| |修改代码之后，需要重新构建才能预览项目。你可以在终端中执行命令，或者通过对话请扣子 AI 帮你构建、重启服务，以供预览项目。 | |\
| | |![Image=72x310](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/46276d617a644cfc986386e0913988de~tplv-goo7wpa0wc-image.image) |\
| | | |
| | | | \
|调试代码 |代码编辑器下方是 Web 终端，你可以通过**终端**执行常见的命令来调试并迭代你的应用，例如执行`npm install`安装项目依赖、`python app.py`启动后端服务等，与本地终端操作逻辑一致。 | |\
| | |![Image=2994x1503](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b18f8643a5b043fab6fab790e6fa2aae~tplv-goo7wpa0wc-image.image) |\
| | | |

### 回滚开发版本 {#6672685d}
扣子 AI 使用当前的先进模型来完成任务，但由于模型生成代码的随机性，有时可能无法完全满足你的需求，生成了不符合预期的代码，或者出现了反复修复失败的故障，此时你可以使用回滚版本功能，将应用恢复到之前正常的版本状态。
在对话区顶部单击**版本历史**图标，找到要恢复的版本，在其右侧单击**回滚**图标。
![Image=606x209](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/83364eb2ba8d48429606409243553925~tplv-goo7wpa0wc-image.image)
## 集成能力 {#d912c5d4}
扣子编程通过**技能**方式封装了一批常见的集成能力接口，方便你快速为小程序添加各种功能，例如数据库、存储、AI 能力等，使小程序更好地满足多样化的业务需求。
在和扣子 AI 对话，添加集成能力之前，你需要先在扣子 AI 对话区域单击**技能**，确认扣子 AI 已添加了你想要的技能。
![Image=531x376](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bf24df460d1c4d52ba725bdb3293b087~tplv-goo7wpa0wc-image.image)
### 存储与数据库 {#b91e36c6}
扣子编程提供了结构化数据托管方案，对于需要集成数据库和存储能力的小程序，扣子 AI  会根据任务要求自动集成并设置数据库能力和存储能力。例如开发一个电商小程序，扣子 AI 会自动集成数据库来管理商品信息、订单数据等，同时设置存储能力以存储商品图片、用户上传的评价图片等。 
你也可以在对话区发送自然语言指令，为小程序集成存储或数据库能力。例如：
```Plain Text
使用数据库记录用户消费行为数据
```

关于存储和数据库集成的详细说明，可参考[集成数据库能力](/guides/integrate_database)、[集成对象存储能力](/guides/integrate_storage)。
### AI 能力 {#c36bd8e9}
为应用程序添加 AI 能力时，通常需要开通模型服务并获取 API 密钥、并自行完成模型调用的配置与开发。扣子编程托管了业界先进的各种模型服务，无需任何配置，扣子 AI 会自动为你的应用添加 AI 能力，帮助你开发更为智能的应用程序。
默认情况下，你的项目已开通了大模型集成的权限，扣子编程会在收到指令后，自动为应用添加 AI 功能。你也可以在对话区发送自然语言指令，让扣子 AI 集成大模型能力。例如：
```Plain Text
结合用户的收支历史和消费偏好，大模型智能分析并推荐个性化预算规划、消费优化建议，帮用户更科学地管理收支。
```

关于大模型集成详细说明，可参考[内置集成](/guides/internal_integrations)。
## 后续操作 {#e60981d9}
### 部署应用 {#6236d6b9}
对于 Android 用户，完成应用的开发与测试之后，你可以在页面右上角单击**部署**，将扣子编程搭建的应用打包为 APK 安装包。用户可自行下载安装使用，也可将 APK 安装包提交至 Android 应用市场。具体步骤请参见[部署移动应用](/guides/deploy_a_mobile_app)。
![Image=719x211](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f356e1945d484443be61fe08383b96e3~tplv-goo7wpa0wc-image.image)
### 分享项目 {#000c78fe}
在项目搭建页面右上角单击**分享**按钮，即可将完整的项目分享给他人。收到链接的用户可以在有效期内查看项目的开发过程、源码等全部信息，方便他人复制与协作该项目。
![Image=619x184](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f6eb8bbba0d942b2b4c97e15d87eed9d~tplv-goo7wpa0wc-image.image)
### 查看线上日志 {#20f54cfc}
查看已发布应用的前后端运行日志，以便在出现问题时进行故障排查和分析。详细说明可参考[查看日志和 Trace](/guides/view_running_log)。
![Image=554x364](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/66a508519e2c48e1982a54ea04753eef~tplv-goo7wpa0wc-image.image)