会员刮刮卡模板

零售餐饮互动玩法

示例：绿篮子双十一 · 刮一刮赢好礼 · 刮刮卡

帮我给我们生鲜超市的双十一会员活动做一个刮刮卡，发成一个网页链接到会员群：首屏是一张大刮刮卡，卡框是品牌色，中间一块用 canvas 画的银色涂层（带细颗粒纹理和斜向反光，写着「刮开这里」），手指或鼠标按住来回刮就擦掉涂层、掉一点银屑粒子、有轻轻的沙沙声，卡下面一条「已刮 N%」进度，刮开超过 45% 就整张自动揭开；中奖时卡面盖一个「中奖」章、撒彩带、手机轻震、响一声合成的音效（点了才响，右上角有静音键），没中就写一句安慰并送一张满 39 减 3 的兜底券；然后弹出一张领奖券：奖品、插画、券码、有效期、哪个门店自提，下面填称呼点收下，存进一张数据表（name / prize / code）。卡上面是店名、活动日期、一句大标题和店长一句话；卡下面一个「不想刮，直接揭开」、一行「今日已刮 N 次 · 剩余奖品 N 份」、一条读这张表的最近中奖滚动条、一排五样奖品的小插画和剩余。往下是今日奖池：每天多少张卡、一条已刮 / 剩余有奖 / 剩余送券的分段条、每样奖品的每日数量、剩余和此刻概率（概率 = 剩余 ÷ 今天剩余的卡数），再是活动规则和自提门店（地址带复制按钮）。手机竖屏一屏看完首屏，电脑上中间一块手机比例的舞台、左边活动规则和门店、右边今日奖池；减少动态时直接停在结果，脚本不跑时也能看到奖池、规则和一张登记表单。活动期间有变化就更新同一个链接。

参考模板：先读 https://space.24haowan.com/examples/sample-scratch-card/agent.md ，照它的结构和版式做，内容全部换成我的；做成一个单文件 HTML（样式写在页面里、不引用外部文件，手机上好看），并提供 .html 文件下载。
· 你有活页工具（MCP）：用样例 sample-scratch-card 当底稿（list_examples key=sample-scratch-card），发成活页，先给我看预览。
· 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-scratch-card ，把返回的预览链接和认领链接给我（7 天临时链接）。
如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

豆包、DeepSeek、Kimi、元宝、ChatGPT、Claude……能上网读链接的都可以

看真页面

发成微信里能打开的链接

WorkBuddy、Claude、Codex 等支持 MCP 的 Agent，微信扫码登录

第一次在 WorkBuddy 里接活页？看图文手册 ›

帮我接入活页：先读 https://space.24haowan.com/for-agents.md ，一步步带我完成；然后参考 https://space.24haowan.com/examples/sample-scratch-card/agent.md 做一份我自己的「绿篮子双十一 · 刮一刮赢好礼」，发成活页，先给我看预览。

我的要求：帮我给我们生鲜超市的双十一会员活动做一个刮刮卡，发成一个网页链接到会员群：首屏是一张大刮刮卡，卡框是品牌色，中间一块用 canvas 画的银色涂层（带细颗粒纹理和斜向反光，写着「刮开这里」），手指或鼠标按住来回刮就擦掉涂层、掉一点银屑粒子、有轻轻的沙沙声，卡下面一条「已刮 N%」进度，刮开超过 45% 就整张自动揭开；中奖时卡面盖一个「中奖」章、撒彩带、手机轻震、响一声合成的音效（点了才响，右上角有静音键），没中就写一句安慰并送一张满 39 减 3 的兜底券；然后弹出一张领奖券：奖品、插画、券码、有效期、哪个门店自提，下面填称呼点收下，存进一张数据表（name / prize / code）。卡上面是店名、活动日期、一句大标题和店长一句话；卡下面一个「不想刮，直接揭开」、一行「今日已刮 N 次 · 剩余奖品 N 份」、一条读这张表的最近中奖滚动条、一排五样奖品的小插画和剩余。往下是今日奖池：每天多少张卡、一条已刮 / 剩余有奖 / 剩余送券的分段条、每样奖品的每日数量、剩余和此刻概率（概率 = 剩余 ÷ 今天剩余的卡数），再是活动规则和自提门店（地址带复制按钮）。手机竖屏一屏看完首屏，电脑上中间一块手机比例的舞台、左边活动规则和门店、右边今日奖池；减少动态时直接停在结果，脚本不跑时也能看到奖池、规则和一张登记表单。活动期间有变化就更新同一个链接。

分享海报

微信里长按图片保存或转发给朋友；扫码就能打开这个模板。

下载海报

这份模板

超市、生鲜店、餐饮门店做双十一、店庆、会员日，想让会员在群里每天刮一张卡：奖品每天限量、要显示今天还剩多少、刮中的到店自提或结账抵扣，没中也送一张兜底券，选它。想要转起来的仪式感、奖品不分每日份额选 sample-lucky-wheel；年会、发布会现场大屏抽人选 sample-annual-draw；只收报名、按场次分名额选 sample-event-signup；不抽奖、只想让人先领一张开业券选 sample-store-opening。

页面结构：刮一张 · 今日奖池 · 活动规则 · 自提门店

canvas 现画的银色刮层（渐变 + 细颗粒 + 斜向反光），手指 / 鼠标 destination-out 擦除，刮的时候掉银屑粒子、配沙沙声；刮开过 45% 自动揭晓
中奖彩带 + 轻震 + Web Audio 合成音（点按后才发声，可静音），没中给一句安慰和一张兜底券，随后弹出一张值得截图的领奖券
领奖券里填称呼写回数据表（原生表单 POST ./_data/scratches），页面读回「今日已刮 N 次 · 剩余奖品」、扣减奖池、滚动显示最近中奖
电脑上舞台两侧放活动规则、今日奖池与自提门店；同一链接活动期间持续更新；微信卡片（share.title / share.desc）

发之前要备好：数据表 scratches（列 name / prize / code，append_open=true）：领奖券里的收下写进这里，页面读回今天的条数算「今日已刮」、扣减奖池、显示最近中奖；发布前先用 set_data 建好，活动结束把 append_open 关掉；门店纸质卡的已刮数写在奖池表的 data-store 里，店里每天中午和傍晚各更新一次页面（同一个链接）

看模板源码 ›

这份哪里不合适？提改进建议模板工厂每天看一次，改好了写进改进记录

会员刮刮卡模板

同类案例