夜雨聆风字数：约3500字
阅读时间：约10分钟
前面的Coze工作流节点系列分享结束后，有一段时间没写跟Coze有关的内容（虽然一直在用），因此今天开始想分享《扣子编程六大功能拆解》系列。
什么是扣子编程？
扣子编程是一个AI驱动的应用开发平台，简单来讲，只需要清晰描述你的需求，扣子编程就能帮助你打造可用于生产环境的智能体、工作流、技能、移动应用、网页应用或小程序。
扣子2.0把能力重新梳理成了六大模块：网页应用、移动应用、小程序、智能体、工作流、技能。这个系列我会逐个实测，看看自然语言编程到底能做到什么程度。
今天先聊网页应用——用对话方式开发一个完整的网站，从创意到上线，全程不用写代码。
为了测试真实场景，我决定做一个自媒体人能用上的工具：每日信息差生成器。功能定位：输入热点主题→自动检索当天新闻→生成适合自媒体平台发布的信息卡片。
一、扣子编程的网页应用是什么？
简单来说，就是用自然语言描述需求，AI自动生成完整网站。
扣子编程提供了一个基于Web的AI编程开发环境，你可以直接在网页中与扣子AI对话，描述你想要开发的应用的功能、界面、逻辑等需求，扣子AI会自动完成应用的开发、测试、迭代和发布。
目前支持开发网页类型的应用，包含完整前后端逻辑，例如：
• 产品落地页
• 业务系统
• 网页版互动游戏
• 资讯站点
跟传统开发对比
| 传统开发 | 扣子编程 |
| 写前端代码（HTML/CSS/JS） | 描述需求 |
| 写后端代码（Node.js/Python） | AI生成代码 |
| 配数据库 | 自动配置 |
| 买服务器 | 云端托管 |
| 部署上线 | 一键部署 |
扣子会帮你自动完成：
• 需求分析和PRD文档
• 前后端代码编写（React + Node.js）
• 数据库和存储配置
• 域名申请和HTTPS证书
• 云端部署和运维监控
• 自动测试用例生成和单元测试
你需要的只是说清楚想要什么。
二、实操：开发"每日信息差"生成器
步骤1：需求澄清
打开 扣子编程，你的 AI 开发伙伴， Vibe Coding 基础设施，自然语言对话开发智能体、工作流、网页应用、移动应用，一键部署上线，选择"网页应用"选项卡。
输入需求
在文本框输入你的提示词。需要尽可能清晰且详细地描述应用的功能、界面设计、业务逻辑等方面的要求。
我用大白话描述需求：
"我希望有个网站，我输入一个热点主题，它就会自动帮我检索10条当天的相关新闻热点，并且并行生成10张比例3:4的4K信息卡片，以图片的形式概述当天的热点新闻，我可以用来发布'每日信息差'主题的新闻图片合集。"
进阶配置（可选）
在输入需求时，可以通过以下配置让扣子AI生成的结果更精准：
① 上传附件
酌情上传一些图片或文件，作为附加信息提供给扣子AI。例如上传一张你想参考的网站截图、想要的风格示例图片等，帮助扣子AI更精准地把握细节要求。
② 选择协作模式
• 自主模式：扣子AI独立完成开发
• 协作模式：你可以介入关键决策点，与AI共同完成开发
③ 添加技能
技能是扣子编程封装好的常见集成能力接口，例如数据库、存储、AI能力等。提前添加技能可以让扣子AI在开发时直接使用这些能力。
④ 选择编程模型
可以选择不同的AI模型来完成编程任务，不同模型在代码质量、生成速度等方面有所差异。
大模型选择，默认的是coze自家的doubao seed2.0 code，但是我一般会用GLM5、minimax M2.7以及Kimi 2.5.这三的编程能力个人认为都比默认的强，而且好处是消耗的扣子积分相对各大模型的官方订阅，划算很多。
需求澄清机制
扣子AI收到提示词后，如果判断提示词不明确、缺失关键信息，不足以支撑AI生成合适的PRD和产品原型，则会主动追问，请求补充缺失的关键信息。
例如，如果你只说"开发一个公司官网"，但未提供公司名称、行业、核心业务、品牌材料、参考风格等任何背景信息，扣子AI会主动追问相关细节。
澄清需求时同样可以上传附件，为扣子AI提供更丰富的信息。
步骤2：AI编程开发
需求确认后，扣子AI开始干活了。
左边是思考过程，右边是预览页面
1. 需求分析与规划
• 分析你的需求
• 规划开发流程和步骤
• 生成PRD（产品需求文档）
2. 自动配置集成能力
如果扣子AI判断应用需要数据库、存储、身份认证、AI等能力，会自动添加和配置对应的集成：
自动集成示例：
• 联网搜索：检索当天新闻
• 图像生成：生成信息卡片
• 数据库存储：保存搜索历史、用户行为数据
• 对象存储：存储生成的图片
3. 代码生成与测试
扣子AI会逐步生成应用的前后端代码，代码生成完毕后：
• 自动生成测试用例
• 完成一轮单元测试
• 测试通过后，自动构建并启动服务
整个过程在浏览器完成：
• 左侧：对话区，显示开发进度
• 右侧：代码编辑器，实时显示文件
• 下方：Web终端，显示构建日志
大约3分钟后，差不多就完成了。
步骤3：预览与测试
服务启动后，右侧出现预览窗口。
预览功能
• 代码生成完毕后，系统会显示应用的预览页面
• 支持在新标签页中查看
• 可以刷新页面或重启应用（预览区域右上角有对应图标）
全面测试建议
服务启动后，右侧出现预览窗口。
建议测试时关注三个问题：
• 功能是否可用：核心链路是否完整、数据增删改查是否成功
• 交互是否完善：页面元素是否完整、布局是否合理、按钮是否能触发
• AI能力是否正常：文本生成、图片生成等输出是否符合预期
这是我的测试：
输入：人工智能
输出过程：
在预览区全面测试你的应用，建议关注以下问题：
•功能是否可用：验证应用的核心链路是否完整可操作、数据的增删改查是否能成功执行。
•交互是否完善：检查页面元素是否完整显示、布局是否合理、样式是否符合设计要求、各个按钮是否都能正确触发。
•AI 能力是否正常：如果你的应用集成了 AI 能力，例如文本生成、图片生成等，验证 AI 模型的输出是否符合预期。
修复故障，测试中发现问题，有两种修复方式：
方式一：AI自动识别
扣子AI会自动检测并提示修复，点击"一键修复"即可让AI尝试修复问题。
方式二：主动反馈
如果在体验过程中触发页面报错，但扣子AI没有提示，可以主动复制报错信息粘贴到对话中，要求AI修复。
比如一开始我这个任务输出的只是文字的摘要，并不是卡片，我在左边对话框输入反馈，可以看到右侧已经生成了卡片。
步骤4：迭代优化
修复问题和故障之后，这个网页应用的雏形就基本搭建完成了，接下来可以选择直接将其部署为网页站点。但是通常情况下，这些应用在功能或交互上仍有可改进之处，这个时候可以通过自然语言或编写代码的方式，和扣子 AI 一起迭代应用。
调整需求
如果之前某次对话中输入的描述有误或不准确，可以直接修改历史消息。在对话记录中找到该消息，修改后敲击回车，扣子AI会根据新的描述对应用进行调整。
注意：修改历史消息后，扣子AI的版本记录里会另起一个分支来记录本次及后续的变更，原版本仍然保留。
编辑应用（自然语言）
用自然语言描述修改建议，例如：
"banner的底图改成蓝色渐变"
扣子AI会自动调整代码。
调试代码（手动编辑）
扣子编程提供了完整的Web开发环境：
代码编辑器
• 在页面右上角单击文件树图标进入
• 可以查看所有代码文件
• 可以直接修改代码
• 修改后需要重新构建才能预览
Web终端
• 代码编辑器下方是Web终端
• 可以执行常见命令调试应用
• 例如 npm install 安装依赖、python app.py 启动服务等
• 与本地终端操作逻辑一致
引用代码到对话
在代码编辑器中找到想修改的代码片段，单击"引用到对话"，然后通过自然语言描述修改建议。
回滚开发版本
由于模型生成代码的随机性，有时可能生成不符合预期的代码，或出现反复修复失败的故障。此时可以使用回滚版本功能：
1. 在对话区顶部单击"版本历史"图标
2. 找到要恢复的版本
3. 单击右侧的"回滚"图标
应用会恢复到之前正常的版本状态。在对话框中也可以操作。
三、集成能力详解
扣子编程通过技能方式封装了一批常见的集成能力接口，方便快速为应用添加各种功能。
添加技能
在和扣子AI对话前，先在扣子AI对话区域单击"技能"，确认已添加想要的技能。常用技能包括：
存储与数据库
扣子编程提供结构化数据托管方案：
• 自动集成：扣子AI会根据任务要求自动集成并设置数据库和存储
• 手动指令：也可以在对话区发送自然语言指令添加
示例指令：
"使用数据库记录用户登录、浏览和购买行为数据"
典型应用场景：
• 电商应用：数据库管理商品信息、订单数据；存储商品图片、用户评价图片
AI能力
传统方式为应用添加AI能力时，需要：
1. 开通模型服务
2. 获取API密钥
3. 自行完成模型调用配置与开发
扣子编程托管了业界先进的各种模型服务，无需任何配置：
• 默认已开通大模型集成权限
• 扣子AI自动为应用添加AI功能
示例指令：
"使用豆包模型总结检索到的资讯，并整理为资讯日报"
四、部署上线
一键部署
这一步相对比较费时间，也需要学习成本，特别是对于新手，但是第一次学会之后，后面就很简单了。
点击右上角"部署"按钮。
扣子自动完成：
• 部署到火山引擎云端
• 生成域名（可自定义前缀）
注意：
扣子编程会为每个部署项目自动分配以 .coze.site 为后缀的默认域名，也可以将项目绑定至自定义域名，以便打造专属品牌访问地址，使网站地址更容易被用户记住，还能提升品牌知名度。
可以从火山引擎购买域名，或使用从第三方服务商处购买的域名。使用自定义域名时，你需要在火山引擎为自定义域名进行备案，并配置 SSL 证书。
具体怎么购买域名、备案域名可以看coze这篇文档→
部署网页应用 - 文档 - 扣子
• 配置HTTPS证书
部署约2分钟，得到公开链接：https://daily-info-xxxxx.volces.com
分享项目
部署成功后，在项目搭建页面右上角单击"分享"按钮，可以将项目分享给他人。
查看线上日志
可以查看已发布应用的前后端运行日志，以便在出现问题时进行故障排查和分析。
五、费用说明
开发、测试、线上使用应用时，以下操作会消耗扣子积分：
| 操作类型 | 说明 |
| 编程任务 | 与扣子AI的每轮对话 |
| 内置集成 | 调用大语言模型、联网搜索、图像生成等内置集成服务 |
具体消耗取决于实际使用轮次和调用的集成服务。扣子个人版每天提供一定量的免费积分，对于我来说。个人进阶版9.9元/月已经足够用了，建议先体验再决定是否订阅。
六、配额与限制
开发应用时存在以下配额限制：
• 可创建的项目数量
• 可回滚版本数
• 可部署的次数
详细说明请参考官方文档配额与限制。
七、核心能力总结
亮点
1. 需求澄清环节专业
不像某些AI拿到需求就瞎写，扣子先确认细节，避免"写完才发现理解错了"。
2. 自动测试保障质量
生成代码后自动创建测试用例并完成单元测试，测试通过才提供预览。
3. 自动集成省去配置麻烦
数据库、存储、AI能力自动配置。传统开发配环境可能半天，这里完全不用管。
4. 多种迭代方式灵活高效
• 自然语言描述修改
• 直接编辑代码
• 修改历史消息重新生成
• 版本回滚
5. 一键修复省心
测试发现问题，不用翻代码找Bug，直接告诉AI，它定位并修复。
6. 部署确实一键完成
域名、SSL、服务器全搞定。对不懂运维的人来说，这是最大价值。
局限
1. 复杂交互需人工调整
拖拽排序、复杂动画等，AI生成效果可能不够精细，需手动改代码。
2. 代码质量参差不齐
能跑，但代码风格可能不够优雅。对代码质量要求高，需人工重构。
3. 依赖平台生态
数据库、存储都是扣子提供的，迁移到其他平台需额外工作。
八、适合谁用？
| 场景 | 推荐度 | 原因 |
| 自媒体内容工具 | ✅ | 快速搭建，像"每日信息差"生成器 |
| 产品MVP验证 | ✅ | 低成本，快速上线测试想法 |
| 企业内部工具 | ✅ | 数据看板、审批系统等 |
| 编程学习 | ✅ | 了解全栈开发流程 |
| 高并发电商 | ❌ | 性能可能不满足 |
| 深度定制项目 | ❌ | 底层逻辑受限 |
| 复杂企业系统 | ❌ | 功能可能不够完善 |
写在最后
这次实操让我对扣子编程有了新认识。
它不是取代程序员，而是把开发门槛从"会写代码"降到"能描述清楚需求"。非技术人员可以把想法变成产品；程序员可以把重复工作交给AI，专注架构设计。
从工程行业视角，这像BIM技术刚出来的时候——不能取代工程师，但能让工程师更高效。
下一篇预告：《扣子编程02：移动应用开发，同样的流程在手机上有什么不同？》
今日分享结束。
