card-xiaohongshu
Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- License 许可
- MIT
- 最近更新
- 2026-11-14
- Stars
- ★ 1.1k
- Forks
- 104
01 前言 Front Matter
- od
- { "mode": "prototype", "preview": { "type": "html", "entry": "index.html", "reload": "debounce-100" }, "surface": "web", "platform": "desktop", "scenario": "marketing", "upstream": "https://github.com/nexu-io/html-anything", "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 和占位图片。" } }
- name
- card-xiaohongshu
- tags
- [ "xhs", "小红书", "carousel", "图文" ]
- emoji
- 📱
- en_name
- Xiaohongshu Card
- zh_name
- 小红书图文卡片
- category
- card
- featured
- 24
- scenario
- marketing
- example_id
- sample-xhs-ai-habits
- aspect_hint
- 1080×1440 (3:4)
- description
- Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- example_desc
- 干货卡片合集, 适合截图发小红书 / 朋友圈
- example_name
- 小红书图文卡 · AI 工具习惯
- en_description
- Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- example_format
- markdown
- zh_description
- 小红书风格知识卡片, 多张联排可滑动浏览
- example_tagline
- 7 张连排, 莫兰迪渐变
03 SKILL.md 正文
【模板: 小红书图文卡片】
- 输出 N 张连续卡片, 每张
w-[1080px] h-[1440px], 用 flex 纵向排列方便整体截图也方便单张截图。N 由【用户内容】信息量决定: 短内容 3-6 张起步, 长内容应更多 (小红书平台单帖最多 18 图, 通常 9 张以内最佳); 一张卡只承载一个核心观点。 - 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / "建议收藏")。
- 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1-2 个例子。
- 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。
- 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。
- 字号大、行距宽、对比强（小红书在手机上看, 小字根本看不清）。
- 每张卡片右下角小水印 (作者名 / 日期)。
04 同仓库更多 Skills
youtube-clipper
YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.
writing-guidelines
Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".
wpds
WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.
weread-year-in-review-video-template
WeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
web-clone
网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。