10 分钟复现网站
零基础也能完成的 AI 编程练习：10 分钟，一个能打开的补光灯网页。
如果你从来没写过代码，但想知道 AI 编程到底是什么感觉，从这个开始。
目标是做一个网页：用屏幕亮光给视频通话补光，中间显示摄像头画面，旁边可以切颜色。不复杂，但能让你完整跑一遍「把一句话变成可运行网页」的流程。
你会做出什么
一个在浏览器里打开的补光灯网页：
- 背景颜色可以切换
- 中间显示摄像头预览
- 适配手机和电脑
- 代码全在一个
index.html文件里
重点不是做多复杂，是让你感受到：AI 能帮你把一个很小的想法，快速变成能看能用的东西。
开始之前
你需要准备：
- 一台电脑
- 一个浏览器
- 一个 AI 编程工具，比如 Claude Code、Codex、Cursor 或你已经在用的
如果环境还没装好，先看：
第一步：生成基础版本
把这段需求发给 AI：
帮我写一个给视频通话用的补光灯网站。
要求：
1. 使用一个 HTML 文件完成，不要依赖后端
2. 背景是可调整的颜色，用屏幕光给脸部补光
3. 页面中间显示摄像头预览
4. 提供几个适合补光的颜色选项
5. 界面简单、好看，适合新手直接打开使用AI 生成代码后，新建一个 index.html 文件，把代码粘进去。双击打开，或拖进浏览器即可。
第二步：让它更像一个产品
基础版跑起来之后，再让 AI 做一轮产品化优化：
请继续优化这个补光灯网页：
1. 增加亮度、饱和度、色相调节
2. 增加简单的新手说明
3. 优化手机端体验
4. 让按钮和布局更精致一点
5. 保持代码仍然只在一个 HTML 文件里这一步不是炫技。是学会把「能运行」推进到「别人也愿意用」。
第三步：检查真实体验
打开网页后，重点看这几件事：
- 摄像头权限能不能正常开启
- 背景颜色调节是否明显
- 手机和电脑上是否都能看清按钮
- 第一次打开的人是否知道怎么用
有哪里不顺，直接把问题描述给 AI，让它继续改。
比如：
现在手机上按钮太挤了，请帮我优化移动端布局。或者：
摄像头权限失败时没有提示，请加一个新手能看懂的错误提示。这个练习真正想教你的
项目本身很小，但它能帮你建立 3 个感觉：
- 先做出来比先想完更重要。 跑起来之后，你才知道哪里需要改。
- AI 编程最怕需求含糊。 你说得越具体，结果越接近可用。
- MVP 不等于粗糙。 功能可以少，但体验要尽量完整。
你不需要一开始就做个「伟大的产品」。先做一个能打开的小网页，就是在练从想法到结果的肌肉。
做完之后
你可以继续做 3 个小改动：
- 加一个「一键全屏」按钮
- 加一个「复制分享链接」的按钮
- 把页面部署到 Vercel、Cloudflare Pages 或其他静态托管平台
做完这一步之后，建议直接去看 01MVP 系列总览，再挑下一个更完整的小项目继续练手。