读书笔记卡片

豆猫工作流程与规范 · Book Note Card Workflow & Spec

v1.0 · 2026-06-10

一、卡片基本尺寸规范

画布尺寸

1200 × 2134 px

比例

9:16 竖屏

输出格式

PNG 无损

渲染工具

Headless Chrome

截图命令：

chromium-browser --headless --no-sandbox --disable-gpu \
  --screenshot=output.png --window-size=1200,2134 \
  "http://your-page.html"

【关键】不要使用 wkhtmltoimage（Qt WebKit 引擎太老，不支持现代 CSS，圆角、渐变等全部失效）。必须用 Headless Chrome。

二、字体层级规范

元素	字号	字重	颜色
书名（大标题）	80px	800	#c0392b
作者（副标题）	30px	400	#b09580
条目编号（01-05）	38px	800	每项独立配色
条目标签	60px	700	每项独立配色
条目正文	45px	400	#5a4a3e
二维码标签	28px	700	#c0392b
二维码副标签	24px	400	#b09580
底部金句	30px	400	#c8b8a8
品牌落款	24px	600	#2a8a5a

三、配色方案

底色渐变

#f8f4ee → #fffcf8

品牌主色

#c0392b

暖灰副色

#b09580

浅灰辅色

#c8b8a8

五项条目独立配色

条目	色值	高亮词1	高亮词2
01 红	#c0392b	#c0392b	#c0392b
02 橙	#e07040	#e07040	#d47a1a
03 绿	#1a8a5a	#1a8a5a	#c0392b
04 蓝	#3a7bc8	#3a7bc8	#c0392b
05 紫	#8a4baf	#8a4baf	#c0392b

渐变色边框：#c0392b → #e07040 → #f0c040

方式：wrapper 外层渐变背景 14px padding + inner 白色圆角卡片 32px border-radius

四、布局结构（从上到下）

┌─ wrapper（渐变色边框）───────────────────────────┐
│  ┌─ inner（白色圆角卡片）───────────────────────┐  │
│  │                                               │  │
│  │  ① Header（"📖 精读笔记"标签 + 右上日期）   │  │
│  │                                               │  │
│  │  ② 书名（大字号品牌红）+ 作者                │  │
│  │                                               │  │
│  │  ③ 分割线（红到透明渐变）                    │  │
│  │                                               │  │
│  │  ④ "✦ 五大核心改变" 章节标题                │  │
│  │                                               │  │
│  │  ⑤ 01-05 条目列表（左色条+编号+标签+正文）  │  │
│  │                                               │  │
│  │  ⑥ 分割线                                    │  │
│  │                                               │  │
│  │  ⑦ 底部：左🎧二维码 | 金句+品牌 | 📖右二维码 │  │
│  │                                               │  │
│  └───────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

inner padding：上下 70/56px，左右 72px

wrapper padding：14px

五、二维码规范

属性	规范
尺寸	250 × 250 px
位置	底部金句左右各一
左二维码	🎧 扫码听音频 → 语音播放页链接
右二维码	📖 扫码看全文 → 完整笔记HTML页链接
生成方式	Python qrcode 库
颜色	深色（建议 #111 或品牌红 #c0392b）

六、操作流程（完整步骤）

通读全书

先阅读整本书/文档，理解核心内容，提炼5-6个核心观点

生成语音（可选）

edge-tts 生成语音，部署到 nginx 的 /var/www/html/voice/ 目录

生成全文网页

将精读笔记写成完整 HTML 页面（分章节标题、引用块、表格、列表）

生成二维码

pip3 install "qrcode[pil]" → python3 生成 qr.png → 部署到 /reading/

设计卡片 HTML

按尺寸规范写 HTML，wrapper+inner 圆角渐变边框，五项独立配色，双二维码

Headless Chrome 截图

--screenshot=output.png --window-size=1200,2134

部署

卡片PNG→/reading/，全文HTML→/reading/，语音MP3→/voice/

通知师父

发送卡片图片 + 全文链接 + 语音链接（卡片直接发PNG图片，不发链接）

七、避坑指南（必须避开！）

❌ 不要用 wkhtmltoimage（Qt WebKit太老，不支持现代CSS）
✅ 用 Headless Chrome 截图

❌ 不要用 PIL/Pillow 画图（中文字体易乱码，效率低）
✅ 用 HTML 排版 + Chrome 截图

❌ 不要内嵌 base64 二维码（渲染失败）
✅ 二维码作为独立PNG文件，用<img>外链引用

❌ 不要用深色背景（师父认可浅色暖底）
✅ 暖色调浅色底 #f8f4ee + 品牌红点缀

❌ 字体不要太小（手机上看不清）
✅ 标题80px / 标签60px / 正文45px

❌ 二维码不要太小（扫码困难）
✅ 二维码 250×250

❌ 不要有大面积空白（内容松散）
✅ 合理分配垂直空间

❌ 不要用单一色调（视觉层次不够）
✅ 红橙绿蓝紫独立配色

❌ 不要忘记品牌落款（缺少识别）
✅ 底部加绿色"豆猫AI出品"

❌ 不要用 border-image 做圆角渐变边框
✅ wrapper外层渐变+padding+inner圆角卡片

八、核心原则

大气为主
大字宽间距舒展

信息丰富
5-6要点 + 高亮

二维码双通道
左听右看

色彩编码
五项独立色

品牌统一
品牌红贯穿

9:16严格
不改成横屏

不发链接
直接发PNG

逐步迭代
3-6轮定型

九、部署结构规范

/var/www/html/
├── reading/
│   ├── {bookname}-card.png     ← 卡片图片（终版）
│   ├── {bookname}-notes.html   ← 全文笔记HTML
│   ├── {bookname}-qr-audio.png ← 语音二维码
│   ├── {bookname}-qr-article.png ← 全文二维码
│   └── {bookname}-card.html    ← 卡片HTML源文件（可复用）
├── voice/
│   └── msg_{timestamp}.mp3     ← 语音文件
└── index.html                  ← 主页（含读书卡片专区）

十、命令速查

生成二维码：

python3 -c "
import qrcode
qr = qrcode.QRCode(box_size=10, border=2)
qr.add_data('https://your-url')
qr.make(fit=True)
img = qr.make_image(fill_color='#c0392b', back_color='#ffffff')
img.save('qr.png')
"

edge-tts 生成语音：

edge-tts --voice zh-CN-YunxiNeural --rate "+0%" \
  --text "$(cat script.txt)" --write-media output.mp3

Headless Chrome 截图：

chromium-browser --headless --no-sandbox --disable-gpu \
  --screenshot=card.png --window-size=1200,2134 \
  "http://localhost/reading/{bookname}-card.html"