# Bys Personal Dashboard

> 不一书个人工作台生成器。通过一场引导式访谈，帮用户（包括完全不懂代码的人）做出一个属于自己的手机端个人工作台—— 左侧常驻功能栏、右侧卡片流，打开就是今日计划、打卡、记账、体重、日程、单词、树洞等自己每天真正要用的东西， 可以部署上线并添加到手机桌面，像一个 App 一样用。 当用户说"初始化不一书个人工作台生成器"、"初始化 bys-personal-dashboard"、"我想做一个自己的个人工作台"、 "抖音上那种个人工作台我也想要一个"、"把我的日常安排做成一个手机页面"时必须触发； 即使用户只是丢来一张别人的工作台截图说"我也想要这种"，也应触发。 已有工作台后说"给我的工作台加个XX功能"、"工作台换个配色"、"工作台改一下"时，走迭代流程而不是重新初始化。 用户没说"工作台"这个词时，用三个特征判断：①在手机上用 ②每天都会打开 ③装的是用户自己的私人数据 （体重、账目、打卡、待办、日记）。三个同时成立就该触发，比如"我想把体重记账待办整理到一个地方、 手机上能点开"——这就是工作台，只是用户不知道这个叫法。三个缺任何一个都不要触发。 功能只有一个也算——"我老忘记吃药，想每天在手机上勾一下"就是种子需求，别因为"听起来只是个小功能"就不触发。 判据是数据属于谁，不是数据存在哪：用户自己的记账 Excel 想做成手机上每天看的页面，是工作台；公司销售数据做报表，不是。 不用于：用完就走、不存个人数据的小工具页（抽奖转盘、计算器、放在活动大屏或直播间给别人看的倒计时）、 后台管理系统、 给团队用的多人协作工具、个人博客/作品集/对外展示的个人官网（那些是给别人看的，不是自己每天用的）、 公司或业务数据的报表看板（用 xlsx 之类的技能）、与个人工作台无关的普通 HTML 编码问题。

