xhs-trending-cards

name	xhs-trending-cards
description	Generate XiaoHongShu / social ranking cards with HTML preview and PNG export. Supports Style A-H: Dark Tech, Apple Minimal, White Editorial, Pastel, Magazine, Dark Cinematic, macOS Skill Card, Compact macOS Card. Use for ranking infographics, GitHub/NPM/AI tool trends, knowledge cards, social carousels, and publish-ready copywriting.

XiaoHongShu Trending Cards Generator

Use this skill when the user asks to create 小红书卡片, 排行榜卡片, 知识卡片, GitHub/NPM/AI 工具榜单图, social carousel cards, or batch downloadable PNG cards.

Source of truth

• Style registry: assets/styles.json
• Shared A/C/D/E/F template: assets/card_template.html
• Apple template: assets/style_b_apple.html
• macOS large template: assets/style_g_macos_skill.html
• macOS compact template: assets/style_h_compact_macos.html
• All-style preview script: scripts/preview_all_styles.js
• Copywriting guide: references/copywriting_guide.md

Quick commands

Generate preview images for all styles:

node scripts/preview_all_styles.js

Custom output directory:

node scripts/preview_all_styles.js ./tmp/style-previews

If Playwright browsers are missing:

npx playwright install chromium

Styles

Read assets/styles.json before generating cards. It defines each style's id, slug, size, template, wrapper class, background, accent color, and use cases.

• Style A: Dark Tech, default for technical rankings and AI tool lists.
• Style B: Apple Minimal, pure black high-impact product launch poster.
• Style C: White Editorial, clean white editorial/tutorial card.
• Style D: Pastel Card, warm lifestyle/light science card.
• Style E: Magazine, paper-toned long-form/report style.
• Style F: Dark Cinematic, dramatic reveal/frontier tech style.
• Style G: macOS Skill Card, 1080x1440 developer/project scoring card.
• Style H: Compact macOS Card, 420px compact embed/share card.

Required data format

Use structured data. Minimum fields:

[
  {
    "name": "Project Name",
    "desc": "One-line description",
    "stars": "351K",
    "url": "github.com/org/repo",
    "tags": ["TypeScript", "AI"],
    "rank": 1
  }
]

For Style G/H, include evidence-backed scores:

{
  "scores": {
    "starGrowth": 92,
    "heat": 88,
    "innovation": 90,
    "monetization": 82,
    "influence": 95
  },
  "scoreEvidence": [
    "7-day star growth was +860",
    "Clear developer-tool subscription path"
  ]
}

Do not invent Style G/H scores without a short evidence note.

Workflow

1. Collect data from user input, GitHub Trending, NPM, web search, or another relevant source. Use web search when freshness matters.
2. Choose a style. If the user does not specify one, default to Style A for technical rankings, Style C for educational/editorial content, and Style G for developer/project scorecards.
3. Render one cover card plus one detail card per item unless the user requests cover-only output.
4. Use the template listed in assets/styles.json.
5. Preview in a browser and export PNGs.
6. Verify that PNGs are non-empty, correctly sized, and not visibly clipped.
7. Ask the copywriting follow-up.

Rendering notes

• A/C/D/E/F use assets/card_template.html; set the wrapper class from styles.json for C-F.
• B/G/H use their standalone templates. They are intentionally separate because their layout rules differ from the shared 1242x1660 card template.
• Keep text short. Prefer concise names, one-line descriptions, and 3-5 tags.
• Use Playwright screenshots for precise PNG export when html2canvas clips or introduces black edges.

Style G/H scoring standard

Scores are 0-100. Use the same five dimensions in both radar charts:

1. Star growth: recent growth rate; daily +1% can be treated as 100.
2. Project heat: recent absolute star growth; +500 stars can be treated as 100.
3. Innovation: new technology, new scenario, or novel combination.
4. Monetization potential: market demand, distribution path, and pricing path.
5. Influence: developer background, community heat, and adoption signals.

Always list the evidence used for subjective scores.

Copywriting follow-up

After cards are generated and previewed, ask:

卡片已经生成完毕，需要我帮你写一版配套文案吗？ A. 小红书文案（标题选项 + 正文 + 20 个标签） B. 微头条文案（严格 150 个中文字符） C. 不需要

If the user chooses A, follow references/copywriting_guide.md. If the user chooses B, deliver plain text only and count exactly 150 Chinese characters including punctuation.