前言：差点让我心跳骤停的50块钱
写这期教程的原因很简单：有小伙伴花了50块钱找人做一个简单的抽奖网页。
当我听到这个消息的时候，差点心跳骤停。
不是说50块钱多贵，而是这个东西用免费的AI，5分钟就能做出来啊！
真的，如果你有这种需求，哪怕直接赞赏我50块钱，让我手把手教你，都比找那些收费的强。至少我这里的教程不要钱，而且我会把每一步都说清楚。
所以这期是临时插播的，专门教大家：怎么用免费的AI，做一个简单但实用的HTML网页。
重要提醒：先把免费网页版用熟
在进入正题之前，我想强调一点：
现在的AI网页版功能已经非常强大了。 不需要懂编程，不需要安装软件，打开浏览器就能用。
AI网页版可以做什么？
- 和你对话，回答问题
- 识别图片，分析内容
- 写代码，做网页
- 做PPT、写报告
- 翻译、总结文档
- 还有很多很多……
我的建议是：新手应该先把免费的网页版AI用熟练，再考虑进阶到API或其他工具。
为什么？因为网页版：
- 完全免费（或者有充足的免费额度）
- 操作简单，不需要学习成本
- 功能已经足够强大
- 出了问题可以直接问AI怎么解决
好了，废话不多说，开始今天的正题：用AI做一个抽奖大转盘网页。
用AI Studio做一个HTML网页
第一步：进入Google AI Studio
我们用的是Google AI Studio，前面教程介绍过，这是谷歌官方的免费AI平台。
为什么选它？
- 完全免费
- Gemini 3 Pro性能强大
- 适合做网页这种复杂任务
操作步骤：
- 打开 https://aistudio.google.com
- 用你的Google账号登录（需要梯子）
- 进入主界面
第二步：选择Playground和模型
登录后，你会看到AI Studio的主界面。
操作步骤：
- 点击左侧菜单的"Playground"
- 在右上角的模型选择器中，选择Gemini 3 Pro
- 不要选Flash，Pro的能力更强
- 特别是对于写代码这种复杂任务
- 确认左侧是聊天界面，下方有输入框
好了，现在你已经准备好和AI对话了。
第三步：输入提示词，让AI生成网页
这一步是关键：你要清楚地告诉AI你想要什么。
越详细越好！不要只说"帮我做个抽奖网页"，而是要说清楚：
- 长什么样
- 有什么功能
- 怎么用
- 什么风格
完整的提示词示例
复制下面这段话，粘贴到AI Studio的输入框：
请帮我生成一个抽奖大转盘网页
如果没有指定奖品，使用默认奖品：特等奖、一等奖、二等奖、三等奖、幸运奖、谢谢参与
功能要求：
- 精美的转盘设计，支持6-8个扇形区域
- 中间有"开始抽奖"按钮
- 点击按钮后转盘开始旋转
- 旋转有加速和减速的效果，更真实
- 停止后弹窗显示中奖结果
- 点击弹窗可以关闭，重新抽奖
设计要求：
- 喜庆大气的风格（红色、金色为主）
- 转盘边框要有质感
- 每个扇形区域颜色交替
- 有指针指向当前位置
- 适配手机和电脑
完成后请说明：
1. 如何打开和使用
2. 如何修改奖品名称
3. 如何调整中奖概率
使用示例奖品： iPhone16、AirPods、100元红包、50元红包、谢谢参与
操作步骤：
- 把上面的提示词复制粘贴到输入框
- 点击"Run"按钮或按回车键
- 等待AI生成（通常10-30秒）
第四步：AI会返回完整的HTML代码
AI生成完成后，你会看到一大段代码。
AI返回的内容通常包括：
- HTML代码：一个完整的网页文件
- 使用说明：怎么打开、怎么修改
- 自定义指南：怎么改奖品、怎么调概率
代码看起来是这样的：
|
|
不要被吓到！ 现在的网页都能直接运行了！你只要根据截图点击即可
第五步：修改网页内容（改奖品、改概率）
AI生成的网页通常已经很完善了，但你可能想：
- 改奖品名称
- 调整中奖概率
- 换个颜色
别担心，不需要你懂代码。 继续问AI就行了！
继续对话，让AI帮你修改
操作步骤：
- 不要关闭AI Studio的聊天窗口
- AI记得你刚才的对话
- 可以直接在下面继续提问
- 输入修改需求
示例一：改奖品名称
在输入框输入：
在这个网页上给我增加一个设置界面，设置不同奖的概率和具体奖品
不断迭代，直到满意为止
这就是用AI做东西的核心流程：
- 说清楚你要什么
- AI生成初版
- 试用，发现问题
- 告诉AI问题，让它改
- 重复3-4步，直到完美
关键点：
- 不要怕麻烦，多试几次
- 每次只改一个地方，容易控制
- 如果AI改错了，就说"不对，恢复上一版"
第六步：下载最终网页
现在你有了一个完美的抽奖网页，怎么下载呢？
只要点击下载按钮，基本下载到你的本地，打开即可使用！
HTML网页能做什么？10个实用小工具推荐
看到这里，你可能会想：除了抽奖，我还能用AI做什么网页？
答案是：几乎任何简单的小工具！
下面给你10个实用的例子，你可以直接拿去问AI：
1. 在线翻译工具
提示词：
做一个在线翻译网页，支持中英文互译，界面简洁
2. 图片文字识别（OCR）
提示词：
做一个网页，可以上传图片，识别图片中的文字并复制
3. 待办事项清单
提示词：
做一个待办清单网页，可以添加、删除、标记完成任务，数据保存在浏览器
4. 倒计时/正计时器
提示词：
做一个多功能计时器网页：倒计时、番茄钟、秒表功能
5. 随机密码生成器
提示词：
做一个密码生成器，可以设置长度和复杂度，一键复制
6. BMI计算器
提示词：
做一个BMI健康计算器，输入身高体重，显示健康建议
7. 二维码生成器
提示词：
做一个二维码生成网页，输入文字或网址，生成二维码并可下载
8. 颜色选择器
提示词：
做一个配色工具，可以选择颜色，显示RGB/HEX值，提供配色建议
9. Markdown编辑器
提示词：
做一个简单的Markdown编辑器，左边输入，右边实时预览
10. 记账本
提示词：
做一个简易记账网页，可以记录收入支出，显示统计图表
这些工具的共同点：
- 都是单个HTML文件
- 不需要服务器
- 打开浏览器就能用
- 完全免费
常见问题解答
Q1：我完全不懂代码，真的能做吗？
A： 真的可以！你需要会的只有：
- 复制粘贴
- 保存文件
- 用浏览器打开文件
就这三步，小学生都会。
Q2：AI生成的代码有时候不完美怎么办？
A： 很正常！继续和AI对话：
- “这里有个bug，点击按钮没反应”
- “这个颜色太丑了，换个好看的”
- “能不能加个音效？”
AI会根据你的反馈不断改进。
Q3：用AI做的网页能商用吗？
A： 技术上可以，但要注意：
- AI生成的代码通常没有版权限制
- 但如果是给客户做项目，建议测试充分
- 复杂的商业项目，还是建议找专业开发
Q4：为什么我的HTML文件打不开？
A： 常见原因：
- 文件后缀不对：确保是
.html，不是.html.txt - 代码不完整：确保复制了全部代码
- 浏览器问题：换个浏览器试试
Q5：手机上能用吗？
A： 可以！有两种方法：
- 把HTML文件传到手机，用手机浏览器打开
- 上传到Netlify等平台，用网址访问（推荐）
Q6：我想改代码但不懂怎么改？
A： 不要自己改！问AI：
- “我想把背景色改成蓝色”
- “我想把标题字体变大”
- “我想加个背景音乐”
让AI帮你改，然后复制新代码。
总结
今天你学会了：
- 用Google AI Studio生成HTML网页
- 清楚地写提示词，告诉AI你的需求
- 保存HTML文件并在浏览器中打开
- 通过对话不断改进网页
- 分享或部署你的网页
核心思想：
- 不需要懂编程
- 不需要花钱
- 只需要会和AI沟通
- 5分钟做出实用工具
下次如果有人找你做简单网页，你就可以：
- 用AI 5分钟搞定
- 收那个50块钱（开玩笑）
- 或者教他们自己做
真的，别再花冤枉钱了！
下期预告
下一期回归正篇：如何在实用工具中使用API
包括：
- 沉浸式翻译：边看外文网页边翻译
- CherryStudio：强大的AI聚合客户端
- 闪电说：语音实时转文字+AI总结
如果觉得有帮助，记得关注这个系列！
也欢迎在评论区分享：你还想用AI做什么小工具？ 我会在后续教程中教大家怎么做！