

> **行业与岗位**：软件开发 · 内容运营 / 知识整理（个人知识管理场景）
> **使用产品**：Tencent WorkBuddy（PC 端）
> **一句话总结**：第三次手搓"金句长图"之后我意识到这件事不该再手搓了——把它写成 Skill，现在丢一个链接就能产出一份断网也能打开的单文件 HTML。

---

## 一、背景：第三次做同一件事时我停下来了

我有个习惯：读到好的长文、访谈稿、书，会挑十几句金句，配图做成一份长图存档，方便以后回看也方便分享。

前两次我都是临时跟 WorkBuddy 说一句"把这篇做成金句长图"，然后现场跟它磨：金句要多少句、解读写多长、图什么风格、怎么保证打开就能看。每次都能做出来，但每次都要重新对齐一遍标准，而且**每次都会踩同一个坑**——图片文件名冲突、体积爆炸、或者打开时发现图全裂了。

第三次的时候我换了个说法：

> "这件事我已经做过三次了，你把整套流程固化下来，下次我只给你一个链接。"

于是有了这个 Skill：**金句手绘解读长图**（内部名 `quote-sketch-scroll`）。

---

## 二、输入材料

| 材料 | 形式 | 说明 |
|---|---|---|
| 原文 | 公有领域文本 / 链接 / 本地文件 | 本次示例用的是《把信送给加西亚》（哈伯德，1899），已过版权保护期 |
| 版式偏好 | 对话 | 极简、浅色、衬线大字、卡片分区、开头带封面 |
| 交付硬要求 | 对话 | **单文件、图片全部 base64 内联、无任何外部资源、断网双击可开** |
| 环境 | 本地 | Python + Pillow，用于图片压缩与 base64 编码 |

**纳入工作空间的内容**：一个输出目录（`content.json` + `images/` + 最终 HTML），以及 Skill 自身的 `SKILL.md`、`scripts/`、`assets/`、`references/`。

---

## 三、WorkBuddy 配置

### 3.1 自建 Skill（核心）

Skill 的目录结构和职责分工是这样的：

```
~/.workbuddy/skills/金句手绘解读长图/
├── SKILL.md                      # 流程定义：4 步 + 校验清单
├── assets/
│   ├── scroll_template.html      # 版式模板（:root 变量可调配色字号）
│   └── example-content.json      # 内容结构样例
├── references/
│   ├── content-schema.md         # content.json 字段规范
│   └── image-prompting.md        # 配图风格后缀 + 隐喻范式表 + 三个坑
└── scripts/
    ├── prepare_images.py         # 压缩 + 转 base64（--width 默认 860）
    └── build_scroll.py           # 渲染 HTML + 外部资源引用自检
```

**我特意把"判断"和"执行"分开**：金句提炼、解读撰写、配图隐喻设计这类需要判断的活留给模型；图片压缩编码、HTML 渲染、资源引用检查这类确定性工作写进 Python 脚本。**脚本不会累、不会忘，而模型每次都可能漏掉校验这一步。**

### 3.2 图像生成能力

每句金句配一幅铅笔素描手绘，`size = 1024x1536`，风格统一为纯白纸背景、黑白灰、无文字。

`references/image-prompting.md` 里定死了两件事：

- **风格后缀**：所有 prompt 共用同一段风格描述，保证 18 张图看起来是一套；
- **隐喻范式**：偏好「画缺席，不画存在」——比如金句是"他没有问：他在哪里？"，配图不画人，画一只摊开的手掌托着一封没有地址的信。

### 3.3 本地文件读写

全程不依赖任何在线服务：原文本地读取、图片本地生成、HTML 本地渲染。这也是"断网可开"这个硬要求能成立的前提。

### 3.4 MCP / 连接器

本次未使用。**能不用就不用**——链路越短，出问题的地方越少。

---

## 四、操作步骤

### Step 1｜拿到原文，并且必须是可核对的原文

Skill 里第一条硬性规定：

> 只有书名/人名时，先联网找在线全文，**至少要抓到可核对的原文段落再动手，不要凭记忆编金句**。

这条是我踩过坑之后加的。模型对"名著名言"的记忆非常不可靠，容易生成听起来很像但原文里根本不存在的话。**金句必须是原文里真实存在的句子**，删减时用破折号或省略号衔接，并在文末 colophon 里说明。

