XiaoHongShu Trending Cards Generator

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宽)

Quick Start

1. Get data — Use GitHub Trending API / web search / user-provided data to collect the list items
2. Confirm scope — Ask user: card style (dark-tech default), how many cards (cover + N details)
3. Generate HTML — Load template from assets/card_template.html, fill in data
4. Preview — Use preview_url to show in browser
5. User downloads — Click buttons to download individual or all cards as clean PNGs

Workflow (4 phases)

Phase 1: Data Collection

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 }
]

Phase 2: Card Generation

Use the HTML template in assets/card_template.html. The template implements:

• CSS Grid 3-row layout: grid-template-rows: 12px 1fr auto
• Row 1 (12px): Top theme color bar
• Row 2 (1fr): Main content area with justify-content: space-between — all blocks evenly distributed, no bottom gap
• Row 3 (auto): CTA button area, natural height

Card types:

1. Cover card (type=cover): Badge + title + subtitle + ranked list of 5 items + footer
2. Detail card (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:

1. Read assets/card_template.html
2. For each item in data, render a detail card + one cover card
3. Set CSS variable --theme per card for unique accent color
4. Include html2canvas download JS with precise crop logic

Phase 3: Copywriting

Generate XHS publish-ready copy following references/copywriting_guide.md structure:

• 5 title options (emotion words + numbers)
• Full body text (per-item paragraph + link)
• 20 targeted tags
• Publishing tips (best time, image order)

Also support 微头条文案 (WeChat headline copy, 150 chars):

• Length: strict 150 Chinese chars (including punctuation)
• Style: punchy, curiosity-driven, max 1-2 hashtags
• Structure: hook (1 sentence) + core insight (2-3 sentences) + CTA (1 sentence)
• Platform: 新浪财经 / 今日头条微头条
• Deliver as plain text, no markdown formatting

Phase 4: Post-Generation Inquiry（必做）

After cards are generated and previewed, MUST proactively ask the user if they want copywriting:

Inquiry message (Chinese):

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

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

Rules:

• This step is mandatory — never skip, even if user didn't ask for copywriting
• If user chooses A: generate full XHS copy per Phase 3 spec
• If user chooses B: generate 150-char micro-headline copy per Phase 3 spec
• If user chooses C: end the workflow
• For 微头条, strictly enforce 150 char limit — count before delivering

Template Variables

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	<span class="detail-tag">...</span>
{{STAT_STARS}}, {{STAT_FORKS}}, {{STAT_RANK}}	Stats numbers	351,420
{{INTRO_TEXT}}	Intro section body	One paragraph description
{{FEATURE_LIST}}	Feature items HTML	4 <div class="feature-item"> blocks
{{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)

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 Variants

Style A: Dark Tech（默认风格）

深色科技风 — 藏青底 #0f172a + 卡片 #1e293b + 多彩主题色

• 适用场景：GitHub Trending、项目排行榜、AI工具盘点
• 颜色：背景#0f172a，卡片#1e293b，文字#e2e8f0/#94a3b8
• 元素：彩色主题色竖条、圆角排名徽章、米黄色Stars徽章

Style B: Apple/Mi 极简

纯黑苹果风 — 纯黑底 #000 + 纯白大字 + 橙色品牌点缀

• 适用场景：重磅发布、明星产品、冲击力海报
• 颜色：背景#000，文字#fff，一级强调#ff6b35，二级#ff9500/ffd600
• 元素：极简大字、克制用色（橙一点点缀）、零emoji、无花哨装饰
• 排版原则：字号大、信息密、留白少（封面主标题148px+，统计数据64px，详情卡满铺表格/feature grid）
• 字体层级：主标题→副标题→数据行→模块标题→正文，层级分明

生成 Style B 卡片时，直接在 HTML 中写死样式（参考 kimi_k26_cards.html 的 Apple 风格实现），不使用 card_template.html。

Style C: White Editorial（借鉴 xhs-white-editorial）

白底杂志风 — 白底 #fff + gradient-text + 软卡片 + focus pill + 顶栏装饰线

• 适用场景：编辑性内容、对比盘点、教程指南、产品评测
• 颜色：背景#fff，文字#111216，主题渐变#3b6cff/#7a5cff/#ff5c8a
• 元素：渐变文字 .gradient-text、软卡片 .card.soft-blue 等、focus pill .focus-pill.blue、顶栏色条 .topline、步骤圆圈 .step-circle
• 激活方式：在 .card 或 <body> 父容器上加 .style-white（模板 CSS 已包含）

Style D: Pastel Card（借鉴 xhs-pastel-card）

马卡龙 — 暖白底 #fef8f1 + radial-gradient blob + Playfair标题 + 粉色系

• 适用场景：生活方式、温暖主题、女性向内容、轻松科普
• 颜色：背景#fef8f1，主色#ff8b5c（peach）、#2e9d70（mint）、#4e7ed6（sky）、#7b61ff（lilac）
• 元素：radial-gradient blob装饰 .blob、大号衬线标题（Playfair Display）、彩色编号圆圈 .step-circle、温暖感配色
• 激活方式：在 .card 或父容器上加 .style-pastel

Style E: Magazine（借鉴 magazine-poster）

报纸衬线 — 纸张色 #f3eee2 + 衬线标题 + accent rule + 大写mono标签

• 适用场景：深度长文、行业报告、叙事性内容、历史回顾
• 颜色：背景#f3eee2，墨水色#1f1c17，强调色#b85a3a
• 元素：accent rule色条 .accent-rule、大写monospace标签 .cover-badge 风格、引用块 .quote-block（左侧色条+tint背景）、编号条 .num-bar
• 激活方式：在 .card 或父容器上加 .style-mag

Style F: Dark Cinematic（借鉴 social-carousel）

暗黑电影感 — 暗黑底 #0a0a0a + 渐变背景 + scrim遮罩 + 衬线大字

• 适用场景：重磅发布、dramatic reveal、科技前沿、AI工具首发
• 颜色：背景#0a0a0a，文字#f4ede0，强调色#a4a09a
• 元素：scrim遮罩层 .scrim（底部渐变暗角）、半透明badge（backdrop-filter blur）、居中大字衬线标题、卡片半透明边框
• 激活方式：在 .card 或父容器上加 .style-cinematic

Style G: macOS Skill Card（Skill评估卡片风格）

白底macOS窗口风 — 白底 #FAFBFC + 蓝色4px描边圆角容器 + macOS红黄绿三圆点标题栏 + 五维雷达图 + 胶囊标签 + 橙色Callout

• 适用场景：GitHub开发者精选、个人项目盘点、技术评审卡片、多维度评分内容
• 尺寸：3:4竖版 1080x1440px（小红书标准图文），封面+多页详情
• 颜色体系：
  • 页面底色 #FAFBFC，容器白底 + 4px #2563EB 描边 + 28px 圆角
  • 主蓝 #2563EB，橙色 #F97316，绿色 #22C55E，黄色 #EAB308，紫色 #8B5CF6
  • 文字主色 #1E293B，副色 #64748B，淡色 #94A3B8/#CBD5E1
  • 排名徽章：#1 金黄 #F59E0B / #2 银灰 #64748B / #3 铜色 #CD7F32
• 布局架构（防溢出v2）：
  • .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 固定底部
  • 关键原则：内容不使用固定高度，用 flex 自适应分配空间，避免内容溢出/截断
• 核心元素：
  1. macOS窗口标题栏：顶部56px高，#F8FAFC底色，红(#FF5F57)/黄(#FEBC2E)/绿(#28C840)三圆点 + 等宽字体路径
  2. 五维雷达图（SVG）：Star增速/项目热度/创新度/变现潜力/开发者影响力，5层同心五边形网格 + 轴线 + 渐变填充数据面 + 彩色数据点圆圈 + 标签+分数
  3. 胶囊标签系统：实心胶囊(蓝底白字) + 描边胶囊(各色底色透明)
  4. 虚线分隔器：border-top: 2px dashed #E2E8F0
  5. 橙色左边框 Callout：变现路径区块，background:#FFF7ED + border-left:5px solid #F97316
  6. 彩色编号圆圈：核心创新列表，每项用不同底色圆圈标号
• 页面结构（封面）：
  • macOS标题栏 → 主标题(斜体粗黑) + 中文副标题 → 日期胶囊 + 3个分类标签 → 统计三列(总Stars/日均增速/项目数) → 五维雷达图 → 方向标签 → 底部引导
• 页面结构（详情页，每个开发者一页）：
  • macOS标题栏 → 排名徽章 + 开发者名 + @handle → 蓝底项目名胶囊 + 协议标签 → 三列数据(Stars/增速/日期) → 一句话总结 → 五维雷达图(个人评分) → 开发者背景 → 核心创新(编号列表) → 变现路径(橙色Callout)
• 字号规范（v2 紧凑版，1080x1440px）：
  • 主标题：54px 800 斜体 | 副标题：22px 500 | 开发者名：34px 700
  • 胶囊标签：18px 600 | 统计数值：30-36px 700 | 区块标题：20-22px 700
  • 正文：15-18px 400 | 说明文字：15px 400 | 脚注：18px #CBD5E1
  • handle：17px | 项目名胶囊：17px | 协议标签：15px
  • summary-box标题：15px 600 | summary-box正文：18px 600
• 间距规范（v2 紧凑版）：
  • inner padding：20px 44px 18px（上 右 下，左同右）
  • 模块间 margin-top：6-14px（紧凑排列，不浪费空间）
  • dashed-line margin：10px 0（上下各10px）
  • stats-row gap：14px
  • innov-item margin-bottom：8px
  • callout padding：12px 16px，border-left：5px
• 5维评分标准（满分100 = 5星，雷达图外圈=满分，坐标公式：score÷100×150=半径）：
  1. Star增速：7日增长率（%/天），基准：日均+1% = 100分，线性折算，封顶100
  2. 项目热度：7日内Star绝对增长量，基准：+500 stars = 100分，线性折算
  3. 创新度：新技术/新场景/新组合，需写明依据（如：双层框架=88），0-100主观评分
  4. 变现潜力：可推广度 + 市场需求度 + 变现案例，有完整商业化路径且有案例=100分
  5. 影响力：开发者背景（大厂/知名/普通）+ 社区热度（followers/项目被引用），知名开发者=100分
  • 封面雷达图 = 本期所有开发者各维度平均分
  • 详情页雷达图 = 该开发者个人评分
  • 评分必须列出依据，不可随意填分，生成卡片时在雷达图下方或详情中明确标注各维度分数
• 雷达图SVG规范：
  • viewBox 0 0 400 400，中心 (200,200)，外圈半径 150
  • 渲染尺寸：360×360px（不再用500px，避免占用过多纵向空间）
  • 5层同心五边形（每层间距30）、5条轴线、1px #E2E8F0 描边
  • 数据面：fill="rgba(主色,0.12)" stroke="主色" stroke-width="2.5"
  • 数据点：半径6，5色对应5维（蓝/橙/绿/黄/紫）
  • 标签：14px 700 #1E293B，位于轴线延长线外端
• 导出方式：使用 Playwright element.screenshot() + sharp resize 到精确 1080x1440，或 html2canvas scale:2 裁剪

生成 Style G 卡片时，直接写独立 HTML（不使用 card_template.html），参考 github-daily-pick-20260526.html v2 实现。

Style H: Compact macOS Card（紧凑型macOS卡片）

白底紧凑风 — 白底 #fff + 蓝色2px描边 + macOS红黄绿三圆点标题栏 + 五维雷达图 + 胶囊标签 + 橙色Callout

• 适用场景：GitHub个人开发者精选、技能评估卡片、小尺寸分享图、嵌入式卡片
• 尺寸：紧凑型 420px宽（自适应高度），适合网页嵌入/小图分享
• 颜色体系：
  • 页面底色 #f0f2f5（浅灰背景），卡片白底 #FFF + 2px #3B6EFF 描边 + 16px 圆角
  • 主蓝 #3B6EFF，紫色 #7C5CFF，橙色 #ED6C02，绿色 #16A34A，红色 #E53935
  • 文字主色 #1A1A1A，副色 #888/#555，淡色 #999/#BBB
  • 排名徽章：#1 金黄 #C48B3C / #2 银灰 #888 / #3 铜色 #888
• 布局架构（紧凑型）：
  • .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
• 核心元素：
  1. macOS窗口标题栏：红(#FF5F57)/黄(#FEBC2E)/绿(#28C840)三圆点(10px) + 等宽字体路径(#999, 12px)
  2. 排名徽章：36x36px，圆角8px，背景#C48B3C（金色），白色文字，700粗细
  3. 胶囊标签系统：
     • 紫色实心：background #7C5CFF, color #fff, 11px 600
     • 灰色描边：background #f5f5f5, color #666, border 1px solid #e0e0e0
     • 红色描边：background #fff5f5, color #e53935, border 1px solid #ffcdd2
     • 统一：padding 3px 10px，border-radius 12px
  4. 统计胶囊卡片：flex:1，background #fafbfc，border 1px solid #f0f0f0，圆角10px
     • 统计数值：20px 700（蓝/橙/绿三色），line-height 1.1
     • 统计标签：10px #999，margin-top 2px
  5. 五维雷达图（SVG）：Star增速/项目热度/创新度/变现潜力/开发者影响力，5层同心五边形网格 + 轴线 + 渐变填充数据面 + 彩色数据点圆圈 + 标签+分数
     • SVG尺寸：220×220px（紧凑型）
     • 数据面：fill="rgba(124,92,255,0.12)" stroke="#7C5CFF" stroke-width="2"
     • 标签：10px 600 #555
  6. 编号列表：核心创新区块，每项用18px彩色圆圈标号（紫#7C5CFF / 红#EF4444 / 橙#F59E0B）
  7. 橙色左边框 Callout：变现路径区块，background:#FFF7ED + border-left:5px solid #F97316（注：HTML中用的是#fffaf0背景+#ed6c02文字）
• 页面结构（单页紧凑型）：
  • macOS标题栏 → 排名徽章 + 开发者名 + @handle + 一句话描述 → 胶囊标签 → 统计三列(Stars/日均增速/创建日期) → 五维雷达图 → 核心创新(编号列表) → 变现路径(橙色Callout) → 页脚
• 字号规范（紧凑型，420px宽）：
  • 窗口路径：12px 400 #999
  • 排名徽章：15px 700
  • 开发者名：22px 700 #1a1a1a
  • handle + 描述：12px #888/#555
  • 胶囊标签：11px 600
  • 统计数值：20px 700
  • 统计标签：10px #999
  • 区块标题：13px 700 #3B6EFF（蓝色）/ #ED6C02（橙色）
  • 创新编号：10px 700 白色
  • 创新标题：12px 700 #222
  • 创新描述：11px #777
  • 变现标题：12px 700 #222
  • 变现描述：11px #777
  • 变现受众：11px 600 #ED6C02
  • 脚注：11px #BBB
• 间距规范（紧凑型）：
  • card padding：18px 20px 14px 20px（上 右 下 左）
  • window-bar margin-bottom：14px，padding-bottom：10px
  • header margin-bottom：10px
  • tags margin-bottom：10px
  • stats margin-bottom：12px
  • radar-wrap margin-bottom：12px
  • section-title margin-bottom：8px，padding-bottom：6px
  • innovation/monetization padding：10px 12px，margin-bottom：10px
  • innov-item margin-bottom：8px
  • footer padding-top：8px
• 5维评分标准（同Style G）：
  1. Star增速：7日增长率（%/天），基准：日均+1% = 100分，线性折算，封顶100
  2. 项目热度：7日内Star绝对增长量，基准：+500 stars = 100分，线性折算
  3. 创新度：新技术/新场景/新组合，需写明依据（如：双层框架=88），0-100主观评分
  4. 变现潜力：可推广度 + 市场需求度 + 变现案例，有完整商业化路径且有案例=100分
  5. 影响力：开发者背景（大厂/知名/普通）+ 社区热度（followers/项目被引用），知名开发者=100分
  • 雷达图 = 该开发者个人评分
  • 评分必须列出依据，不可随意填分，生成卡片时在雷达图下方或详情中明确标注各维度分数
• 与Style G的区别：
  • Style G：1080x1440px 大卡，适合小红书3:4图文，信息密度高
  • Style H：420px宽 紧凑卡，适合网页嵌入/小图分享/简洁展示，信息密度低，专注核心数据
• 导出方式：使用 html2canvas scale:2 裁剪，或直接使用浏览器截图

生成 Style H 卡片时，直接写独立 HTML（不使用 card_template.html），参考用户提供的 github-card-compact-demo.html 实现。

Reusable Components (v2)

模板 CSS 已内置以下可复用组件，生成任意风格卡片时均可调用：

组件类	说明	适用风格
.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

当用户没有指定风格时，按话题类型推荐：

• AI工具 / GitHub项目 / 技术榜单 → Style A（Dark Tech）默认
• 产品发布 / 重磅新闻 / 冲击力内容 → Style B（Apple/Minimal）
• 编辑性内容 / 对比 / 教程 → Style C（White Editorial）
• 生活方式 / 温暖主题 / 轻松科普 → Style D（Pastel Card）
• 深度长文 / 行业报告 → Style E（Magazine）
• 重磅发布 / dramatic reveal → Style F（Dark Cinematic）
• GitHub开发者精选 / 个人项目盘点 / 多维度评分 → Style G（macOS Skill Card）
• 紧凑展示 / 网页嵌入 / 小图分享 / 简洁信息 → Style H（Compact macOS Card）

用户明确说"用风格X"或"Style X"时，直接对应用对应模板 CSS 类。

Download JS (html2canvas anti-black-edge)

Always include this exact download logic in generated HTML:

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'; }
}

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 element.screenshot() + sharp resize 服务端导出。

Output Deliverables

Each generation produces:

1. HTML file — github_[topic]_cards.html in workspace root (or user-specified path)
   • All cards rendered inline
   • Control bar with single + batch download buttons
   • html2canvas CDN included
2. Copywriting file — xhs_[topic]_文案.md in workspace root
   • Title options, body text, tags, tips
3. PNG files — User clicks to download via browser, saved to their Downloads folder

Common Variations

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 .card { width/height } and adjust all font sizes proportionally
Light/bright style	Swap color palette, keep layout grid
Brand colors requested	Replace --theme with brand hex, update gradient stops
Include QR code	Add QR code image in CTA area or footer
Video cover format	Use 1080x1920 (portrait video ratio) instead of 1242x1660