用 WorkBuddy 从零做一个「手机能填的尝药记录卡」网页（附 3 个真实踩坑）

#WorkBuddy# 记录一次完整的"说一句话 → 拿到能用的网页工具"的过程。适合中医临证、习惯打卡、课程日志这类轻量场景。

一、背景：我要解决什么

我在上中医临证课，每味药都要记录"尝药体感"——味道、力量走到身体哪里、是扩张还是收束。老师要求随身记，但纸笔记完难整理，Excel 又太重。

我的需求其实就一句话：

"做一个手机能打开、能填、能保存的尝药记录卡片网页。"

以前这种事我得自己学 HTML、配服务器、折腾部署，起码一两天。这次我全交给 WorkBuddy 了。

二、我怎么下指令

直接把想要的板块用大白话列出来发给它：

• 基础信息（药名/方剂、三焦归属）
• 煮药流程（观察→泡药→煮药→尝药，含体感 Checklist）
• 记录区（身心状态、尝药前后对比、古代医家记载）
• 底部三个按钮：保存 txt、导出图片、清空重填

关键：把字段和流程讲清楚，AI 执行就越准，不用反复改。

三、WorkBuddy 做了什么

1. 生成了一份完整的单页 HTML（卡片式 UI，绿色国风配色）
2. 修复了源码里几处会导致保存功能报错的脚本问题
3. 把"导出图片"从会失效的方案换成 html2canvas，保证手机能一键出 PNG
4. 帮我部署成可访问的网页，手机直接打开就能用

最终成果：手机浏览器填完 → 点「保存为文本」存成 txt，或点「导出为图片」存成 PNG 长图，还能「添加到主屏幕」当 App 用。

四、三个真实踩坑（重点）

踩坑 1：在预览里点按钮"没反应"

现象：页面里"保存/导出/清空"三个按钮点了毫无反应。 原因：在应用内置的预览环境里，浏览器的弹窗和下载会被安全策略拦截，不是代码坏了。 解决：把提示改成页面内的轻提示框，下载加复制降级方案，不依赖系统弹窗。 启示：给 AI 提需求时，顺口说一句"要在手机浏览器里也能用"，它能提前避开这类坑。

踩坑 2：微信里打不开 HTML 文件

现象：把 HTML 发到微信，点开只有"用其他应用打开"，没有浏览器选项。 原因：微信出于安全限制，不给 HTML 文件提供"在浏览器打开"。 解决：改用局域网访问——电脑起一个本地服务器，手机连同一 WiFi 输网址打开；或者从手机"文件管理"里用浏览器打开。 启示：HTML 工具想分享给手机用，最稳的是给个网址，而不是传文件。

踩坑 3：传到托管平台后"导出图片"失效

现象：把网页传到免费托管平台，手机打开后图片导不出来。 原因：导出功能依赖一个 JS 库，页面用相对路径引用它；我只传了 HTML 单文件，库没一起传，浏览器找不到就 404 了。 解决：让 WorkBuddy 把那个库直接内联进 HTML，做成完全自包含的单文件。这下传到任何地方、离线都能导出，不再依赖外部文件。 启示：要传到外部托管的页面，所有依赖必须内联，不能靠相对路径外链。这条经验值千金。

五、成果 & 怎么用

• 电脑/手机浏览器打开网页 → 填写 → 保存 txt 或导出 PNG
• 手机「添加到主屏幕」→ 桌面生成图标，以后点开即用
• 整个文件是自包含的，发给谁、传到哪都能跑

六、总结：WorkBuddy 适合什么

对我这种会描述需求、但不想写代码的人来说，它最香的是：

• 一句话出原型，不用搭环境
• 真能操作文件、部署、改 bug，不是只给建议
• 踩坑了它能顺着你的使用场景一起解决（手机/微信/托管都考虑到了）

如果你也有"想做个小工具但懒得学前端"的需求，直接把要的字段和流程告诉它就行。

本文为 #WorkBuddy# 真实使用记录，案例即本人正在用的尝药记录卡。