小红书图文卡片生成器

将文章转为小红书图文卡片。1 封面 + N 正文（按章节分） + 1 结尾。

预处理：非 MD 转 MD

如果输入不是 Markdown 格式，先转为 Markdown。

转换规则：

识别文章自然段落和结构，拆分为 4-6 个二级标题（##）
数据/对比类内容转为表格
列举类内容转为项目符号（-）
核心观点/结论用加粗或引用块突出
转换后的 MD 结构：封面信息 → ## 章节1 → ## 章节2 → ... → ## 章节N → 结尾启示

分页逻辑

封面：单独一页
每个二级标题（##）对应一页正文
结尾启示：单独一页
总计页数 = 1（封面）+ N（正文章节）+ 1（结尾）

固定规格

画布 1080 x 1440px，3:4 竖版。封面和结尾独立设计，中间每页一个章节。

配色

默认蓝白科技风（主力配色）。完整 20 套见 references/20色板.md。

背景： #ffffff（纯白）主文字： #1e40af（深蓝，标题/重点）次级文字：#2563eb（中蓝，副标题/引用）辅助文字：#3b82f6（浅蓝，说明文字）装饰色： rgba(37,99,235,0.35)（装饰线，35%透明度）强调底色：rgba(37,99,235,0.06)（6%透明度蓝底，用于引语框/标签背景）光晕色： rgba(37,99,235,0.07)（背景 radial-gradient 光晕）辅助信息：rgba(30,64,175,0.15)（底部页码/标签，15%透明度）

行距要求

所有文字的行高统一设置为默认值的 1.5 倍（line-height 乘以 1.5）。具体参考值：

标题/重点大字（72-96px）：line-height: 1.53-1.73（原 1.02-1.15）
中号字（44-52px）：line-height: 2.1（原 1.4）
正文小字（30-38px）：line-height: 2.25（原 1.5）
引语框字（32-40px）：line-height: 2.1（原 1.4）
封面引语（32-36px）：line-height: 2.1（原 1.4）
辅助信息（14-18px）：line-height: 1.5（不调整）

加大行距让信息密集的页面更透气，但注意不要因此增加页面留白。

页面留白要求

上下左右 padding 不要太大。参考值：页面 padding 40-48px（不是 72-80px）。内层缩进不超过 40px（不是 72px）。目标是内容区域最大化，留白只做点缀不出格。

字体层级

封面标题： 88-96px font-weight:800 封面引语： 32-36px font-weight:300 页面标题： 52-64px font-weight:700 重点大字： 72-84px font-weight:700（正文普通字的 2-2.5倍）中号字： 44-52px font-weight:500 正文小字： 45-57px font-weight:400（原 30-38px × 1.5）引语框字： 32-40px font-weight:500 结尾大字： 56-72px font-weight:700 结尾小字： 32-38px font-weight:300 辅助信息： 14-18px color:rgba(30,64,175,0.15)

根据内容量动态决定字号，规则如下：

内容多 → 取小值，内容少 → 取大值

具体判断标准（以单页正文块总字数为准）：

字数 ≤ 30：用大号（正文57px / 重点84px / 标题64px）
字数 31-60：用中号（正文51px / 重点78px / 标题58px）
字数 > 60：用小号（正文45px / 重点72px / 标题52px）

但不是全文统一用一种字号，同一页内重点词始终用重点大字，解释用正文小字，两种字号形成对比。

布局规则

整体

上下居中：用 wrapper div 整体居中（margin:auto），不是 flex 子项各自分散
标题和正文之间只空一行（margin-bottom:18-24px）
每页一个页码 absolute 右下，14px

封面

全居中，结构：标题 → 装饰线 → 引语
装饰线：width:48-60px, height:3px, background:强调色, opacity:0.4

正文页

结构：标签 → 页面标题 → 正文块
正文块排版规则：
- 每行一句话，不合并
- 第一句通常是重点大字（总结本节核心）
- 后续句子分配字号：重点概念用大字，解释说明用中字，细节用小学
- 至少三种字号交替出现，形成视觉节奏
- 对齐方式根据内容选： a) 左右居中 — 适合情感化/观点性/结论性内容 b) 左对齐 + padding-left:72px（约3个中文字宽）— 适合信息/数据/列举内容
- 对齐决策规则：如果内容主要表达观点/结论/启示 → 居中；如果内容主要呈现事实/数据/对比 → 左缩进。同一个系列中不同页可以混用两种对齐方式（封面和结尾始终居中）
行间距 gap 8-14px

结尾页

全居中
结构：标题（如「给你的建议」）→ 装饰线 → 核心启示（1-2句，大字）→ 补充说明（小字）

组件样式

引语框（quote block）

border-left:3px solid #2563eb padding:14-20px background:rgba(37,99,235,0.06) border-radius:0 4px 4px 0 font-weight:500

价格卡

白色底 + 1px rgba(37,99,235,0.15) 边框 + border-radius:8px 数字 32px font-weight:800 color:#2563eb 标签 14px color:#3b82f6

数据行

左对齐，关键数字 font-weight:700 行间距 8-10px

设计要点：

th 使用深色背景（#1e40af）+ 白色文字，与正文区隔
当前话题的行用强调色（color:#2563eb; font-weight:700）突出
表内字体用 36-44px（表头略小于表体），因表格本身已放大为正文的 1.5-2 倍
行高（含 padding）约 50-60px，保证一屏能展示 3-4 行即可

分隔线

height:1px; background:rgba(37,99,235,0.08); margin:6-10px 0

装饰

背景光晕：::before ::after + radial-gradient
不要用 emoji 做装饰
页面简约为主，不要多余边框和底色块

生成流程

写 HTML（内联样式，完整页面）
用 npx playwright screenshot 截图输出 PNG（viewport 1080x1440, full-page）
生成 PNG 后立即删除对应的 HTML 文件，目录里只保留 PNG 成品

依赖

npx playwright 截图出 PNG。