WorkBuddy 工作台教程

01什么是 WorkBuddy 工作台

它是 WorkBuddy 帮你写出来的一个 HTML 文件。双击打开就是一个完整的应用： 能录数据、能算统计、能画图表、能导出备份。不需要装软件、不需要注册账号、不需要联网。

跟你熟悉的那些 App 的区别在于——它不在别人的服务器上。 你记的账、写的周报、刷题的错题记录，全部存在你自己浏览器的 localStorage 里。 文件可以放 U 盘、发微信、传给家人，对方双击也能用。

也正因为它只是一个文件，WorkBuddy 的角色是「写它的人」，不是「运行它的平台」。 生成完之后你把 WorkBuddy 关掉、卸载，工作台照样能用。

它适合什么，不适合什么

02动手前的三样准备

只有三件事，加起来不到三分钟。不需要装 Node、不需要配环境——工作台是纯 HTML，没有任何依赖。

1. 装好 WorkBuddy 客户端。 从 官网 下载对应系统的版本，装完登录即可。
2. 单独建一个空文件夹当工作区。 比如桌面上建一个 我的工作台，然后在 WorkBuddy 里打开这个目录。 工作台文件会直接写进这里。
3. 认三个位置。 下方的对话输入框（提示词贴这里）、输入框附近的模式切换（决定它动不动手）、 以及文件区与预览（产物出现的地方）。

03在 WorkBuddy 里的三条路

同一个「我想要个记账台」的需求，在 WorkBuddy 里有三种进入方式。 按你手上已经有多少东西来选——想得越清楚，越应该走可控度高的那条。

三条路不冲突，常见组合是先用「做同款」看一眼形态，再回本站生成完整提示词重做一版。 原因是「做同款」改的是别人的字段和规则，改到第三轮往往不如重开一次干净。

粘贴之前，先确认模式

WorkBuddy 有三种工作模式，生成工作台必须用 Craft。

一次贴完，还是分几次说

整段提示词一次性贴完，不要分批喂。 分三条消息说「先做记账」「再加预算」「再加图表」，等于让它做三次架构决策， 后加的模块会跟前面拼不到一起。内核契约、场景需求、皮肤词条必须在同一条消息里给全。

生成完之后的修改则相反——一次只提一件事。两个原则并不矛盾： 前者是让它一次看清全貌，后者是让它一次只动一处。

04五分钟做出第一个

下面这段提示词可以直接复制，做出一个「每日待办工作台」。 它已经内置了 Part 2 会讲到的关键要求，不用改任何字就能跑，先跑通一次再谈定制。

1. 在工作区里新建一个对话，确认模式是 Craft。
2. 复制下面整段，一次性粘进输入框，回车。
3. 等它写完。中途它会在工作区里创建 .html 文件，别打断。
4. 看预览，把四个 Tab 都点一遍。
5. 去工作区目录找到那个 HTML 文件，双击打开——这一步才算真正拿到手。

请生成一个「每日待办工作台」，交付为单个 HTML 文件，直接写到当前工作区目录。

【硬性要求】
1. 单文件交付：所有 CSS 与 JS 内联在同一个 HTML 里，不引用任何外部 CDN、字体或图片链接，断网双击也能正常打开。
2. 数据持久化：所有用户输入即时写入 localStorage，刷新页面、关闭浏览器后数据都还在。
3. 三端自适应：手机（宽度小于 640px）用底部固定四 Tab、内容单列；平板用顶部横向导航；电脑用左侧固定边栏、内容多列。所有可点击元素不小于 44×44px。
4. 图标一律使用内联 SVG，禁止使用 emoji。
5. 删除操作必须二次确认，确认文案要说清删的是哪一条；清空全部数据需要手动输入「清空」二字才执行。
6. 数据诚实：所有统计数字必须由真实录入的数据计算得出，不要编造。没有数据时显示空状态卡片，不要画假曲线。
7. 预置 3 条示例数据帮助理解用法，并在「我的」页提供「清除示例数据」按钮。
8. 「我的」页提供导出 JSON、导入 JSON、清空全部三个功能。

【四个 Tab】
- 今日：今天要做的事，可新建、可勾选完成、可设优先级（高/中/低），完成后划线并移到列表底部。
- 看板：本周完成率环形进度图 + 近 14 天每日完成数柱状图 + 三个核心数字（本周新增、本周完成、当前待办）。
- 周报：本周汇总文本（完成了哪些、还剩哪些、完成率），提供「一键复制」按钮。
- 我的：数据导出导入与清空，以及一段「如何添加到手机主屏幕」的说明。

【视觉】
浅色背景，主色墨绿 #1F6F5C。卡片用 1px 浅灰边框、不要阴影，圆角 12px。
间距只使用 4 / 8 / 12 / 16 / 24 / 32 六档。字号层级不超过四级。

第一次最容易卡在这五个地方

05产物在哪，怎么验收

WorkBuddy 不是把代码吐在聊天框里让你自己复制粘贴。它会在当前工作区目录里 真的写出一个 .html 文件，生成完直接给你预览。拿到之后按这四步验：

