Xiaohongshu Cards

Xiaohongshu Cards is a Frontend skill for Claude Code, published by nexu-io in html-anything.

8.3K stars810 forkson nexu-io/html-anythingAdded 2026/08/15+1% in starsRepository updated 2026/08/11

agent-skillsagenticai-agentsai-designai-editorbyokclaudeclaude-codeclaude-skillscoding-agentsgenerative-aihtmlhtml-editorhyperframeslocal-firstmarkdownnextjsvibe-codingwechatxiaohongshu

Install in seconds

Install Xiaohongshu Cards

Copy Xiaohongshu Cards into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

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

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/nexu-io/html-anything.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: next/src/lib/templates/skills/card-xiaohongshu/SKILL.md in nexu-io/html-anything
Installs to: ~/.claude/skills/card-xiaohongshu
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Xiaohongshu Cards does

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.

Xiaohongshu Cards is cataloged under Frontend on DirSkills. Xiaohongshu Cards comes from a repository tagged agent-skills, agentic, ai-agents, ai-design and ai-editor.

Documentation

README

From the original repository

【模板: 小红书图文卡片】

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

Frequently asked about Xiaohongshu Cards

What else does nexu-io publish alongside Xiaohongshu Cards?
Xiaohongshu Cards is one of 25 skills that DirSkills catalogs from nexu-io/html-anything, the repository it ships in. Its siblings there include Article Magazine, Blog Post and Competitive Teardown. Each one is a separate skill with its own page in this directory, installs the same way Xiaohongshu Cards does, and is maintained by nexu-io in that same repository. The rest of the collection is listed on the nexu-io/html-anything page.
How does Xiaohongshu Cards compare to other Frontend skills?
Xiaohongshu Cards ranks #115 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Xiaohongshu Cards against them. Open each page to compare what they document and how they install.