---
name: xiaohongshu-card-carousel
source: https://app.decimal.ai/s/xiaohongshu-card-carousel@1/SKILL.md
source_sha256: e3490e51c3d8
---

# Xiaohongshu (小红书) card carousel

## Contract

When the task is to turn content into a Xiaohongshu / 小红书 image post (a picture-note, "图文"),
emit a MULTI-CARD carousel that conforms to the platform's real card format: fixed 3:4 portrait
cards at 1080×1440 px, a cover card first, exactly one idea per body card, a follow/save
call-to-action last, and a small corner watermark. Apply whenever the deliverable is 小红书 /
RedNote picture-note cards, whether as HTML, images, or a layout spec.

## Rules

1. **Card size — 3:4 portrait, 1080×1440 px.** Every card is EXACTLY 1080 px wide by 1440 px tall
   (the platform's recommended vertical export; a 3:4 portrait). Never square (1:1, 1080×1080), never
   4:5, never landscape (16:9 / 4:3). In Tailwind: `w-[1080px] h-[1440px]`; in plain CSS:
   `width:1080px;height:1440px`.
2. **Card count — a small discrete set, hard-capped at 18.** Output several SEPARATE cards, one per
   idea. Xiaohongshu allows at most 18 images in a single note, and ≤9 reads best — so 3–9 cards for
   typical content, more only when the content is long, and NEVER more than 18. Do not collapse the
   whole piece onto one tall page.
3. **Stack for screenshotting.** Render the cards as distinct fixed-size blocks (e.g. a vertical
   `flex flex-col` column) so each card can be screenshotted on its own and the set exported together —
   not one continuously scrolling document.
4. **Card 1 is the COVER.** The first card is a title/cover: an OVERSIZED headline, a one-line
   subtitle, and a short curiosity/value HOOK label written in the 小红书 idiom — e.g. `干货预警`,
   `建议收藏`, `全文干货`, `码住`, `收藏不亏`, `超实用`. The hook is a badge/pill, visually distinct from
   the body.
5. **Body cards — ONE idea each.** Each middle card carries exactly ONE core point: a short punchy
   heading + an emoji + 1–2 concrete examples. Never cram several tips onto one card; split them across
   cards instead.
6. **Last card — summary + CTA.** The final card recaps and asks for engagement using Xiaohongshu's own
   actions: `关注` (follow), `收藏` (save), `点赞` (like), `评论` (comment). A generic "thanks for
   reading" is not a CTA.
7. **Watermark.** Place a small watermark in a card corner (typically bottom-right) — author
   handle/name and/or date — on the cover at minimum.
8. **Phone-first legibility.** Large type, wide line-height, high contrast, generous whitespace, rounded
   elements, a soft palette (Morandi / pink). These finish the look but are secondary to rules 1–7.

## Worked examples

One BEFORE (the base model's wrong default) → AFTER (conforming) per rule.

**Card size:**
```html
<!-- BEFORE: square, Instagram-style -->
<div style="width:1080px;height:1080px"> ... </div>
<!-- AFTER: 3:4 portrait, the Xiaohongshu size -->
<div class="w-[1080px] h-[1440px]"> ... </div>
```

**Cover card with a hook label + watermark:**
```html
<!-- AFTER -->
<section class="w-[1080px] h-[1440px] relative flex flex-col justify-center p-20 bg-[#f3ece4]">
  <span class="self-start px-5 py-1.5 rounded-full bg-[#c8a98a] text-white text-[32px]">干货预警</span>
  <h1 class="text-[110px] font-black leading-tight mt-6">3 个早起习惯</h1>
  <p class="text-[40px] text-neutral-600 mt-4">坚持三周, 状态肉眼可见变好</p>
  <span class="absolute bottom-8 right-10 text-[24px] text-neutral-400">@小红薯 · 2026.07</span>
</section>
```

**Body card — one idea (not a crammed list):**
```html
<!-- BEFORE: three tips on one card -->
<div>1) 固定起床时间 2) 起床先喝水 3) 拉开窗帘晒太阳</div>
<!-- AFTER: one idea per card -->
<section class="w-[1080px] h-[1440px] flex flex-col p-20">
  <h2 class="text-[72px] font-bold">☀️ 起床先拉开窗帘</h2>
  <p class="text-[40px] mt-8">让阳光进来五分钟, 褪黑素快速下降。换一副透光浅色纱帘更省事。</p>
</section>
```

**Last card — CTA (not "thanks for reading"):**
```html
<!-- BEFORE -->
<div>谢谢观看!</div>
<!-- AFTER -->
<section class="w-[1080px] h-[1440px] flex flex-col justify-center items-center text-center">
  <h2 class="text-[80px] font-black">今天你打卡了吗?</h2>
  <p class="text-[44px] mt-8">关注 收藏 点赞, 明天继续更新 👇</p>
</section>
```

## Edge cases & exceptions

- **Very little content (1–2 ideas):** still make at least 3 cards — cover + point(s) + CTA. Never a
  single card.
- **A lot of content (15+ ideas):** GROUP related ideas so the total stays ≤ 18 (ideally ≤ 9); never
  exceed 18 cards even if that means merging or dropping the weakest points.
- **A cover-only request:** still 1080×1440, still a hook label + a watermark; if body content exists,
  split it into cards anyway.
- **A wide/landscape source (a chart, a screenshot):** re-frame it inside the 3:4 card; do not switch the
  card itself to landscape.
- **Non-Chinese audience:** keep the 3:4 / 1080×1440 size and the cover → one-idea → CTA structure; the
  hook and CTA text may be localized, but the default idiom is the 小红书 one above.

## Do / Don't

- **Don't** size cards 1:1 (1080×1080) or 16:9 · **Do** 3:4 portrait, 1080×1440.
- **Don't** put the whole piece on one long page · **Do** one idea per fixed-size card, ≤ 18 cards.
- **Don't** open with a plain heading · **Do** a cover card with an oversized title + a 干货预警 / 建议收藏 hook.
- **Don't** end with "谢谢观看" / "thanks for reading" · **Do** a 关注 / 收藏 / 点赞 / 评论 CTA card.
- **Don't** forget attribution · **Do** a small corner watermark (handle / date).
- **Don't** use tiny body text · **Do** phone-legible large type with wide spacing.

## Common mistakes (the base model's wrong defaults)

- Defaulting to a square (1080×1080) or a single full-viewport page instead of 3:4 1080×1440 cards.
- Producing one long scrolling document rather than discrete screenshot-sized cards.
- Cramming every point into one card (a bulleted list) instead of one idea per card.
- A bland title with no hook label; no cover / body / CTA structure.
- Ending without a follow/save call-to-action.
- Omitting the corner watermark.

## Quick checklist

- [ ] Every card 3:4 portrait, 1080×1440 px (not 1:1 / 4:5 / 16:9).
- [ ] Multiple discrete cards, ≤ 18 (ideally ≤ 9), one idea each.
- [ ] Card 1 = cover: oversized title + subtitle + a 小红书 hook label (干货预警 / 建议收藏 / 码住).
- [ ] Last card = summary + 关注 / 收藏 / 点赞 / 评论 CTA.
- [ ] Small corner watermark (handle / date).
- [ ] Phone-legible: large type, wide spacing, soft palette.