01MVP 系列入门实战
10 分钟入门 AI 编程：复现猫咪补光灯网站
一个适合零基础新手的 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 系列总览，再挑下一个更完整的小项目继续练手。