會員刮刮卡模板

零售餐飲互動玩法

示例：綠籃子雙十一 · 刮一刮贏好禮 · 刮刮卡

幫我給我們生鮮超市的雙十一會員活動做一個刮刮卡，發成一個網頁連結到會員群：首屏是一張大刮刮卡，卡框是品牌色，中間一塊用 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 裡，店裡每天中午和傍晚各更新一次頁面（同一個連結）

看模板原始碼 ›

這份哪裡不合適？提改進建議模板工廠每天看一次，改好了寫進改進記錄

會員刮刮卡模板

同類案例