Qiaomu Word Card

Name: Qiaomu Word Card
Author: joeseesun

joeseesun/qiaomu-word-card

3 installs
5 repo stars
Updated April 8, 2026
joeseesun/qiaomu-word-card

Create and manage vocabulary flashcards with pronunciation, definitions, and spaced repetition for language learning.

About

Flashcard skill for vocabulary learning with word definitions and audio pronunciation. Supports card creation and spaced repetition scheduling.

Vocabulary flashcard generation with pronunciation audio
Spaced repetition scheduling for learning optimization

Qiaomu Word Card by the numbers

3 all-time installs (skills.sh)
Ranked #2,390 of 3,282 Productivity & Planning skills by installs in the Skillselion catalog
Data as of Aug 2, 2026 (Skillselion catalog sync)

npx skills add https://github.com/joeseesun/qiaomu-word-card --skill qiaomu-word-card

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/joeseesun/qiaomu-word-card.svg)](https://skillselion.com/skills/joeseesun/qiaomu-word-card)

Installs	3
repo stars	★ 5
Last updated	April 8, 2026
Repository	joeseesun/qiaomu-word-card ↗

What it does

Create and manage vocabulary flashcards with pronunciation, definitions, and spaced repetition for language learning.

Files

SKILL.mdMarkdownGitHub ↗

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`。

MIT License

Copyright (c) 2026 joeseesun

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

qiaomu-word-card

生成复古纸张质感的词语卡片 / 短句卡片 / 词典风海报。

安装

npx skills add joeseesun/qiaomu-word-card

前置要求

Claude Code 已安装
（在此补充其他依赖）

使用方式

安装后，在 Claude Code 中用自然语言描述你的需求即可，例如：

"..."
"..."

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

核心：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`。

License

MIT

📱 关注作者

如果这个项目对你有帮助，欢迎关注我获取更多 AI 工具分享：

X (Twitter): @vista8
微信公众号「向阳乔木推荐看」:

词卡视觉规范

字体引入

标题/主词：仓耳今楷02（TsangerJinKai） 正文/释义：仓耳今楷02（统一风格）或 NotoSerifSC（楷宋混排）

<style>
@font-face {
  font-family: 'TsangerJinKai';
  src: url('file:///Users/joe/.claude/skills/qiaomu-word-card/assets/TsangerJinKai02-W04.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'NotoSerifSC';
  src: url('file:///Users/joe/.claude/skills/qiaomu-word-card/assets/NotoSerifSC-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
</style>

字体栈：

:root {
  --font-title: 'TsangerJinKai', serif;
  --font-body: 'TsangerJinKai', serif;
  --font-label: 'TsangerJinKai', sans-serif;
  --font-serif: 'NotoSerifSC', serif;
  --font-mono: 'SF Mono', 'Menlo', monospace;
}

字号规范

层级	600px 固定值	说明
主词条	64-96px	视觉核心，最大冲击
音标/拼音	20-24px	清晰可辨
中文释义	28-36px	仅次于主词的视觉权重
例句	18-20px	辅助信息
小注/词源	16-17px	补充说明
标签	14-16px	系列名、词性
页脚	13-15px	最小可读

基础卡片 CSS

:root {
  --color-bg: #f5f3ed;
  --color-text: #1a1a1a;
  --color-accent: #c0392b;
  --color-muted: #555;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  margin: 0;
  background: var(--color-bg);
}

.card {
  width: 600px;
  background: var(--color-bg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

/* 纸张噪点纹理 */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.card > * { position: relative; z-index: 1; }

配色方案

主题	accent 颜色	适用场景
朱砂红	`#c0392b`	默认、中文词、复古感
墨黑	`#1a1a1a`	严肃、哲学、极简
靛蓝	`#2c3e8c`	英文词、学术、知识
古铜	`#8b6914`	词源、历史、文化
墨绿	`#1a4a3a`	自然、生命、环保
紫檀	`#5b2d8e`	艺术、情感、诗意

配色选择建议：

中文词 → 朱砂红或墨黑
英文词 → 靛蓝
双语术语 → 朱砂红
短句引语 → 根据情感色调选择

装饰元素

系列标签区（顶部）

.series-label {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.8;
}

主词条（核心视觉）

.headword {
  font-family: var(--font-title);
  font-size: 72px;
  font-weight: normal;
  line-height: 1.1;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

发音/音标

.pronunciation {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--color-muted);
  letter-spacing: 0.03em;
  margin-top: 8px;
}

释义区

.meaning {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: normal;
  line-height: 1.4;
  color: var(--color-text);
  margin-top: 24px;
}

例句

.example {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-muted);
  font-style: italic;
  margin-top: 16px;
  padding-left: 20px;
  border-left: 3px solid var(--color-accent);
  opacity: 0.85;
}

分隔线

.divider {
  height: 2px;
  background: var(--color-accent);
  opacity: 0.3;
  margin: 20px 0;
}

页脚

.footer {
  font-family: var(--font-label);
  font-size: 13px;
  color: #999;
  letter-spacing: 0.1em;
  margin-top: auto;
  padding-top: 20px;
}

卡片宽度方案

宽度	viewport	device_scale_factor	输出 PNG 宽度	适用场景
600px	width=600	2x	1200px	手机（默认）
800px	width=800	2x	1600px	桌面/博客

切换触发词：「桌面」「电脑看」「博客」「PPT」「iPad」「宽一点」→ 自动用 800px。

HTML 骨架与可用区块

设计理念

不做固定模板，而是提供一套基础骨架 + 若干可组装区块。AI 根据内容深度自由组合。

基础骨架提供：字体、纸张纹理、配色变量、卡片容器。内容区块按需插入，每个区块有独立 CSS 类。

---

基础骨架（每个卡片必须包含）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=600">
  <style>
  @font-face {
    font-family: 'TsangerJinKai';
    src: url('file:///Users/joe/.claude/skills/qiaomu-word-card/assets/TsangerJinKai02-W04.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: block;
  }
  @font-face {
    font-family: 'NotoSerifSC';
    src: url('file:///Users/joe/.claude/skills/qiaomu-word-card/assets/NotoSerifSC-Regular.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: block;
  }
  :root {
    --color-bg: #f5f3ed;
    --color-text: #1a1a1a;
    --color-accent: #c0392b;  /* 根据内容调色 */
    --color-muted: #555;
    --font-title: 'TsangerJinKai', serif;
    --font-body: 'TsangerJinKai', serif;
    --font-label: 'TsangerJinKai', sans-serif;
    --font-serif: 'NotoSerifSC', serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { margin: 0; background: var(--color-bg); }
  .card {
    width: 600px; background: var(--color-bg); padding: 40px;
    display: flex; flex-direction: column;
    min-height: 600px; position: relative; overflow: hidden;
  }
  .card::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0;
  }
  .card > * { position: relative; z-index: 1; }
  </style>
</head>
<body>
<div class="card">
  <!-- 按需插入区块 -->

  <!-- 页脚（始终在最后） -->
  <div class="footer">@vista8 · 向阳乔木推荐看</div>
</div>
</body>
</html>

---

可用区块样式

以下每个区块都有 CSS 和 HTML 示例。按需插入 <style> 和对应 HTML。

区块：系列标签

.series-label {
  font-family: var(--font-label); font-size: 14px;
  letter-spacing: 0.15em; color: var(--color-accent); opacity: 0.8;
}

<div class="series-label">小众词典 · VOL.01</div>

区块：中文主词

.headword-zh {
  font-family: var(--font-title); font-size: 80px; font-weight: normal;
  line-height: 1.1; color: var(--color-text); letter-spacing: 0.04em;
  margin-top: 20px;
}
.pinyin {
  font-family: var(--font-serif); font-size: 20px; color: var(--color-muted);
  letter-spacing: 0.03em; margin-top: 6px;
}

<div class="headword-zh">见微知著</div>
<div class="pinyin">jiàn wēi zhī zhù</div>

区块：英文/外文主词

.headword-en {
  font-family: var(--font-serif); font-size: 64px; font-weight: normal;
  line-height: 1.1; color: var(--color-text); letter-spacing: -0.01em;
  margin-top: 20px;
}
.ipa {
  font-family: var(--font-serif); font-size: 20px; color: var(--color-muted);
  letter-spacing: 0.02em; margin-top: 6px;
}
.pos-tag {
  font-family: var(--font-label); font-size: 13px; color: var(--color-accent);
  letter-spacing: 0.08em; margin-top: 2px; opacity: 0.7;
}

<div class="headword-en">sonder</div>
<div class="ipa">/ˈsɒndər/</div>
<div class="pos-tag">noun</div>

区块：分隔线

.divider {
  height: 2px; background: var(--color-accent); opacity: 0.3;
  margin: 20px 0; width: 60px;
}

区块：释义

.meaning {
  font-family: var(--font-title); font-size: 28-36px; font-weight: normal;
  line-height: 1.4; color: var(--color-text);
}
.meaning-en {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.6;
  color: var(--color-muted); margin-top: 8px;
}

<div class="meaning">看到微小的细节，就能推知显著的趋势。</div>
<div class="meaning-en">From one small clue, one can see what is coming.</div>

区块：典故/故事（成语必加）

.story {
  font-family: var(--font-body); font-size: 18px; line-height: 1.8;
  color: var(--color-text); margin-top: 20px;
  padding: 16px 20px;
  background: rgba(0,0,0,0.025);
  border-left: 3px solid var(--color-accent);
}

<div class="story">
  相传商纣王命人做了一双象牙筷子。箕子见后叹息：用了象牙筷子，就不会再用陶碗，必然要配玉杯；
  有了玉杯象牙筷，就不会再吃粗茶淡饭……从这个小小的筷子，便能看到亡国的征兆。
</div>

区块：词源/背景

.origin {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.7;
  color: #666; margin-top: 16px;
}
.origin-label {
  font-family: var(--font-label); font-size: 12px;
  letter-spacing: 0.1em; color: var(--color-accent); opacity: 0.7;
  margin-bottom: 4px;
}

<div class="origin">
  <div class="origin-label">词源</div>
  由作家 John Koenig 在《The Dictionary of Obscure Sorrows》中创造。
</div>

区块：例句

.example {
  font-family: var(--font-body); font-size: 17px; line-height: 1.7;
  color: var(--color-muted); margin-top: 16px;
  padding-left: 20px; border-left: 3px solid var(--color-accent);
}
.example-en {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.6;
  color: #777; margin-top: 4px; font-style: italic;
}

<div class="example">真正的智者，往往见微知著，未雨绸缪。</div>
<div class="example-en">A wise person sees the big picture from the smallest details.</div>

区块：解读/洞见

.insight {
  font-family: var(--font-body); font-size: 18px; line-height: 1.7;
  color: var(--color-muted); margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

<div class="insight">
  在信息爆炸的时代，"见微知著"不是天赋，而是一种刻意练习——
  学会在噪音中捕捉信号，在碎片中拼出全貌。
</div>

区块：引语（主内容）

.quote-text {
  font-family: var(--font-title); font-size: 34px; font-weight: normal;
  line-height: 1.5; color: var(--color-text); margin-top: 24px;
}
.quote-text-en {
  font-family: var(--font-serif); font-size: 20px; font-weight: normal;
  line-height: 1.5; color: var(--color-muted); margin-top: 14px;
  font-style: italic;
}
.attribution {
  font-family: var(--font-label); font-size: 15px; color: var(--color-accent);
  letter-spacing: 0.08em; margin-top: 16px; opacity: 0.7;
}

区块：页脚

.footer {
  font-family: var(--font-label); font-size: 13px; color: #999;
  letter-spacing: 0.1em; margin-top: auto; padding-top: 20px;
}

---

组装示例

成语卡：见微知著

<div class="card">
  <div class="series-label">成语故事 · VOL.01</div>
  <div class="headword-zh">见微知著</div>
  <div class="pinyin">jiàn wēi zhī zhù</div>
  <div class="divider"></div>
  <div class="meaning">看到微小的细节，<br>就能推知事物的全貌和发展趋势。</div>
  <div class="story">
    商纣王命人做了一双象牙筷子。箕子见后叹息：<br>
    用了象牙筷，就不会再用陶碗，必配玉杯；<br>
    有了玉杯象牙筷，就不会再吃粗食……<br>
    从一双筷子，便看到了亡国的征兆。
  </div>
  <div class="example">真正的智者，往往见微知著，未雨绸缪。</div>
  <div class="insight">
    "见微知著"不是天赋，而是一种刻意练习——<br>
    在信息爆炸的时代，学会在噪音中捕捉信号。
  </div>
  <div class="footer">@vista8 · 向阳乔木推荐看</div>
</div>

英文词卡：sonder

<div class="card">
  <div class="series-label">小众词典 · VOL.01</div>
  <div class="headword-en">sonder</div>
  <div class="ipa">/ˈsɒndər/</div>
  <div class="pos-tag">noun</div>
  <div class="divider"></div>
  <div class="meaning">过客意识</div>
  <div class="meaning-en">The realization that each random passerby has a life as vivid and complex as your own.</div>
  <div class="origin">
    <div class="origin-label">词源</div>
    由作家 John Koenig 在《The Dictionary of Obscure Sorrows》中创造，描述一种突然意识到每个陌生人都有着和你一样丰富人生的主观体验。
  </div>
  <div class="example">"I had a moment of sonder at the train station."</div>
  <div class="example-en">我在火车站突然意识到，每个匆匆路过的陌生人都有着和我一样丰富而复杂的人生。</div>
  <div class="footer">@vista8 · 向阳乔木推荐看</div>
</div>

---

AI 组装规则

1. 所有卡片共享基础骨架（字体、纹理、配色变量、卡片容器） 2. headword 区块必须有，其他区块按内容需要插入 3. 成语必须有 story 区块（典故故事是成语卡的核心价值） 4. 英文词有 origin/词源时必须加（词源故事增加趣味性） 5. 区块间距：各区块之间用 margin-top 控制节奏，不要全用分隔线 6. 分隔线克制使用：一张卡片最多 1 条 .divider 7. accent 颜色可变：成语可用朱砂红，英文词可用靛蓝，引语可用墨黑 8. 字号可微调：根据内容量调整，但 headword 必须 ≥ 48px，正文 ≥ 16px

Related skills

Grill MeHave an agent relentlessly pressure-test their plan or design until every decision branch is resolved and shared understanding is reached.691k196k

Grill With DocsPressure-test architecture decisions against their live codebase and living documentation before writing production code.585k196k

Lark CalendarLet their coding agents read, create, and manage events inside Lark (Feishu) Calendar directly from natural language instructions.493k

Lark ImLet their coding agent send instant notifications, post updates, and receive commands directly inside Lark (Feishu) workspaces.493k

Lark ContactLet their AI coding agents read and write contacts, send messages, and manage user data inside Lark (Feishu).493k

Lark AttendanceAutomatically fetch and report daily attendance data from Lark (Feishu) into their own tools or agents.493k

Productivity & Planningnotes

About

Qiaomu Word Card by the numbers

Add your badge

What it does

Files

Word Card Designer

工作流

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

Step 2：组装内容区块

Step 3：生成 HTML

Step 4：截图（必须执行）

Step 5：部署输出

qiaomu-word-card

安装

前置要求

使用方式

Word Card Designer

工作流

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

Step 2：组装内容区块

Step 3：生成 HTML

Step 4：截图（必须执行）

Step 5：部署输出

License

📱 关注作者

词卡视觉规范

字体引入

字号规范

基础卡片 CSS

配色方案

装饰元素

系列标签区（顶部）

主词条（核心视觉）

发音/音标

释义区

例句

分隔线

页脚

卡片宽度方案

HTML 骨架与可用区块

设计理念

基础骨架（每个卡片必须包含）

可用区块样式

区块：系列标签

区块：中文主词

区块：英文/外文主词

区块：分隔线

区块：释义

区块：典故/故事（成语必加）

区块：词源/背景

区块：例句

区块：解读/洞见

区块：引语（主内容）

区块：页脚

组装示例

成语卡：见微知著

英文词卡：sonder

AI 组装规则

Related skills

This week in AI coding