# Poem Collage

> 拼贴诗生成器 — 从对话或用户提供的文字中提取关键词，AI 排列成一首拼贴诗， 生成可交互的 HTML 拼贴板（支持拖拽、缩放、翻译、导出图片）。 由 ColaOS 出品。 触发词："帮我做一首拼贴诗"、"生成今日拼贴"、"拼贴诗"、"collage poem"、 "把我们的对话做成拼贴诗"、"给我做个拼贴"。

- Skill: `esthersjw/poem-collage` (Agent Skill)
- Install (CLI): `npx skillmds@latest add esthersjw/poem-collage`
- Raw SKILL.md: https://api.skillmd.com/api/skills/esthersjw/poem-collage/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: esthersjw (https://skillmd.com/u/esthersjw)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/esthersjw/poem-collage

---


# poem-collage — 拼贴诗生成器

## 触发场景

- 用户说"帮我做一首拼贴诗"或"生成今日拼贴"
- 用户提供一段文字/对话，要求做成拼贴诗
- 用户说"collage poem"、"把我们的对话做成拼贴诗"、"给我做个拼贴"

---

## 提词规范（关键词提取）

从当天对话或用户提供的文本中提取 **12–18 个**关键词/短句：

**优先选择：**
- 情绪词（焦虑、平静、心动、疲倦……）
- 核心观点句（独到表达、转折处的金句）
- 意象词（有画面感的名词：窗、光、手、某个地名）
- 动作词（走了、停下、开始、放弃……）
- 独特的人称或关系词

**避免：**
- 功能词（的、了、在、是、有……）
- 语气助词（嗯、哦、啊、呢……）
- 纯数字、无意义连接词
- 过度解释性的长句

**字数控制：**
- 每个词条 2–8 字为佳，少量可到 10 字
- 不超过 10 字，保持视觉上的紧凑

**词条层次（size 分配）：**
- 大词（size 20–28）：核心主题词，2–4 个
- 中词（size 15–20）：支撑词，5–8 个
- 小词（size 12–15）：点缀词，4–6 个

**颜色分配比例：**
| 颜色 | class | 占比 |
|------|-------|------|
| 黑纸白字 | `paper-black` | 25% |
| 白纸黑字 | `paper-white` | 25% |
| 黄纸黑字 | `paper-yellow` | 20% |
| 米白纸 | `paper-cream` | 15% |
| 灰纸 | `paper-grey` | 10% |
| 深蓝纸 | `paper-navy` | 3% |
| 珊瑚红纸 | `paper-coral` | 2% |

---

## 生成步骤

**Step 1 — 提取关键词**

明确告诉用户提取结果，格式：
> 今日关键词：转行一年 / 认真生活 / 气质匹配 / 不像我 / …

**Step 2 — 生成 POEM_WORDS 数组**

按以下格式构造 JavaScript 数组（严格遵守格式，不加多余字段）：

```js
const POEM_WORDS = [
  { text: '今天', size: 20, color: 'paper-black' },
  { text: '认真', size: 24, color: 'paper-yellow' },
  // ...
];
```

**Step 3 — 读取模板文件**

模板路径（相对于本 SKILL.md 所在目录）：
```
assets/poem-collage.html
```

绝对路径为：
```
/Users/jingwen/.cola/mods/default/skills/poem-collage/assets/poem-collage.html
```

用 `read` 工具读取模板内容。

**Step 4 — 注入 POEM_WORDS**

在读取到的 HTML 中，找到以下两行并**整体替换**（注释行 + 旧的占位数组）：

```js
// POEM_WORDS will be injected by Cola skill at runtime
const POEM_WORDS = [
  { text: '今天', size: 20, color: 'paper-black' },
  { text: '此刻', size: 16, color: 'paper-yellow' },
  { text: '感受', size: 24, color: 'paper-white' },
  { text: '拼贴诗', size: 18, color: 'paper-cream' },
];
```

替换为（保留注释行，更新数组内容）：

```js
// POEM_WORDS will be injected by Cola skill at runtime
const POEM_WORDS = [
  { text: '词条1', size: 22, color: 'paper-black' },
  // ... 实际词条 ...
];
```

**Step 5 — 保存输出文件**

输出路径按日期命名：
```
/Users/jingwen/.cola/outputs/拼贴诗-{MMDD}/poem-{MMDD}.html
```

例如 4 月 8 日生成：
```
/Users/jingwen/.cola/outputs/拼贴诗-0408/poem-0408.html
```

用 `bash` 创建目录，用 `write` 写入文件。

**Step 6 — 发送给用户**

用 `desktop_tool send_file` 发送 HTML 文件，附上一句今日主旨说明，例如：
> 今天的拼贴诗做好了。主题词是「边界与生长」。用 Chrome 打开，联网状态下字体自动加载。拖拽字条重新排列，导出 PNG 保存。

---

## POEM_WORDS 格式示例

完整示例（16 个词条）：

```js
const POEM_WORDS = [
  { text: '转行一年',    size: 22, color: 'paper-black'  },
  { text: '认真生活',    size: 20, color: 'paper-white'  },
  { text: '气质匹配',    size: 18, color: 'paper-yellow' },
  { text: '不像我',      size: 28, color: 'paper-cream'  },
  { text: '画了很多张脸', size: 15, color: 'paper-black'  },
  { text: '没有一张是你', size: 15, color: 'paper-white'  },
  { text: '存在的问题',  size: 17, color: 'paper-grey'   },
  { text: '知性但不冷',  size: 18, color: 'paper-yellow' },
  { text: '温柔有力量',  size: 20, color: 'paper-black'  },
  { text: '边界在哪里',  size: 16, color: 'paper-cream'  },
  { text: '退下吧',      size: 32, color: 'paper-white'  },
  { text: '拼贴诗',      size: 26, color: 'paper-yellow' },
  { text: '每天对话',    size: 18, color: 'paper-black'  },
  { text: '被看见',      size: 24, color: 'paper-navy'   },
  { text: '有灵魂的',    size: 19, color: 'paper-coral'  },
  { text: '在AI时代',    size: 16, color: 'paper-grey'   },
];
```

---

## 可用颜色 class 一览

| class | 外观 |
|-------|------|
| `paper-black` | 黑底白字（#1E1E1E / #F5F2EB） |
| `paper-white` | 白底黑字，带浅边框（#F8F6F2 / #1A1208） |
| `paper-yellow` | 亮黄底黑字（#F4E84A / #1A1208） |
| `paper-cream` | 米白底黑字（#EDE8DC / #1A1208） |
| `paper-grey` | 中灰底黑字（#CACAC8 / #1A1208） |
| `paper-navy` | 深蓝底白字（#1A3A6B / #F5F2EB） |
| `paper-coral` | 珊瑚红底浅字（#E8816A / #F8F6F2） |

---

## 注意事项

- **ColaOS logo 水印**已内置在模板 `.cola-logo` div 中，不要删除，这是品牌露出
- **模板路径**：相对于本 SKILL.md 所在目录的 `assets/poem-collage.html`
- 如果用户提供了自己的 logo SVG，可替换模板中 `.cola-logo` div 的内容
- 生成后告知用户：用 **Chrome** 打开，联网状态下字体（Noto Serif SC + ZCOOL QingKe HuangYou）自动加载
- 拼贴板支持：拖拽移位、右下角拖拽缩放字号、双击编辑文字、悬停×删除、框选多选、Shift点击切换选中、导出 PNG
- 如果词条数量不是 16 个，`poeticLayout` 中的 `ROW_SIZES` 会按前 16 个处理；多余词条会自动初始化到默认位置（不影响使用）