网络截图、长截图高效标注归档方法 · Screenshot Annotation Hub
Overview
一份单文件、断网可用的 HTML 工作台，帮用户把「截图存了就忘、发图别人看不懂、长图找不到重点」的痛点，变成每天 30 秒就能执行的五步闭环：
- 评估现状 — 盘点自己最常截图的场景（求助 / 记录 / 分享 / 存证）和当前归档痛点
- 学习规范 — 按 7 类截图（网页长截图 / 聊天记录 / 网课 PPT / 论文文献 / 报错求助 / 社交媒体 / 通用原则）学习标注规范
- 小范围试用 — 下一次截图时就按规范做，只改 1-2 个习惯
- 观察效果 — 记录对方理解速度、自己找图效率、沟通次数的变化
- 固定做法 — 固化成个人 SOP（截图 → 标注 → 命名 → 归档）+ 工具清单 + 避坑清单
内置能力（对照工作台搭建铁律）：
- 今天要处理置顶区：逾期项自动标红（预置 1 条过期 2 天的「整理上周网课截图」），右下角 ＋ FAB 快速加待办
- 总览页：SVG 进度环（整体标注规范掌握度）+ 7 类截图覆盖度堆叠条（按颜色分段）
- 标注规范库：14 条种子规范，覆盖 7 大类，关键词搜索 + 分类筛选 + 难度排序 + 3 格掌握度标记
- 试用日志：表单+列表，含场景/分类/起止日/预期/实际/星级/结论
- 我的固定做法：SOP / 工具清单 / 不买清单（都可勾选完成、追加、修改、删除）
- 本地存储：localStorage 前缀 wb_screenshot_，刷新/关闭不丢
- 备份闭环：首屏「导出 JSON / 导入恢复 / 导出日志 Markdown / 清空示例 / 清空全部（二次确认）」
- 全内联零外链：CSS/JS/SVG 图标与图表全部内联，不引任何外部框架/CDN/字体
- 双端适配：PC 顶部 Tab、手机底部 Tab，按钮 ≥44px、输入框 ≥16px、适配刘海安全区
- 预置示例：首次打开包含 14 条规范 + 2 条日志（含 1 条逾期试用） + 8 条 SOP + 6 项工具 + 6 条不买 + 3 条待办（含 1 条逾期）
When to use
- 用户说「帮我做个截图标注规范工具 / 截图怎么标注 / 长截图怎么归档」之类的需求。
- 用户想给大一大二学生，做一份可离线、可分发、可备份的截图标注学习工作台。
- 需要把"评估→规范→试用→观察→固化"这类五步法，固化成一个持续使用的个人系统。
Resources
assets/screenshot-annotation-hub.html— 已生成好的完整单文件应用（开箱即用，无需构建）。scripts/test.js— jsdom 端到端自测脚本。- 压缩包
screenshot-annotation-hub.zip— 可分发版本（已打包）。
Quick Start（交付步骤）
这是资产交付型技能：HTML 已生成完毕，直接分发给用户即可，无需编程。
# 1) 把成品 HTML 复制到用户工作区（或任意目录），双击即可在浏览器离线打开
cp assets/screenshot-annotation-hub.html <目标目录>/
# 2) 想换标题/配色/默认示例时，用编辑器直接改 HTML 内：
# - <title> 与 .brand h1 改名称
# - :root 里的 --brand / --brand2 改主题色（默认科技蓝 #4f6ef2 + 紫罗兰 #8b5cf6）
# - SEED_TECHS / SEED_SOP / SEED_GEAR / SEED_NO 改默认示例
# 3) 自测（可选）
NODE_PATH=/Users/zhoukun/.workbuddy/binaries/node/workspace/node_modules \
/Users/zhoukun/.workbuddy/binaries/node/versions/22.12.0/bin/node scripts/test.js
常见个性化点：
- 本校场景：在"现状评估"和方法手册里替换「教务系统 / 课程群 / 选课平台」等实际名称。
- 专业方向：在规范库中按设计、编程、文科等不同专业扩展相应截图规范。
- 主题色：--brand 主色（默认科技蓝 #4f6ef2），--brand2 辅色（默认紫罗兰 #8b5cf6）。
五大模块（五步法映射）
| 模块 | 对应五步法 | 核心功能 |
|---|---|---|
| 总览 | 评估+固化 | 进度环 / 分类覆盖条 / 数据备份 |
| 方法手册 | 评估+学 | 核心原则 / 高频场景 / 5 个常见错觉 |
| 标注规范库 | 学 | 14 条种子规范 / 搜索 / 分类筛选 / 难度排序 / 3 格掌握度 |
| 试用日志 | 试+观察 | 表单录入 / 预期-实际 / 星级 / 结论 / 编辑 / 删除 |
| 我的固定做法 | 固化 | SOP / 工具 / 不买 三类清单，勾选-追加-改-删 |
关键实现要点
- 全程无框架，纯原生 JS + localStorage + 内联 SVG，离线可用。
- 预置 1 条逾期示例待办（整理上周网课截图，过期 2 天）+ 2 条试用日志；演示置顶逻辑和日志流程。
- 主题：默认跟随系统深色/浅色，额外提供「🌗 主题」手动切换（data-theme 属性 + CSS 变量覆盖）。
- 导出用
URL.createObjectURL（真实浏览器可用；jsdom 测试环境无此 API，属正常现象）。 - 掌握度采用 0/1/2/3 共 4 档（3 格亮起视为"掌握"），点击同格可降级、点更高级可升级。
自测方式
用 jsdom 跑端到端断言（加载无错 / 种子含 14 条规范 / 7 类覆盖 / 2 条日志 / 8 条 SOP / 6 项工具 / 6 条不买 / 逾期待办捕获 / 置顶标红 / 掌握度写入 / 日志增删 / 导入导出按钮）。已通过 20 项断言。
# 快速复跑
NODE_PATH=/Users/zhoukun/.workbuddy/binaries/node/workspace/node_modules \
/Users/zhoukun/.workbuddy/binaries/node/versions/22.12.0/bin/node scripts/test.js
分发与安装
- 直接发文件：把
assets/screenshot-annotation-hub.html发给对方——双击即在任意现代浏览器离线打开，零安装零联网。 - 部署成手机 APP：用 cloudstudio-deploy 或任意静态托管部署后，手机浏览器打开 → 分享 → 添加到主屏幕，即变成可日常使用的 APP。
- 打包成 skill 分发：把整个
screenshot-annotation-hub/目录 zip 发给他人，对方解压到~/.workbuddy/skills/<name>/（用户级，全项目可用）即可安装；本技能即采用此方式分发。
注意事项
- 生成内容为单文件离线应用，无任何外部接口或资源依赖，符合隐私边界（数据只存本机浏览器）。
- 部署到公网后链接任何人可打开，但页面不预填真实隐私数据；备份 JSON 含用户数据，注意私下传输。
- 数据仅存于本机 localStorage；建议定期用「导出 JSON」备份，避免清缓存丢失。
- 截图涉及他人隐私时请遵守法律法规和学校相关规定，敏感信息务必彻底打码。
