Card Xiaohongshu
- 1.7k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
card-xiaohongshu is an agent skill that xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
About
card-xiaohongshu is an agent skill from nexu-io/open-design that xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel. 【模板: 小红书图文卡片】 - 输出 N 张连续卡片, 每张 `w-[1080px] h-[1440px]`, 用 flex 纵向排列方便整体截图也方便单张截图。N 由【用户内容】信息量决定: 短内容 3-6 张起步, 长内容应更多 (小红书平台单帖最多 18 图, 通常 9 张以内最佳); 一张卡只承载一个核心观点。 - 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / "建议收藏")。 - 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1-2 个例子。 - 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。 - 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。 - 字号大、行距宽、对比强（小红书在手 Developers invoke card-xiaohongshu during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.
- 输出 N 张连续卡片, 每张 `w-[1080px] h-[1440px]`, 用 flex 纵向排列方便整体截图也方便单张截图。N 由【用户内容】信息量决定: 短内容 3-6 张起步, 长内容应更多 (小红书平台单帖最多 18 图, 通常
- 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / "建议收藏")。
- 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1-2 个例子。
- 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。
- 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。
Card Xiaohongshu by the numbers
- 1,700 all-time installs (skills.sh)
- +126 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #212 of 1,041 Cloud & Infrastructure skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
card-xiaohongshu capabilities & compatibility
- Capabilities
- 输出 n 张连续卡片, 每张 `w [1080px] h [1440px]`, 用 flex 纵 · 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / " · 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1 2 个例子。 · 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。 · 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。
- Use cases
- orchestration
What card-xiaohongshu says it does
- 输出 N 张连续卡片, 每张 `w-[1080px] h-[1440px]`, 用 flex 纵向排列方便整体截图也方便单张截图。N 由【用户内容】信息量决定: 短内容 3-6 张起步, 长内容应更多 (小红书平台单帖最多 18 图, 通常 9 张以内最佳); 一张卡只承载一个核心观点。
- 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / "建议收藏")。
- 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1-2 个例子。
npx skills add https://github.com/nexu-io/open-design --skill card-xiaohongshuAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.7k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
Who is it for?
Developers working on cloud & infrastructure during operate tasks.
Skip if: Tasks outside Cloud & Infrastructure scope described in SKILL.md.
When should I use this skill?
Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
What you get
Completed cloud & infrastructure workflow aligned with SKILL.md steps.
- Swipeable HTML card carousel
- Screenshot-ready 1080×1440 slides
By the numbers
- Default card dimensions 1080×1440 (3:4 aspect ratio)
- Example carousel sample-xhs-ai-habits uses 7 linked cards
- Xiaohongshu platform supports up to 18 images per post
Files
【模板: 小红书图文卡片】
- 输出 N 张连续卡片, 每张
w-[1080px] h-[1440px], 用 flex 纵向排列方便整体截图也方便单张截图。N 由【用户内容】信息量决定: 短内容 3-6 张起步, 长内容应更多 (小红书平台单帖最多 18 图, 通常 9 张以内最佳); 一张卡只承载一个核心观点。 - 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / "建议收藏")。
- 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1-2 个例子。
- 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。
- 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。
- 字号大、行距宽、对比强（小红书在手机上看, 小字根本看不清）。
- 每张卡片右下角小水印 (作者名 / 日期)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>5 个让你的 AI 编辑用得更顺手的小习惯</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&family=Inter:wght@500;600;700&display=swap" rel="stylesheet">
<style>
body { margin:0; background:#f3eee5; font-family:'Noto Sans SC',sans-serif; padding:36px 0; -webkit-font-smoothing:antialiased; }
.deck { display:flex; flex-direction:column; align-items:center; gap:24px; }
.card { width:1080px; max-width:96vw; aspect-ratio:3/4; border-radius:32px; overflow:hidden; position:relative; padding:80px 64px; display:flex; flex-direction:column; box-shadow:0 24px 60px -20px rgba(0,0,0,0.18); }
.c1 { background:linear-gradient(160deg,#f7d2c2 0%,#f3a98a 100%); color:#3a1d10; }
.c2 { background:linear-gradient(160deg,#fff7e6 0%,#ffe4b8 100%); color:#3a2e10; }
.c3 { background:linear-gradient(160deg,#e8f0e3 0%,#bcd6b3 100%); color:#1f3a1f; }
.c4 { background:linear-gradient(160deg,#e7e8f5 0%,#bec1e8 100%); color:#1d1f4a; }
.c5 { background:linear-gradient(160deg,#fce7f0 0%,#f5b3ce 100%); color:#4a1b34; }
.c6 { background:linear-gradient(160deg,#fff8e1 0%,#f7c99b 100%); color:#3a2210; }
.c7 { background:linear-gradient(160deg,#15140f 0%,#3a2620 100%); color:#fafaf7; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,0.55); backdrop-filter:blur(8px); font-size:18px; font-weight:600; align-self:flex-start; }
.num { font-family:Georgia, serif; font-style:italic; font-size:120px; font-weight:700; line-height:0.9; opacity:0.85; margin-bottom:24px; }
h2 { font-size:64px; font-weight:900; line-height:1.1; letter-spacing:-0.01em; margin:0 0 32px; }
.body { font-size:30px; font-weight:500; line-height:1.55; opacity:0.85; max-width:24ch; }
.watermark { position:absolute; bottom:32px; right:36px; font-size:16px; opacity:0.55; font-weight:500; }
.pageno { position:absolute; top:36px; right:44px; font-family:'Inter',sans-serif; font-size:18px; font-weight:600; opacity:0.45; letter-spacing:0.08em; }
.hero { font-size:120px; font-weight:900; line-height:1.0; letter-spacing:-0.025em; margin:0; }
</style>
</head>
<body>
<div class="deck">
<div class="card c1">
<div class="pageno">01 / 07</div>
<div class="badge">⚡ 建议收藏 · 干货预警</div>
<div style="margin:auto 0">
<div style="font-size:24px; font-weight:600; opacity:0.7; margin-bottom:18px">AI 工具党 · 必看</div>
<h2 class="hero">5 个让你的<br/>AI 编辑<br/>更顺手的<br/><span style="color:#9c2a25">小习惯</span></h2>
</div>
<div style="font-size:22px; opacity:0.65; font-weight:500">滑动看 →</div>
<div class="watermark">@HTMLAnything · 5/11</div>
</div>
<div class="card c2">
<div class="pageno">02 / 07</div>
<div class="num">01</div>
<h2>放弃<br/>完美 prompt</h2>
<p class="body">你写的 prompt 不可能一次完美。把它当 <strong>对话</strong>, 不是 SQL。</p>
<div class="watermark">@HTMLAnything</div>
</div>
<div class="card c3">
<div class="pageno">03 / 07</div>
<div class="num">02</div>
<h2>让 AI 看见<br/>你的格式</h2>
<p class="body">贴 markdown / CSV 之前, 先告诉它 <strong>"我希望输出像 X 风格"</strong>。<br/><br/>给一个具体参考, 比 50 个形容词管用。</p>
<div class="watermark">@HTMLAnything</div>
</div>
<div class="card c4">
<div class="pageno">04 / 07</div>
<div class="num">03</div>
<h2>用模板,<br/>别每次重写</h2>
<p class="body">把好用的提示词存成模板。HTML Anything 直接选模板就行 ——<br/><br/><strong>9 套世界级设计 system</strong> 现成的。</p>
<div class="watermark">@HTMLAnything</div>
</div>
<div class="card c5">
<div class="pageno">05 / 07</div>
<div class="num">04</div>
<h2>二次编辑<br/>跑 diff</h2>
<p class="body">重新生成不是从 0 开始。改完内容<strong>只发 diff</strong>, 让 AI 在已有 HTML 上微调 ——<br/><br/>省 80% token + 保持设计风格。</p>
<div class="watermark">@HTMLAnything</div>
</div>
<div class="card c6">
<div class="pageno">06 / 07</div>
<div class="num">05</div>
<h2>复用<br/>本地 session</h2>
<p class="body">不用 API Key, 让本地 Claude / Cursor / Codex 跑。<br/><br/><strong>0 边际成本</strong>, 速度比远程 API 快得多。</p>
<div class="watermark">@HTMLAnything</div>
</div>
<div class="card c7">
<div class="pageno">07 / 07</div>
<div style="margin:auto 0">
<div style="font-size:24px; font-weight:600; color:#e9b94a; margin-bottom:24px">看完别走 ✨</div>
<h2 class="hero" style="color:#fafaf7">工具不是<br/>越多越好,<br/><span style="color:#e9b94a">流程顺</span><br/>才是真的好用。</h2>
</div>
<div style="display:flex; gap:14px; font-size:22px; font-weight:600">
<span style="padding:10px 22px; background:#e9b94a; color:#15140f; border-radius:999px">关注</span>
<span style="padding:10px 22px; background:rgba(255,255,255,0.12); color:#fafaf7; border-radius:999px; border:1px solid rgba(255,255,255,0.2)">收藏</span>
<span style="padding:10px 22px; background:rgba(255,255,255,0.12); color:#fafaf7; border-radius:999px; border:1px solid rgba(255,255,255,0.2)">分享</span>
</div>
<div class="watermark" style="color:rgba(255,255,255,0.5)">@HTMLAnything · 每周 AI workflow 实战</div>
</div>
</div>
</body>
</html>5 个让你的 AI 编辑用得更顺手的小习惯
封面
建议收藏 · AI 工具党 必看
卡 1: 放弃完美 prompt
你写的 prompt 不可能一次完美。把它当对话, 不是 SQL。
卡 2: 让 AI 看见你的格式
贴一段 markdown / CSV 之前, 先告诉它"我希望输出像 X 风格"—— 给一个具体参考, 比给 50 个形容词管用。
卡 3: 用模板, 别每次重写
把好用的提示词存成模板。HTML Anything 直接选模板就行, 9 套世界级设计 system 现成的。
卡 4: 二次编辑跑 diff
重新生成不是从 0 开始。改完内容只发 diff, 让 AI 在已有 HTML 上微调, 省 80% token + 保持设计风格。
卡 5: 复用本地 session
不用 API Key, 让本地 Claude / Cursor / Codex 跑。0 边际成本, 速度比远程 API 快得多。
总结
工具不是越多越好, 流程顺才是真的好用。 关注我, 每周更新 AI workflow 实战。
Related skills
Azure AiIntegrates Azure AI Content Safety, Document Intelligence, Speech, and Search services into Java-based agents and applications.479k1.3kAzure PrepareGenerate the exact Azure infrastructure files, Dockerfiles, and azure.yaml configuration needed before deploying any new or modernized application.479k1.3kAzure StorageConnect agents and applications to Azure Blob Storage, File Shares, Queues, Tables, and Data Lake without leaving the coding environment.478k1.3kAppinsights InstrumentationAutomatically instrument web applications running on Azure App Service with Application Insights for observability without manual configuration.478k1.3kAzure Resource LookupInstantly list, query, and discover any Azure resources across subscriptions without leaving the agent chat.478k1.3kAzure AigatewayConfigure Azure API Management as a secure, governed gateway for routing traffic to LLMs, MCP servers, and agent tools.478k1.3kHow it compares
Pick card-xiaohongshu for Chinese social carousel screenshots; pick generic presentation or slide skills when the target format is PDF decks or Western LinkedIn carousels.
FAQ
What does card-xiaohongshu do?
Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
When should I use card-xiaohongshu?
During operate infra work for cloud & infrastructure.
Is card-xiaohongshu safe to install?
Review the Security Audits panel on this listing before production use.