Generate professional XiaoHongShu (1242x1660px) trending/topic cards with html2canvas one-click batch download. Dark tech style, CSS Grid layout.
支持8种风格：Style A (Dark Tech/默认), Style B (Apple Minimal), Style C (White Editorial), Style D (Pastel), Style E (Magazine), Style F (Dark Cinematic), Style G (macOS Skill Card/1080x1440px), Style H (Compact macOS Card/420px宽)
assets/card_template.html, fill in data
preview_url to show in browser
Determine data source based on user's topic:
| Topic | Data Source | Method |
|-------|------------|--------|
| GitHub trending | GitHub热门项目 skill + scripts/github_trending.py | Weekly/daily, JSON output |
| NPM packages | web search + registry API | Search by keyword |
| Custom list | User provides CSV/JSON/text | Parse directly |
| General trending | agent-reach / web search | Multi-platform search |
Output format required: Array of objects with at minimum:
[
{ "name": "Project Name", "desc": "One-line description", "stars": "351K", "url": "github.com/org/repo", "tags": ["TypeScript","AI"], "rank": 1 }
]
Use the HTML template in assets/card_template.html. The template implements:
grid-template-rows: 12px 1fr auto
justify-content: space-between — all blocks evenly distributed, no bottom gap
Card types:
type=cover): Badge + title + subtitle + ranked list of 5 items + footer
type=detail): Rank badge + large name + URL + tags + stats row + intro section (blue bar) + features section (gold bar) + target audience section (purple bar)
To generate cards:
assets/card_template.html
--theme per card for unique accent color
Generate XHS publish-ready copy following references/copywriting_guide.md structure:
Also support 微头条文案 (WeChat headline copy, 150 chars):
After cards are generated and previewed, MUST proactively ask the user if they want copywriting:
Inquiry message (Chinese):
> 卡片已生成完毕，需要我帮你写一版配套文案吗？
> - A. 小红书文案（含标题选项 + 正文 + 20个标签）
> - B. 微头条文案（150字，适合今日头条/新浪财经微头条）
> - C. 不需要，就这样
Rules:
The HTML template uses these replaceable tokens (search-and-replace):
| Token | Description | Example |
|-------|-------------|---------|
| {{THEME_COLOR}} | Primary accent color | #00d4ff |
| {{TOP_BAR_GRADIENT}} | Top bar gradient CSS | linear-gradient(90deg, #00d4ff, ...) |
| {{COVER_BADGE}} | Cover badge text | GitHub Trending - This Week |
| {{COVER_TITLE}} | Cover main title | AI Open Source Top 5 |
| {{COVER_SUBTITLE}} | Cover subtitle | 2026 Week 2 - Developer Must-See |
| {{PROJECT_LIST}} | HTML block of 5 ranked items | See template |
| {{ITEM_NAME}} | Project/tool name | OpenClaw |
| {{ITEM_URL}} | URL | github.com/openclaw/openclaw |
| {{ITEM_TAGS}} | Tag HTML block | ... |
| {{STAT_STARS}}, {{STAT_FORKS}}, {{STAT_RANK}} | Stats numbers | 351,420 |
| {{INTRO_TEXT}} | Intro section body | One paragraph description |
| | | | Element | Size | Weight | Color | Notes |
|---------|------|--------|-------|-------|
| Cover badge | 28px | 800 | white | gradient bg |
| Cover title | 88px | 800 | gradient | multi-line ok |
| Cover subtitle | 38px | 400 | #94a3b8 | |
| Item name (list) | 34px | 800 | #e2e8f0 | |
| Item desc (list) | 24px | 400 | #94a3b8 | |
| Stars number | 26-30px | 800 | varies | |
| Detail rank | 28px | 900 | varies | pill shape |
| Project name | 90px | 800 | --theme | word-break ok |
| URL | 26px | normal | #64748b | monospace font |
| Tags | 24px | 600 | varies | pill shape |
| Stat value | 46px | 900 | varies | |
| Stat label | 24px | normal | #94a3b8 | |
| Section title | 38px | 700 | --theme/sec-bar | |
| Section body | 30px | normal | #cbd5e1 | line-height 1.55 |
| Feature item | 28px | normal | #e2e8f0 | dot + bold key |
| CTA button | 44px | 700 | white | full-width rounded |
深色科技风 — 藏青底 纯黑苹果风 — 纯黑底 生成 Style B 卡片时，直接在 HTML 中写死样式（参考 白底杂志风 — 白底 #fff + gradient-text + 软卡片 + focus pill + 顶栏装饰线
马卡龙 — 暖白底 #fef8f1 + radial-gradient blob + Playfair标题 + 粉色系
报纸衬线 — 纸张色 #f3eee2 + 衬线标题 + accent rule + 大写mono标签
暗黑电影感 — 暗黑底 #0a0a0a + 渐变背景 + scrim遮罩 + 衬线大字
白底macOS窗口风 — 白底 #FAFBFC + 蓝色4px描边圆角容器 + macOS红黄绿三圆点标题栏 + 五维雷达图 + 胶囊标签 + 橙色Callout
生成 Style G 卡片时，直接写独立 HTML（不使用 card_template.html），参考 白底紧凑风 — 白底 #fff + 蓝色2px描边 + macOS红黄绿三圆点标题栏 + 五维雷达图 + 胶囊标签 + 橙色Callout
生成 Style H 卡片时，直接写独立 HTML（不使用 card_template.html），参考用户提供的 模板 CSS 已内置以下可复用组件，生成任意风格卡片时均可调用：
| 组件类 | 说明 | 适用风格 |
|---|---|---|
| | | | | | | | | | | 当用户没有指定风格时，按话题类型推荐：
用户明确说"用风格X"或"Style X"时，直接对应用对应模板 CSS 类。
Always include this exact download logic in generated HTML:
Key points: hide control bar before capture, scale 2 for retina, secondary canvas crop eliminates black edges.
Note: Style G (macOS Skill Card, 1080x1440) HTML 已内置 html2canvas 下载逻辑（与 Style A-F 相同）。如需更精确的像素裁剪，可额外使用 Playwright Each generation produces:
| Variation | How to Handle |
|-----------|---------------|
| Only cover card needed | Generate 1 card only, skip detail cards |
| More than 5 items | Show top 5 on cover, generate detail cards for all |
| Different size needed | Change | Light/bright style | Swap color palette, keep layout grid |
| Brand colors requested | Replace | Include QR code | Add QR code image in CTA area or footer |
| Video cover format | Use 1080x1920 (portrait video ratio) instead of 1242x1660 |
{{FEATURE_LIST}} | Feature items HTML | 4 {{TARGET_AUDIENCE}} | Target audience text | Who should use this |
{{CTA_TEXT}} | Bottom button text | #1 OpenClaw - Personal AI Assistant |
Color Palette Reference
Background: #0f172a (deep navy)
Card inner: #1e293b (slate)
Text primary: #e2e8f0
Text secondary: #cbd5e1
Text muted: #94a3b8
Text footer: #64748b
Theme colors (per card):
Cyan: #00d4ff (rank 1, tech)
Silver: #e2e8f0 (rank 2)
Bronze: #cd7f32 (rank 3)
Purple: #a78bfa (rank 4-5, special)
Gold: #fbbf24 (highlight section)
Green: #34d399 (positive stats)
Pink: #f472b6 (accent dots)
Stars badge: background #fef3c7, color #92400e (gold on cream)
Rank #1: gradient(#ffd700, #ffaa00) bg, black text
Rank #2: gradient(#c0c0c0, #a0a0a0) bg, black text
Rank #3: gradient(#cd7f32, #b8860b) bg, white text
Rank 4+: #334155 bg, muted text
Typography Scale (for 1242x1660px canvas)
Style Variants
Style A: Dark Tech（默认风格）
#0f172a + 卡片 #1e293b + 多彩主题色
Style B: Apple/Mi 极简
#000 + 纯白大字 + 橙色品牌点缀
kimi_k26_cards.html 的 Apple 风格实现），不使用 card_template.html。
Style C: White Editorial（借鉴 xhs-white-editorial）
.gradient-text、软卡片 .card.soft-blue 等、focus pill .focus-pill.blue、顶栏色条 .topline、步骤圆圈 .step-circle
.card 或 父容器上加 .style-white（模板 CSS 已包含）
Style D: Pastel Card（借鉴 xhs-pastel-card）
.blob、大号衬线标题（Playfair Display）、彩色编号圆圈 .step-circle、温暖感配色
.card 或父容器上加 .style-pastel
Style E: Magazine（借鉴 magazine-poster）
.accent-rule、大写monospace标签 .cover-badge 风格、引用块 .quote-block（左侧色条+tint背景）、编号条 .num-bar
.card 或父容器上加 .style-mag
Style F: Dark Cinematic（借鉴 social-carousel）
.scrim（底部渐变暗角）、半透明badge（backdrop-filter blur）、居中大字衬线标题、卡片半透明边框
.card 或父容器上加 .style-cinematic
Style G: macOS Skill Card（Skill评估卡片风格）
.card：width:1080px height:1440px，display:flex; flex-direction:column，内容自然撑开
.main-box：absolute定位撑满card，display:flex; flex-direction:column
.win-bar：56px高，flex-shrink:0，z-index:10
.inner：margin-top:56px; flex:1; display:flex; flex-direction:column; padding:20px 44px 18px; overflow:hidden
.footer：margin-top:auto; padding-top:10px 固定底部
border-top: 2px dashed #E2E8F0
background:#FFF7ED + border-left:5px solid #F97316
0 0 400 400，中心 (200,200)，外圈半径 150
fill="rgba(主色,0.12)" stroke="主色" stroke-width="2.5"
element.screenshot() + sharp resize 到精确 1080x1440，或 html2canvas scale:2 裁剪
github-daily-pick-20260526.html v2 实现。
Style H: Compact macOS Card（紧凑型macOS卡片）
.card：width:420px，height:auto，display:flex; flex-direction:column，内容自然撑开
.window-bar：高度auto，padding-bottom:10px，border-bottom:1px solid #eee
.header：display:flex，gap:10px，margin-bottom:10px
.stats：display:flex，gap:8px，margin-bottom:12px
.radar-box：width:220px，height:220px，margin:0 auto
.innovation / .monetization：margin-bottom:10px
.footer：padding-top:8px，border-top:1px solid #f0f0f0
fill="rgba(124,92,255,0.12)" stroke="#7C5CFF" stroke-width="2"
background:#FFF7ED + border-left:5px solid #F97316（注：HTML中用的是#fffaf0背景+#ed6c02文字）
github-card-compact-demo.html 实现。
Reusable Components (v2)
.gradient-text / .accent | 渐变文字效果（background-clip:text） | C / A / B |
.card-soft / .card.soft-blue 等 | 软底色卡片变体（#f0f4ff/#edfdf3等） | C |
.focus-pill / .focus-pill.blue | 强调药丸（蓝/绿/橙底色+深色字） | C |
.topline | 顶栏多色装饰线（7色gradient） | C |
.step-circle | 步骤编号圆圈（48px圆、深色底白字） | C / D |
.blob | radial-gradient装饰圆（blur滤镜、absolute定位） | D |
.accent-rule | 色条分隔线（3px高、72px宽） | E |
.quote-block | 引用块（左侧色条 + tint背景、mono字体） | E |
.num-bar / .num-bar .bar | 编号+小横条（大写mono、适合步骤标题） | E |
.pill / .pill-accent / .pill-done | 状态药丸（todo/progress/done三色） | 通用（借鉴meeting-notes） |
.scrim | 暗色遮罩层（底部渐变暗角） | F |
Style Selection Workflow
Download JS (html2canvas anti-black-edge)
async function downloadCard(id) {
const el = document.getElementById(id);
const ctrl = document.getElementById('ctrlBar');
ctrl.style.display = 'none';
try {
const canvas = await html2canvas(el, {
scale: 2, useCORS: true, allowTaint: true,
backgroundColor: '#0f172a', scrollX: 0, scrollY: 0,
});
// Precision crop to 1242x1660
const out = document.createElement('canvas');
const W = 1242 * 2, H = 1660 * 2;
out.width = W; out.height = H;
const ctx = out.getContext('2d');
ctx.drawImage(canvas, 0, 0, W, H, 0, 0, W, H);
const link = document.createElement('a');
link.download = `Card_${id}.png`;
link.href = out.toDataURL('image/png', 1.0);
link.click();
} finally { ctrl.style.display = 'flex'; }
}
element.screenshot() + sharp resize 服务端导出。
Output Deliverables
github_[topic]_cards.html in workspace root (or user-specified path)
xhs_[topic]_文案.md in workspace root
Common Variations
.card { width/height } and adjust all font sizes proportionally |
--theme with brand hex, update gradient stops |
共 1 个版本