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

我使用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/

相关阅读

10 分钟魔法：用 Claude Code 做个单页小游戏

让Claude Code"听话"的秘密，10分钟教你打造自动化工作流！

Claude Code：程序员的新宠，让你的代码效率飞起来！

AI 编程助手 Claude Code 高效使用攻略

用 Cursor 优化代码，这些干货你必须知道