---
name: Xiaohongshu Cards
slug: xiaohongshu-cards
category: Frontend
description: Xiaohongshu Cards generates a swipeable series of Xiaohongshu-style knowledge cards in HTML, each 1080x1440, with a cover, body slides, and a summary/CTA. Use it to produce mobile-friendly content cards for Xiaohongshu posts.
github: "https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/card-xiaohongshu"
language: HTML
stars: 8300
forks: 810
install: "npx degit https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/card-xiaohongshu ~/.claude/skills/card-xiaohongshu"
installs_to: ~/.claude/skills/card-xiaohongshu
source_path: next/src/lib/templates/skills/card-xiaohongshu/SKILL.md
collection_size: 25
category_size: 567
collection_url: "https://dirskills.com/collections/nexu-io/html-anything"
added: 2026-08-15T06:50:48.872Z
last_synced: 2026-08-15T06:50:48.872Z
canonical_url: "https://dirskills.com/skills/xiaohongshu-cards"
---

# Xiaohongshu Cards

Xiaohongshu Cards generates a swipeable series of Xiaohongshu-style knowledge cards in HTML, each 1080x1440, with a cover, body slides, and a summary/CTA. Use it to produce mobile-friendly content cards for Xiaohongshu posts.

**Install:**

```bash
npx degit https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/card-xiaohongshu ~/.claude/skills/card-xiaohongshu
```

## README

【模板: 小红书图文卡片】
- 输出 N 张连续卡片, 每张 `w-[1080px] h-[1440px]`, 用 flex 纵向排列方便整体截图也方便单张截图。N 由【用户内容】信息量决定: 短内容 3-6 张起步, 长内容应更多 (小红书平台单帖最多 18 图, 通常 9 张以内最佳); 一张卡只承载一个核心观点。
- 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / "建议收藏")。
- 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1-2 个例子。
- 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。
- 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。
- 字号大、行距宽、对比强（小红书在手机上看, 小字根本看不清）。
- 每张卡片右下角小水印 (作者名 / 日期)。