DELIVERY SPEC · v2.0

WorkBuddy 交付规范

一份文档,三个出口:MD 存档 · HTML 阅读 · 在线链接分享。生成即发布,链接直接可用。

更新于 2026-09-18 · 适用所有正式交付物 · 线上域名 docs.nizen.cc
0
交付出口
0
远峰蓝色阶
0
克制动效
0
上传方式
01 · 交付三件套

每次交付,产出三样东西

MD 用来存档和二次编辑,HTML 用来阅读和大屏展示,在线链接用来分享——尤其是发到手机上随时看。三者内容一致,缺一不可。

出口作用去向必需
Markdown存档、二次编辑、喂给其他 AI本地工作区必需
HTML阅读、打印、大屏展示本地工作区必需
在线链接分享、手机阅读、对外发布https://docs.nizen.cc/d/必需
铁律:做完 HTML 不要停在"文件已生成"。默认接着问一句「要不要传到 docs.nizen.cc」,拿到链接才算交付完成。
02 · 视觉规范

远峰蓝 · 苹果式简约

大留白、色块分明、浅色主题。所有 HTML 交付物统一基于模板 report_template_v1.html 生成,不许各写一版样式。

主色 · 远峰蓝 9 级

300 档为基准色,大色块用 50–200,标题用 700–800,操作主色用 500。

50#F3F7FB
页面底色
100#E4EDF5
浅底块
200#C9DCEA
大色块
300#A7C1D9
基准色
400#7FA0BF
次级强调
500#5C7FA3
操作主色
600#456685
正文强调
700#324E68
标题
800#223649
重标题
远峰蓝 #5C7FA3 雾青 #5E8F85 云紫 #7A6FA3 暖沙 #C0966B 成功 #5A9B72 警告 #D9A13B 危险 #C9645B

多系列图表取色顺序:深蓝 → 远峰蓝 → 雾青 → 云紫 → 暖沙。金融场景按国内惯例:涨用红、跌用绿。

色阶亮度分布

九级阶梯均匀下降,保证层次可辨

浏览器不支持图表

亮度梯度曲线

平滑过渡,无断层跳变

浏览器不支持图表
版式:内容宽度 1080px,圆角 18px,卡片阴影 0 2px 12px rgba(34,54,73,.06)。桌面顶部吸顶导航,手机左侧抽屉导航。
03 · 动效标准

克制动效,只做这 6 件事

  1. 进场渐显 — IntersectionObserver 触发,.revealdata-d="1..4" 做交错延迟(0.08s 递增)
  2. 数字滚动 — 指标卡用 data-count / data-prefix / data-suffix / data-decimals,1100ms easeOutCubic
  3. 悬浮反馈 — 卡片与指标卡 hover 抬升(translateY −2px + 阴影加深)
  4. 图表缓动 — Chart.js 统一 duration:900, easing:"easeOutQuart",进入视口才绘制
  5. 阅读进度条 — 顶部 2.5px 渐变条,随滚动推进
  6. 导航下划线 — 桌面端 hover 时下划线由左展开(0 → 100%)
无障碍:全部动效必须写在 @media (prefers-reduced-motion: reduce) 里降级或关闭;图表绘制用 try-catch 包住,Chart.js 挂了也不能影响正文阅读。
踩过的坑:① HTML 里禁止保留 cdnjs 等外链 Chart.js——手机网络取不到 CDN 会阻塞后续脚本,导致 .reveal 元素全部空白(只剩 Hero 可见);② 图表段 JS 有语法错误时页面会静默降级——卡片看得见但数字停在 0、图表空白。对策:交付前跑 inline_chartjs.py,它自动内联并对每个 <script> 块执行 node --check 语法自检,有错立即报出来,不给静默挂掉留机会。
04 · 线上发布

上传到 docs.nizen.cc

恺哥自己的服务器,域名 https://docs.nizen.cc,文档统一落在 /d/ 目录,索引页自动维护。

方式一 · 本机上传(WorkBuddy 自己用)