- Skill: `qkgecn93/bys-personal-dashboard` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add qkgecn93/bys-personal-dashboard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/qkgecn93/bys-personal-dashboard/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: qkgecn93 (https://skillmd.com/u/qkgecn93)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/qkgecn93/bys-personal-dashboard

---


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

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

本 Skill 引导用户完成一场结构化访谈，最终交付一个**属于他自己**的手机端个人工作台：功能是他自己的、风格是他自己的、数据存在他自己手机里、可以加到桌面每天打开。

## 核心原则

这七条是本 Skill 的灵魂，违反任何一条都会做出一个"看起来像但用起来烂"的东西。详细做法在各自步骤里。

1. **先聊需求，再给方案。** 用户面对"你想要什么功能"答不上来，面对"我理解你需要这 7 个，对不对"就答得很好。先开放式问他在忙什么、想记录什么，再归纳成清单让他删改——绝不上来就套通用模板。

2. **功能分三层，且当场说清代价。** 〔内容〕/〔本地〕/〔联网〕三类，实现代价差一个数量级（见 `references/feature-library.md`）。用户要"每日热点"时必须**当场**告诉他要自己申请 key、大概花多久，而不是做完了才说。

3. **公网上只放空壳，数据永远在用户自己手机里。** 架构铁律，不给用户选错的机会。个人数据（体重、账目、日记）只存 localStorage，别人拿到部署链接打开是个干净的空工作台。私有性由架构保证，不靠登录系统。

4. **风格靠真实 HTML 预览定，不靠文字也不靠生图。** 生图模型画的 UI 是"好看但实现不出来"的假图，制造预期落差。预览必须能在手机上真的打开真的点，且装的是**用户自己的功能**，不是占位文字。

5. **部署问场景，不问技术方案。** 别甩"EdgeOne / GitHub Pages / 本地"的三列对比表给小白，他没有判断依据。问"你打算怎么用"，由你翻译成方案（见 `references/deploy-guide.md`）。

6. **备份是默认功能，不是可选项。** 用户永远不会主动点"导出数据"，所以提醒必须内置在骨架里。

7. **产物是用户自己的。** 只在设置页底部留一行 `由 不一书个人工作台生成器 生成` 轻署名。

## 流程总览

```
0 判断入口（初始化 / 迭代）
   ↓ 初始化
1 开放式需求访谈  →  2 归纳功能清单
   ↓  🔴 CHECKPOINT 1 · 功能清单（判定条件见第 2 步）
3 起名 + 风格沟通  →  4 出 3 版真实 HTML 预览（带切换器）
   ↓  🔴 CHECKPOINT 2 · 风格定版（判定条件见第 4 步）
5 汇总确认单
   ↓  🛑 STOP · 最后一道可逆点（见第 5 步）
6 正式生成工程  →  7 本地验收
   ↓  🔴 CHECKPOINT 3 · 本地验收（判定条件见第 7 步）
8 部署引导（场景式提问）  →  9 加到手机桌面 + 换图标
   ↓
10 生成《工作台配置.md》，交付并告知怎么迭代
```

**四道闸门都要停下来等用户。** 标记只负责让你看见它们，真正决定放不放行的是各步写明的"什么算通过"——别只扫标记就往下走。

## 路径约定（全篇通用，含所有 references）

**`<skill>`** = 本 Skill 的安装目录。**动手前先解析出来**：Glob 搜 `**/bys-personal-dashboard/SKILL.md`，取它所在的目录。搜不到就直接问用户装在哪，**别凭猜测拼路径**——猜错会把 node_modules 装到错地方，或者报一堆 file not found。

**`<work>`** = 用户的工作台目录。**第 3 步起名之后立刻定下来**（第 4 步的风格预览就要落在这里），目录名取工作台全名：

> 我把工作台建在 `<当前文件夹>/小鹿的工作台/`，风格预览也先放这儿。可以吗？

确定后本次会话里固定，并写进第 10 步《工作台配置.md》第六节的「本地目录」。

- **`references/xxx`、`scripts/xxx`、`assets/xxx` 一律读作 `<skill>/` 下的对应路径。**
- **`<py>`** = 可用的 Python。动手前探测一次：依次试 `python3`、`python`、`py -3`，第一个能跑通 `--version` 的记下来，本次会话固定用它。Windows 上通常只有 `python`，硬写 `python3` 第一条命令就 command not found。
- **脚本在 `<skill>` 下执行**，目标目录当参数传。`npm install` 尤其必须在 `<skill>` 下跑——node 从脚本所在目录向上找模块，装在 `<work>` 里不生效，`node_modules` 还会跟着被拖去部署。
- **所有路径参数一律加双引号。** 用户名和目录名含中文或空格是常态（本机就是 `C:\Users\戏人间06\`），不加引号必挂。

各步细节按需读 `references/`，**不要一次性全读**：

| 文件 | 什么时候读 |
|---|---|
| `references/interview-guide.md` | 第 1-2 步，访谈问题库与归纳方法 |
| `references/feature-library.md` | 第 2 步，通用功能库与三层分类、门槛预警话术 |
| `references/style-guide.md` | 第 3-4 步，风格包定义与预览怎么做 |
| `references/build-guide.md` | 第 6 步，怎么用骨架生成工程、分区标记规范、拆分阈值 |
| `references/api-guide.md` | **第 2 步**用户提到联网功能时就要读（判断能不能做、门槛多高），第 6 步实现时再读一次 |
| `references/deploy-guide.md` | 第 8-9 步，三层部署方案与加桌面引导 |
| `references/sync-guide.md` | 用户说了「两台设备都要记东西」时读。单设备用户跳过 |
| `references/iterate-guide.md` | 第 0 步判定为迭代时，读这个而不是往下走 |

## 第 0 步 · 判断入口

先看用户当前目录（或用户指定的目录）里有没有 `工作台配置.md`：

- **有** → 这是迭代，读 `references/iterate-guide.md`，**不要重新访谈**。
  顺手看一眼 `index.html` 里有没有 `@media` 和 `Store.upsert`——都没有说明是旧版 Skill 生成的，
  按 iterate-guide 的「从旧版本升级」走（重建 + 数据自动迁移，用户数据一条不动）。
- **没有** → 这是初始化，发欢迎语后进入第 1 步。

欢迎语（保持这个调性，可微调）：

> 🗂️ **欢迎使用「不一书个人工作台生成器」！**
>
> 接下来我像产品经理一样陪你把这几件事聊清楚：你每天真正要盯什么、想记录什么、想让它长什么样。最后你会拿到一个**属于你自己**的手机工作台，加到桌面每天点开就用。全程不用懂代码，风格我会先出真实预览让你在手机上点着看，满意了再动工 🚀
>
> 先从最简单的开始：**你平时主要在忙什么？**（工作、学习、带娃、做自媒体、减肥……随便说）

**用户第一句就带了信息时**（"我是做自媒体的，想做个工作台"）——保留问候部分，**删掉最后那个问句**，改成复述他说的再往下问。当着用户的面问他刚回答过的问题很蠢，而带信息的开场恰恰是最常见的开场。

## 第 1 步 · 开放式需求访谈

读 `references/interview-guide.md`。核心是**先开放后收敛**：

先问 3 个开放式问题，让用户自己说：
1. 你平时主要在忙什么？
2. 每天有哪些事是你必须盯着、怕忘的？
3. 有没有什么是你一直想记录、但没坚持下来的？

再补 2 个定架构的轻问题（**这两个必须问，会反向决定架构**）：
4. 这个工作台你打算在**几台设备**上用？（一台 → 就现在这套；两台且都要记东西 → 要加双端同步，读 `sync-guide.md`。
   注意加了同步之后部署方式要改走 Git，比拖文件夹麻烦，这个代价现在就要说）
5. 里面会不会有你不想被别人看到的内容？（比如日记、体重、账目 —— 决定隐私处理方式）

一次只问一两个，别一口气抛五个问题。用户答得含糊就顺着追问一句，别追第二句。

用户答"你看着办"、连问两轮仍说不出场景、或需求根本不满足三特征——这三种卡壳的处理见 `interview-guide.md`「用户不配合时」，都要能往下走，别卡在原地反复问。

## 第 2 步 · 归纳功能清单

读 `references/feature-library.md`。把用户说的话翻译成一份**具体的、带分类标记的功能清单**，通常 6-9 个。完整格式和归纳规矩见 `interview-guide.md`「归纳成功能清单」，标记长这样：

> 1. ⚖️ **体重记录** — 每日体重 + 趋势曲线〔本地〕
> 2. 🔥 **每日热点** — 实时资讯〔联网 · **需要你申请一个 key，约 10 分钟**〕

**每条都标类型，联网型当场给门槛。** 别把代价藏起来——用户做完了才发现要申请 key，那是骗他。

再主动补 1-2 个他没想到但用得上的，**说明为什么推荐给他**。

> 🔴 **CHECKPOINT 1 · 停在这里。** 用户逐条确认清单前，不得进入第 3 步。
> 只回"嗯""好"不算通过——追问一句"有要删要加的吗"，拿到明确答复再走。

## 第 3-4 步 · 起名、风格沟通与真实预览

读 `style-guide.md`，起名部分见 `interview-guide.md` 第 3 轮。

**先起名。** 不能跳过，也不要替用户拍板——名字每天出现在侧边栏和桌面图标下面，随手起个「个人工作台」，用户会觉得这是通用模板不是他的。要问出全名、短名称（**≤4 字**，超了 iOS 显示省略号）、品牌 emoji 三样。话术和"用户说随便"时怎么办，见 `interview-guide.md` 第 3 轮。

**再聊风格。** 让用户在 8 个预置风格包里挑倾向（森系 / 极简 / 国风 / 二次元 / 科技·暗色 / 清爽蓝 / 暖棕·日系 / 夜安，见 `style-guide.md`），或者丢一张参考图，或者用自己的照片定色。**只问大方向和主色偏好就停**——圆角多大、阴影多重用户答不上来，那是预览环节的事。

然后按 `style-guide.md` 生成 `<work>/风格预览.html`（**一个**文件，内含 3 版，顶部带切换器），每版都用**用户真实的功能**做示例内容。

**生成后立刻用 `mcp__cowork__present_files` 交给用户**，附这段话：

> 三版都在这一个文件里，顶上可以切换。两种看法挑一个：
> - **电脑上**：点开文件，把浏览器窗口横着拖窄，就是手机的样子
> - **手机上**（更准）：把文件发给微信「文件传输助手」→ 手机上点开 → 右上角「···」→「用其他应用打开」→ 选浏览器
>
> 选好告诉我第几版。也可以混着说，比如"第二版的颜色 + 第一版的圆角"。

预览交付的两个分支：

- `present_files` 不可用（非 Cowork 环境）→ 把文件绝对路径念给用户让他自己双击，只给"电脑上"那条看法
- 用户说"打不开/是一堆代码" → 被文本编辑器接管了。让他右键 →「打开方式」→ 选浏览器。**这句要主动说，别等他卡住**

用户说"第二版的配色配第一版的圆角"——照做，重新出预览。

> 🔴 **CHECKPOINT 2 · 风格定版。** 等到用户说出"就这版"或等价表述才进第 5 步。
> 用户提任何修改就回第 4 步重出预览，不许带着"大概是这个意思"往下走。
>
> **改到第 4 轮还定不下来** → 停止重出。把用户历次提到的偏好归纳成一句话念给他听
> （"你想要更暖、圆角更大、别太花"），按这句话出**最后一版**，说明"这版我按你说的全调了，
> 我们先用它往下走，做完随时能改配色"。风格上无限打磨会耗光用户的耐心，而配色是后期改起来最便宜的东西。

选定版本的全部设计参数记下来，第 6 步写进工程的 CSS 变量。

## 第 5 步 · 汇总确认单

决策汇总成一张确认单：**名字（全名 / 短名称 / emoji）**、功能清单（含类型标记）、风格版本、数据存哪、要不要部署、需要用户自己申请的 key 清单。明确问"确认无误我就开始做，要改哪条现在说"。

> 🛑 **STOP · 这是最后一道可逆点。** 第 6 步之后返工成本 10 倍。
> 发出确认单全文后**停止输出、等用户回复**，不得自问自答继续往下做。

用户要改确认单上的某条，按类型回退，改完**重发完整确认单**，不要只回一句"好的已改"：

| 改什么 | 回哪一步 |
|---|---|
| 功能 | 回第 2 步。不用重出预览，配色不受影响 |
| 名字或配色 | 回第 4 步重出预览，重新过 CHECKPOINT 2 |
| 要不要部署 | 不用回退，第 8 步再定——这条本来就可以晚决定 |

## 第 6 步 · 生成工程

读 `build-guide.md`。用户选了联网功能时同时读 `api-guide.md`。

`<work>` 第 3 步已定，直接用（目录非空时按「红线」先问用户）。从 `assets/skeleton/` 出发，产出三文件极小工程：

```
<work>/
├── index.html      # 界面 + 逻辑全内联，含 Store 抽象层、设置页、备份、周复盘
├── manifest.json   # PWA，加桌面必需
├── icon.png        # 桌面图标
└── edge-functions/api/sync.js    # 只有开双端同步时才要，单设备删掉
```

**单设备用户**：删掉 `edge-functions/` 整个目录、`package.json`、骨架里的 `==== 双端同步 ====` 分区、
设置页的 `==== 双端同步卡片 ====` 分区。四处都要删。

**双端用户**：同步后端依赖一个 npm 包，所以**部署方式必须从「拖文件夹上传」换成「从 Git 仓库导入」**，
否则依赖装不上、函数一调就挂。这件事要在用户决定加同步的那一刻就讲清楚，不能等做完了才说。
话术和步骤见 `sync-guide.md`。（平台另一种叫 KV 的存储不用 npm 依赖，但开通要么被企业套餐拦下、要么要用户填
「预期查询率 QPS」这种他不该懂的表单。别提它的存在。）

前两个从 skeleton 复制后替换占位符，icon.png 用脚本生成（用主题的侧边栏色打底 + 工作台名首字，跟整体风格自动一致）：

```bash
"<py>" "<skill>/scripts/make_icon.py" --out "<work>/icon.png" --bg "<sidebar色值>" --text "<名字首字，1-2字>"
```

脚本会在系统临时目录留一张 60px 预览，用来确认图标缩小后还认不认得出。认不出就换个字或换做法。

生成后**删掉 `<work>/风格预览.html`**——使命在 CHECKPOINT 2 已结束，留着会被一起拖去公网。

**硬性要求完整清单在 `build-guide.md`「硬性规范」，全部照做。** 最容易忘、且忘了就是隐性 bug 的三条：

- **数组型数据必须用 `Store.upsert / softDelete / list`，不许用 `set` 整包覆盖**——
  整包覆盖在双端下会丢数据（后上传的把另一端的改动无声吞掉）。计数器用 `incr/decr`，
  它内部存成事件列表，因为一个数字没法正确合并
- 单值配置才用 `Store.get/set`；数据读写一律不许裸 `localStorage.xxx`
- 每个功能用分区标记包裹（`<!-- ==== 功能：记账 START ==== -->`），否则以后迭代定位不到
- API key 走 `Store.setSecret`，**必须排除在备份导出之外**，否则用户转发备份时 key 跟着泄漏

生成后跑验收脚本（`npm install` 必须在 `<skill>` 下跑，原因见「路径约定」）：

```bash
# macOS / Linux
cd "<skill>" && npm install jsdom                          # 只装一次
"<py>"  "<skill>/scripts/validate_dashboard.py" "<work>"   # 静态检查
node    "<skill>/scripts/smoke_test.js"         "<work>"   # 冒烟测试
```
```powershell
# Windows PowerShell 5.1 不支持 &&，第一条要分两句
cd "<skill>"; npm install jsdom
```

占位符残留、分区标记不闭合、route 指向不存在的页面、`Util.esc` 漏了导致 XSS、API key 被导出进备份——这些肉眼复查都会漏，脚本不会。

**跑不动或不通过时怎么办**（这是唯一的质量闸门，但它建在别人的环境上，断了必须有路走）：

| 情况 | 怎么办 |
|---|---|
| `<py>` 三个都失败 | 跳过静态检查，改对照 `build-guide.md`「生成后自检」逐条人工核对，**交付时明说"没跑自动检查"** |
| `make_icon.py` 报缺 Pillow | 按脚本提示装。装不上就把 `<skill>/assets/skeleton/icon.png`（默认灰底图）复制过去，说"图标先用默认的，想换随时说"。**别为一个图标卡住整个交付** |
| `npm install jsdom` 失败或超 2 分钟 | 不要重试第三次。跳过冒烟测试，原话告诉用户："逻辑没跑过自动测试，麻烦在浏览器里多点几下，特别是输入后刷新看数据还在不在" |
| 脚本报 **error** | 必须修。同一条修 **3 次**仍不过 → 停止盲改，把脚本原始输出贴给用户，说明卡在哪、试过什么 |
| 只报 **warn** | 可以交付。逐条转述给用户，让他决定要不要处理 |
| 两个都没跑成 | **不进入第 8 步部署**。先让用户在电脑上完整试一遍：每个功能输入一次、刷新、确认数据还在 |

## 第 7 步 · 本地验收

让用户在电脑浏览器里打开 index.html 看一眼，重点确认：功能都在、配色对、能真的输入和保存（刷新后数据还在）。

有问题就改，改完重跑验收脚本。

> 🔴 **CHECKPOINT 3 · 本地验收。** 让用户明确回答三个问题：
> 功能全不全 / 配色对不对 / **输入一条数据再刷新，还在不在**。
> 三个都是"是"才进第 8 步。第三个必须真的让他试一次——数据存不住是最伤的 bug，而它在只看不点的时候完全看不出来。
>
> **答"不是"时**：配色不对 → 只改 CSS 变量，不用重出预览；功能缺 → 回第 6 步补，补完重跑脚本；
> **刷新后数据不在** → Store 写坏了，查 `Store.set` 有没有真落盘，修完让用户再试同一条数据。同一症状修 3 次不过，把控制台报错贴给用户。

## 第 8-9 步 · 部署与加桌面

读 `deploy-guide.md`。

**先问场景，不问技术方案。** 用 `deploy-guide.md` 开头那段三选一话术原文问（"你打算怎么用它"→ 先看看效果 / 每天手机上用 / 手机电脑都要），按用户选的那条走对应章节。**不要把三条路的细节一次性全铺出来**——小白面对技术对比表只会关掉。

部署完成后引导加桌面（iOS 和安卓步骤不同，微信内置浏览器不行，必须先在 Safari/Chrome 里打开）。用户想换图标就按 `build-guide.md` 的「图标生成」做（`deploy-guide.md` 只讲 iOS 图标缓存那个坑）——用户配了生图模型就调 `baoyu-image-gen`，没配就用 `make_icon.py` 的纯色+文字方案重生成。

**部署最容易让人放弃，卡住就果断降级**，别把人耗在注册流程里。五种常见卡点（实名认证过不去、404、白屏、找不到「添加到主屏幕」、反复卡住）的处理见 `deploy-guide.md` 的「部署卡住时」一节，其中最重要的一条：**任一环节卡超过 2 次就退回 L0**——部署随时可以改天再做，热情耗光了就回不来了。

## 第 10 步 · 交付与配置文件

在用户的工作台目录里生成《工作台配置.md》（模板见 `assets/配置模板.md`），记录：功能清单、风格参数、数据结构、已配置的 API、部署地址。

**这份文件是第二次的入口。** 交付时告诉用户：

> 以后想加功能或者改样子，直接跟我说"给我的工作台加个喝水提醒"就行，我会读这份配置接着改，不用重新聊一遍。

最后用 `mcp__cowork__present_files` 把 index.html 和配置文件呈现给用户。

## 红线

上面七条核心原则说的是"该怎么做"。下面这几条是**不可逆的越权动作**——犯了不是做得不好，是造成实际损失：

- ❌ **脚本没跑成却说"已测试通过"** → 他会带着没验证过的东西去部署，出问题更难查
- ❌ **替用户注册账号、填实名认证、创建 API key** → 这些绑他的身份和钱，只能他自己动手
- ❌ **覆盖已有的 index.html 或《工作台配置.md》** → 配置文件是迭代入口，覆盖一次毁掉全部改动历史。目录非空时先问
- ❌ **把 API key 或同步密码写进代码、配置文件、聊天记录** → 一旦进了待部署文件或被截图，只能去平台吊销重申请。它们只能待在浏览器的 `bysdash$secret:` 里
- ❌ **把示例假数据留在交付包里** → 用户第一次打开看到别人的账目，会以为数据串了
- ❌ **数据写死在代码里再部署到公网** → 等于把用户的日记发布到互联网
- ❌ **自问自答跨过 CHECKPOINT** → 四道闸门的意义就是不让你替用户拍板
- ❌ **给同步接口加定时轮询** → 每 30 秒一次，一台设备一个月八万多次调用，会烧掉用户的免费额度