| name | xiaohongshu-card-generator |
| description | 小红书图文生成器 2.1 —— 将文章、笔记、技术分享或个人见解转换为小红书风格的图文卡片（HTML 网页）。支持两种模式：(1) 单页模式 —— 整篇文章生成一张长卡片；(2) 合集模式（deck）—— 一张封面 + 每个 h2 章节拆成独立卡片，形成可滑动的多图图文集。当用户要求生成小红书卡片、小红书图文、xiaohongshu post、文章卡片、图文分享、图文合集、多图分镜、封面+分章、可滑动图文或类似的单页/多页 HTML 时加载此技能。生成 600×800px 米白色卡片，深色紫调渐变背景，思源宋体排版，含作者头像、作者名与发布日期。 |
| metadata | {"author":"Amorend","version":"2.1"} |
小红书图文生成器 2.1
何时使用此技能
当用户需要将一段文章、技术笔记、学习心得或个人见解转换为小红书风格的图文卡片时使用。常见触发语：
- "生成一张小红书卡片"
- "用小红书图文生成器帮我做一篇"
- "把这篇文章做成小红书风格"
- "拆成多张封面图 / 分章卡片 / 图文合集 / 可滑动图文"
本技能支持两种输出模式：
- 单页模式（single）：整篇文章 → 一张可滚动的长卡片。适合一篇 500–1500 字的短文。
- 合集模式（deck）：一张封面 + 每个 h2 章节一张独立卡片 + 页码。适合有多个章节、想在小红书滑动浏览的文章。
何时选择合集模式：用户明确要求"拆成多张"、"图文合集"、"每章一张"、"可滑动"、"封面+分镜"；或文章有 3 个以上 h2 章节、希望突出某几个重点时。
设计规范（两种模式共用）
这是一套固定的视觉规范，不要随意改动。它的稳定性正是"生成器"的价值所在。
整体结构
- 背景：深色紫调 135° 渐变
#1e1e2e → #2d2b55 → #3e3a5f，background-attachment: fixed
- 卡片容器：600×800px，
#F9F9F6 米白色背景
- 三层立体阴影：营造悬浮感
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 10px 30px rgba(0, 10, 20, 0.3),
0 5px 15px rgba(0, 5, 15, 0.25);
- 顶部/底部装饰条：各 43px 高，绝对定位、
#F9F9F6 同色覆盖、z-index: 10。作用是让滚动内容在上下边缘"淡入淡出"。
- 内容区：
padding: 50px，overflow-y: auto，滚动条在所有浏览器中隐藏。
字体
通过 Google Fonts 加载三套：
Noto Serif SC（思源宋体，正文主字体）：400 / 600 / 700Inter（日期、眉题等西文）：300 / 400 / 700 / 800JetBrains Mono（代码等宽，可选）：400 / 700
排版层级
| 元素 | 字号 | 颜色 | 字重 | 行高 |
|---|
| h1（文章主标题 / 章节标题） | 34–36px | #000000 | 700 | 1.3 |
| 封面大标题 | 48px | #000000 | 700 | 1.25 |
| h2（章节内二级标题） | 26px | #000000 | 700 | 1.3 |
| h3（小节标题） | 22px | #2c3e50 | 600 | 1.3 |
| p（正文） | 20px | #1A1A1A | 400 | 2.0 |
| li（列表项） | 20px | #1A1A1A | 400 | 2.0 |
| eyebrow 眉题 | 12px Inter | #888888 | 400 | 字距 0.22em，全大写 |
| page-indicator 页码 | 13px Inter | #999999 | 400 | 01 / 06 形式 |
| strong | — | 继承 | 700 | — |
特别注意：正文 line-height: 2 是舒适阅读体验的核心，不要改。
作者区
- 圆形头像 50×50px，
border: 1px solid #E8E6D9
- 作者名：思源宋体 22px，
#333333，weight 400
- 发布日期：Inter 14px，
#888888，weight 300，格式 YYYY年MM月DD日，由页面 JS 自动生成当天日期
合集模式额外元素
- 封面：顶部眉题（如
XIAOHONGSHU · FEATURE 或 FEATURE · 2026.04）→ 大标题 → 副标题/引言 → 底部作者区 → 右下页码 01 / NN
- 章节页：顶部眉题（如
CHAPTER 01）→ h1 章节标题 → 正文 → 右下页码 XX / NN
- 章节页不再重复作者区 —— 全部放在封面一次即可
响应式
@media (max-width: 650px) 时字号和内边距相应缩小（见模板）。
生成步骤
单页模式
- 收集输入：标题、作者名、头像 URL、正文。
- 读取
assets/template.html，替换占位符：
{{TITLE}}（出现两次）{{AUTHOR_NAME}}（出现两次）{{AVATAR_URL}}{{ARTICLE_CONTENT}}
- 正文仅使用：
<h2> <h3> <p> <strong> <ul><li> <ol><li>。不允许自定义 class/style。
- 输出：
/home/user/workspace/<slug>.html，用 share_file 发送。
合集模式（deck）
-
收集输入：
title：封面主标题subtitle：封面副标题/一句话引言（20–60 字为佳）author_name / avatar_urlseries_label（可选）：封面上方眉题，默认 XIAOHONGSHU · FEATUREfile_slug：输出文件名前缀，中文需手动提供 ASCII slugchapters：数组，每项 { eyebrow?, title, slug?, body_html }
eyebrow 默认生成 CHAPTER 01、CHAPTER 02…body_html 必须已转换为允许的 HTML 标签（同单页模式）
-
构造 spec.json，写到 /home/user/workspace/xhs-deck-<slug>.json。
-
调用脚本：
python3 /home/user/workspace/skills/user/xiaohongshu-card-generator/scripts/build_deck.py \
/home/user/workspace/xhs-deck-<slug>.json \
/home/user/workspace/<deck-dir>
-
脚本产出：
<slug>-01-cover.html<slug>-02-<chapter-slug>.html<slug>-03-<chapter-slug>.html- …（每章一张，总数 = 1 封面 + N 章节，页码自动注入）
-
打包为 zip（便于用户一次下载整个合集）：
cd /home/user/workspace && zip -j <slug>-deck.zip <deck-dir>/*.html
-
发送给用户：
- 把 zip 用 share_file 发给用户
- 同时把每张 HTML 也用 share_file 发（这样用户可以逐张预览）
- 简要说明合集共几页、每页对应的内容
不要做的事
- 不要更改卡片尺寸（600×800）、背景色（
#F9F9F6）、渐变色、字体组合或行高为 2 的正文设置。
- 不要为正文加入自定义颜色、背景、边框、阴影或装饰元素 —— 视觉只靠层级字号 + 加粗。
- 不要手动写入发布日期 —— 由页面内 JS 动态生成。
- 不要在卡片内插入大图、banner 或配图 —— 纯文字图文卡片设计。
- 不要把 Markdown 原样留在 HTML 中（例如
**粗体**）—— 必须转换为 <strong>。
- 合集模式下不要在每张章节卡里重复封面/作者区 —— 作者身份在封面展示一次就够。
资产清单
assets/
├── template.html 单页模式模板
├── template_cover.html 合集模式 · 封面模板（含页码、眉题、大标题、副标题）
├── template_chapter.html 合集模式 · 章节模板（含页码、眉题、h1、正文）
└── example_article_content.html 参考正文示例
scripts/
└── build_deck.py 合集模式批量生成脚本