本次示例我从哈伯德同名正文 + 罗文自述《如何把信送给加西亚》两个源交叉取材。

### Step 2｜提炼 18 句，四条筛选标准

| 标准 | 说明 |
|---|---|
| 有锋芒 | 读完会停一下的句子，不是正确的废话 |
| 能独立成立 | 脱离上下文也读得懂 |
| 主题不重复 | 18 条覆盖 18 个不同的切面 |
| 尽量用原话 | 必须删减时显式标注 |

每句配四样东西：编号 `01`…`18`、两到四字的主题（格式「关于 XX」）、原话、**120–160 字解读**。

解读的写法我写死成 **背景 → 张力 → 为什么重要** 三段式，并且明确要求：**不要复述金句的字面意思，要写出读者自己读不出来的那层东西**——它出现的具体场景、它反驳了什么、它为什么今天还成立。

举个例子，第 01 句：

> **金句**：美国总统将一封写给加西亚的信交给了罗文，罗文接过信后，并没有问：「他在哪里？」
> **解读**：全书被记住的第一件事，不是罗文后来走了多少路，而是他没有问出的那一个问题。哈伯德刻意省去送信的细节，只留下这个瞬间——接到任务的那一刻，罗文的沉默比任何回答都响亮。所谓执行力，往往不是能力问题，而是接下信的那一刻，你心里升起的是问题，还是路径。

最后落成 `content.json`（本次约 11 KB，含 meta、18 条 quotes、epilogue、colophon）。

