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 秒一次，一台设备一个月八万多次调用，会烧掉用户的免费额度