flyanx/xiaohongshu-card

小紅書卡片產生器 (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 個資訊塊最從容）

三、配圖策略（原文圖優先）

1. 原文圖優先：抓取原文配圖，並核對每張圖在原文中的位置，確保與正文一一對應（不對應就挪頁或向用戶說明）
2. 搜狐 AES 解密：搜狐文章圖片 data-src 是 AES-ECB-PKCS7 加密，金鑰 www.sohu.com6666。用 scripts/decrypt-sohu.py 解密出 //qX.itc.cn/... 真實 URL，下載時帶 Referer（文章頁 URL）+ 瀏覽器 UA 防防盜鏈
3. 原文確實無圖：才允許 AI 生成示意圖替代——白底、單主色系（可跨風格通用），且必須向用戶標註「此圖為 AI 生成」
4. 橫幅截圖式圖（如 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 步）

1. 抓取文章：WebFetch/curl 取全文（標題、公眾號、日期、正文、圖片），儲存 HTML 原文
2. 提煉精華：按頁面結構組織——概念/原理、步驟（含參數）、注意事項、FAQ
3. 抓配圖：解析原文圖片（搜狐走 scripts/decrypt-sohu.py），下載並記錄每張圖在原文中的位置
4. 定頁面結構：封面/概覽/STEP N 頁/避坑/FAQ/封底，確定步驟數
5. 生成 HTML：複製 assets/card-template.html，把內容填入 JS 的 PAGES 資料陣列（見模板註解），配圖放專案 imgs/ 目錄
6. 校驗迭代：playwright 打開 → 跑 scripts/verify.js → 按結果調整字號/間距/圖高直到 10/10 PASS
7. 匯出 JPG：改 scripts/export-jpg.js 的 NAMES 陣列 → 執行匯出（1080×1440 quality 95）
8. 用戶確認：展示全部卡片 → 按回饋微調（文案/配色/LOGO/封底）→ 重新匯出
9. 交付：列出 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（僅搜狐解密用）