--- name: fitness-plan-from-image slug: fitness-plan-from-image displayName: 健身计划图转打卡 version: 1.7.9 description: 把健身 / 训练计划截图转成：① 视频链接汇总 MD；② 单文件 HTML 打卡界面。支持动森训练岛（默认）与杂志风（`--theme magazine`）双主题。杂志风含轻松版 / 加练版双计划、月历 / 年历复盘、训练频次榜、每日/每月运动合计时长。触发词：训练计划、健身打卡、一周训练、把图里的视频整理出来、做个打卡界面。 agent_created: true --- # 健身计划图转打卡 ## Overview 把健身计划截图变成两份成果： 1. **视频链接汇总 MD**：每个训练项配对应 B 站视频链接。 2. **单文件 HTML 打卡界面**：每日打卡，离线可用、手机友好。 > **健身计划来源**：skill 内置示例计划整理自小红书博主 **小肥uu** 的帖子《[普女变美60天总结｜我的真实变化肉眼可见！](https://www.xiaohongshu.com)》——用户也可以把网上任何健身/训练计划截图发给我，我按同样的流程解析、生成专属打卡界面。 The skill bundles a RapidOCR script (for images given as local files), a Bilibili link-matching reference, and a self-contained HTML template + injector. ## When To Use - User pastes 1+ screenshots of a fitness/weekly-training plan and says things like "汇总链接" / "做个打卡" / "把图里的视频整理出来". - The built-in sample plan comes from 小肥uu's "普女变美60天总结｜我的真实变化肉眼可见！"; users can replace it with any plan screenshot they find online. - The plan typically shows: days of week (周一–周日), per-day exercise items, video titles / UP names, daily-fixed items (拉伸/喝水), and a rest day. ## Workflow ### Step 1 — Read the training items from the image(s) Two input modes: - **Image pasted into the conversation (preferred):** Read it directly with multimodal vision. This is the most accurate and fastest path; no OCR needed. - **Image given as a local file path:** Run the OCR script: ```bash python scripts/ocr_images.py "<图片路径1>" ["<图片路径2>" ...] ``` Requires `pip install rapidocr-onnxruntime` (one-time). The script prints per-image text lines as JSON. Extract from the image(s): - Per weekday (周一–周日): list of exercise items, each with video title / UP name / duration if visible. - `dailyFixed`: items done every day (e.g. 拉伸5分钟, 喝水2000ml). - `restDay`: which weekday is the rest day. ### Step 2 — Structure into a plan JSON Assemble a single JSON object (this is the contract consumed by the HTML builder): ```json { "planName": "一周变美训练计划", "days": { "周一": [ {"name":"筷子操瘦脸","video_title":"MuscleWatching 10分钟筷子操","up":"MuscleWatching", "url":"https://www.bilibili.com/video/BVxxxx","duration":"10min","note":"图中指定"} ], "周二": [ ... ], "周三": [ ... ], "周四": [ ... ], "周五": [ ... ], "周六": [ ... ], "周日": [ ... ] }, "dailyFixed": ["拉伸5分钟","喝水2000ml"], "restDay": "周日" } ``` Every item should carry `name` (required) and `url` when known. ### Step 3 — Match each video to a Bilibili link Read `references/bili-search.md` and apply its strategy: - For each item with a video title, use **WebSearch** (`"<标题关键词>" bilibili`) or **WebFetch** the Bilibili search page to find the `bilibili.com/video/BV...` link. - Items with only an action name (no specific video) get a same-type public video, clearly flagged `note:"通用推荐，非原帖指定"`. - Avoid the Bilibili open API (returns 412 frequently). ### Step 4 — Produce the summary document Write a Markdown file (e.g. `一周训练计划视频链接汇总.md`): - Plan name + daily-fixed items. - A weekday table: 周一–周日, each row listing items with 视频标题 / UP / 链接 / 时长 / 备注. - Rest-day note. Then `present_files` it to the user (do not modify any other workspace file unless asked). ### Step 5 — Generate the check-in interface 1. Save the Step-2 JSON to a file (e.g. `plan.json`). 2. Run the injector: ```bash python scripts/build_checkin.py --plan plan.json --out checkin.html ``` It reads `assets/checkin-template.html`, substitutes `__PLAN_JSON__` and `__PLAN_NAME__`, and writes the final HTML. - 想先快速预览界面、不准备自己的计划？用 `--sample` 直接生成内置示例： ```bash python scripts/build_checkin.py --sample --out checkin.html ``` - `--plan` 模式会校验结构（days 键须为周一到周日、每项须有 name），出错给出友好提示。 - **视觉风格（动森训练岛 / animal-island-ui，默认）**：采用 hiyeshu 的「动森训练岛」视觉配方（开源实现：https://github.com/hiyeshu/fitness-island）。薄荷青 `#19c8b9` 主色 / 奶油底 `#f7f5ea` / 棕字 `#794f27` / 厚阴影大圆角卡 / 黄色「盖章啦 OK」结算弹窗 / 浮动 FAB，纯 CSS 还原、零外部依赖。 - **视觉风格二（杂志风 / magazine-ui）**：加 `--theme magazine` 即可生成杂志风打卡页：米色纸感背景、深蓝右栏、刊头标题、12 盏随机错落光点、轻松版白灯 / 加练版黄灯双计划同屏打卡。标准 plan 会自动映射为「加练版」与「轻松版」双计划（轻松版暂复用同一训练项）。 ```bash python scripts/build_checkin.py --plan plan.json --out checkin.html --theme magazine ``` > **UI 设计来源**：本打卡页的视觉设计参考自 hiyeshu 的「动森训练岛」（Animal Crossing 风健身打卡），其开源实现见 https://github.com/hiyeshu/fitness-island 。杂志风外观为本 skill 自研。功能与工程实现为本 skill 自研。 > > **健身计划来源**：skill 内置示例计划整理自小红书博主 **小肥uu** 的帖子《普女变美60天总结｜我的真实变化肉眼可见！》。大家可以直接把网上看到的健身计划截图发给我，我按同样流程解析并生成可打卡的 HTML。 - **「出现 / 完成」双态**：点击训练项可循环 未做 → 出现（来了但没全做完）→ 完成；连续天数按「出现或完成」计算，降低罪恶感，更符合习惯养成逻辑。 - **周复盘导出**：界面底部「习惯复盘」区域一键生成 Markdown（完整/出现天数、最稳/最弱动作、连续峰值、下周规则建议），自动复制到剪贴板，可贴回对话让 agent 生成下周计划。 - **壳模式（数据与 UI 分离）**：用 `--mode shell` 输出一个目录，包含 `index.html` + `plan.json`。改 UI 时只替换 `index.html`，不破坏用户打卡数据。 ```bash python scripts/build_checkin.py --plan plan.json --out ./checkin --mode shell ``` 3. Sanity check: the output HTML must **not** contain the literal string `__PLAN_JSON__` (substitution succeeded). 4. `present_files` the HTML. The template already satisfies the check-in essentials: - "今天要处理" pinned on top (today's items + daily-fixed; rest day shown specially). - **本周进度环**（顶部内联 SVG 圆环）+ 每周一到周日的「小圆点连线」完成度（按本周实际日期统计，非仅当天）。 - 每个训练项的 `note` 显示为徽章：**图中指定**（蓝灰）/ **通用推荐**（暖棕），让原帖链接与通用替身一目了然。 - 整体 UI 单文件居中卡片式（max-width 600px 居中），动森训练岛视觉：奶油底 `#f7f5ea`、薄荷青 `#19c8b9` 主色、大圆角厚阴影卡；训练项按序号轮转彩色左边线（c1–c5）、左侧圆点勾选带弹跳动画；顶部统计三卡含 SVG 图标（完成/待打卡/连续天数）；按时段变化的问候语（早上好/下午好…）；今日全完成时隐藏「完成全部」按钮、改显「今日目标已达成」星标庆祝态；打卡按钮为圆角 pill；固定项用浅底+spec 左边线、休息日用居中友好卡片。 - 顶部标题区含连续打卡 streak 徽章；今日卡片含「今日 X/Y」与**「完成全部」**一键按钮。 - `localStorage` persistence (key `wb_fitness_checkin_v1`), JSON export / import, clear-with-confirm. - Mobile-responsive：手机端（<640px）周计划改为横向滑动-snap 而非堆叠 7 张长卡；≥44px 点击区、16px 输入框。 - 用本地日期（非 UTC）记录打卡，避免跨时区/跨天错误；首屏预置昨日 1~2 条示例完成记录，避免空白。 ### Step 6 (optional) — Deploy If the user wants a shareable link / phone-home-screen app, deploy the generated HTML via the CloudStudio deploy flow. ## Notes - Never modify the user's other workbench files; this skill only adds the summary doc + check-in HTML. - Keep `note` honest: distinguish "图中指定" vs "通用推荐" so the user knows which links are the original author's. - If the same image is re-pasted, reuse the parsed plan instead of re-OCRing.