dvcrn 技能概述
本技能帮助 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 文件，严格遵守以下规范：
布局规范
/* 页面背景 */
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;
}
字体规范
<!-- 必须引入，中文渲染质量保证 -->
<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 SCweight 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 第一行注释格式：
<!-- 小红书图文卡片 | 标题：{文章标题} | 卡片数：N | 生成时间：{时间} -->
参考示例
详见 EXAMPLE.md 和 PROMPT.md