本篇是《Qwen3-Coder 挑战赛》系列教程的第二期：借助 Qwen3-Coder 模型强大的代码生成与任务代理能力，结合 MCP 部署方案 与 VS Code 插件工具链（通义灵码），从零开始打造一款专为儿童设计的学习助手。
希望本教程能带你深入掌握 Qwen3-Coder 在真实应用场景中的开发实践。
一.快速上手：在VS Code中使用通义灵码插件
通义灵码是 Qwen3-Coder 的官方 IDE 插件，现已支持 VS Code，帮助开发者在编码过程中实现实时智能补全、注释生成、错误修复等功能，具体操作如下：
1、安装插件：打开 VS Code，点击左侧边栏的【扩展】图标，在搜索框中输入 Limgma ，找到 Limgma-Alibaba Cloud AI Coding Assistar 官方插件后点击【安装】。
2、登录账号：安装完成后，左侧活动栏将出现“通义灵码”图标。点击该图标，按照提示登录您的阿里云账号，完成身份验证即可启用全部功能。
3、打开项目目录：点击顶部菜单栏【文件】→【打开文件夹】，选择或新建一个本地项目文件夹，开始您的 AI 编程之旅。
二.实战开发：构建儿童学习助手
我们的目标是：构造一个轻量级的儿童学习助手，它需要具备以下功能：
- 番茄钟计时（25分钟学习 + 5分钟休息）
- 语音鼓励提醒
- 成就徽章激励系统
- 简洁友好的前端界面
我们开始输入首轮提示词，如下：
我想帮孩子做个简单的学习计时器： 背景需求： - 孩子容易分心，做作业拖拉 - 希望引入类似“番茄工作法”的机制，但要极度简化，适合低龄儿童 - 需要有正向激励机制，比如完成任务可获得“小星星” - 累计星星可兑换现实奖励（如玩具、游戏时间等，由家长设定） - 我不懂编程，需要提供完整、可直接使用的代码和操作说明 功能要求： - 可设定学习时长（默认 25 分钟，可选 5/10/15/25/30 分钟） - 大字体倒计时显示，清晰可见 - 点击“领取星星”按钮可获得一颗“小星星” - 显示当前累计星星数量 界面与体验要求： - 卡通风格：界面色彩明亮，字体圆润可爱，符合孩子审美。 - 按钮大而醒目，孩子能轻松点击 - 无需联网，纯本地运行（HTML + CSS + JS 单文件） - 操作极简：孩子自己能独立使用（开始 → 等待 → 完成 → 领星星） 技术要求： - 使用 HTML、CSS、JavaScript 单文件实现 - 不依赖任何外部库或服务器 请提供一个开箱即用的解决方案，包含全部代码和使用指南。
点击“生成代码”，Qwen3-Coder 会自动输出包含 HTML、CSS、JavaScript 的完整前端页面和逻辑脚本。
通过首轮提示词互动，我们得到了一个基础版的学习助手页面，支持倒计时和星星累计功能，效果如下：
但......在测试过程中，我们发现了几个需要改进的地方。为了更精准地引导 AI 优化代码，我们使用结构化提示词进行迭代：
1、添加一个小星星兑换奖励设置功能 （1）可以添加、修改、删除奖励 （2）可以设置每条奖励的小星星个数 2、 在每条奖励后添加兑换按钮，点击兑换按钮后，扣除当前对应奖励的小星星数 3、计时结束，提示在屏幕中间进行提示，并且有庆祝烟花特效 4、防止孩子点击重置和领取星星 （1）开始学习后，重置按钮隐藏 （2）在学习中，点击领取小星星，不能领取小星星，需要进行提示，只有学习时间归零才可以领取 帮我使用结构化提示词优化一下这段需求
接下来，在通义灵码插件的左下角，点击【模式切换】，选择 “智能问答” 模式。
💡 为什么要切换？
“智能体”模式适合一次性输出完整代码；而“智能问答”模式更适合多轮交互式优化，能理解上下文、记忆历史修改，并持续迭代代码。
切换完成后，我们将上述结构化提示词粘贴进去，点击发送，下面我们来看下优化后的效果：
核心功能需求 1. 奖励管理系统 功能模块：奖励商店 子功能： - 奖励条目管理： * 添加新奖励：用户可自定义奖励名称和所需星星数 * 修改现有奖励：可编辑奖励名称和星星数 * 删除奖励条目：可移除不需要的奖励 - 奖励兑换机制： * 每条奖励后添加"兑换"按钮 * 点击兑换按钮时验证星星数量 * 星星足够时扣除相应星星数并显示兑换成功提示 * 星星不足时显示提示信息 2. 计时结束提醒优化 功能模块：完成提醒 触发条件：倒计时归零 视觉效果： - 屏幕中央显示完成提示信息 - 添加庆祝烟花特效动画 - 提示音效（可选） 交互行为： - 自动显示"领取星星"按钮 - 可点击"领取星星"收集奖励 3. 防误操作机制 功能模块：操作权限控制 规则定义： - 学习进行中状态： * 隐藏"重置"按钮，防止意外中断学习 * 禁用"领取星星"功能 * 点击"领取星星"时显示提示："学习时间还未结束哦！" - 学习准备状态： * 显示"重置"按钮 * "领取星星"按钮处于待激活状态 - 学习完成状态： * 显示"重置"按钮 * 激活"领取星星"功能
当我们确认 AI 已经完全理解需求后，就可以切回【智能体】模式——它会基于我们刚刚在“智能问答”中明确的需求，一次性生成完整、可运行的 HTML 文件。
生成完成后，点击【接受】，将代码保存为 index.html ，双击打开就能看到全新的升级版学习助手！
补充：使用 Live Server 实时预览前端页面
如果你的应用包含 HTML 页面（如学习助手的交互界面），推荐安装 VS Code 插件 Live Server，实现一键预览与实时刷新。
安装完成后，鼠标右键点击 html 文件，在弹出菜单中选择“Open with Live Server”，就会自动在浏览器打开这个页面。
三.一键上线：把你的作品分享给全世界
前面我们用 Qwen3-Coder 和通义灵码，在本地开发并优化出了一款儿童学习助手。但它现在只存在于我的电脑里，接下来，我想要把这个 HTML 文件，变成一个任何人都能通过链接访问的网页。
只需要 MCP 和 edgeone-pages，简单点几下，就能搞定！
🚀 什么是 edgeone-pages？
edgeone-pages 就是专门为静态网页部署而生的 MCP 插件。
静态网页：就是像我们这个学习助手一样，由 HTML、CSS、JS 文件组成，不需要复杂后台数据库的网页。
作用：把你本地的 index.html 文件，一键发布到一个全球可访问的服务器上，并生成一个专属的、好记的链接。
第一步：添加 edgeone-pages MCP 插件
回到你的 通义灵码 VS Code 插件界面。点击左下角的【模式切换】，确保你处于 “智能体”模式（只有这个模式才能调用 MCP）。
点击页面中的人物图标 → 选择【个人设置】→ 进入【MCP 服务】。
点击【添加 MCP】，在搜索框里输入 edgeone-pages ，然后按回车键进行搜索。
💡 提示：这个插件来自“魔搭（ModelScope）MCP 广场”，是官方认证的可靠插件。
找到 edgeone-pages 后，点击【安装】。安装成功后，你可以在【我的服务】里看到它。
第二步：让 AI 帮你部署
现在，MCP 插件已经装好了，你只需要通义灵码的聊天框里，输入这样一条指令：使用 edgeone-pages-mcp-server，把这个页面部署上线。 AI 会收到指令，调用 edgeone-pages 插件，自动完成文件上传、服务器配置等一系列操作。
第三步：获取你的专属链接
几秒钟后，AI 就会回复你，附带一个公网访问链接，就像这样：
🌐 部署成功！你的学习助手已上线：https://mcp.edgeone.site/share/xxx
恭喜！你的作品现在正式上线了！
