手把手实战：用Qwen Code AI编程助手开发汉字笔顺学习纯静态网页

最近回家，看到小侄子在学写字，纠正笔顺是件挺费劲的事。手把手教吧，他老是记不住；让我姐教吧，她也挺头疼。我就琢磨，能不能做个工具，把汉字的笔顺用动画演示出来，让他自己看着练，是不是会轻松很多？

这不只是我家的问题，很多家长和刚开始学汉字的朋友可能都有类似的烦恼。正好，我最近在折腾阿里开源的 Qwen Code，一个功能强大的AI编程助手。用它来快速实现一个“汉字笔顺AI学习工具”的想法就冒了出来，而且是生成一个纯静态的HTML文件，打开浏览器就能用，特别方便。

一、环境准备

工欲善其事，必先利其器。在让AI帮我们写代码之前，需要先把开发环境搭建好。

1. 下载 VS Code

我们需要一个代码编辑器，这里选择免费且强大的 Visual Studio Code。打开官网 https://code.visualstudio.com/，根据你的操作系统（Windows、macOS 或 Linux）下载对应的安装包。我的演示环境是 macOS，所以选择下载 macOS 版本。

2. 下载 Node.js

Qwen Code 需要运行在 Node.js 环境中。前往 Node.js 中文官网 https://nodejs.org/zh-cn/download 下载安装包。

注意两点：

1. 确定版本号：确保下载的 Node.js 版本大于 20。
2. 选择系统：选择与你电脑匹配的操作系统版本（Windows、macOS 或 Linux）。

这里我选择 macOS 平台的安装包进行下载。

下载并安装完成后，打开终端（或命令提示符），输入以下命令来验证安装是否成功：

node -v

如果终端输出了类似 v24.13.0 的版本号，说明 Node.js 已经安装成功。

二、Qwen Code 安装与配置

环境准备好了，接下来就是安装我们今天的主角——Qwen Code。

1. 安装 Qwen Code

首先，在电脑上创建一个新的文件夹，例如命名为 Qwen。然后用 VS Code 打开这个文件夹。

接着，在 VS Code 内置的终端里，执行下面的安装命令：

npm install -g @qwen-code/qwen-code@latest

安装完成后，第一次运行 qwen 命令会引导我们进行 OAuth 授权登录，以获取免费的使用配额。

2. 登录授权

按照终端提示，打开给出的授权链接（或扫描二维码）。

如果你还没有 Qwen 账号，可以点击注册一个新账号，或者直接使用 Google、GitHub 账号快捷登录。这里我选择用 Google 账号登录。

在网页端登录并授权成功后，你会看到“认证成功”的提示。

此时返回 VS Code 的终端界面，会发现已经自动登录成功。

我们可以简单测试一下，问它“你是谁”，看看它的回答。

3. 基础设置（切换为中文界面）

默认界面是英文的，对于国内开发者来说，设置成中文会更友好。操作很简单，只需要两条命令。

首先，在 Qwen Code 的对话界面输入 / 然后按回车，会弹出一个命令菜单。在列表中找到并选择 language。

选择 language 后，会看到两个子选项：ui（设置界面语言）和 output（设置大模型输出语言）。我们先设置界面语言为中文。

输入命令 /language ui zh-CN 并回车，将 UI 界面语言设置为简体中文。

系统会提示 UI 语言已更改。

接着，设置大模型的输出语言也为中文。输入命令：

/language output 中文

设置完成后，系统会提示需要重启应用。我们关闭当前终端，在 VS Code 中新建一个终端，再次执行 qwen 命令。现在，整个交互界面就都变成中文了，用起来顺手多了。

再次输入 / 查看命令，也都是中文显示了。

三、实战开发：两个趣味学习工具

环境配置妥当，中文界面也设置好了，接下来就是实战环节。我将用 Qwen Code 开发两个小工具，正好可以给家里的小朋友用。

1. 汉字笔顺 AI 学习工具

第一个工具就是开头说的，帮助学习汉字笔顺的应用。我把需求整理成一个清晰的“角色设定”（Role）和“项目目标”（Project Goal），直接发给 Qwen Code。

