本篇是《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

恭喜！你的作品现在正式上线了！