用 AI 做一个
字数统计网页
输入文字，网页实时显示字符数。本教程会带你安装工具、让 AI 创建网页，再添加清空按钮，检查并保存文件。
准备一台 Windows 或 Mac 电脑，以及可用的 DeepSeek API 密钥。密钥用于调用 AI，可能产生费用；没有密钥时先向负责人确认。手机可以阅读，实际练习需要电脑。
开始阅读：安装 VS Code
阅读无需登录。可以按顺序阅读，也可以直接选择需要的章节。
试用字数统计示例
修改下面的文字，观察数字变化。练习会制作同样的统计功能。
个字符（含标点，不含空白）
此示例只在浏览器中统计文字，不发送给 AI。
教程目录
所有练习都在 word-counter 文件夹中进行。已经安装的工具可以跳过，但先按对应页面检查结果，再继续后面的操作。
- 安装 VS Code能打开 VS Code，看到欢迎页或编辑窗口。
- 认识 VS Code 界面知道文件列表和编辑区的位置，也知道 AI 面板需要安装插件。
- 打开项目文件夹左侧显示 word-counter，且没有误打开已有项目。
- 安装 Claude Code 插件已安装 Anthropic 发布的扩展，并能打开 Claude Code 面板。
- 连接 DeepSeekAPI 密钥与请求地址（Base URL）已核对，DeepSeek 显示“使用中”，插件同步已开启。
- 测试连接和文件夹收到回复，且报告的文件夹与左侧 word-counter 一致。
- 创建并预览 README项目中有 README.md，预览里的统计规则正确。
- 生成字数统计网页index.html 能打开，空输入、中文、混合文字和单个表情的计数正确。
- 添加清空按钮清空后数字为 0，光标回到输入框，原有统计仍正确。
- 保存并重新打开网页关闭后能找到项目文件，重新打开网页并完成统计和清空操作。