xiaohongshu-card-generator

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 / 700
• Inter（日期、眉题等西文）：300 / 400 / 700 / 800
• JetBrains 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) 时字号和内边距相应缩小（见模板）。

生成步骤

单页模式

1. 收集输入：标题、作者名、头像 URL、正文。
2. 读取 assets/template.html，替换占位符：
   • {{TITLE}}（出现两次）
   • {{AUTHOR_NAME}}（出现两次）
   • {{AVATAR_URL}}
   • {{ARTICLE_CONTENT}}
3. 正文仅使用：<h2> <h3> <p> <strong> <ul><li> <ol><li>。不允许自定义 class/style。
4. 输出：/home/user/workspace/<slug>.html，用 share_file 发送。

合集模式（deck）

1. 收集输入：

   • title：封面主标题
   • subtitle：封面副标题/一句话引言（20–60 字为佳）
   • author_name / avatar_url
   • series_label（可选）：封面上方眉题，默认 XIAOHONGSHU · FEATURE
   • file_slug：输出文件名前缀，中文需手动提供 ASCII slug
   • chapters：数组，每项 { eyebrow?, title, slug?, body_html }
     • eyebrow 默认生成 CHAPTER 01、CHAPTER 02…
     • body_html 必须已转换为允许的 HTML 标签（同单页模式）

2. 构造 spec.json，写到 /home/user/workspace/xhs-deck-<slug>.json。

3. 调用脚本：

   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>
   

4. 脚本产出：

   • <slug>-01-cover.html
   • <slug>-02-<chapter-slug>.html
   • <slug>-03-<chapter-slug>.html
   • …（每章一张，总数 = 1 封面 + N 章节，页码自动注入）

5. 打包为 zip（便于用户一次下载整个合集）：

   cd /home/user/workspace && zip -j <slug>-deck.zip <deck-dir>/*.html
   

6. 发送给用户：

   • 把 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                  合集模式批量生成脚本