

> 本文首发于腾讯云社区 · 实战教程类

## 目录

1. 为什么写这篇：一个真实痛点
2. 我们要做什么：项目目标与场景
3. 环境准备（3 分钟）
4. 实战六步：和 CodeBuddy 结对编程
   - 4.1 用一句话描述需求，生成项目骨架
   - 4.2 一次生成单文件 HTML
   - 4.3 本地预览与断点调试
   - 4.4 迭代功能：积分与闯关
   - 4.5 移动端适配与"加到桌面"
   - 4.6 用 localStorage 做数据持久化
5. 踩坑记录与解决方案（5 个真实坑）
6. 高效使用 / 省积分 6 招
7. 总结与延伸

---

### 一、为什么写这篇：一个真实痛点

我是一名基层法院的书记员，平时写文书、整卷宗，coding 水平停留在"能看懂 Python 脚本"。但作为家长，我想给 4 岁的宝宝做一个唐诗启蒙小工具——市面上的 App 要么广告多，要么不符合我对"大按钮、鲜艳、无干扰"的要求。

**传统做法**：我得学 HTML / CSS / JS，至少两周。

**有了 CodeBuddy**：我只在聊天框里打了几句话，半小时就拿到了能用的成品。这篇不是软文，是我边做边记的真实流水账，重点放在"哪些地方容易翻车"和"怎么少花积分把事办成"。

---

### 二、我们要做什么：项目目标与场景

目标很明确，这其实是列给 CodeBuddy 看的"需求清单"：

- 单文件 HTML，双击即可打开，无需后端、无需构建；
- 唐诗卡片：显示诗句、拼音、释义，点击翻转；
- 打卡日历：每天背完一首就打卡，数据存 localStorage；
- 闯关积分：连续打卡奖励星星，满 7 天解锁"小诗人"勋章；
- 移动端适配，字体大、按钮 ≥50px，配色鲜艳；
- 图标用内联 SVG（不依赖外部图片，离线可用）。

这个场景同时属于**"教育 + 开发"双高价值领域**，也是社区编辑最喜欢推的"能直接看出产品价值"的类型。本文的同款成品已放在文末，可直接 clone 改成你自己的版本。

---

### 三、环境准备（3 分钟）

1. 安装 CodeBuddy（VS Code / JetBrains 插件或独立客户端均可）；
2. 新建一个空文件夹，用 CodeBuddy 打开；
3. 确认能正常唤起聊天（侧边栏入口或快捷键 `Ctrl/Cmd + I`）。

> 不需要 Node、不需要任何框架。单文件 HTML 的最大好处就是**零部署、零依赖**。

📸 **截图位 1**：CodeBuddy 打开空项目后的界面，侧边栏聊天入口高亮。建议截取包含项目文件树的区域，体现"从零开始"。

---

### 四、实战六步：和 CodeBuddy 结对编程

#### 4.1 用一句话描述需求，生成项目骨架

我在聊天框输入（这是喂给 CodeBuddy 的 prompt，可直接复制）：

> "帮我用单个 HTML 文件做一个宝宝唐诗启蒙打卡页：含 8 首唐诗卡片（诗句/拼音/释义，点击翻转），底部本月打卡日历，连续打卡得星星积分、满 7 天解锁勋章；移动端大字大按钮、内联 SVG 图标，数据存 localStorage，并提供 JSON 导出备份按钮。"

CodeBuddy 先给了一个文件结构和实现思路，再生成代码。这一步的关键是**一次把约束写全**，避免它自作主张加框架。

📸 **截图位 2**：输入需求后 CodeBuddy 返回的实现思路 + 文件树。重点截"它对需求的拆解"，这是体现 AI 理解能力的好画面。

#### 4.2 一次生成单文件 HTML

让 CodeBuddy "直接生成完整的 `index.html`"。它产出约 400 行代码，HTML + CSS + JS 全在一个文件里。我特意强调"单文件"，否则它可能拆成多文件导致我本地直接打不开。

📸 **截图位 3**：CodeBuddy 生成 `index.html` 的进度与代码预览。可截取代码高亮 + 行数，体现一次性产出。

#### 4.3 本地预览与断点调试

右键 `index.html` → 用浏览器打开。第一版发现"翻转动画卡顿、背面的字是镜像的"。我**没有自己改**，而是把现象截图回贴给 CodeBuddy："翻转时背面文字左右颠倒"。

它定位到是 CSS `transform` 与 `backface-visibility` 缺失，补了两行样式就修好了。

> **调试技巧**：给它"现象 + 截图"，比"帮我优化一下"有效十倍。截图顶百字，还能省 prompt 积分。

📸 **截图位 4**：浏览器中卡片翻转效果 + 控制台无报错的状态。可同时展示正面诗句与背面释义。

#### 4.4 迭代功能：积分与闯关

第二轮我加需求："连续打卡 7 天解锁'小诗人'勋章，用 SVG 画一个奖杯。" CodeBuddy 在原有 localStorage 逻辑上扩展了 streak（连续天数）计数。

⚠️ **注意**：这里要明确要求它"在现有文件上改"，而不是重写——否则会丢掉你之前的手工微调。

#### 4.5 移动端适配与"加到桌面"

