小红书卡片生成器 (xiaohongshu-card)
把一篇科普文章 → 一整套小红书图文卡片（JPG 多图），按经过实战打磨的标准执行。适用于公众号、搜狐号、期刊科普等文章的小红书化。
一、产出规格（固定）
| 项 | 标准 |
|---|---|
| 卡片尺寸 | 1080 × 1440（3:4，小红书推荐比例） |
| 导出格式 | JPG quality 95，按语义命名（01-封面.jpg、02-五步概览.jpg…10-封底.jpg） |
| 交付物 | 仅 JPG；HTML 只作内部工作文件（保留在项目目录便于改版重导出） |
| 移动端字号 | 正文 29-30px / 大标题 60-92px / 步骤标题 40px / 参数数值 46px / 图注 20px（1080 宽下，手机端缩小后仍清晰） |
二、页面结构（固定模板 + 步骤数自适应）
封面 → 概览 → STEP 步骤页（每步一页，STEP 0N/总步数）→ 避坑 → FAQ → 封底
- 封面：纯文字居中构图（标签行 + 副标题 + 大标题 + 副标题2），设计性留白
- 概览：三大优势格 + 一句话原理 + 五步目录（STEP 编号 + 名称 + 一句话摘要）
- 步骤页：顶部红色「STEP 0N / 05」标识 + 步骤名大标题 + 内容块（要点/流程列表/参数卡）+ 原文配图
- 避坑页：关键提醒大字化（每条一行 ◆）
- FAQ 页：常见问题大字卡片，4 条左右（不足可从原文其他段落提炼，不得编造）
- 封底：FIN → 感谢阅读 / 感谢关注 → 品牌 LOGO → ＋ 关注 → 「品牌 · 更多干货在路上」（内容从品牌配置读取）
- 步骤数 ≠ 5 时自适应（总步数跟随）；配图/内容拥挤时拆页（每页 1-2 个信息块最从容）
三、配图策略（原文图优先）
- 原文图优先：抓取原文配图，并核对每张图在原文中的位置，确保与正文一一对应（不对应就挪页或向用户说明）
- 搜狐 AES 解密：搜狐文章图片 data-src 是 AES-ECB-PKCS7 加密，密钥
www.sohu.com6666。用scripts/decrypt-sohu.py解密出//qX.itc.cn/...真实 URL，下载时带 Referer（文章页 URL）+ 浏览器 UA 防防盗链 - 原文确实无图：才允许 AI 生成示意图替代——白底、单主色系（可跨风格通用），且必须向用户标注「此图为 AI 生成」
- 横幅截图式图（如 1080×289）：用固定高度
.fig容器 +object-fit: contain；多图上下叠（.fig-col）/ 并排（.fig-row）
四、质量校验（强制，交付前必做）
用 scripts/verify.js（playwright）程序化检查，不达标自动迭代调整字号/间距/图高：
- 内容页填充率 80-100%（空位 ≤ 20%，页面不能太空）
- 无溢出（内容最深元素 bottom ≤ 卡高）
- 图片全部加载成功（naturalWidth > 0）
- 封面/封底为设计性留白页，豁免填充率校验
五、风格体系（3 种内置，默认理性实验手册）
| 风格 | 视觉 | 用法 |
|---|---|---|
| A 理性实验手册（默认） | 白底黑字 + 红色 #E63946 强调、瑞士网格、编号区块、STEP 标识 | 专业干货、实验操作类 |
| B 高级留白 | 米白底 + 暖金 #D4A574、超轻字重、大量留白 | 高端、极简场景 |
| C 柔和科普 | 米色底 #f6f2ea + 自然绿 #7a8a72、圆角卡片 | 亲和科普号 |
新增风格：在模板 CSS 加一个风格 class（如 .X）并在 STYLES 配置中注册即可。
六、品牌配置
assets/brand-config.example.json 定义：品牌名、LOGO 路径、封底文案、默认风格。默认内置艾基生物配置（LOGO：assets/logo-ige.png）。其他品牌复制该文件改字段即可。
七、红线（违反 = 返工）
- 去掉平台受限/冗余信息：内容来源、点赞收藏 CTA、「左滑引导」等一律不出现
- 不编造内容：所有信息来自原文；补充信息（如 FAQ）必须提炼自原文其他段落
- 配图必须与正文一一对应：核对原文位置；原文无图就不放图（文字排版撑满）或标注 AI 生成
- 反 AI slop：不用 emoji 装饰、不用紫色渐变、不用圆角+左彩边、不画 SVG 假图、不用系统默认字体当展示字体
八、工作流（9 步）
- 抓取文章：WebFetch/curl 取全文（标题、公众号、日期、正文、图片），保存 HTML 原文
- 提炼精华：按页面结构组织——概念/原理、步骤（含参数）、注意事项、FAQ
- 抓配图：解析原文图片（搜狐走
scripts/decrypt-sohu.py），下载并记录每张图在原文中的位置 - 定页面结构：封面/概览/STEP N 页/避坑/FAQ/封底，确定步骤数
- 生成 HTML：复制
assets/card-template.html，把内容填入 JS 的 PAGES 数据数组（见模板注释），配图放项目imgs/目录 - 校验迭代：playwright 打开 → 跑
scripts/verify.js→ 按结果调整字号/间距/图高直到 10/10 PASS - 导出 JPG：改
scripts/export-jpg.js的 NAMES 数组 → 运行导出（1080×1440 quality 95） - 用户确认：展示全部卡片 → 按反馈微调（文案/配色/LOGO/封底）→ 重新导出
- 交付：列出 JPG 清单 + 发布提示（标题/话题标签参考）
九、模板使用说明（card-template.html）
- 单文件 HTML + vanilla JS 数据驱动：
PAGES数组每项一页，blocks数组每项一个内容块 - block 类型：
{t, p}文字块 /{t, lines:[['a)','文本'],...]}流程列表 /{params:[[值,标签],...]}参数卡 /{step:{t,d}}步骤说明 /{img}{imgs, col}配图 /{faq}/{notes}/{dir}五步目录 /{why}优势格 /{tip}提示条 /{recape}速记条 - 三种页面：
type:'cover'（封面）、type:'step'（步骤页，step: N）、type:'content'（概览/避坑/FAQ）、type:'end'（封底）
十、环境依赖
- Node.js + playwright（项目内
npm i playwright） - Python3 + pycryptodome（仅搜狐解密用）