# Redbook Cards

> 将任意文章 HTML 页面或纯文本，自动切片生成小红书风格图文卡片组（封面 + 内容图 + 金句图），输出单个可直接在浏览器预览的 HTML 文件。触发词：小红书、图文卡片、切片、种草图、笔记卡片。

- Skill: `dvcrn/redbook-cards` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add dvcrn/redbook-cards`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/redbook-cards/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/redbook-cards

---


## 技能概述

本技能帮助 AI 将任意文章（HTML / 纯文本）自动切片为**小红书图文卡片组**，输出单个完整 HTML 文件，可直接在浏览器预览并截图发布。

**适用场景：**
- 公众号/博客文章 → 小红书图文
- 知识输出/学习笔记 → 视觉卡片
- 品牌内容 → 种草图组

---

## 执行流程

收到文章内容后，按以下步骤执行：

### Step 1：内容解析

从原文中提取：
- **文章标题**（用于封面卡和 HTML `<title>`）
- **系列/专栏名**（如「养虾日记 Day X」，用于系列标识徽章）
- **核心论点**（2-4 个，每个对应一张内容卡）
- **结构化信息**（列表、流程、对比、公式等，保留原始信息结构）
- **金句**（全文最有冲击力的 1-2 句，用于收尾卡）
- **话题标签**（从原文 # 标签中提取，无则自动生成 3-5 个）

### Step 2：卡片规划

固定结构如下（共 5～7 张）：

| 位置 | 卡片类型 | 内容要点 |
|------|---------|---------|
| 第 1 张 | **封面卡** | 标题 + 一句话 hook（制造好奇心/痛点共鸣） |
| 第 2 张 | **问题/现象卡** | 引出问题，放大用户感受 |
| 第 3～N-1 张 | **核心内容卡** | 每张只讲一个核心点，信息密度适中 |
| 最后 1 张 | **金句收尾卡** | 全文最强观点 + 话题标签 + 系列标识 |

**内容写作原则：**
- 每张卡片文字总量 ≤ 120 字
- 优先使用：对比结构、流程箭头（→）、编号列表、短句断行
- 保留原文 emoji 风格
- 禁止大段文字堆砌

### Step 3：HTML 生成

输出单个完整 HTML 文件，严格遵守以下规范：

#### 布局规范
```css
/* 页面背景 */
body { background: #F0EBE3; } /* 暖米纸色 */

/* 卡片网格 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
}

/* 卡片比例：严格 3:4 */
.card {
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* 悬停效果 */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  transition: all 0.3s ease;
}
```

#### 字体规范
```html
<!-- 必须引入，中文渲染质量保证 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
```
- 标题/金句：`Noto Serif SC` weight 900
- 正文/标签：`Noto Sans SC`

#### 配色轮换方案

每张卡片使用不同配色，**禁止相邻两张颜色相同**：

| 卡片类型 | 推荐配色方案 | 适用场景 |
|---------|------------|---------|
| 封面卡 | 珊瑚橙暖渐变 `#FF6B5B → #FFCB8E` | 热情、吸睛 |
| 问题/警示卡 | 深色赛博 `#1A1A2E` + 红色高亮 | 严肃、警觉 |
| 概念解释卡 | 清爽绿白 `#EEF2FF → #E8F5F0` | 清晰、专业 |
| 重要性卡 | 暖米黄 `#FFFBF0 → #FFF0E8` | 温和、强调 |
| 行动方案卡 | 深蓝星空 `#2D1B69 → #1A3A4A` | 神秘、行动感 |
| 金句收尾卡 | 高饱和红 `#FF6B5B → #C9184A` | 冲击、记忆点 |

#### 装饰元素（每张必须有，禁止纯色白底）

- 背景圆形/椭圆光晕（`position: absolute`, `opacity: 0.1-0.3`）
- 几何网格线（`background-image: linear-gradient` 交叉）
- 不规则有机形状（`border-radius: 60% 40% 70% 30%`）
- 径向渐变发光点

#### 必须包含的 UI 元素

- **右上角编号徽章**：`N / 总数`，半透明背景
- **封面卡左上角**：系列标识（从原文提取，如「养虾日记 Day X」）
- **金句卡底部**：话题标签行 + 系列说明一行
- **页面顶部**：文章标题 + 「共 N 张 · 小红书图文切片」副标题

### Step 4：输出前自查

生成代码后，逐项确认：

- [ ] 封面 hook 是否能让人想继续看？（测试：如果只看封面，会不会想翻下一张）
- [ ] 每张内容卡是否只聚焦一件事？
- [ ] 有没有对比结构或视觉流程？
- [ ] 金句卡文字是否够有冲击力？
- [ ] 相邻卡片配色是否有变化？
- [ ] 话题标签是否正确？
- [ ] HTML 是否可独立运行，无外部依赖（除 Google Fonts）？

---

## 输入变量

| 变量名 | 类型 | 说明 |
|-------|------|------|
| `article_content` | string | 原文 HTML 或纯文本（必填） |
| `series_name` | string | 系列名称，如「养虾日记 Day 2」（可选，无则从原文提取） |
| `style_preference` | string | 风格偏好：默认/极简/赛博/国潮/杂志风（可选） |
| `card_count` | number | 卡片数量 5～7（可选，默认自动判断） |

---

## 输出

单个完整 HTML 文件字符串，文件名建议：`{文章标题}-小红书.html`

HTML 第一行注释格式：
```html
<!-- 小红书图文卡片 | 标题：{文章标题} | 卡片数：N | 生成时间：{时间} -->
```

---

## 参考示例

详见 `EXAMPLE.md` 和 `PROMPT.md`