╔══════════════════════════════════════════════════════════════╗ ║ 读书笔记卡片 · 豆猫工作流程与规范 ║ ║ Book Note Card · Workflow & Spec ║ ╚══════════════════════════════════════════════════════════════╝ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 一、卡片基本尺寸规范（9:16 竖屏） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 画布尺寸：1200 × 2134 px（9:16 比例，高分辨率基准） 输出格式：PNG（无损） 渲染工具：Headless Chromium（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 行高1.6 颜色#5a4a3e 二维码标签（扫码听音频等）：28px 字重700 #c0392b 二维码副标签（8分钟精读等）：24px #b09580 底部金句：30px #c8b8a8 品牌落款（豆猫AI出品）：24px 字重600 #2a8a5a（绿色） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 三、配色方案 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 底色：#f8f4ee → #fffcf8 渐变（暖米白） 主色：#c0392b（品牌红） 副色：#b09580（暖灰色文字） 辅色：#c8b8a8（最浅灰文字） 五项条目独立配色： 01 红：#c0392b 高亮词1：#c0392b 02 橙：#e07040 高亮词2：#d47a1a 03 绿：#1a8a5a 高亮词2：#c0392b（跨条目品牌色） 04 蓝：#3a7bc8 高亮词2：#c0392b 05 紫：#8a4baf 高亮词2：#c0392b 渐变色边框：红#c0392b → 橙#e07040 → 金#f0c040 方式：wrapper外层渐变背景14px padding + inner白色圆角卡片32px ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 四、布局结构（从上到下） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┌─ wrapper（渐变色边框）───────────────────────────┐ │ ┌─ inner（白色圆角卡片）───────────────────────┐ │ │ │ │ │ │ │ ① Header（左上"📖 精读笔记"标签 + 右上日期）│ │ │ │ │ │ │ │ ② 书名（大字号品牌红）+ 作者 │ │ │ │ │ │ │ │ ③ 分割线（红到透明渐变） │ │ │ │ │ │ │ │ ④ "✦ 五大核心改变" 章节标题 │ │ │ │ │ │ │ │ ⑤ 01-05 条目列表（左色条+编号+标签+正文） │ │ │ │ [每项白底圆角卡片，左10px色条] │ │ │ │ │ │ │ │ ⑥ 分割线 │ │ │ │ │ │ │ │ ⑦ 底部区域：左二维码 | 中金句+品牌 | 右二维码│ │ │ │ │ │ │ └───────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────┘ padding值：inner上下70/56px，左右72px wrapper padding：14px ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 五、二维码规范 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 尺寸：250 × 250 px 位置：底部金句左右各一 左二维码 → "🎧 扫码听音频" → 语音播放页链接 右二维码 → "📖 扫码看全文" → 完整笔记HTML页链接 生成方式：Python qrcode 库 二维码颜色：深色（建议 #111 或品牌红 #c0392b） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 六、操作流程（完整步骤） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Step 1 — 通读全书 先阅读整本书/文档，理解核心内容，提炼5-6个核心观点 Step 2 — 生成语音（可选） edge-tts --voice zh-CN-YunxiNeural --rate "+0%" \ --text "$(cat summary.txt)" --write-media msg.mp3 部署到 nginx 的 /var/www/html/voice/ 目录 Step 3 — 生成全文网页 将精读笔记写成完整的 HTML 页面，包含： - 分章节标题（h2/h3） - 引用块（高亮背景+左侧红条） - 表格（对比数据） - 列表（要点梳理） Step 4 — 生成二维码 pip3 install "qrcode[pil]" python3 生成 qr.png 部署到 nginx 的 /var/www/html/reading/ 目录 Step 5 — 设计卡片 HTML 按上述尺寸规范写 HTML，用 wrapper+inner 实现圆角渐变边框 五项条目各配独立颜色体系 底部双二维码+金句+品牌落款 Step 6 — Headless Chrome 截图 chromium-browser --headless --no-sandbox --disable-gpu \ --screenshot=output.png --window-size=1200,2134 \ "http://your-card-page.html" Step 7 — 部署 卡片图片 → /var/www/html/reading/{bookname}-card.png 全文网页 → /var/www/html/reading/{bookname}-notes.html 语音音频 → /var/www/html/voice/msg_{ts}.mp3 更新主页"读书卡片"专区 Step 8 — 通知师父 发送卡片图片 + 全文链接 + 语音链接 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 七、避坑指南（必须避开！） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ❌ 不要用 wkhtmltoimage 它基于老旧的 Qt WebKit，不支持 CSS 渐变、border-radius、 现代 flex 布局。会导致圆角丢失、颜色错误、布局崩坏。 ✅ 用 Headless Chrome 截图 ❌ 不要用 PIL/Pillow 画图 中文字体渲染极易出现乱码/方块，且需要手动计算每个元素 的位置，效率和效果都不如 HTML+CSS ✅ 用 HTML 排版 + Chrome 截图 ❌ 不要内嵌 base64 二维码 wkhtmltoimage 经常渲染失败导致二维码不可见 ✅ 二维码作为独立 PNG 文件，用 外链引用 ❌ 不要用深色背景 师父更认可浅色暖底（米白 #f5f3ee / #f8f4ee） ✅ 暖色调浅色底 + 品牌红点缀 ❌ 字体不要太小 卡片尺寸是1200宽，字体小了在手机上完全看不清 ✅ 标题80px / 标签60px / 正文45px ❌ 二维码不要太小 250×250 是最低标准，小于这个尺寸扫码困难 ✅ 二维码 250×250 ❌ 不要有大面积空白 内容要紧凑填满，二维码紧贴内容区域 ✅ 合理分配垂直空间，底部金句+双二维码利用空间 ❌ 不要用单一色调 五条内容用五种颜色区分，视觉层次更丰富 ✅ 红橙绿蓝紫独立配色 + 双色高亮词 ❌ 不要忘记品牌落款 ✅ 底部加绿色"豆猫AI出品" ❌ 不要用 border-image 做圆角渐变边框 border-image 不支持 border-radius ✅ wrapper外层渐变+padding+inner圆角卡片 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 八、核心原则 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 原则1：大气为主 字体要够大，间距要够宽，布局要舒展。不是手机海报 那种精致小字，是能让师父一眼看清内容的大字报风格。 原则2：信息丰富 每张卡片浓缩全书核心，5-6个要点。每个要点包含 标签名+一句话解释+重点词高亮标记。 原则3：二维码双通道 左码听语音，右码看全文。用户扫码后可以从听觉和 视觉两个维度获取完整内容。 原则4：色彩编码 每个条目独立配色，高亮词用对比色标记。视觉上 一眼能区分不同维度。 原则5：品牌统一 师门品牌红 #c0392b 贯穿始终。底部"豆猫AI出品" 绿色落款。整体风格统一可识别。 原则6：9:16 严格 任何情况下保持 9:16 竖屏比例。不能加宽变 16:9。 参考尺寸 1200×2134 或 400×711 等比缩放。 原则7：不发链接 给师父发卡片时直接发PNG图片文件，不要发网页链接。 图片在微信中直接显示，链接需要点击打开体验差。 原则8：逐步迭代 第一次很难做到完美。先出一个版本让师父反馈， 通常需要3-6轮迭代才能定型。保持耐心，每次只 修师父指出的问题。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 九、部署结构规范 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ /var/www/html/ ├── reading/ ← 读书笔记目录 │ ├── {bookname}-card.png ← 卡片图片（终版） │ ├── {bookname}-notes.html ← 全文笔记HTML │ ├── {bookname}-qr-audio.png ← 语音二维码 │ ├── {bookname}-qr-article.png ← 全文二维码 │ └── vibe-card.html ← 卡片HTML源文件（可复用） ├── voice/ │ └── msg_{timestamp}.mp3 ← 语音文件 └── index.html ← 主页（含读书卡片专区） 【主页专区】在 index.html 的"精品荟萃"区域下新增 "📇 读书卡片"分类卡片，链接到 /reading-cards/ 列表页 /reading-cards/ 列表页：以卡片网格展示所有已生成的 读书卡片，每张显示：封面图+书名+创建日期+链接到 卡片PNG+全文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/vibe-card.html" ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 十一、消除空白原则（2026-06-12 经验固化） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 核心公式：内容要填满2134px画布，底部空白不超过15px。 五步法： 1. 压缩边距 — inner padding缩至30%（17/13/20px） 2. 放大字号 — 书名×2倍(152px)、标签×1.8倍(82px)、正文×1.5倍(46px) 3. flex:1填充 — items-list + card-item 各加flex:1，自动均分剩余空间 4. 横向撑满 — item-content padding 24-28px + flex:1 5. 底部压缩 — 二维码与正文间距缩至20% 验证：垂直扫描，内容y起始≈0，结束y≈2124，底部空白<15px ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 十二、语音稿铁律（2026-06-12 经验固化） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ❌ 语音稿中绝不能有 markdown 标记（# * _ > - []） edge-tts 会逐字朗读 "井号""星号" ✅ 纯文本，只有汉字、标点、英文单词 ❌ 卡片/语音/全文内容不一致 ✅ 三者章节数必须对应 · 全文10条觉醒清单 → 语音读全部10条 → 卡片展示全部10条 ❌ 生成语音后不检查 ✅ 用 grep 检查脚本是否有残留符号 grep -n '[#\*_\[\]>]' script.txt ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 十三、内容一致性原则 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 卡片 · 语音 · 全文 三位一体，缺一不可，信息对齐。 QR码是延伸通道不是替代： 左码🎧语音 — 听觉延伸 右码📖全文 — 视觉延伸 卡片本体 — 视觉摘要 更新任一环节时，同步检查其他两个环节是否需要更新。