要求"按钮 ≥50px、正文字体 ≥18px、标题 ≥22px"。CodeBuddy 加了 `viewport` meta 和媒体查询。手机上用 Safari / Chrome 的 **"分享 → 添加到主屏幕"**，就能像 App 一样从桌面打开，无需上架应用商店。

📸 **截图位 5**：手机浏览器"添加到主屏幕"后的桌面图标 + 打开后的效果。这是最能体现"做出来的东西真能用"的一张图。

#### 4.6 用 localStorage 做数据持久化

最终确认：刷新页面后打卡记录还在。CodeBuddy 生成的存储键是 `tangshi_checkin`，我让它额外加了一段"导出 JSON 备份"按钮，防止换手机丢数据（见文末成品）。

---

### 五、踩坑记录与解决方案（5 个真实坑）

**坑 1：只说"做个唐诗 App"，它给我生成了需要 `npm` 跑起来的多文件项目。**
解决：prompt 里强制写"单文件 HTML，无构建步骤，双击打开即用"。

**坑 2：拼音标注混乱，多音字读错（如"斜"在《风》里读 xié）。**
解决：在需求里附上"已校对拼音清单"，让 CodeBuddy 严格按清单填，不要自己猜音。

**坑 3：翻转卡片时背面文字镜像。**
解决：CSS 加 `backface-visibility: hidden`，并给正反面分别设置 `rotateY(0)` 与 `rotateY(180deg)`。

**坑 4：`localStorage` 在 `file://` 协议下部分浏览器被限制。**
解决：补一个"导出 / 导入 JSON"做备份；并在提示里建议读者用本地静态服务器（如 `python -m http.server`）打开以规避限制。

**坑 5：积分逻辑在跨午夜打卡时重复计数。**
解决：以"日期字符串"为 key 存打卡集合（`Set`），天然去重，比"计数器 +1"稳得多。

---

### 六、高效使用 / 省积分 6 招

1. **一次给足上下文**：把需求、约束、示例一次写清，少来回；每一轮对话都吃 token。
2. **用"在现有文件改"而非"重写"**：避免上下文爆炸和重复生成，也保住手工微调。
3. **截图代替长篇描述**：调试时一张图顶百字，省下的 prompt 都是积分。
4. **拆任务、批处理**：先骨架后细节，每轮只解决一类问题，别让单轮 prompt 过长。
5. **复用对话资产**：做"宋词版"时直接贴"上次的成品 + 差异需求"，不要从零描述。
6. **本地验证优先**：能自己 F12 看报错就别问 AI，把 AI 用在真正需要推理的地方。

---

### 七、总结与延伸

从一句需求到可上手的成品，CodeBuddy 把"非程序员做小工具"的门槛压到了半小时级。对开发者，它是结对程序员；对教师 / 家长，它是把想法落地的翻译器。

**同款成品**：本文的 `index.html` 已附在文章资源区（单文件，含 8 首唐诗、打卡日历、星星积分、JSON 备份）。欢迎大家 clone 后改成自己的版本——比如换成宋词、换成单词卡、换成健身打卡。

**下一步可以玩**：接入腾讯云对象存储 COS 做多端同步、用云函数写个"每日推送一句诗"的定时任务。如果你也想看这期进阶实战，评论区告诉我。

---

*作者：一名爱折腾的基层法院书记员 · 用 CodeBuddy 把带娃也变成工程问题*


我是一名基层法院的书记员，平时写文书、整卷宗，coding 水平停留在"能看懂 Python 脚本"。但作为家长，我想给 4 岁的宝宝做一个唐诗启蒙小工具——市面上的 App 要么广告多，要么不符合我对"大按钮、鲜艳、无干扰"的要求。

用 CodeBuddy 30 分钟从零做一个「宝宝唐诗启蒙打卡页」：完整实战 + 避坑指南

本文以给 4 岁宝宝做唐诗启蒙小工具这一真实需求为场景，完整记录我如何用 CodeBuddy（腾讯云 AI 编程助手）从一句自然语言需求，到交付一个可手机添加到桌面的单文件 Web 应用的全过程。文中包含 6 个可复现步骤、5 个关键截图位、5 个真实踩坑与解决方案，以及 6 条高效使用 / 省积分心得。无论你是开发者、教师还是家长，都能照着做出自己的第一个 AI 结对编程作

编程语言

开发工具

前端

从一句需求到可用成品，CodeBuddy让非程序员半小时完成唐诗启蒙打卡页。本文实战六步，涵盖单文件HTML生成、翻转动画调试、积分闯关迭代及移动端适配，并详解5个踩坑解决方案。附高效省积分6招，适合教师家长快速打造教育工具。

对象存储

服务器

云函数

CodeBuddy

Python

JSON

对象存储COS新用户低至1元！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用 CodeBuddy 30 分钟从零做一个「宝宝唐诗启蒙打卡页」：完整实战 + 避坑指南-腾讯云开发者社区-腾讯云

用 CodeBuddy 30 分钟从零做一个「宝宝唐诗启蒙打卡页」：完整实战 + 避坑指南

用 CodeBuddy 30 分钟从零做一个「宝宝唐诗启蒙打卡页」：完整实战 + 避坑指南

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