健身打卡挑战模板

医疗个人·家庭每日一练

示例：21 天燃脂挑战 · 第 9 天 · 打卡挑战

帮我给我带的健身打卡群做今天这一页，发成一个网页链接，以后每天更新同一个链接：首屏是深色的训练舞台，顶上是群名、教练和静音键，一个很大的「第 9 天 / 21」和日期，一句今天的主题和时长；下面 2×2 四个动作，每个是用 SVG 画的小人在循环做这个动作（开合跳、深蹲、后撤弓步、臀桥，正在用力的部位标成橙色），配动作名和一句要点；再下面一个大的「开始今日训练」按钮和「群里今天已有 N 人打卡」的一排小头像。点开始进入全屏训练：准备 5 秒，然后 4 个动作 × 3 轮，每个 40 秒、休息 20 秒，中间一个倒计时圆环（练是橙色、休息是绿色），圆环里是小人和秒数，下面是动作名、要点和「接下来做什么」，顶上 12 段进度条，有暂停和跳过；每秒响一声合成的节拍音、最后 3 秒提示音（点了开始才响，能静音）。练完撒彩带，出一张「今日已完成」卡：用时、组数、千卡、21 天进度条，填群昵称就能打卡，存进一张数据表（name / day / minutes）。往下是 21 天进度（7 列 3 行，练过的日子点亮火焰并写那天打卡人数，今天那格轻轻发光，拉伸日用绿色虚线）、「今日已打卡 N 人」头像墙（头像按名字生成的抽象图形）和连续打卡天数榜，都从这张表读回；然后一条今日饮食建议（配一张分好比例的盘子图）、明日预告，页末再放一张打卡表单。手机竖屏为主；电脑上训练舞台居中，左边进度和饮食，右边打卡墙和榜单。系统要求减少动效时小人不动，不跑脚本时动作表、榜单和打卡表单照样能看能交。

参考模板：先读 https://space.24haowan.com/examples/sample-fitness-challenge/agent.md ，照它的结构和版式做，内容全部换成我的；做成一个单文件 HTML（样式写在页面里、不引用外部文件，手机上好看），并提供 .html 文件下载。
· 你有活页工具（MCP）：用样例 sample-fitness-challenge 当底稿（list_examples key=sample-fitness-challenge），发成活页，先给我看预览。
· 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-fitness-challenge ，把返回的预览链接和认领链接给我（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-fitness-challenge/agent.md 做一份我自己的「21 天燃脂挑战 · 第 9 天」，发成活页，先给我看预览。

我的要求：帮我给我带的健身打卡群做今天这一页，发成一个网页链接，以后每天更新同一个链接：首屏是深色的训练舞台，顶上是群名、教练和静音键，一个很大的「第 9 天 / 21」和日期，一句今天的主题和时长；下面 2×2 四个动作，每个是用 SVG 画的小人在循环做这个动作（开合跳、深蹲、后撤弓步、臀桥，正在用力的部位标成橙色），配动作名和一句要点；再下面一个大的「开始今日训练」按钮和「群里今天已有 N 人打卡」的一排小头像。点开始进入全屏训练：准备 5 秒，然后 4 个动作 × 3 轮，每个 40 秒、休息 20 秒，中间一个倒计时圆环（练是橙色、休息是绿色），圆环里是小人和秒数，下面是动作名、要点和「接下来做什么」，顶上 12 段进度条，有暂停和跳过；每秒响一声合成的节拍音、最后 3 秒提示音（点了开始才响，能静音）。练完撒彩带，出一张「今日已完成」卡：用时、组数、千卡、21 天进度条，填群昵称就能打卡，存进一张数据表（name / day / minutes）。往下是 21 天进度（7 列 3 行，练过的日子点亮火焰并写那天打卡人数，今天那格轻轻发光，拉伸日用绿色虚线）、「今日已打卡 N 人」头像墙（头像按名字生成的抽象图形）和连续打卡天数榜，都从这张表读回；然后一条今日饮食建议（配一张分好比例的盘子图）、明日预告，页末再放一张打卡表单。手机竖屏为主；电脑上训练舞台居中，左边进度和饮食，右边打卡墙和榜单。系统要求减少动效时小人不动，不跑脚本时动作表、榜单和打卡表单照样能看能交。

分享海报

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

下载海报

这份模板

健身教练、瑜伽 / 跑步搭子、减脂营要带一个 21 天（或 7 / 30 天）打卡群：每天发同一个链接，群友点开跟着计时器练完当场打卡，群里看头像墙和连续天数榜，选它。一个人备考、自学、按阶段排计划自己打卡，选 sample-study-plan；每天背几个单词、做一道题，选 sample-words-daily；不带训练、只想让大家在地图上点亮去过的地方，选 sample-checkin-map。

页面结构：今日训练 · 21 天进度 · 今日打卡与连续榜 · 今日饮食 · 明日预告 · 打卡

首屏 4 个内联 SVG 小人动作循环演示，点开始进入全屏训练：倒计时圆环、休息提示、Web Audio 合成节拍音（点按后才响，可静音）、轻震，练完撒彩带 +「今日已完成」卡
打卡写回数据表（原生表单 POST ./_data/checkins），页面读回「今日已打卡 N 人」头像墙（名字现画的抽象 SVG 头像）、连续打卡榜与 21 格进度
同一链接每天更新（第几天、今日动作、饮食、明日预告），打卡记录不随版本变
微信卡片（share.title / share.desc），发到打卡群

发之前要备好：数据表 checkins（列 name / day / minutes，append_open=true）：训练完成卡和页末的打卡表单都写进这里，页面读回头像墙、连续打卡榜和 21 格人数；发布前先用 set_data 建好，挑战结束把 append_open 关掉

看模板源码 ›

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

健身打卡挑战模板

同类案例