《扣子编程从一句话到产品上线零门槛AI心流开发》全书案例分享~-CSDN博客你可以直接在网页中与扣子编程 AI 平台对话描述你想要开发的网页应用的功能、界面、逻辑等需求扣子编程会自动完成应用的开发、测试、迭代和发布。目前扣子编程支持开发网页类型的应用包含完整前后端逻辑例如产品落地页、业务系统、网页版互动游戏、资讯网站等。2.1.1输入需求这个项目的背景是在当代英语教学实践中单词记忆始终是学习者面临的主要挑战之一。传统的机械记忆方法不仅效率低下还容易导致学习兴趣的丧失。针对这一普遍性问题本项目旨在开发一个互动性强、趣味性高的英语单词记忆游戏通过游戏化学习的方式提升记忆效率。该项目源于作者辅导初中生学习英语时的实际需求。观察发现常规的单词背诵方法存在三个显著缺陷记忆保持率低、学习过程枯燥、缺乏即时反馈机制。游戏化学习恰好能够解决这些问题通过即时奖励机制、可视化进度反馈和趣味性互动元素可以有效提升学习者的参与度和记忆效果。在技术方案的选择上扣子编程能让普通人都能上手。在扣子编程平台中单击网页应用选项卡如图2-1所示在文本框输入你的需求提示词。给我开发一个初中学生单词拼写学习游戏——要有一个淡蓝色、童趣满满的界面顶部是游戏名称左边是“学习区”、右边是“配置面板”有拼写拖放、中文释义提示、多余干扰字母、鼓励音效还能导入单词表、管理错题集、调整难度甚至点击释义还能发音。游戏怎么玩系统给出中文提示比如“夜晚”。下面会出现几个字母有的是真正的拼写字母有的是干扰字母。孩子只要按顺序把字母拖到拼写区组成正确的单词。拼对了字母框变绿还有鼓励音效“棒棒哒”。拼错了不会直接扣分但错误单词会自动进入“错题集”方便后面专门练习。你可以自己粘贴单词表进去调整干扰字母的数量甚至可以一个错题集专练模式。而且它会实时记录答题耗时最后帮你计算得分这样孩子会有一种闯关升级的成就感。图2-1 扣子编程开发网页应用输入需求的提示词在扣子编程页面上你可以酌情上传一些图片或文件点击“”作为附加信息提供给编程 Agent以便它能更理解你的需求。例如上传一幅你想要的风格的图片等这些都能帮助编程 Agent 更精准地把握细节要求。2.1.2进阶配置你可以选择协作模式如图2-2所示默认情况下为 Agent 模式如果你对需求不确定可以先切换到对话模式讨论方案待方案确认后再切换到Agent 模式由编程 Agent 根据此前的讨论结论执行开发任务。图2-2 协作模式选择在开发 AI 编程项目时你可以根据自己的需求在 Agent 模式与问答模式之间自由切换1Agent 模式是让 AI 帮你完成工作。在这种模式下 扣子 AI 是你的“执行助手”能够提取你的指令自主拆解任务步骤、编写并修改代码、自动调试实现端到端的任务闭环。2对话模式是与 AI 探讨开发思路。在这种模式下扣子 AI 是你的“资深顾问”专注于辅助你思考不会改动你的项目。它主要通过对话帮助你理清思路针对你提出的需求进行深度解析并提供解释、优化建议或示例代码。3计划模式则是先定开发方案分步落地执行。在这种模式下扣子 AI 是你的“项目规划师”。收到需求后扣子 AI 会先梳理整体开发逻辑、拆分阶段任务、生成清晰的开发计划。并且在需求分析过程中它会逐个向你确认关键的开发方向。 当你确认开发计划后扣子 AI 会自动切换到 Agent 模式执行开发任务。另外在执行编程任务时编程 Agent 可以按需加载技能从而具备相应的专业领域知识和能力。如图2-3所示技能列表添加页面用来给 AI 智能体挂载各类能力实现 AI 自动调用工具、对接外部软件、生成多模态内容、读写数据。图2-3 技能列表如图2-4所示你可以选择编程模型用于开发应用编程 Agent 已集成 GLM 4.7、GLM 5、Kimi K2.5 等主流的编程模型。为了达到较好的开发效果系统会自动为你选择适合当前场景的模型你也可以根据模型的官方介绍自行选择。图2-4 选择编程模型2.1.3开发应用点击“提交向上箭头”按钮 编程 Agent 会根据你输入的提示词开始设计应用、创建项目并自动为项目设置应用名称。编程 Agent 收到你的需求之后将立即启动需求分析并规划开发流程和步骤逐步生成应用的前后端代码。代码生成完毕后自动构建并启动服务以提供一个可视化的界面供你预览如图2-5所示 你可以在右侧预览页面查看及测试实际运行效果。图2-5 单词拼写大师网页应用这个应用的雏形就基本搭建完成了你可以选择直接将其部署为网页站点。但是通常情况下这些应用在功能或交互上仍有可改进之处此时你可以通过自然语言或编写代码的方式和扣子 AI 一起迭代你的应用如图2-6图2-7所示提出修改意见如“除了鼠标选择字母还可以直接键盘按键”“导入单词可以选择一个文本文件来导入。需要滚动条否则页面下方按钮看不见”等。图2-6 迭代应用增加键盘输入的需求图2-7 迭代应用增加导入单词和滚动条需求最终这个单词拼写大师网页应用如图2-8所示。图2-8 单词拼写大师网页应用界面从这个案例可以看到通过与扣子编程对话我们可以在浏览器页面中快速开发网页应用。无需编写代码、无需搭建开发环境只需提出明确的开发需求即可从零开始完成应用的代码编写。扣子编程为开发者提供了这一低门槛、高上限的开发范式只需一句话即可一站式完成从构建到落地的完整生产级闭环。
2.1 开发网页应用
《扣子编程从一句话到产品上线零门槛AI心流开发》全书案例分享~-CSDN博客你可以直接在网页中与扣子编程 AI 平台对话描述你想要开发的网页应用的功能、界面、逻辑等需求扣子编程会自动完成应用的开发、测试、迭代和发布。目前扣子编程支持开发网页类型的应用包含完整前后端逻辑例如产品落地页、业务系统、网页版互动游戏、资讯网站等。2.1.1输入需求这个项目的背景是在当代英语教学实践中单词记忆始终是学习者面临的主要挑战之一。传统的机械记忆方法不仅效率低下还容易导致学习兴趣的丧失。针对这一普遍性问题本项目旨在开发一个互动性强、趣味性高的英语单词记忆游戏通过游戏化学习的方式提升记忆效率。该项目源于作者辅导初中生学习英语时的实际需求。观察发现常规的单词背诵方法存在三个显著缺陷记忆保持率低、学习过程枯燥、缺乏即时反馈机制。游戏化学习恰好能够解决这些问题通过即时奖励机制、可视化进度反馈和趣味性互动元素可以有效提升学习者的参与度和记忆效果。在技术方案的选择上扣子编程能让普通人都能上手。在扣子编程平台中单击网页应用选项卡如图2-1所示在文本框输入你的需求提示词。给我开发一个初中学生单词拼写学习游戏——要有一个淡蓝色、童趣满满的界面顶部是游戏名称左边是“学习区”、右边是“配置面板”有拼写拖放、中文释义提示、多余干扰字母、鼓励音效还能导入单词表、管理错题集、调整难度甚至点击释义还能发音。游戏怎么玩系统给出中文提示比如“夜晚”。下面会出现几个字母有的是真正的拼写字母有的是干扰字母。孩子只要按顺序把字母拖到拼写区组成正确的单词。拼对了字母框变绿还有鼓励音效“棒棒哒”。拼错了不会直接扣分但错误单词会自动进入“错题集”方便后面专门练习。你可以自己粘贴单词表进去调整干扰字母的数量甚至可以一个错题集专练模式。而且它会实时记录答题耗时最后帮你计算得分这样孩子会有一种闯关升级的成就感。图2-1 扣子编程开发网页应用输入需求的提示词在扣子编程页面上你可以酌情上传一些图片或文件点击“”作为附加信息提供给编程 Agent以便它能更理解你的需求。例如上传一幅你想要的风格的图片等这些都能帮助编程 Agent 更精准地把握细节要求。2.1.2进阶配置你可以选择协作模式如图2-2所示默认情况下为 Agent 模式如果你对需求不确定可以先切换到对话模式讨论方案待方案确认后再切换到Agent 模式由编程 Agent 根据此前的讨论结论执行开发任务。图2-2 协作模式选择在开发 AI 编程项目时你可以根据自己的需求在 Agent 模式与问答模式之间自由切换1Agent 模式是让 AI 帮你完成工作。在这种模式下 扣子 AI 是你的“执行助手”能够提取你的指令自主拆解任务步骤、编写并修改代码、自动调试实现端到端的任务闭环。2对话模式是与 AI 探讨开发思路。在这种模式下扣子 AI 是你的“资深顾问”专注于辅助你思考不会改动你的项目。它主要通过对话帮助你理清思路针对你提出的需求进行深度解析并提供解释、优化建议或示例代码。3计划模式则是先定开发方案分步落地执行。在这种模式下扣子 AI 是你的“项目规划师”。收到需求后扣子 AI 会先梳理整体开发逻辑、拆分阶段任务、生成清晰的开发计划。并且在需求分析过程中它会逐个向你确认关键的开发方向。 当你确认开发计划后扣子 AI 会自动切换到 Agent 模式执行开发任务。另外在执行编程任务时编程 Agent 可以按需加载技能从而具备相应的专业领域知识和能力。如图2-3所示技能列表添加页面用来给 AI 智能体挂载各类能力实现 AI 自动调用工具、对接外部软件、生成多模态内容、读写数据。图2-3 技能列表如图2-4所示你可以选择编程模型用于开发应用编程 Agent 已集成 GLM 4.7、GLM 5、Kimi K2.5 等主流的编程模型。为了达到较好的开发效果系统会自动为你选择适合当前场景的模型你也可以根据模型的官方介绍自行选择。图2-4 选择编程模型2.1.3开发应用点击“提交向上箭头”按钮 编程 Agent 会根据你输入的提示词开始设计应用、创建项目并自动为项目设置应用名称。编程 Agent 收到你的需求之后将立即启动需求分析并规划开发流程和步骤逐步生成应用的前后端代码。代码生成完毕后自动构建并启动服务以提供一个可视化的界面供你预览如图2-5所示 你可以在右侧预览页面查看及测试实际运行效果。图2-5 单词拼写大师网页应用这个应用的雏形就基本搭建完成了你可以选择直接将其部署为网页站点。但是通常情况下这些应用在功能或交互上仍有可改进之处此时你可以通过自然语言或编写代码的方式和扣子 AI 一起迭代你的应用如图2-6图2-7所示提出修改意见如“除了鼠标选择字母还可以直接键盘按键”“导入单词可以选择一个文本文件来导入。需要滚动条否则页面下方按钮看不见”等。图2-6 迭代应用增加键盘输入的需求图2-7 迭代应用增加导入单词和滚动条需求最终这个单词拼写大师网页应用如图2-8所示。图2-8 单词拼写大师网页应用界面从这个案例可以看到通过与扣子编程对话我们可以在浏览器页面中快速开发网页应用。无需编写代码、无需搭建开发环境只需提出明确的开发需求即可从零开始完成应用的代码编写。扣子编程为开发者提供了这一低门槛、高上限的开发范式只需一句话即可一站式完成从构建到落地的完整生产级闭环。
