article-poster-generator

Article Poster Generator

概述

将长文章自动拆分为5-8张精美信息图海报（2400×3600竖版），支持5种视觉风格 × 6种页面布局。 使用 Python + Playwright 将 HTML 模板渲染为高清 PNG 图片。

风格模板

风格ID	名称	配色方案	设计特征
dark-tech	暗夜科技	深色底(#1a1a1a) + 猩红(#cc4444)	CNC金属质感，单色红系（猩红+珊瑚+银灰），暗外框+亮顶框内发光
cyberpunk	赛博朋克	深蓝紫底(#0a0a1a) + 霓虹青(#00d4ff) + 品红(#ff007c)	4px切角，霓虹发光，HUD装饰码，80/15/5色彩法则
minimal-biz	极简清新	浅绿底(#F0F7F7) + 深色文字(#1C2226) + 深青绿(#1A7D7D)	白卡片+阴影，清爽专业
guochao	黑金奢华	深褐底(#1a0a0a) + 暗金(#d4a853) / 复古红(#c43a31)	邀请函内框，冷白标题+金色点缀，黑金红银四色纪律
dark-green	暗夜青绿	深色底(#0C1316) + 青绿强调(#3DB8B0)	卡片微高光，赛博系辅助色，极客气质

6种页面布局

1. cover — 封面页

大标题 + 副标题 + 核心要点列表。标题要大，占页面视觉主体。

{
  "type": "cover",
  "slide_number": "00",
  "tag": "今日速评",
  "tag_icon": "⚠",
  "title": "主标题（10字以内最佳）",
  "subtitle": "副标题或来源说明",
  "highlights": ["核心要点1", "核心要点2", "核心要点3"]
}

2. content — 卡片内容页

经典纵排卡片，每张有彩色左边框。适合并列的多个知识点/要点。

{
  "type": "content",
  "slide_number": "01",
  "tag": "分类标签",
  "tag_icon": "📋",
  "title": "这页的主题",
  "sections": [
    {
      "title": "小节标题",
      "content": "正文内容（50-100字为佳）",
      "highlight": "需要高亮的关键句（可选）",
      "border_color": "red"
    }
  ]
}

3. steps — 步骤流程页

大编号圆球 + 连接线，适合按步骤操作的教程/流程。

{
  "type": "steps",
  "slide_number": "02",
  "tag": "操作步骤",
  "tag_icon": "⚡",
  "title": "三步搞定",
  "steps": [
    {
      "title": "步骤标题",
      "content": "步骤说明（40-80字）"
    }
  ]
}

4. grid — 网格页

2列网格布局，顶部彩色边框。适合踩坑/技巧/对比/特性列表。

{
  "type": "grid",
  "slide_number": "03",
  "tag": "避坑指南",
  "tag_icon": "⚠",
  "title": "四个常见坑",
  "cells": [
    {
      "icon": "❌",
      "title": "单元格标题",
      "content": "说明文字（30-60字）"
    }
  ]
}

5. quote — 大字金句页

居中大字金句 + 下方解释卡片。适合核心观点/名言/关键结论突出展示。

{
  "type": "quote",
  "slide_number": "04",
  "tag": "核心观点",
  "tag_icon": "💬",
  "quote": "一句话核心观点（20字以内最震撼）",
  "source": "来源或补充说明（可选）",
  "details": [
    {
      "label": "标签名",
      "text": "详细解释（40-60字）"
    }
  ]
}