xhs-trending-cards

小红书知识卡片 & 公众号贴图生成 Skill - 一键生成精美多风格社交传播卡片

为 AI Agent 设计的小红书/公众号卡片生成技能。给定任意榜单数据，自动生成 1242×1660px（Style A-F）或 1080×1440px（Style G）精美卡片 + 发布文案，支持 html2canvas / Playwright 一键批量下载高清 PNG。

为什么用这个？

• 社交传播场景对视觉要求极高 - 粗糙的截图没人愿意点
• 手动做图耗时 - 一套5张卡片至少2小时
• 文案有套路 - 高点击率标题/标签/发布时间都有公式
• 这个 Skill 让 AI Agent 一键完成：数据采集 → 卡片生成 → 文案输出 → 主动询问文案需求

支持风格（7种）

效果预览

案例1: GitHub AI 开源项目 Top5（Style A 默认）

7张卡片（1封面 + 6详情），深色科技风 + 渐变主题色

• 卡片 HTML: examples/01-github-ai-trending-top5/cards.html
• 发布文案: examples/01-github-ai-trending-top5/copywriting.md

案例2: GitHub 2026 年度十大开源工具（Style A）

11张卡片（1封面 + 10详情），多主题色区分

• 卡片 HTML: examples/02-github-2026-top10-tools/cards.html
• 发布文案: examples/02-github-2026-top10-tools/copywriting.md

案例3: AI PPT 生成工具 Top6（Style A）

7张卡片（1封面 + 6详情），深色科技风渐变主题色

• 卡片 HTML: examples/03-ai-ppt-tools-top6/cards.html
• 发布文案: examples/03-ai-ppt-tools-top6/copywriting.md

案例4: Kimi K2.6 重磅发布（Style B Apple 极简）

2张卡片（1封面 + 1详情），纯黑底 + 白大字 + 橙色品牌色

• 风格：Style B - Apple/Minimal 极简风格（纯黑 #000 + 白大字 + #ff6b35 橙重点色）
• 卡片 HTML: examples/04-kimi-k26-apple-style/cards.html
• 发布文案: examples/04-kimi-k26-apple-style/copywriting.md

案例5: GitHub AI 个人开发者每日精选（Style G macOS Skill Card）

4张卡片（1封面 + 3详情），macOS窗口风 + 五维雷达图 + 评分系统

• 卡片 HTML: examples/05-github-daily-pick-20260526/github-daily-pick-20260526.html
• Style G 特性：macOS红黄绿三圆点标题栏、五维雷达图评分、橙色Callout变现路径

五维评分标准（Style G）

每个开发者/项目按5个维度打分（满分100 = 5星）：

重要：评分必须列出依据，不可随意填分。封面雷达图 = 本期所有开发者平均分；详情页雷达图 = 该开发者个人评分。

Workflow（4 Phases）

Phase 1: 数据采集

统一输出格式:

[
  { "name": "Project Name", "desc": "一句话定位", "stars": "351K", "url": "github.com/org/repo", "tags": ["TypeScript","AI"], "rank": 1 }
]

Phase 2: 卡片生成

基于 assets/card_template.html 模板（Style A-F）或直接写独立 HTML（Style G）：

• Style A-F：CSS Grid 3行布局 grid-template-rows: 12px 1fr auto
• Style G：flex column 布局，macOS标题栏 + 五维雷达图SVG
• 封面卡：徽章 + 标题 + 副标题 + 排名列表 + CTA
• 详情卡：排名徽章 + 项目名 + URL + 标签 + 数据行 + 模块内容

Phase 3: 文案输出

遵循 references/copywriting_guide.md 生成发布文案：

• 小红书文案：5个标题选项（情绪词 + 数字）+ 正文 + 20个精准标签 + 发布时间建议
• 微头条文案（150字硬性限制）：hook（1句）+ 核心洞察（2-3句）+ CTA（1句），适合今日头条/新浪财经微头条

Phase 4: 交付后主动询问（必做）

卡片生成并预览后，必须主动询问用户是否需要文案：

