周五下午六点，正收拾东西准备走，老板在公司群里@我：年会节目评选需要一个在线投票页面，周一早上九点年会开始前必须上线。需求列了五条：每个员工只能投一票，投完能看到实时票数，页面要有倒计时（投票截止到中午12点），结束之后自动展示排行榜，还要适配手机（大部分人在现场用手机投）。
如果搁两年前，我的第一反应是：找人写后端接口、搭数据库、写前端页面、联调测试、买服务器部署，周末两天大概率要通宵。但2026年了，我打开Bolt.new，输了三段话，15分钟后页面已经在Vercel上跑起来了，带数据库、带实时更新、带防重复投票、带排行榜。周一早上把链接发到群里，老板问了一句"这个外包花了多少钱"，我说"0元，昨晚花了一刻钟"。
一、完整的生成过程：三句话搞定一个投票系统
打开Bolt.new之后，我先简单描述了需求，然后分三步让AI逐步完善。整个过程在聊天窗口里完成，我没写一行代码，没配一次数据库。
第一句Prompt：生成基础框架
AI在2分钟内生成了完整的React项目结构：8张节目卡片、投票按钮、移动端响应式布局。但这时候还没有数据库，投票数据存在浏览器localStorage里，换一个设备投票记录就没了。
第二句Prompt：接入数据库和防重复
AI自动创建了Supabase项目（需要我授权连接），建了votes表，配了实时订阅（Realtime Subscription）。从Supabase控制台确认了一下表结构和权限策略（Row Level Security），AI配得基本没问题，只手动改了一个地方：把anon用户的INSERT权限从"所有人"限制为"已认证"——这样必须通过页面操作才能投票，不能直接用API灌票。
第三句Prompt：倒计时和排行榜
AI在页面上方加了一个脉冲动画的倒计时器，截止时间一到，所有投票按钮自动变成灰色不可点击状态，页面自动滚动到排行榜区域。前三名节目卡片的边框分别是金、银、铜色渐变。
二、五个关键功能点，AI是怎么实现的
三、部署到Vercel：5分钟从代码到公网可访问
Bolt.new生成的代码可以直接导出为ZIP包，也可以连接GitHub仓库。我选择导出ZIP，然后用Vercel部署——因为Vercel对React项目的支持最成熟，基本是零配置。
Bolt.new导出项目ZIP包
打开Vercel → New Project → 上传ZIP
Vercel自动识别React+Vite，开始构建
在Environment Variables里填入Supabase的URL和Anon Key
部署完成，拿到xxx.vercel.app域名，直接分享到微信群
一个踩过的坑：第一次部署时忘了配环境变量，页面加载后一直报Supabase连接错误。在Vercel的Settings → Environment Variables里加上SUPABASE_URL和SUPABASE_ANON_KEY，重新部署就好了。AI生成的代码默认从.env文件读配置，Vercel需要手动把.env里的变量复制到环境变量面板。
四、如果不靠AI，同样一个投票页传统开发要花多少钱和时间
把这个投票页的需求发给三个外包团队询过价，报回来的数字和AI方案的对比非常直观。
时间差约500倍（15分钟 vs 3-5天），费用差约70倍（¥110 vs ¥3,000-8,000）。注意这里Supabase免费层的额度对投票页完全够用：500MB数据库、每月50,000个月活用户、2GB带宽。一个公司年会投票根本用不完。
五、AI做投票页过程中踩过的四个坑，提前知道省很多时间
坑1：AI不会主动做防刷
你只说"做一个投票页面"，AI生成的就是一个前端投票按钮，点了就加票，没有任何防刷措施。同一个IP可以无限投，F12改localStorage就能重置投票记录。必须明确告诉AI要加localStorage标记+IP记录+数据库唯一约束，三层防护才能挡住大部分刷票。
坑2：Supabase的RLS策略要自己检查
AI生成Supabase配置时会自动创建RLS策略，但偶尔会配得太宽松——比如把anon角色的INSERT权限开放给所有人。如果有人拿到你的Supabase URL和Anon Key，可以直接用Postman灌票。部署前一定要去Supabase控制台检查RLS策略。
坑3：倒计时用客户端时间会出错
AI默认用new Date()获取用户本地时间做倒计时。如果用户手机时间不准（快了10分钟），他的倒计时会比别人早结束。正确做法是从服务端获取时间戳，或者至少在页面加载时从Supabase拿一次服务器时间做校准。
坑4：环境变量不配会导致生产环境报错
AI生成代码时默认从.env文件读取Supabase配置。Bolt.new的预览环境能读到.env，但部署到Vercel后.env不会自动同步。必须在Vercel的Environment Variables里手动配置，否则页面打开后一直转圈或报错。
六、做投票页五个AI工具怎么选，看你的需求类型
只做纯前端投票页（不需要数据库）
推荐：v0.dev
UI生成质量最高，一键部署Vercel，适合投票结果存在localStorage的简单场景。
需要数据库+实时更新（完整投票系统）
推荐：Bolt.new 或 Lovable
都支持Supabase集成+实时订阅，Bolt.new更灵活，Lovable的Supabase集成更原生。
已有项目里加投票模块
推荐：Cursor
在现有代码库上下文里生成投票组件，风格和项目保持一致，不需要从头建项目。
不懂代码、完全零基础
推荐：Lovable
交互最友好，不需要懂Supabase，AI会引导你一步步创建数据库和部署。
预算为0，全部免费
推荐：Bolt.new免费层
100次prompt/月够做一个投票页，Supabase免费层+Vercel免费层，全套0元。
除了投票页，这种"AI一句话生成+Supabase数据库+Vercel部署"的模式同样适用于很多其他场景：员工满意度匿名问卷（结果实时汇总到图表）、年会现场抽奖大屏（滚动名字+中奖动画投屏）、活动报名页（表单提交+自动发送确认邮件）、预约排期工具（时段选择+自动冲突检测）。这些页面的共同点是功能逻辑简单但交互要求高、需要数据库但数据量不大、上线时间紧、预算有限——恰好都是AI建站最擅长的领域。过去这些需求找外包，一个功能页至少3000起步还要等三天，现在一个人用AI一个晚上能搞定三个。
UC建站：不只是投票页，AI建站覆盖企业官网、商城、小程序全场景
这次做投票页的经历让我意识到AI建站的效率提升不是一点半点。UC建站提供从单页应用到企业官网、电商商城、微信小程序的AI建站全流程服务：域名注册、服务器部署、SSL证书、SEO优化、内容管理系统，一个人就能搞定过去需要一个团队的事。如果你也在考虑用AI做网站，可以了解一下。
了解UC建站AI建站方案 → ucjz.com
做完这个投票页之后我算了一笔账：Bolt.new的Pro版$15一个月，Supabase免费层和Vercel的Hobby方案都是零成本。也就是说，只要每个月至少做一个类似的单页应用（投票、问卷、报名、抽奖、预约），这$15就远远值回票价。而且AI生成的质量在2026年已经足够好——好到什么程度呢？年会结束后老板说这个投票页"比公司花两万做的官网还流畅"。我当然没告诉他真相，只是笑了笑说"前端技术迭代很快的"。