> ![图1｜content.json 文件结构（真实运行产出，含 18 条金句 + 尾声图 + meta 元信息）]![p2-01.png](https://developer.qcloudimg.com/http-save/yehe-5476374/eb274aaa976ff40f3708842f86d2b34b.png)

### Step 3｜配图：三个必须避开的坑

这一段是我在前两次手工做的时候反复踩的，`references/image-prompting.md` 里专门列出来了：

1. **同秒文件名覆盖** —— 批量生成时多张图可能落到同一个默认文件名上，前面的被后面的覆盖掉。**处理办法：每批最多 6 张，生成完立刻 `mv` 成 `q01.png … qNN.png`，不要攒到最后一起改名。**
2. **右下角水印** —— 需要检查并在 prompt 里规避。
3. **体积爆炸** —— 18 张原图直接 base64 内联，HTML 会大到打不开。**处理办法：`prepare_images.py` 先压到 860px 宽再编码。**

另外一条规矩：**配图效果无法自查时不要编。** 如果当前环境读不了图片，就如实告诉用户"配图已生成但没能亲眼核对，麻烦你看一眼，哪张不合适我重画"，不要凭空断言"质量很好"。

> ![图2｜images/ 目录：18 张金句素描 + 1 张尾声图，共 19 张 PNG（q01-q19）]![p2-02.png](https://developer.qcloudimg.com/http-save/yehe-5476374/2a6973861f62da5455b012245cd4ca30.png)

### Step 4｜组装 + 校验（这一步我要求必须执行，不许跳）

```bash
python scripts/build_scroll.py \
  --content content.json \
  --images images/data_uris.json \
  --out 输出.html
```

校验清单四条：

- 脚本必须输出 `外部资源引用检查: 通过（无）`
- 再 `grep` 一次 `src="http|<link|@import|url\(`，应当无匹配
- `<img` 数量 = 金句数 + 尾声图
- 实际打开预览看一眼，**不能只看脚本说通过**

**为什么校验要写进 Skill 而不是靠自觉**：我第一次手工做的时候，脚本报了成功我就发出去了，结果对方打开是一片裂图——因为有一张图的外链还没转成内联。那次之后我把"grep 一遍外部引用"写成了强制步骤，并且让 `build_scroll.py` 自己先做一次自检。

> ![图3｜build_scroll.py 终端执行：JSON 校验 + 阶段输出 + 单文件 HTML 校验通过]![p2-03.png](https://developer.qcloudimg.com/http-save/yehe-5476374/b6ff8e53534db97af45d0125cfe7a3ed.png)

### Step 5｜成品

最终得到一个 **2.0 MB 的单文件 HTML**：封面区（原著 / 首发 / 取材 / 体例）+ 18 张卡片式金句图文 + 尾声 + colophon，**双击即开，断网可看，无任何外部依赖**。

---

## 五、产出物

| 产出 | 规格 | 说明 |
|---|---|---|
| 单文件 HTML | 2.0 MB | 18 句金句 + 18 幅手绘 + 尾声图，全 base64 内联 |
| `content.json` | 11 KB | 结构化内容，可单独复用重排版 |
| 图片 19 张 | 1024×1536 → 860px | q01–q18 + 尾声图 |
| Skill 本体 | 6 个文件 | 见 3.1，可复用于任意长内容 |

**复用效果**：固化之后再做同类内容，我只需要说一句"把这个链接做成金句长图"，中间的标准对齐、命名规范、压缩参数、校验清单全部不用再交代一遍。**从'每次 30 分钟对齐标准'变成'一句话 + 等它跑完'。**

---

## 六、复盘：什么样的活值得固化成 Skill

我给自己总结了三条判断标准，供参考：

**1. 做过三次以上，且每次都在重复解释同一套标准。**
一次性的活不值得固化。但如果你发现自己第三次说"解读写 120 字左右""图不要有文字"这种话，就该动手了。

**2. 流程里有"确定性的机械步骤"。**
压缩、编码、改名、校验、替换 token——这些交给脚本。模型负责需要判断的部分。判断哪些步骤是机械的，是写好 Skill 的关键。

**3. 有明确的失败模式，且你已经踩过。**
我的三个坑（同秒覆盖、水印、体积）全都是踩过才写进去的。**没踩过的坑写不出有用的 warnings**，所以不要试图一次性设计完美 Skill，先做，再把教训填回去。

**另外两个具体经验：**

- **把可调参数集中放。** 配色、字号、留白放在模板 `:root` 变量里；图片宽度放 `--width`；裁剪放 `--crop`。Skill 里附了一张「想改什么 → 改哪里」的对照表，省得下次还要读一遍代码。
- **Skill 的 description 要写触发词。** 我在 description 里写明了"做成金句长图""手绘解读""金句卡片"这类用户真实会说的词，否则用户换个说法它就认不出来了。

---

## 七、可复用提示词

**固化流程时用的原话：**

```
这件事我已经做过三次了，你把整套流程固化成一个 Skill。
要求：
1. 需要判断的部分（选句、写解读、设计画面隐喻）留给模型；
2. 机械的部分（图片压缩编码、HTML 渲染、外部资源检查）写成 Python 脚本；
3. 把我这次踩过的坑写进 references，下次直接避开；
4. 附一张「想改什么 → 改哪里」的参数对照表；
5. 校验步骤必须写成强制项，不许跳过。
```

**日常调用时：**

```
把这个链接做成金句长图
```

---

## 八、写在最后

这个 Skill 的价值不在于它省了多少时间，而在于**它把我踩过的坑保存下来了**。下一次做同类内容时，我不会再遇到裂图，不会再遇到文件名覆盖——不是因为我记得，而是因为流程里已经没有给这些错误留位置。

如果你也有某件"做过三次、每次都要重新交代一遍"的事，值得花二十分钟把它固化下来。

> 本文示例原著为公有领域作品，配图为 AI 生成，成品仅用于个人知识管理与分享。


行业与岗位：软件开发 · 内容运营 / 知识整理（个人知识管理场景） 使用产品：Tencent WorkBuddy（PC 端） 一句话总结：第三次手搓"金句长图"之后我意识到这件事不该再手搓了——把它写成 Skill，现在丢一个链接就能产出一份断网也能打开的单文件 HTML。

我把"做长图"这件重复了三次的事，固化成了一个 Skill：从原文到可离线单文件 HTML

开发工具

职业发展

后端

从手工打磨到Skill固化，三步将长文转成18句金句手绘长图。单文件HTML断网可开，图片全内联无外链，标准化流程避免重复踩坑。

图片压缩

软件开发

代码解释

WorkBuddy 

Python

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我把"做长图"这件重复了三次的事，固化成了一个 Skill：从原文到可离线单文件 HTML-腾讯云开发者社区-腾讯云

我把"做长图"这件重复了三次的事，固化成了一个 Skill：从原文到可离线单文件 HTML

我把"做长图"这件重复了三次的事，固化成了一个 Skill：从原文到可离线单文件 HTML

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