卡片已生成完毕，需要我帮你写一版配套文案吗？

• A. 小红书文案（含标题选项 + 正文 + 20个标签）
• B. 微头条文案（150字，适合今日头条/新浪财经微头条）
• C. 不需要，就这样

此步骤不可跳过，即使用户没有主动提文案需求。

视觉规范

Style A: Dark Tech（默认）

Background:        #0f172a (深海军蓝)
Card inner:        #1e293b (石板灰)
Text primary:      #e2e8f0
Text secondary:    #cbd5e1
Text muted:        #94a3b8

Theme colors (per card):
  Cyan:            #00d4ff  (排名1, 科技)
  Silver:          #e2e8f0  (排名2)
  Bronze:          #cd7f32  (排名3)
  Purple:          #a78bfa  (排名4-5)
  Gold:            #fbbf24  (高亮模块)

Style G: macOS Skill Card

页面底色:    #FAFBFC
容器描边:    #2563EB 4px
主蓝:        #2563EB
橙色:        #F97316
绿色:        #22C55E
黄色:        #EAB308
紫色:        #8B5CF6
文字主色:    #1E293B

• 布局：flex column（防溢出），.win-bar 56px高，.footer margin-top:auto 固定底部
• 雷达图：SVG viewBox 0 0 400 400，渲染尺寸 360×360px（紧凑版）
• 字号：主标题 54px，开发者名 34px，正文 15-18px

Project Structure

xhs-trending-cards/
├── README.md                            # 项目文档（本文件）
├── SKILL.md                             # AI Agent Skill 定义（完整规范）
├── LICENSE                              # MIT 许可证
├── assets/
│   ├── card_template.html               # HTML 卡片模板 - Style A 深色科技风
│   └── card_template_apple.html       # HTML 卡片模板 - Style B Apple 极简风
├── references/
│   └── copywriting_guide.md           # 小红书文案写作指南
└── examples/                          # 优秀案例
    ├── 01-github-ai-trending-top5/   # Style A - GitHub AI Top5
    ├── 02-github-2026-top10-tools/   # Style A - 年度十大工具
    ├── 03-ai-ppt-tools-top6/        # Style A - AI PPT工具 Top6
    ├── 04-kimi-k26-apple-style/      # Style B - Kimi K2.6 Apple极简
    └── 05-github-daily-pick-20260526/ # Style G - macOS开发者精选

Quick Start

1. 采集数据 - 使用 GitHub Trending API / 网页搜索 / 用户提供数据
2. 确认范围 - 卡片风格（默认 Style A）、数量（封面 + N张详情）
3. 生成 HTML - 基于 assets/card_template.html 模板填充数据（Style G 直接写独立HTML）
4. 预览 - preview_url 在浏览器中预览效果
5. 下载 - 点击按钮一键批量下载 PNG（html2canvas 或 Playwright + sharp）

Tech Stack

• Style A-F：HTML5 + CSS3（纯 CSS Grid 布局，零依赖）+ html2canvas（客户端 PNG 生成）
• Style G：HTML5 + CSS3（flex column 布局）+ SVG（五维雷达图）+ Playwright element.screenshot() + sharp（精确像素裁剪）
• JavaScript（下载自动化）
• Google Fonts / 系统字体（可选）

适用场景

• 小红书知识卡片 / 榜单卡片 / 排行榜图片
• 微信公众号文章配图
• 知乎/即刻/微博等技术分享图
• GitHub 项目 README 头图
• 产品发布/周报/盘点等可视化传播
• GitHub 开发者精选 / 个人项目盘点 / 多维度评分（Style G 专属）

微头条文案规范

当需要发布到今日头条微头条或新浪财经时，使用微头条文案（150字硬性限制）：

• 长度：严格 150 中文字符（含标点）
• 风格：冲击力强的短句、好奇心驱动、最多1-2个话题标签
• 结构：hook（1句）+ 核心洞察（2-3句）+ CTA（1句）
• 交付格式：纯文本，无 Markdown 格式
• 平台：新浪财经 / 今日头条微头条

License

MIT

Author

Built for AI agents and content creators.