10 分钟入门 AI 编程：复现爆火的猫咪补光灯网站

💡 快速入门提示: 这个 10 分钟的 AI 编程入门教程是设计给完全没有编程经验的新手，帮助你体验 AI 如何将想法快速变成现实产品。

为什么选这个项目作为入门？

2024 年初，一款简单的"猫咪补光灯"网页应用在抖音爆火，获得了数十万用户。这个案例完美展示了 MVP(最小可行产品)的精髓：

今天，我们将用 AI 在 10 分钟内复现这个爆款产品！

完成本教程后，你将：

任何一种 AI 编程工具都可以完成，建议选择：

如果你完全没有编程经验，不必担心，我们会一步步引导你。

向 AI 提出你的需求：

帮我写一个给女生用的补光灯网站html，原理是利用屏幕的反光来给女生脸部润色，
背景是可调整的颜色，中间是一个摄像头获取的小相框

AI 会生成基础代码。接下来，创建一个新文件index.html，将所有代码粘贴进去，然后在浏览器中打开。

向 AI 提出优化建议：

给出几个适合女生用的颜色选项
可以调整背景颜色的亮度、饱和度、色相等

将 AI 生成的新代码替换到index.html中，刷新浏览器查看效果。

让 AI 从产品角度进一步完善：

假设你是一个资深的互联网产品经理，记得你的目标是开发出一款女生喜爱的补光灯网站，请优化这个应用：
1. 改进UI设计，使其更具吸引力
2. 添加简单说明，帮助用户快速上手
3. 优化移动端体验
4. 添加社交分享功能

更新index.html并检查最终效果。

你可以访问我们的示例网站查看最终效果。

对于基于 Claude 或 GPT-4 的 AI 编程工具，你可以一次性提出多个需求，这会显著缩短开发时间：

帮我写一个给女生用的补光灯网站，原理是利用屏幕的反光来给女生脸部润色：
1. 背景是可调整的颜色，给出几个适合女生用的颜色选项
2. 中间是一个摄像头获取的小相框
3. 可以调整背景颜色的亮度、饱和度、色相等
4. 界面要简洁美观，符合年轻女性审美
5. 添加简单使用说明

如果你使用台式电脑无法访问摄像头，可以先创建简单网站测试 AI 编程能力：

请帮我生成一个简洁的个人作品集网站（使用html），包含以下内容：
1. 简约现代的导航栏
2. 个人简介部分
3. 项目展示区（3-4个项目）
4. 技能展示
5. 联系方式
设计风格简约现代，适合展示创意作品。

完成这个 10 分钟项目后，思考以下问题：