joeseesun 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）：
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。