教程课程家长指南
5 步带孩子用 AI 构建第一个网页应用
EP朴光世 · AI 教育总监
·2026-04-18·阅读时长 5 分钟"我想让孩子学编程,可是不知道从哪里、怎么开始。"这是许多家长共同的疑问。本文介绍如何利用 Claude Code 等 AI 工具,让孩子 亲手构建并部署第一个网页应用 的 5 步流程。平均总耗时约 60 ~ 90 分钟。
"传统编程教育以语法记忆为中心,而 AI 编程让孩子能够立即实现自己的想法,投入程度完全不同。" — 朴光世,SpyBuilders 创始人
01. 环境设置 — 10 分钟搞定
安装 Claude Code 并创建孩子的学习账号。完成家长同意流程。平均耗时 10 分钟。
- 准备 Mac 或 Windows 电脑
- 安装 Claude Code CLI (一行命令)
- 家长邮箱验证
02. 任务选择 — 按孩子水平
选择适合孩子水平的 SPY 任务。初级是"自我介绍网页",中级是"问答应用",高级是"家庭日程共享应用" — 都是 实际有用的主题。
03. 与 AI 编程 — 用自然语言指挥
用自然语言向 Claude Code 下达指令。比如孩子说"做一个蓝色背景、名字很大的页面",AI 就会生成真实的 HTML/CSS。
$ claude "做一个我名字很大的页面"
思考中...
✓ 生成 index.html 完成
✓ 生成 style.css 完成
🎉 请在浏览器中打开查看!
04. 测试 & 修改 — 眼见为实,口头修改
实际打开做好的应用,不满意的地方再用语言告诉 AI 修改。"把背景换成黄色"这样的说法就可以。
05. 部署 & 分享 — 把真实 URL 发给朋友
用 Vercel 一行命令部署到真实网络。孩子把 真实 URL 分享给朋友和家人的那一刻,是 SpyBuilders 全程中 最感动的瞬间。
常见问题
8 岁 (小学二年级) 以上即可。能够用英语打字的孩子就可以使用 Claude Code 实操。2026 年 SpyBuilders 学生平均年龄为 10~13 岁。
下一步
完成第一个网页应用后,可以进入 SpyBuilders 课程 的中级阶段 (React + API 集成)。查看学生真实项目案例,请访问 博客列表。
EP
朴光世
AI 教育总监 · 运营 SpyBuilders。曾任 Growth/Product 负责人。