Clawed On Watch · Web Preview

浏览器里的 AI 额度宠物表盘 参考样机（画布 390×450）。

作者： Cencen（@SDS-CC）

在线预览（推荐，不用 clone）：
https://sds-cc.github.io/clawed-on-watch/

---

怎么用

本仓库不是成品表盘包，也不是给最终用户直接戴在手腕上的东西。

它是一份 可交互的视觉 / 信息架构样机，用来：

1. 看清楚表盘在不同额度形态、档位下该长什么样
2. 对照布局、颜色、宠物与文案，重建到你自己的目标设备 / 表盘工具 / 屏幕项目里
3. 和产品、设计、开发对齐「显示什么」，而不是替代真机实现

建议工作流

1. 直接打开在线预览：sds-cc.github.io/clawed-on-watch（GitHub Pages，零安装）
2. 右侧切换 Plan / Form / Tier，把你要对齐的状态点出来
3. 对照截图或当场截图，在 手表 SDK、其他系统表盘编辑器、自研 UI 里按同样信息层级实现
4. 真机数据、推送协议、系统 API 不在本样机范围内——那是目标平台自己的接入工作

本地打开（可选）

需要离线或改代码时：

git clone https://github.com/SDS-CC/clawed-on-watch.git
cd clawed-on-watch
# 双击 index.html，或：
# python -m http.server 8080

本样机刻意不做的事

• 不连接手表 / 手机 / 后端
• 不提供可安装的表盘包或 APK
• 不绑定某一家手表系统的私有接口

---

功能与截图

单套餐 · 双套餐

说明	截图
单套餐：一套额度 + 命令行；宠物跟该套餐瓶颈
双套餐：上下两套；宠物 / 气泡跟全局最低 %

5 小时 + 7 天窗口

形态	说明	截图
5h+7d	同时显示 5 小时窗口与 7 天窗口进度、Reset
仅 7d	只有周窗口（主行标签 7d）
档位示例（告急）	剩余低时红档、宠物与气泡跟瓶颈

余额形态

说明	截图
余额型：单条 Bal 进度 + Rem / Base 金额行，无 5h/7d 周期 Reset

其它状态

状态	说明	截图
等待同步	未拿到额度时全 --，不展示假数据
息屏 AOD	日期 + HH:MM + 单行额度摘要 + 底部小宠物

预览页控件（对齐上述形态）

层	含义	选项
Plan	套餐数量	单套餐 · 双套餐
Form	额度形态	5h+7d · 7d · 余额型
Tier	额度档位	等待同步 · 充足 · 良好 · 临界 · 告急 · 耗尽

---

宠物组

按额度档位映射（充足 / 良好 / 临界可点按轮换；告急 / 耗尽 / 未同步为固定图）。素材在 assets/clawd-pet/。

档位	默认	可轮换
未同步		—
充足
良好
临界
告急		—
耗尽		—

---

Author

• Cencen — GitHub @SDS-CC
• 仓库：https://github.com/SDS-CC/clawed-on-watch
• 在线预览：https://sds-cc.github.io/clawed-on-watch/

License & credits

• 本仓库代码与文档：LICENSE（MIT）
  Copyright (c) 2026 Cencen (SDS-CC)
• 第三方素材与署名：NOTICE.md
  • 宠物 GIF 衍生自 abderrahimghazali/clawd-pet（MIT，作者 Abderrahim GHAZALI）
  • 上游许可证原文：third_party/clawd-pet-LICENSE.txt

UI 里的套餐名（Claude / Kimi / DeepSeek 等）只是样机占位文案，与对应产品无官方关系。