Info-Card 信息卡生成器

HTML + CSS 模板 → Playwright 截图 → 900×1200 PNG（3:4 小红书标准）

依赖

Playwright Python 包。未安装时脚本会提示：
bash
pip install playwright && playwright install chromium

用法

bash

使用默认示例数据

python3 scripts/generate_card.py -t magazine-cover

自定义数据

python3 scripts/generate_card.py -t tech-knowledge -d {title:Claude Code\\n工作流,steps:[...]}

从 JSON 文件读取

python3 scripts/generate_card.py -t academic-report -f data.json

指定输出路径

python3 scripts/generate_card.py -t brand-mood -d ... -o ~/Desktop/card.png

只输出 HTML（调试）

python3 scripts/generate_card.py -t magazine-cover --html-only

输出 PNG 路径打印到 stdout，默认 /tmp/infocard{timestamp}.png。

模板与数据结构

1. magazine-cover — 杂志风封面卡

适合：概览、目录、列表型内容

json
{
brand: INSIGHT,
issue_no: Vol.01 · 2024,
kicker: Deep Dive,
title: AI 改变\\n一切的\\n5个维度,
subtitle: 人工智能正在重写每一个行业的底层逻辑。,
list_label: 本期核心议题,
items: [
{title: 生产力革命, desc: AI 工具将个人效率提升 3-10 倍},
{title: 创作边界消失, desc: 生产成本趋近于零}
],
footer_brand: INSIGHT,
footer_tagline: 每周深度 · 值得收藏,
bg_color: #F5F0E8,
accent_color: #8B6F47
}

配色可选预设：莫兰迪暖棕（默认）、灰绿、藕粉 — 通过 bgcolor/accentcolor 等字段自定义。

2. tech-knowledge — 科技知识卡

适合：步骤流程、教程、方法论

json
{
brand: TECHLAB,
title: Claude Code\\n工作流,
subtitle: 6 步掌握 AI 编程助手的核心用法,
accent_color: #2E6ECC,
tags: [AI Coding, Claude, Workflow],
steps: [
{title: 明确任务拆解, desc: 将大任务拆成小步骤, tag: Step 01},
{title: 提供充分上下文, desc: 粘贴相关代码和背景, tag: Step 02}
]
}

3. academic-report — 技术文档学术风

适合：深度解析、数据对比、技术原理

json
{
brand: DEEP ANALYSIS,
title: Prompt Caching\\n成本优化指南,
title_en: Cost & Performance Analysis,
meta_tags: [
{label: 深度解析, style: blue},
{label: Cost Saving, style: green}
],
stats: [
{num: 90%, label: Cache命中\\n成本降幅, style: blue},
{num: $0.30, label: 每百万Token\\n价格, style: orange}
],
sections: [
{type: section_header, label: CORE CONCEPTS · 核心原理},
{type: points, items: [{text: Cache Read：成本仅 0.1×}]},
{type: alert, style: blue, title: KEY INSIGHT, text: 静态内容放前面}
]
}

sections 支持类型：section_header、points、alert(blue/orange)、code、compare

4. product-feature — 产品功能型

适合：产品特性展示、卖点介绍

json
{
brand: BRAND,
eyebrow: New Arrival 2024,
product_name: THERMOS,
subtitle_zh: 随行保温杯 · 360°全密封,
subtitle_en: Stay Hot · Stay Cold,
bg_gradient: linear-gradient(145deg, #2D3B2A 0%, #3C3228 100%),
image_url: https://example.com/product.png,
features: [
{icon: ✦, text: 保温12小时},
{icon: ✦, text: 500ml}
],
selling_points: [
{title: 双层真空隔热, desc: 冷热双保温，冰饮保冷 24h}
],
cta_text: 查看详情 →
}

image_url 可选，提供产品图片 URL 时会显示。

5. brand-mood — 品牌调性型

适合：品牌种草、氛围展示、轻奢定位

json
{
brand: MAISON,
tagline: 每一刻\\n都值得\\n被珍视,
tagline_sub: 为你的生活注入一份从容与优雅。,
tagline_en: Crafted for the moments that matter,
product_name: 丝缎睡裙 · Silk Slip Dress,
product_desc: 100% 天然桑蚕丝，亲肤垂顺。,
product_tags: [桑蚕丝, 手工缝制, 天然亲肤],
bg_color: #E8DCC8,
gold_color: #B8962E
}

设计规范

详见 references/design-specs.md。

注意事项

• - 标题中用 \n 换行
• 所有模板有默认示例数据，不传 --data 也可直接生成预览
• --data 只覆盖指定字段，未指定字段用默认值
• 字体使用系统 fallback，macOS 优先 PingFang SC

---

6. checklist — 清单打卡卡

适合：习惯养成、学习清单、旅行必带、购物清单

json
{
brand: DAILY,
title: 晨间习惯\\n养成清单,
subtitle: 坚持 21 天，养成改变人生的好习惯。每完成一项打个勾 ✓,
items: [
{text: 6:30 起床，不赖床, checked: true},
{text: 喝一杯温水（300ml）, checked: true},
{text: 写 3 件感恩的事, checked: false},
{text: 30 分钟运动（跑步/瑜伽/力量）, checked: false}
],
footer_text: 小步前进 · 持续积累,
bg_color: #F4F1EA,
accent_color: #4A6741
}

字段说明：

• - items[].checked：true 显示绿色勾选框 + 删除线，false 显示空框
• 进度统计（X/N DONE）自动计算
• bgcolor：背景色，推荐莫兰迪绿/米色系
• accentcolor：强调色，控制勾选框、进度文字、装饰线

7. quote-card — 金句卡

适合：名人名言、书摘、个人感悟、鸡汤

json
{
brand: WORDS,
quote: 我们无法选择自己的出身，\\n但可以选择成为什么样的人。,
author: 阿尔伯斯·邓布利多,
source: 《哈利·波特与密室》· J.K. 罗琳,
tags: [成长, 选择, 人生],
footer_text: 每日一句 · WORDS THAT MATTER,
bg_color: #F7F3EC,
text_color: #2C2318,
accent_color: #8B7355
}

字段说明：

• - quote：金句正文，支持 \n 换行
• tags：标签数组，渲染为小药丸（可为空数组）
• bgcolor/textcolor/accentcolor：支持深色模式（如 bgcolor: #1A1A1A）
• 大引号装饰元素和闭合引号背景均自动生成

8. comparison — 对比卡

适合：产品对比、方案选择、优劣对比、前后对比

json
{
brand: INSIGHT,
title: Claude Code\\nvs Cursor,
subtitle: 两款 AI