向 Qwen Code 输入以下完整提示词：

# Role
你是一位精通原生 Web 开发 (HTML/CSS/JS) 的资深前端工程师。

# Project Goal
开发一个“汉字笔顺 AI 学习工具” (Chinese Character Stroke Learning App) 的单页面版本。该应用是一个纯静态的 HTML 文件，无需构建工具，直接在浏览器中运行。旨在帮助用户通过动画演示和交互式描红来学习汉字的正确书写顺序。

# Tech Stack
- **Structure**: HTML5 (Single File)
- **Styling**: Tailwind CSS (via CDN)
- **Icons**: FontAwesome (via CDN)
- **Logic**: Vanilla JavaScript (ES6+)
- **Core Libraries** (via CDN):
  1. `hanzi-writer`: 用于汉字笔顺动画渲染和描红测验。
  2. `pinyin-pro`: 用于汉字转拼音。

# Core Features Requirements
1. **输入与校验**:
  - 顶部提供输入框，允许输入单个汉字。
  - 校验逻辑：仅允许输入中文字符，输入回车或点击按钮触发加载。

2. **核心展示区 (Canvas)**:
  - **田字格背景**: 使用 SVG 绘制标准的红色田字格（实线外框，虚线十字），背景为白色。
  - **笔顺渲染**: 使用 `HanziWriter` 在田字格上方渲染汉字。
  - **拼音显示**: 在田字格上方显示该汉字的拼音（带声调），数据来源 `pinyin-pro`。

3. **交互模式**:
  - **演示模式 (Animate)**: 点击“演示”按钮，自动播放笔画书写动画。
  - **描红/测验模式 (Quiz)**: 点击“我要描红”按钮，进入交互模式。用户需用鼠标或触摸屏跟随指引写字。
    - 正确：显示绿色提示。
    - 错误：显示提示并给予反馈。

4. **辅助功能**:
  - **朗读**: 使用浏览器原生 `window.speechSynthesis` API 朗读当前汉字。
  - **设置**:
      - **轮廓开关**: 控制是否显示汉字底部的灰色轮廓。
      - **速度调节**: 下拉菜单调节书写动画速度 (0.5x, 1x, 2x)。

# Implementation Constraints (关键约束)
1. **Single File**: 所有代码（HTML, CSS, JS）必须包含在一个 `.html` 文件中。
2. **Responsive**: 必须适配移动端，田字格大小应根据屏幕宽度自适应 (max-width: 300px)。
3. **Error Handling**: 如果 `HanziWriter` 加载失败或输入非汉字，需要给出友好的 UI 提示。
4. **No Build Tools**: 不要使用 `import` 语法或 `require`，直接使用 `<script>` 标签和全局变量。

# UI Style
- 风格：干净、现代、教育类风格。
- 配色：主色调为红色 (Red-600) 搭配柔和的米色/石色背景 (Stone-50/100)。
- 字体：尝试使用衬线体 (Noto Serif SC) 显示大号汉字拼音，增加文化感。

# Deliverable
请生成一份完整的 `index.html` 代码，确保可以直接运行。

Qwen Code 理解需求后，会开始生成代码。在生成过程中，它可能会弹出确认框，询问是否允许写入文件，选择“是，总是允许”即可。

代码生成完毕后，我们在浏览器中打开这个 index.html 文件。初步测试时，我发现点击“演示”按钮，并没有出现预期的笔画动画。

别急，这是开发中常遇到的情况。打开浏览器的开发者工具（按 F12），切换到“控制台”（Console）标签页，果然看到了错误信息。我们把错误信息复制下来，反馈给 Qwen Code 去修复。

将以下错误描述发给 Qwen Code：

Uncaught (in promise) TypeError: hanziWriterInstance.destroy is not a function at loadCharacter (index.html:266:37)  控制台有报错，点击演示，界面上没有出现自动播放笔画书写动画

