# Qiaomu Word Card

> 生成复古纸张质感的词语卡片 / 短句卡片 / 词典风海报。 自动识别输入类型（中文词、英文词、成语、双语术语、短句引语），灵活组装内容区块， 生成 HTML 后 Playwright 截图输出 PNG。适合分享到微信、X、小红书。 触发词："词语卡片"、"单词卡片"、"词卡"、"复古词卡"、"词典风卡片"、"把这个词做成卡片"、 "把这句话做成复古卡片"、"小众词语卡"、"vocabulary card"、"word card"、"retro quote card"、 "词汇海报"、"每日一词卡"、"成语卡片"。

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

---


# Word Card Designer

复古纸张质感的词语/短句卡片生成器。输入一个词、一段短句或一个概念，AI 灵活组装内容区块生成卡片。

## 工作流

### Step 1：判断内容深度与叙事方式

不要按固定模板套，而是根据输入内容的**信息密度**灵活决定卡片结构：

| 输入示例 | 内容深度 | 卡片思路 |
|---------|---------|---------|
| "sonder" | 翻译词 + 词源故事 | 主词 → IPA → 释义 → 英文解释 → 词源 |
| "见微知著" | 成语 + 故事 | 成语 → 释义 → 典故故事 → 用法例句 |
| "风骨" | 单字词 + 文化内涵 | 主词 → 拼音 → 释义 → 文化注 |
| "薛定谔的猫" | 概念 + 解释 | 概念名 → 一句话解释 → 来源故事 → 现代用法 |
| 名人名言 | 引语 + 解读 | 原句 → 翻译 → 个人解读 → 出处 |
| "liminality" | 学术术语 | 术语 → IPA → 释义 → 学科背景 → 延伸 |

**核心原则**：内容决定形式，不是形式决定内容。AI 应像编辑一样思考——这个词/这句话最值得展示的是什么？故事？释义？文化背景？词源？例句？

### Step 2：组装内容区块

将输入提炼为内容区块（不是固定字段，而是可选区块）：

```
headword          # 主词/主句（必须）
pronunciation     # IPA/拼音（有则加）
meaning           # 释义（1-3 行，精炼）
story             # 典故/故事/词源（成语必加，其他按需）
example           # 例句/用法（有则加）
interpretation    # AI 解读/洞见（可选，增加深度）
notes             # 小注/补充（可选）
source_label      # 系列标签
footer_meta       # 页脚
```

**内容充实规则**（用户只给词没给释义时，AI 必须补充）：

- **成语** → 必须补充：释义 + 典故出处故事（2-4 句讲清故事）+ 现代用法例句
- **英文词** → 补充：IPA + 中文释义 + 词源/创造背景（如果有故事）
- **学术/概念** → 补充：一句话解释 + 来源 + 现代语境中的用法
- **短句/引语** → 补充：出处 + 翻译（外文时）+ 一句个人解读
- **中文词** → 补充：拼音 + 英文翻译 + 文化内涵说明

**内容风格**：不是维基百科式的干巴巴解释，而是像朋友聊天一样有温度有洞察。故事要讲得生动，解读要有个人观点。

### Step 3：生成 HTML

读取 `references/style-spec.md` 获取完整视觉规范（字号、配色、CSS 变量、纸张纹理等）。
读取 `references/template-selection.md` 获取基础 HTML 骨架和可用区块样式。

**核心**：HTML 不套固定模板，而是用基础骨架 + 按需插入区块的方式组装。每个区块都有对应的 CSS 类。

保存路径：`/tmp/word-card-[keyword].html`

### Step 4：截图（必须执行）

使用 Playwright Python 截图（不用 Chrome DevTools MCP）：

```python
from playwright.sync_api import sync_playwright
import os

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={"width": 600, "height": 800}, device_scale_factor=2)
    page.goto("file:///tmp/word-card-xxx.html")
    page.wait_for_timeout(2000)
    page.screenshot(path="/tmp/word-card-xxx.png", full_page=True)
    browser.close()

from PIL import Image
img = Image.open("/tmp/word-card-xxx.png")
print(f"Dimensions: {img.size[0]}x{img.size[1]}")
print(f"File size: {os.path.getsize('/tmp/word-card-xxx.png') / 1024:.0f}KB")
```

截图后**自动 `open` 图片给用户看**。

### Step 5：部署输出

**自动部署，不询问用户。**

```
~/乔木新知识库/60-69 素材/65 附件库/info-cards/
  └── [YYYYMMDD]-word-[keyword]/
        ├── card.html
        └── card.png
```

告知用户：图片路径 + 尺寸。

---

> **所有视觉参数的唯一真相源是 `references/style-spec.md`。**
> **区块样式和 HTML 骨架的唯一真相源是 `references/template-selection.md`。**