card-xiaohongshu
nexu-io/open-design
Create swipeable Xiaohongshu-style knowledge card carousels for social sharing.
What is card-xiaohongshu?
A template for generating multi-card carousels styled like Xiaohongshu (Little Red Book) posts, optimized for mobile viewing and screenshot sharing. Use this to transform content into visually cohesive, swipeable card decks with soft color palettes and clear typography.
- Generates N sequential cards (1080×1440px each) arranged for easy swiping and individual screenshots
- Creates cover card with large title, subtitle, and attention-grabbing tag
- Develops content cards with one core idea per card, emoji, short text, and examples
- Produces summary card with call-to-action (follow, save, comment)
- Applies soft Morandi or pastel color schemes with rounded elements and generous whitespace
- Ensures large font sizes, wide line spacing, and high contrast for mobile readability
How to install card-xiaohongshu
npx skills add https://github.com/nexu-io/open-design --skill card-xiaohongshuHow to use card-xiaohongshu
- 1.Install the skill using the provided npm command
- 2.Prepare your content with a main title, subtitle, and 3-6 core ideas (longer content supports more cards)
- 3.Provide real content, data, and images—avoid placeholder text and lorem ipsum
- 4.The template generates a cover card, content cards (one idea per card with emoji and examples), and a summary card with call-to-action
- 5.Review the generated HTML carousel and take screenshots of individual cards or the full sequence for sharing
Use cases
- Creating multi-image social media posts for Xiaohongshu or WeChat Moments
- Packaging educational or how-to content into shareable card decks
- Designing marketing or promotional carousels with consistent visual branding
- Converting long-form articles into visually scannable card collections
- Building knowledge-sharing content that encourages screenshots and reposts
- Content creators and marketers targeting Chinese social platforms
- Educators and trainers packaging knowledge into visual formats
- Social media managers creating multi-image carousel posts
- Designers building template-based content systems
- Teams needing consistent visual presentation for information sharing
card-xiaohongshu FAQ
Start with 3-6 cards for short content; longer content can extend to 9-18 cards. Each card should contain one core idea. Xiaohongshu typically performs best with 9 or fewer images per post.
Each card is 1080×1440 pixels (3:4 aspect ratio), optimized for mobile viewing on Xiaohongshu and similar platforms.
Yes. The template uses soft Morandi or pastel color schemes by default, but you can adjust them to match your brand while maintaining the soft, rounded aesthetic.
While designed for Xiaohongshu's style, the carousel format and mobile-optimized dimensions work well for other platforms like WeChat Moments, Instagram, or Pinterest.
The output is an interactive HTML carousel. You can screenshot individual cards or the full sequence and post them directly to social media, or use the web preview for sharing.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: card-xiaohongshu zh_name: "小红书图文卡片" en_name: "Xiaohongshu Card" emoji: "📱" description: "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel." zh_description: "小红书风格知识卡片, 多张联排可滑动浏览" en_description: "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel." category: card scenario: marketing aspect_hint: "1080×1440 (3:4)" featured: 24 tags: ["xhs", "小红书", "carousel", "图文"] example_id: sample-xhs-ai-habits example_name: "小红书图文卡 · AI 工具习惯" example_format: markdown example_tagline: "7 张连排, 莫兰迪渐变" example_desc: "干货卡片合集, 适合截图发小红书 / 朋友圈" od: mode: prototype surface: web platform: desktop scenario: marketing upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Xiaohongshu Card template to turn my content into a Xiaohongshu-style swipeable knowledge-card carousel. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「小红书图文卡片」模板把我的内容做成一份「小红书风格知识卡片, 多张联排可滑动浏览」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: 小红书图文卡片】
- 输出 N 张连续卡片, 每张
w-[1080px] h-[1440px], 用 flex 纵向排列方便整体截图也方便单张截图。N 由【用户内容】信息量决定: 短内容 3-6 张起步, 长内容应更多 (小红书平台单帖最多 18 图, 通常 9 张以内最佳); 一张卡只承载一个核心观点。 - 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / "建议收藏")。
- 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1-2 个例子。
- 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。
- 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。
- 字号大、行距宽、对比强（小红书在手机上看, 小字根本看不清）。
- 每张卡片右下角小水印 (作者名 / 日期)。
Related skills
More from nexu-io/open-design and the wider catalog.
color-expert
286K-word color science reference covering OKLCH/OKLAB, palettes, accessibility, and pigment theory.
competitive-ads-extractor
Extract and analyze competitors' ads from ad libraries to understand messaging and creative strategies.
copywriting
Write and rewrite marketing copy for landing pages, homepages, and ads.
creative-director
AI creative director with 20+ methodologies and Cannes-calibrated evaluation for campaign concepts and design direction.
d3-visualization
Teach agents to build D3.js charts and interactive data visualizations.
data-report
Transform CSV, Excel, or JSON data into polished visual report pages with KPI cards and interactive charts.