Qwen Code 分析错误后，会对代码进行修正。再次刷新浏览器页面，这次工具就完全正常了！可以输入汉字，点击“演示”观看自动笔顺动画，也可以进入“描红”模式互动练习，还能调节速度和开关轮廓，功能齐全。

最终的工具界面和功能展示如下：

2. 完美图形游戏

第一个工具成功交付，小侄子玩得很开心。他又提了个新需求：“舅舅，能不能做个画图形的游戏？我想比赛看谁画的圆最圆！”

没问题，再次祭出 Qwen Code。这次的需求是开发一个几何图形绘制评分游戏。

向 Qwen Code 输入第二个项目的提示词：

项目概述
开发一个名为「完美图形」的画图测试游戏。这是一款基于 HTML5 Canvas 的单页网页游戏，玩家在白板上绘制圆形、正方形、三角形等几何图形，系统根据绘制精度自动评分。

技术要求
技术栈为纯 HTML5、CSS3、JavaScript，无须使用任何框架或构建工具。所有代码保存在一个 HTML 文件中即可运行。

核心功能
1. 图形绘制系统
玩家通过鼠标或触摸操作进行绘制。按下鼠标时开始记录轨迹，移动过程中实时绘制路径，松开鼠标时完成绘制。绘制轨迹使用二次贝塞尔曲线平滑处理，画笔颜色为深灰色（#1F2937），线宽为 4 像素，圆头圆角。

2. 形状选择
游戏开始时提供三种图形按钮供玩家选择：圆形、正方形、三角形。玩家选择后点击「开始测试」进入绘制界面。顶部状态栏显示当前选择的图形类型。

3. 评分算法
每种图形有独立的评分逻辑：
圆形评分
圆度（权重 60%）：计算所有绘制点到形心的距离，求出平均半径，再计算标准差。标准差与平均半径的比值越小，圆度越高。公式：圆度得分 = max(0, 100 - (标准差 / 平均半径) × 100)
闭合度（权重 40%）：计算起点与终点的欧氏距离，与平均半径的比值越小，闭合度越高。公式：闭合度得分 = max(0, 100 - (起点终点距离 / 平均半径) × 100)
正方形评分
直线度（权重 50%）：使用 Ramer-Douglas-Peucker 算法简化点集，识别出四个角点。
计算所有绘制点到理想边的距离偏差，偏差越小直线度越高
闭合度（权重 50%）：同样计算起点终点距离与边长的比值
三角形评分
直线度（权重 50%）：将绘制点分为三段，分别评估每段与理想直线的偏差
闭合度（权重 50%）：计算起点终点距离与边长的比值

4. 视觉反馈
绘制完成后，系统在画布上叠加显示绿色虚线的标准形状：
颜色：rgba(16, 185, 129, 0.6)
线宽：3 像素
虚线模式：[8, 8]
形状中心显示一个小圆点作为参考

5. 结果展示
结果界面以半透明白色遮罩覆盖整个屏幕。显示内容依次为：
综合得分（大号数字动画递增）
评价文字（根据得分给出不同评价）
两项统计指标（根据图形类型显示不同标签）
玩家可以选择：「再来一次」重新绘制当前图形「换图形」返回形状选择界面

同样地，Qwen Code 会根据这份详细的需求文档生成完整的游戏代码。生成完毕后，直接在浏览器中打开 perfect-shape.html（或类似名称的文件）。

游戏运行流畅，可以选择图形、自由绘制，并在绘制完成后得到系统的精度评分，趣味性和挑战性兼具。

结语

从萌生想法，到借助 Qwen Code 这样的 AI 编程助手快速实现两个完整的、可直接使用的网页工具，整个过程非常高效。这不仅仅是完成了一个家庭小任务，更是一次生动的体验：展示了如何将具体的需求转化为清晰的指令，并利用现代 AI 工具加速 原生Web开发 的过程。

对于开发者而言，Qwen Code 就像一个不知疲倦的资深编程伙伴，能帮你快速搭建项目骨架、实现复杂逻辑、甚至调试错误。它尤其适合完成一些定义明确、技术栈常规的中小型项目，可以极大提升开发效率，让你更专注于核心创意和架构设计。