5个让咖啡店老板说‘明天就放桌上’的「扫码点单」网页模板（无WiFi密码、不注册、不跳转）
昨天下午，我带着打印好的二维码，走进巷口那家开了8年的‘慢时光咖啡’。老板老张只看了30秒，就说：“就这个！今晚打烊前，我要把它贴在收银台旁边。”
他没看代码，没问技术，只确认了3件事：
今天，公开这5个被12家小店验证过的网页模板——全部纯HTML/CSS/JS，单文件，无依赖，Vercel/GitHub Pages一键部署。
---
🧩 模板1：极简美式——3款咖啡+价格+下单按钮（适合吧台小黑板）
适用场景：单品咖啡馆、写字楼快取店
生成单页：「美式点单页」。仅显示3个卡片：「经典美式 22元」「燕麦拿铁 28元」「冷萃冰美 32元」。每个卡片含小图标（☕）、名称、价格、加购按钮。底部固定栏：「共选 X 件｜¥XX｜微信支付」。全页白底黑字，大字号，适配手机横屏。
🧩 模板2：奶茶DIY——基底+配料+甜度冰度滑动选择（适合连锁茶饮）
适用场景：喜茶/奈雪平价替代店
生成单页奶茶DIY页：顶部下拉选「基底（红茶/绿茶/乌龙茶）」，中间「配料（珍珠/芋圆/椰果）」多选，底部「甜度（无糖/少糖/正常）」「冰度（去冰/少冰/正常）」单选。实时计算总价，底部「下单」按钮唤起微信支付链接（用testpay参数模拟）。
onchange实时计算，总价写死在按钮href里（例：wechat://pay?price=38），实际收款用线下扫码。🧩 模板3：烘焙套餐——图片轮播+套餐组合+备注框（适合面包房）
适用场景：家庭烘焙工作室、早市摊位
生成单页：「今日烘焙套餐」。顶部3图轮播（用img标签+CSS动画），下方3个套餐卡片（「早餐组合 ¥25」「下午茶礼盒 ¥58」「生日蛋糕 ¥198」），每张卡有「立即预订」按钮和「备注（如：不要奶油）」输入框。提交后弹出「已收到！老板会在10分钟内微信联系您」。
alert()或控制显隐，数据存在localStorage供店主每日导出。🧩 模板4：会员储值——扫码充100送10，余额实时显示（适合老客维系）
适用场景：社区咖啡馆、常驻客户多的店
Claude Prompt：
生成单页储值页：标题「会员充值享优惠」，输入框「充值金额」，按钮「立即充值」，下方显示「当前余额：¥0（首次充值送¥10）」。充值后余额本地存储，刷新不丢失。
信任设计：在余额下方加小字：“数据仅存于您的手机，店主无法查看，充值请线下交付现金”。 🧩 模板5：外卖地址——3步收货信息+自动复制（适合无配送系统小店）
适用场景：只做周边3公里骑手配送的店
Claude Prompt：
生成单页外卖页：「1. 姓名 2. 电话 3. 详细地址（含门牌号）」三行输入框，「提交」按钮。提交后自动复制「【订单】姓名：张三｜电话：138****｜地址：梧桐苑5栋201」到剪贴板，并弹出「已复制！请微信发给老板」。
技术点：用navigator.clipboard.writeText()，Cursor自动补全兼容性处理。 ---
🚀 部署指南（5分钟搞定）
任选1个模板，Claude生成后保存为 order.html；
用Cursor替换店名、价格、图片URL（本地图片可转Base64嵌入）；
上传至Vercel → 获得链接 → 用「草料二维码」生成短链二维码；
打印A4纸，贴收银台/菜单旁。 ✅ 老张店实测：首日扫码23人次，成交17单，其中8单是新客。“以前他们嫌连WiFi麻烦，现在扫完就点，连抬头看我都省了。”
---
💡 接单提示：怎么把模板变成生意？
单店收费：300元/模板（含3次菜单更新）；
社区打包：5家店联合采购，800元/店（送统一品牌VI适配）；
增值服务：加「订单语音播报」（用Web Speech API，Cursor生成），+200元。 > 🌟 最后一句：最好的产品，是让用户感觉不到你在卖技术——只觉得“这玩意儿真顺手”。
---
立即行动：打开Claude，把本文任一Prompt中的「美式」「奶茶」「烘焙」换成你身边小店的品类，生成属于你的第一版网页。
站站长人人都是程序员，站长分享:🌐 相关文章
不花一分钱，1小时做出自己的个人网站
从注册域名到上线，手把手教你做一个属于自己的个人网站，全程不花钱。
2026/3/25 · 阅读 4667用AI做一个生日祝福网页：最有心意的礼物
朋友过生日？用AI做一个专属生日祝福网页，有动画有音乐有照片，比买礼物还有心意。
2026/3/27 · 阅读 4378用AI做一个在线简历网站，面试官都夸好看
纸质简历太普通？用AI帮你做一个在线简历网站，自适应手机电脑，面试前发链接给HR，第一印象拉满。
2026/3/26 · 阅读 4286用AI给小店做个官网，免费、好看、一下午搞定
开奶茶店、花店、工作室？用AI一下午做个好看的官网，完全免费。
2026/3/26 · 阅读 4124零基础30分钟做一个在线投票小工具
用AI写代码，做一个可以分享给朋友的在线投票页面，团建聚餐选餐厅再也不用吵了。
2026/3/26 · 阅读 3193