走 SSH 密钥免密的 scp,不需要 FTP,也不开新端口。

PY="C:/Users/Administrator/.workbuddy/binaries/python/versions/3.13.12/python.exe"
S="C:/Users/Administrator/.workbuddy/skills/publish-html-to-server/publish.py"

"$PY" "$S" <html绝对路径> --name <英文短名> --title "<中文标题>"

输出两行:OK https://docs.nizen.cc/d/<短名>.htmlIDX https://docs.nizen.cc/--name 决定网址,用英文或拼音,链接更短;--title 是索引页显示的中文标题。

连续项目放子目录:--dir d/项目名 --dir-title "项目中文名",如 --dir d/jinrishengcai --dir-title "今日生财",索引页按目录分组显示。删除:publish.py <html> --delete d/xxx.html,索引页自动刷新。

方式二 · HTTP 接口(其他 AI、手机、任何设备)

浏览器打开 https://docs.nizen.cc/_upload 是网页上传页:填口令 → 选文件(可拖拽)→ 填标题 → 发布。

上传网址https://docs.nizen.cc/_upload 上传口令pXRWBWfG2oSHSr2qlIP9Vok15YYjFytB 文档链接https://docs.nizen.cc/d/<短名>.html 索引页https://docs.nizen.cc/
curl -X POST "https://docs.nizen.cc/_upload?token=pXRWBWfG2oSHSr2qlIP9Vok15YYjFytB&name=my-report&title=我的报告" \
  --data-binary @report.html -H "Content-Type: text/html"

返回:

{"ok": true, "url": "https://docs.nizen.cc/d/my-report.html", "index": "https://docs.nizen.cc/", "docs": 12}

要点:body 直接是 HTML 原文,不走 multipart,任何能发 HTTP 请求的环境都能用;走 443 端口,无额外端口;口令也可放请求头 X-Upload-Token;单文件上限 25MB,只收 .html;口令错误返回 {"ok": false, "error": "bad token"}

子目录:&dir=d/项目名&dir_title=项目中文名列表:GET /_list?token=TOKEN删除:POST /_delete?token=TOKEN&file=d/xxx.html——浏览器上传页同样有删除区,选中文档确认即删,索引页自动刷新。

图表库策略 · 内联优先,自家域名外链可选

  1. 默认:内联python inline_chartjs.py <html路径>。单文件自包含,离线、微信传文件、任何网络环境都能打开,最可靠。
  2. 批量场景:自家域名外链python inline_chartjs.py <html路径> --remote。引用 https://docs.nizen.cc/vendor/chart.umd.js(已部署在服务器),浏览器缓存一次全站复用,每份文档省 205KB。适合一次交付一大批文档。
取舍:不要"外联 cdnjs + 内联"两头保留——双倍体积且 cdnjs 阻塞风险依旧;也不要外链 cdnjs——国内移动网络经常取不到。自家域名外链比 cdnjs 可靠得多,但服务器不可达时图表会静默消失(try-catch 兜底,正文不受影响),所以重要交付物仍建议内联。
05 · 速查卡

照着做就不会错

  1. 生成内容 → 同时产出 .md.html
  2. 套模板 → 基于 ~/.workbuddy/templates/report_template_v1.html,配色动效不另起炉灶
  3. 内联 Chart.jspython ~/.workbuddy/scripts/inline_chartjs.py <html路径>(自动 node 语法自检;批量文档可加 --remote 引用自家域名库)
  4. 上传取链 → 本机用 publish.py,其他环境用上面的 curl
  5. 回复用户 → 给出在线链接 + 本地文件路径,索引页顺手带上
  6. 连续项目 → 放 d/项目名/ 子目录并传 dir_title(如「今日生财」),索引页自动分组;删除用接口或上传页,索引页自动刷新
资产清单:模板 ~/.workbuddy/templates/report_template_v1.html · 内联脚本 ~/.workbuddy/scripts/inline_chartjs.py · 发布技能 ~/.workbuddy/skills/publish-html-to-server/(含 publish.py、server.py、nginx 配置、systemd 配置、token)