会员刮刮卡 template

Retail Food & drink Interactive

Example: 绿篮子双十一 · 刮一刮赢好礼 · 刮刮卡

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

Reference template: first read https://space.24haowan.com/examples/sample-scratch-card/agent.md and follow its structure and layout, replacing all content with mine. Deliver one self-contained HTML file (styles inline, no external files, good on phones) and give me the .html file to download.
· If you have LivePage tools (MCP): use sample sample-scratch-card as the base (list_examples key=sample-scratch-card), publish it on LivePage and show me the preview first.
· No LivePage tools but you can send HTTPS requests: POST the finished HTML with Content-Type: text/html to https://space.24haowan.com/api/quick?client=template-sample-scratch-card and give me the preview link and claim link it returns (a 7-day temporary link).
If you don't have the LivePage connector (MCP) yet, read https://space.24haowan.com/for-agents.md first and follow it to connect, or publish without signing in.

Doubao, DeepSeek, Kimi, Yuanbao, ChatGPT, Claude… any agent that can read a link

View page

Publish as a link that opens in WeChat

WorkBuddy, Claude, Codex and other MCP agents; sign in by scanning with WeChat

Connecting LivePage in WorkBuddy for the first time? See the illustrated guide ›

Connect me to LivePage: first read https://space.24haowan.com/for-agents.md and walk me through it step by step; then use https://space.24haowan.com/examples/sample-scratch-card/agent.md as a reference to make my own "绿篮子双十一 · 刮一刮赢好礼", publish it on LivePage and show me the preview first.

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

Share poster

In WeChat, long-press the image to save or forward it. Scanning the code opens this template.

Download poster

About this template

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

Page structure：刮一张 · 今日奖池 · 活动规则 · 自提门店

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

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

View template source ›

Something missing here? Suggest an improvementThe template factory checks daily and logs every improvement

会员刮刮卡 template

More like this