如何与AI大模型协作创建抽奖转盘：从想法到完整网页的实战指南

原创于 2025-08-10 08:58:09 发布 · 276 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

AI编程专栏收录该内容

20 篇文章

订阅专栏

我使用AI制作了一个单页版抽奖转盘页，复盘总结了提示词技巧，欢迎交流。

最终效果可以访问下面网页

https://wxaiway.com/games/lottery-wheel/

首先考虑清楚制作网站的目标，比如抽奖页需要具有以下特性：

可自定义奖品项目
支持两种抽奖模式（保留/移除）
酷炫的视觉效果和动画
全屏功能和键盘控制
本地存储配置
响应式设计

一、主提示词

首先编写有效的初始提示词，核心原则：具体、清晰、完整。

错误示例：

帮我做一个抽奖转盘

正确示例：

创建一个抽奖转盘网页，可以定义奖品项目，点击开始，点击结束，展示获得奖品。可以定义模式，每次抽完就去掉，还是奖品列表都一样。要比较酷炫的网页。

或者类似下面完整版的提示词

请创建一个完整的抽奖转盘网页系统，包含以下详细功能要求：## 核心功能1. **转盘抽奖机制** - 可视化圆形转盘，支持动态旋转动画 - 指针指示系统，精确指向获奖区域 - 平滑的开始/停止控制 - 随机性算法确保公平抽奖2. **奖品管理系统** - 动态添加/删除奖品功能 - 奖品名称自定义（支持中文） - 可视化奖品列表展示 - 奖品数量动态调整转盘分割3. **抽奖模式切换** - 保留模式：获奖后奖品保留在列表中 - 移除模式：获奖后从奖品列表中移除该奖品 - 模式切换界面友好提示## 技术实现要求1. **精确渲染技术** - 使用SVG技术实现转盘，确保角度计算精确 - 数学算法计算扇形区域和文字位置 - 指针与转盘区域完美对应，无偏差2. **视觉设计要求** - 现代化渐变背景设计 - 转盘采用多彩扇形分割，每个奖品区域不同颜色 - 金色边框和发光效果 - 中心按钮具有悬停和点击动画效果 - 获奖结果展示区域突出醒目3. **动画效果** - 转盘旋转动画流畅自然 - 停止时具有缓动效果 - 抽奖进行中的动态文字效果（颜色变化、弹跳、旋转元素） - 按钮状态变化动画## 用户交互功能1. **操作控制** - 中心按钮点击开始/停止 - 空格键快捷操作（开始/停止） - 全屏模式切换功能 - 配置弹窗系统2. **界面布局** - 转盘为页面主体，占据中心位置 - 获奖结果展示区域位于转盘上方 - 右上角小图标：配置按钮、全屏按钮 - 底部键盘提示信息3. **配置管理** - 弹窗式配置界面 - 奖品添加输入框，支持回车快速添加 - 抽奖模式下拉选择 - 重置为默认奖品功能 - 配置界面打开时禁用键盘快捷键## 数据持久化1. **本地存储功能** - 自动保存奖品列表配置 - 保存抽奖模式设置 - 页面刷新后自动恢复配置 - 提供清除配置的选项2. **默认数据** - 初始默认奖品：一等奖、二等奖、三等奖、参与奖、再来一次、谢谢参与 - 默认保留模式## 响应式设计1. **桌面端优化** - 转盘尺寸600px，视觉效果突出 - 完整功能展示2. **移动端适配** - 转盘尺寸调整为400px - 按钮和文字大小适配 - 触摸操作优化## 代码结构要求1. **单文件实现** - HTML + CSS + JavaScript一体化 - 无外部依赖，可直接运行2. **代码组织** - 面向对象的JavaScript类结构 - 清晰的方法分离：渲染、事件绑定、状态管理 - 完善的错误处理## 特殊要求1. **数学精度** - 转盘角度计算必须精确无误 - 指针指向与实际获奖结果完全一致 - 随机算法确保公平性2. **用户体验** - 操作流程直观简单 - 视觉反馈及时明确 - 错误提示友好 - 性能流畅无卡顿3. **兼容性** - 现代浏览器全面支持 - 移动设备友好 - 全屏API正确实现请一次性实现完整的功能，确保所有细节都考虑到位，代码可以直接使用。

二、问题修复类提示词

AI一般很快就能创建了基础的HTML结构抽奖页，但很快暴露出问题。测试就会发现一些功能问题，这就需要我们精确描述问题并让AI解决。

发现问题：[具体描述问题现象]期望效果：[描述期望的正确行为]请分析问题原因并提供精确的修复方案，只修改必要的代码部分。

三、功能增强类提示词

如果需要添加新功能，可以参考下面格式去提需求：

在现有抽奖系统基础上，添加以下功能：[具体功能描述]要求：1.保持现有功能完整性2.新功能与原有界面风格一致3.不影响现有用户体验4.代码结构保持清晰

四、视觉优化类提示词

对于页面布局需求的话，描述得越清楚，效果会更好。

优化转盘视觉效果：1.[具体视觉要求，如颜色、动画、布局等]2.保持功能不变，仅优化视觉表现3.确保在不同设备上都有良好效果

五、性能优化类提示词

如果觉得网站打开有点慢，可以让AI优化性能：

优化系统性能：1.分析当前代码中可能的性能瓶颈2.优化动画渲染效率3.减少不必要的DOM操作4.保持功能完整的前提下提升响应速度

六、成功率提升技巧

还有与AI编码过程需要注意的事项：

1、明确告知输出格式：要求"请输出完整的HTML文件代码"

2、强调一次性完成：避免分多次实现导致的功能缺失

3、提供测试指导：要求AI说明如何测试各项功能

4、保存中间版本：每次重大修改前备份当前版本

最后可以自己试试让AI制作网站：

https://wxaiway.com/games/lottery-wheel/