1. 预览里把每个 Tab 点一遍，先看有没有明显缺失或报错
2. 随便录两条数据，然后刷新页面——这一步单独就能筛掉最致命的那类翻车
3. 去工作区目录找到那个 HTML，双击用浏览器打开，确认脱离 WorkBuddy 也能跑
4. 把文件发到手机上，用手机浏览器再开一次，顺手加到主屏幕

怎么把它变成随手能开的东西

验收通过之后，花一分钟把入口做好，否则你大概率不会用第二次：

• 电脑——把 HTML 拖进浏览器书签栏，或者右键发送快捷方式到桌面
• 手机——发到微信文件传输助手，用手机浏览器打开后选「添加到主屏幕」，图标跟 App 一样
• 换设备——数据不会跟着文件走。在旧设备「我的」页导出 JSON，到新设备打开后导入

06在对话里改它

生成完不满意，不用重来。直接用大白话补一句就行，WorkBuddy 会在现有代码上改。

几条实际操作上的注意

不用重新贴提示词，也不用把 HTML 内容复制给它。在同一个对话里直接说上面那句话， WorkBuddy 会打开那个文件、改掉对应部分、重新保存，你已录入的数据和结构都保留。

• 换了新对话——先把文件名或路径告诉它，再提修改，否则它不知道你说的是哪个文件
• 每改一次，重验一次——重复「录两条 + 刷新」这个动作，改动有可能碰坏存储逻辑
• 怕改崩——动手前先在工作台里导出一次 JSON，或把 HTML 复制一份留底
• 越改越乱时果断重开——同一个文件改过五六轮后，不如带着这几轮想明白的需求重新生成一版

07为什么生成的总是很简陋

Part 1 那段提示词有八条硬性要求，看着啰嗦。这一节解释为什么必须写那么细—— 因为只要少说，你会拿到这样的东西： 刷新数据没了、手机上排版错乱、删错了没法撤销、图表里的数字是编的。

原因不是模型不行，是三件事你没说。

第一：你没说隐性要求

「数据要存下来」「删除要二次确认」「手机上要能用」——这些在你脑子里是常识， 但对 AI 来说，你没提就等于不需要。它会按最省事的方式实现。

第二：你没说功能到底有哪些

「记账本」三个字，AI 只能猜。它猜的版本通常是：一个输入框、一个列表、一个总计。 而你心里想的是：分类、预算预警、月度对比、大额标记、临期账单、可导出的月报。 你想要六个模块，只说了一个词，得到一个模块，很公平。

第三：你没给视觉规范

说「做得好看点」等于什么都没说。说「主色用墨绿」也只解决了 10%—— 剩下 90% 是卡片长什么样、按钮多大圆角、间距用几档、列表项怎么排、 空状态怎么画。这些不给，AI 就每个元素随手写一遍样式，结果必然是拼凑感。

08九条内核契约

这九条是所有工作台的公共底座，与场景无关。不管你做记账台还是刷题台，都该有。 缺任何一条，产物都会在两周内被你自己弃用。

契约正文（直接复制用）

把下面这段粘在你提示词的最开头，再接场景需求。这段不要删减、不要总结。

载入中…

09四段式信息架构

绝大多数个人工作台都能套进同一个结构。直接用，能省掉大量设计决策， 也能让你在不同工作台之间切换时不用重新学。

为什么是这四个

• 今日承载 90% 的日常使用，必须是首屏，且能直接完成操作
• 看板满足「我到底做得怎么样」的心理需求，是留存关键
• 周报把工具变成习惯——有复盘才有持续使用，生成的文本还能直接发群或交给领导
• 我的让你对数据有掌控感，敢于长期投入

场景不需要周报时，可以换成「设置」或场景特有模块。 但顺序不要动：高频在前，低频在后。

10需求文档六要素

想自己写场景需求？按这六项写，字数控制在 1500–3000 字。 本站 48 个场景文档全部是按这个格式写的，平均 2600 字。

关键在第 4 和第 5 项

大部分人写到第 3 项就停了，于是 AI 只能自由发挥计算逻辑， 做出来的统计不是你想要的。举个例子——同样是「预算进度」：

• 没写规则：AI 画一个进度条，超了变红。
• 写了规则：低于 80% 绿色、80–100% 琥珀色并提示还剩多少、超过 100% 红色并显示超支金额；退款记录参与抵扣但不计入笔数；大额支出（超过月预算 15%）单独标记。

后者才是你真正想要的东西，而它只多写了三行字。

11皮肤为什么不能只给色号

「主色用 #1F6F5C」——这句话解决的问题不到十分之一。 AI 拿到色号后，卡片圆角、边框粗细、阴影深浅、内边距、字号层级、按钮态、 列表分隔方式，全部还是它自己随手决定。每个元素随手决定一次，结果就是拼凑感。

组件级规范长什么样

合格的皮肤词条，除色值外还必须交代这四类组件的具体样式：

再加上间距尺度（比如统一用 4 / 8 / 12 / 16 / 24 / 32 六档）和 一个记忆点（这套皮肤最识别的那个细节，比如手账皮肤的纸纹和胶带， 终端皮肤的等宽字体和光标闪烁）。

12六种常见翻车

这六种是最高频的。每种都附上一句话补救指令，生成完不满意直接补一句，不用重来。

13质量自检清单

工作台生成后按这 12 条过一遍，全部通过才算合格。勾选状态会自动保存在你的浏览器里。