---
name: BYS Personal Dashboard
slug: bys-personal-dashboard
category: Frontend
description: "A guided interview skill that helps you build a personalized mobile dashboard for daily tasks, tracking, and journaling—no coding required. Deploy it to your phone's home screen like an app."
github: "https://github.com/qkgecn93/bys-personal-dashboard"
language: HTML
stars: 26
forks: 5
install: "npx degit https://github.com/qkgecn93/bys-personal-dashboard ~/.claude/skills/bys-personal-dashboard"
installs_to: ~/.claude/skills/bys-personal-dashboard
source_path: SKILL.md
collection_size: 1
category_size: 567
added: 2026-08-11T07:21:59.887Z
last_synced: 2026-08-11T07:21:59.887Z
canonical_url: "https://dirskills.com/skills/bys-personal-dashboard"
---

# BYS Personal Dashboard

A guided interview skill that helps you build a personalized mobile dashboard for daily tasks, tracking, and journaling—no coding required. Deploy it to your phone's home screen like an app.

**Install:**

```bash
npx degit https://github.com/qkgecn93/bys-personal-dashboard ~/.claude/skills/bys-personal-dashboard
```

## README

# 不一书个人工作台生成器

把「刷到别人的个人工作台很心动」变成「我自己有一个，每天真的在用」。

这是一个 Agent Skill。装好之后新建会话，说一句 **「初始化不一书个人工作台生成器」**，它会像产品经理一样陪你把需求聊清楚，最后给你一个属于你自己的手机端工作台——加到桌面，点开就是今天要干的事。

<br>

## 它做出来的是什么

左侧常驻功能栏，右侧卡片流。功能是你自己的：今日计划、打卡、记账、体重、选题池、错题本、树洞……你每天真正会看的东西。

|  | |
|---|---|
| **完全个性化** | 不是套模板。先聊你在忙什么、想记录什么，再由 AI 归纳成功能清单让你删改 |
| **风格可选** | 8 套预置风格，也能丢参考图或你自己的照片取色。动工前先给你**真实可点的 HTML 预览**，不是效果图 |
| **数据在你手机里** | 部署到公网的只是空壳。别人拿到链接打开，看到的是一个什么都没有的工作台 |
| **能加到手机桌面** | 点开全屏无地址栏，跟 App 一样。iOS 上加到主屏幕后数据不会被系统清掉 |
| **手机电脑都好看** | 三档响应式：手机窄侧栏、平板侧栏展开、桌面卡片两列。不是把手机版拉大 |
| **可选双端同步** | 两台设备登同一账号自动对齐。本地优先——断网、云端挂了照样能用，只是不同步 |
| **自带成果卡** | 周复盘一键生成图卡。人不会分享待办列表，但会分享「我连续记录了 100 天」 |
| **能持续迭代** | 产出一份《工作台配置.md》。以后说一句「加个喝水提醒」就能接着改，不用重聊 |

## 快速开始

安装后新建会话，输入：

```
初始化不一书个人工作台生成器
```

全程约 30–60 分钟，不需要懂代码。流程会在四个地方停下来等你确认，不会闷头做完才给你看。

以后想改，直接说「给我的工作台加个喝水提醒」——Skill 会读工程里的《工作台配置.md》接着改。

## 安装

这是标准 Agent Skill 格式，放进任意兼容 runtime 的 skills 目录即可：

| Runtime | 路径 |
|---|---|
| Claude Code | `~/.claude/skills/` |
| Cowork | 双击 `.skill` 文件安装 |
| 其他兼容 runtime | 放进各自的 skills 目录 |

也可以完全不安装——把 `SKILL.md` 连同 `references/` 一起当作参考资料喂给任何有文件读写能力的 AI 助手。

## 目录结构

```
bys-personal-dashboard/
├── SKILL.md                      # 主流程（10 步 + 4 道检查点 + 失败分支）
├── references/
│   ├── interview-guide.md        # 怎么访谈、怎么把生活场景翻译成功能
│   ├── feature-library.md        # 功能库：三层分类、18 个功能的数据结构和坑
│   ├── style-guide.md            # 8 套风格包 + 真实 HTML 预览方案
│   ├── build-guide.md            # 工程规范、分区标记、拆分阈值
│   ├── api-guide.md              # 联网功能：CORS 实测、key 安全、什么时候该劝退
│   ├── deploy-guide.md           # L0/L1/L2 三层部署 + 加桌面引导
│   ├── sync-guide.md             # 双端同步：安全模型、配置步骤、平台硬限制、排错
│   └── iterate-guide.md          # 第二次进来怎么改
├── assets/
│   ├── skeleton/                 # 工程骨架（Store 合并层、同步、周复盘、响应式、PWA）
│   │   └── edge-functions/api/sync.js   # 同步后端，单设备用户删掉
│   ├── style-preview.html        # 带风格切换器的预览模板
│   └── 配置模板.md                # 《工作台配置.md》模板
├── scripts/
│   ├── validate_dashboard.py     # 静态检查（占位符、分区标记、iOS 字号、key 泄漏）
│   ├── smoke_test.js             # 冒烟测试（无头 DOM 真跑一遍，需 jsdom）
│   └── make_icon.py              # 生成桌面图标（需 Pillow）
└── examples/小鹿的工作台/          # 完整示例工程，两个脚本都通过
```

## 几个设计判断

**数据默认不上云。** iOS 对「添加到主屏幕」的 web app 有独立存储，不受 Safari「7 天未访问清除」规则约束。所以对绝大多数人，本地存储 + 加桌面 + 定期备份就够了，不需要为了「怕丢」搭一套后端。云同步是可选升级，架构上预留了（所有读写走 `Store` 抽象层），但不默认引导。

**部署问场景，不问技术方案。** 给小白甩一张「EdgeOne / GitHub Pages / Cloudflare」对比表，他只会关掉。问「你打算怎么用」，由 Skill 翻译成方案。

**风格不用生图模型定。** AI 画出来的 UI 效果图是「好看但实现不出来的假图」。这个 Skill 出的是真实 HTML 预览，能在手机上真的打开真的点，而且预览的 CSS 直接复用到正式版。

**联网功能当场告知代价。** 想要「每日热点」？Skill 会当场说清楚需要自己申请 key、大概花多久，并主动给出零门槛的替代方案——而不是做完了才说。

## 需要的环境

- 生成图标：Python + Pillow
- 冒烟测试：Node + jsdom（可选，装不上会跳过并如实告知用户）
- 部署：一个腾讯云账号（需实名，国内云服务的硬要求）

## 反馈

用着顺不顺手、哪个环节卡住了，欢迎开 issue 聊。部署和双端同步这两段的实际体验特别欢迎反馈——每个人的网络环境、设备组合都不一样，真实场景比文档想象得丰富。

## License

MIT · 生成的工作台属于你自己，随便改随便用。