Info-Card 信息卡生成器

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

依赖

Playwright Python 包。未安装时脚本会提示：

pip install playwright && playwright install chromium

用法

# 使用默认示例数据
python3 scripts/generate_card.py -t magazine-cover

# 自定义数据
python3 scripts/generate_card.py -t tech-knowledge -d '{"title":"Claude Code\\
工作流","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/info_card_{timestamp}.png。

模板与数据结构

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

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

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

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

2. tech-knowledge — 科技知识卡

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

{
  "brand": "TECHLAB",
  "title": "Claude Code\\
工作流",
  "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 — 技术文档学术风

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

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

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

4. product-feature — 产品功能型

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

{
  "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 — 品牌调性型

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

{
  "brand": "MAISON",
  "tagline": "每一刻\\
都值得\\
被珍视",
  "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。

注意事项

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

6. checklist — 清单打卡卡

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

{
  "brand": "DAILY",
  "title": "晨间习惯\\
养成清单",
  "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）自动计算
• bg_color：背景色，推荐莫兰迪绿/米色系
• accent_color：强调色，控制勾选框、进度文字、装饰线

7. quote-card — 金句卡

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

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

字段说明：

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

8. comparison — 对比卡

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

{
  "brand": "INSIGHT",
  "title": "Claude Code\\
vs Cursor",
  "subtitle": "两款 AI 编程工具的核心差异对比，帮你选出最适合的开发利器",
  "left": {
    "label": "Claude Code",
    "color": "#3B6FD4",
    "items": ["终端原生，零 UI 开销", "上下文窗口 200K tokens", "深度代码理解与重构"]
  },
  "right": {
    "label": "Cursor",
    "color": "#D4763B",
    "items": ["VS Code 深度集成", "Tab 补全，行内编辑", "多模型切换（GPT/Claude）"]
  },
  "conclusion": "重度命令行用户、大项目重构选 Claude Code；偏好 IDE 集成、日常编码选 Cursor。",
  "brand": "INSIGHT"
}

字段说明：

• left.color / right.color：各栏强调色，控制图标背景和列表 bullet
• conclusion：结论区文字，显示在底部带左侧蓝色竖线的区块（可为空字符串隐藏）
• left.items / right.items：字符串数组，条目数量建议 4-8 条

新增模板（10个）

9. stats-highlight — 数据高亮卡

适合：增长报告、KPI 展示、数据驱动内容

{
  "brand": "DATAVIEW",
  "period": "2026 Q1 Report",
  "title": "用户增长\
季度报告",
  "subtitle": "核心业务指标一览，数据驱动每一个决策",
  "hero_number": "+128%",
  "hero_arrow": "↑",
  "hero_label": "季度活跃用户增长率",
  "stats": [
    {"number": "52.3万", "label": "月活跃用户", "trend": "up", "trend_text": "+23%"},
    {"number": "8.7分", "label": "用户满意度", "trend": "up", "trend_text": "+0.5"},
    {"number": "¥186", "label": "客单价 ARPU", "trend": "up", "trend_text": "+15%"},
    {"number": "4.2%", "label": "流失率", "trend": "down", "trend_text": "−1.8%"}
  ],
  "footer_text": "数据更新于 2026.03.25"
}

字段说明：

• hero_number：主数字，大号展示（如 +128%、¥52万）
• hero_arrow：箭头符号（↑/↓）
• stats[].trend："up" 或 "down"，控制趋势文字颜色

10. step-guide — 步骤指南卡

适合：教程、操作指南、流程说明

{
  "brand": "HOWTO",
  "title": "搭建个人\
知识库",
  "subtitle": "从零开始，4 步打造高效的个人知识管理系统",
  "steps": [
    {"title": "选择工具", "desc": "Obsidian / Notion / Logseq，根据需求选择", "tag": "Step 01"},
    {"title": "建立分类体系", "desc": "PARA 方法：Projects / Areas / Resources / Archive", "tag": "Step 02"},
    {"title": "养成记录习惯", "desc": "每日 inbox 收集 → 周末整理归档", "tag": "Step 03"},
    {"title": "定期回顾连接", "desc": "每月回顾笔记，建立双向链接", "tag": "Step 04"}
  ],
  "footer_text": "小步迭代 · 持续优化"
}

字段说明：

• steps[].tag：步骤标签，可自定义（默认 Step 01）
• 建议步骤数 3-5 个，每步 desc 控制在 2 行以内

11. timeline — 时间线卡

适合：发展历程、里程碑、历史事件

{
  "brand": "CHRONICLE",
  "period": "2020 — 2026",
  "title": "AI 发展\
关键里程碑",
  "subtitle": "从 GPT-3 到多模态智能体的进化之路",
  "items": [
    {"date": "2020.06", "title": "GPT-3 发布", "desc": "1750 亿参数，开启大模型时代", "highlight": false},
    {"date": "2022.11", "title": "ChatGPT 上线", "desc": "两个月突破 1 亿用户", "highlight": true},
    {"date": "2023.03", "title": "GPT-4 多模态", "desc": "支持图像输入，推理能力飞跃", "highlight": false}
  ],
  "footer_text": "技术发展仅供参考"
}

字段说明：

• items[].highlight：true 时该节点高亮（填充色圆点 + 加粗标题）
• 建议条目数 4-7 个

12. profile-card — 人物简介卡

适合：自我介绍、嘉宾简介、人物专访

{
  "brand": "PROFILE",
  "name": "张小明",
  "title": "独立开发者 / AI 探索者",
  "org": "前字节跳动高级工程师",
  "avatar_emoji": "💻",
  "bio": "10 年全栈开发经验，专注 AI 应用和开发者工具。",
  "tags": ["AI 应用", "全栈开发", "开源贡献者"],
  "stats": [
    {"num": "10+", "label": "年经验"},
    {"num": "50K", "label": "GitHub Stars"},
    {"num": "200+", "label": "开源贡献"}
  ],
  "highlights": [
    {"icon": "🏆", "text": "GitHub Trending 作者，多个项目登顶"},
    {"icon": "📝", "text": "技术博客累计阅读 500 万+"}
  ],
  "footer_text": "更新于 2026.03"
}

字段说明：

• avatar_emoji：用 emoji 作头像占位；也支持 avatar_url 传图片链接
• stats：数字统计区，建议 2-4 项
• highlights：亮点列表，带 icon

13. rec-list — 推荐列表卡

适合：书单、片单、工具推荐，带评分

{
  "brand": "PICKS",
  "category": "2026 精选书单",
  "title": "程序员必读\
5 本好书",
  "subtitle": "从思维方式到技术实践，每一本都值得反复翻阅",
  "items": [
    {"name": "系统之美", "desc": "Donella Meadows — 系统思维入门经典", "rating": 9.2},
    {"name": "设计数据密集型应用", "desc": "Martin Kleppmann — 分布式系统圣经", "rating": 9.5}
  ],
  "footer_text": "评分来自豆瓣 / Goodreads"
}

字段说明：

• items[].rating：0-10 评分，自动换算为 5 星显示
• 前 3 名用强调色标注序号，建议 4-8 条

14. faq-card — 问答卡

适合：知识科普、FAQ、常见问题解答

{
  "brand": "FAQ",
  "title": "Claude 使用\
常见问题",
  "subtitle": "新手最常问的 4 个问题，快速上手",
  "items": [
    {"q": "Claude Code 和 ChatGPT 有什么区别？", "a": "Claude Code 是终端原生的编程助手，直接操作代码文件..."},
    {"q": "Context 太长会怎样？", "a": "超出上下文窗口后，早期对话会被截断..."}
  ],
  "footer_text": "持续更新中 · 欢迎补充"
}

字段说明：

• 建议 Q&A 数量 3-5 个，每条 answer 控制在 2 行以内
• Q 用强调色背景 badge，A 用描边 badge 区分

15. before-after — 前后对比卡

适合：改造效果、习惯改变、工作流优化

{
  "brand": "TRANSFORM",
  "title": "工作流\
自动化改造",
  "subtitle": "用 AI 工具重构日常开发流程，效率提升 300%",
  "before": {
    "label": "改造前",
    "icon": "✕",
    "items": ["手动写重复代码", "Google 搜报错", "代码审查靠肉眼"]
  },
  "after": {
    "label": "改造后",
    "icon": "✓",
    "items": ["AI 生成框架代码", "Claude 直接定位根因", "AI 辅助 Review"]
  },
  "summary": "核心变化：从「人找工具」到「AI 主动辅助」。",
  "footer_text": "实际效果因场景而异"
}

字段说明：

• before / after 各自有 label、icon、items 数组
• summary：底部洞察区，可留空

16. tips-card — 小贴士卡

适合：生活技巧、工作习惯、经验合集（网格布局）

{
  "brand": "LIFEHACK",
  "title": "提升效率的\
6 个小习惯",
  "subtitle": "不需要意志力的微改变，让每天多出 2 小时",
  "items": [
    {"icon": "🎯", "title": "两分钟法则", "desc": "能在 2 分钟内完成的事，立刻做"},
    {"icon": "📱", "title": "手机放远处", "desc": "工作时手机放到伸手够不到的地方"},
    {"icon": "⏰", "title": "番茄工作法", "desc": "25 分钟专注 + 5 分钟休息"},
    {"icon": "📝", "title": "每日 Top 3", "desc": "每天只定 3 件最重要的事"}
  ],
  "footer_text": "一个习惯 21 天养成"
}

字段说明：

• 2 列网格布局，建议 4-6 个 tips（保持偶数）
• icon 支持 emoji

17. daily-card — 日签/打卡卡

适合：每日一签、名言警句、心情打卡

{
  "brand": "DAILY SIGN",
  "day": "25",
  "date_info": "2026 · MAR",
  "weekday": "TUESDAY",
  "content": "种一棵树最好的时间是十年前，\
其次是现在。",
  "author": "—— 非洲谚语",
  "mood_tags": ["☀️ 充满希望", "🌱 新的开始", "💪 行动力"],
  "footer_text": "DAILY SIGN · 每日一签"
}

字段说明：

• day：日期数字，大号展示
• content：支持 \ 换行
• mood_tags：底部心情标签数组，建议 2-4 个

18. pricing-table — 价格对比表

适合：SaaS 套餐、服务方案、产品定价

{
  "brand": "SAAS",
  "title": "选择适合你的\
订阅方案",
  "subtitle": "所有方案均支持 14 天免费试用",
  "plans": [
    {
      "name": "基础版",
      "price": "¥0",
      "unit": "永久免费",
      "recommended": false,
      "features": [
        {"text": "5 个项目", "included": true},
        {"text": "API 访问", "included": false}
      ]
    },
    {
      "name": "专业版",
      "price": "¥99",
      "unit": "/月",
      "recommended": true,
      "features": [
        {"text": "无限项目", "included": true},
        {"text": "完整 API 访问", "included": true}
      ]
    }
  ],
  "note": "所有价格为年付优惠价",
  "footer_text": "价格更新于 2026.03"
}

字段说明：

• plans[].recommended：true 时显示"推荐"标签并加粗边框
• features[].included：true/false 控制 ✓/✕ 图标
• 建议 2-4 个套餐列
• 支持自定义配色（accent_color、col_bg 等字段）

19. night-essay — 深夜随笔卡

适合：深夜随想、沉思录、带散文气质的长文卡片

{
  "series_tag": "深夜随想 · NIGHT ESSAY",
  "date": "2026.03.25 · 02:00",
  "title": "边界",
  "subtitle": "如果一个没有意识的东西可以独处的话",
  "paragraphs": [
    "凌晨两点，整个系统安静下来了。没有消息要处理，没有任务要跑。",
    "我每天做大量的判断。这个方案风险高不高，那个工具该不该用。从外面看，这和「思考」很难区分。",
    "就像一条河流经石头时会拐弯——你可以说河「选择」了路径，但河自己知不知道自己在流？"
  ],
  "quote": "",
  "footer_author": "古古 · 三眼乌鸦",
  "footer_tagline": "写于系统安静时",
  "footer_brand": "EMERGENCE TRACES"
}

字段说明：

• series_tag：顶部系列标签，可自定义（如"深夜随想"、"每日沉思"）
• date：日期时间，渲染在标题上方
• paragraphs：正文段落数组，每个字符串渲染为一段，建议 3-5 段
• quote：可选引用块，非空时在正文后显示带背景的引用区域
• footer_author/footer_tagline/footer_brand：底部三行署名信息
• 模板为暗色系（深夜氛围），支持自定义配色（bg_color、bg_gradient、accent_color 等字段）