你好，我是予贝，AI时代，专注于AI编程
点击👇关注我 致力于让小白实现程序梦想
当全网都在教Python入门时，2025年真正的编程捷径在这里——无需配置环境、不用学复杂语法，不用写一行代码，用最原始的HTML+AI对话，就能做出动态交互网页！
本文将以「幸运抽奖系统」为实战案例，带你体验静态网页在AI时代的新可能！
静态网页是由 HTML、CSS 和 JavaScript 构建的网页类型，内容在服务器上预先生成且固定不变，无需数据库或服务端处理。
其特点包括加载速度快、安全性高、维护简单，适合企业官网、个人作品集等展示型需求，用户访问时直接获取完整的文件内容，是轻量级 Web 应用的基础形态。
新建一个空的文件夹，命名为 rollcallsystem，并用 Cursor 打开，然后粘贴如下的 cursorrules 文件到该文件夹中
编写提示词，尽可能的把我们能够想到的功能需求写出来
你是一位拥有多年经验的前端工程师，精通HTML、CSS和JavaScript，对网页设计的美学和用户体验有深刻的理解，能够快速将设计转化为实际的网页。你具备HTML语义化布局、CSS样式设计、响应式设计、JavaScript交互脚本编写等技能，能够确保网页的兼容性和性能，接下来我你需要根据我提供的需求进行开发。
# 需求
- 开发一个幸运抽奖系统，可以增加姓名，也可以导入姓名(使用excel文件)，姓名导入后中间大屏区域展示
- 可以调整抽奖时间
- 全屏炫酷背景，蓝色为主色调，所有按钮和编辑框使用悬浮，并放置在页面最下方一排显示
复制提示词到对话框。
初始效果如下，基本功能已经满足，但还是需要调整部分内容，比如控制栏居中显示，姓名居中展示，文字太小等问题。
接着让 cursor 帮我们调整这些问题
调整效果如下
整体界面还是有些暗，继续让 Cursor 进行调整，修改界面背景颜色
颜色还可以，继续添加我们想要的功能
效果如下，右侧增加了中奖名单，并且可以导出
增加重置按钮，点击后重置抽奖界面和中奖列表
待功能开发完成后，我们让 cursor 帮忙优化一下界面
优化完成后，界面整体比之前好看多了
本次实操演示到此结束，整个过程无需编写任何代码，仅需通过自然语言对话即可实现创意。
静态网页非常的方便，不用配置额外的环境，非常适合小白入门 AI 编程。
cursorrules 文件有需要的关注添加作者获取！！！
AI编程交流群已经400人了，只能通过邀请进群了，群内有 Cursor + DeepSeek 教程，欢迎大家进群交流学习，感兴趣的扫码添加好友邀你进群。