alterlab-pptx-posters

PPTX 研究海报（基于 HTML）

概述

仅当用户明确要求制作 PowerPoint/PPTX 或 HTML 海报时，才使用此技能。对于标准研究海报，默认使用 alterlab-latex-posters：它能更好地控制排版，也是大多数学术会议的预期选择。

此技能使用 HTML/CSS 制作研究海报，之后可将其导出为 PDF 或转换为 PowerPoint 格式。基于 Web 的方法具有以下优点：

• 现代、响应式布局
• 轻松集成 AI 生成的视觉内容
• 可在浏览器中快速迭代和预览
• 通过浏览器打印功能导出为 PDF
• 如有明确需要，可转换为 PPTX

何时使用此技能

在以下情况下使用此技能：

• 用户明确要求制作“PPTX poster”“PowerPoint poster”或“PPT poster”
• 用户特别要求制作基于 HTML 的海报
• 用户需要在制作完成后于 PowerPoint 中编辑海报
• 没有 LaTeX，或用户要求使用非 LaTeX 方案

不适用的情况

场景	改用
未指定格式的“poster”“research poster”或“conference poster”	alterlab-latex-posters
提及 LaTeX、tikzposter、beamerposter 或 baposter	alterlab-latex-posters
用于口头报告的幻灯片	alterlab-scientific-slides
直接根据已完成的论文自动生成海报（以及网站/视频）	alterlab-paper-2-web
单张信息图或数据故事图，而非完整海报	alterlab-infographics

视觉元素生成

如果图表或插图有助于理解，可调用 alterlab-scientific-schematics 技能（图表/示意图）或 alterlab-generate-image 技能（图像）。图表并非必需，仅在有助于提高清晰度时添加。

视觉海报的实用工作流：

1. 规划有助于表达的视觉元素（主视觉图、简介、方法、结果、结论）
2. 通过上述技能生成所需图表
3. 将图表放入 HTML 模板
4. 围绕视觉内容添加文字

海报通常以视觉内容承载主要信息、文字保持简洁时，效果最佳。

---

海报字号要求

海报可视化中的文字必须足够大，便于阅读。海报的观看距离为 4-6 英尺，因此文字必须足够大。生成图表时，请在提示词中说明以下可读性要求：

POSTER FORMAT GUIDELINES:
- Keep to 3-4 elements per graphic (3 is ideal)
- Around 10 words total in the entire graphic
- Avoid complex workflows with 5+ steps (split into 2-3 simple graphics instead)
- Avoid multi-level nested diagrams (flatten to a single level)
- One key point per case study (not multiple sub-sections)
- Large bold text (80pt+ for labels, 120pt+ for key numbers)
- High contrast (dark on white OR white on dark; avoid gradients behind text)
- Generous white space (around 50%)
- Thick lines (5px+), large icons (200px+)
- One single message per graphic

生成前，请检查提示词并统计元素数量：

• 如果描述包含 5 项或更多内容，请拆分成多个图形
• 如果工作流包含 5 个或更多阶段，只展示 3-4 个高层级步骤
• 如果比较包含 4 种或更多方法，只展示排名最高的 3 种，或展示 Ours 与最佳基线的比较

示例——过于密集（7 阶段工作流）：“药物发现工作流：靶点识别、合成、筛选、先导优化、验证、临床试验、FDA 批准及指标”——阶段过多，导致文字过小、难以阅读。

示例——易读（3 个大型阶段）：“A0 海报格式。极简 3 框工作流：‘DISCOVER’ → ‘VALIDATE’ → ‘APPROVE’。每个词都使用超大粗体（120pt+）。粗箭头（10px）。留出 60% 的空白。仅显示这 3 个词，不含子步骤。从 12 英尺外也能阅读。”——内容相同，但简化为易读的海报格式。

---

防止内容溢出

文字或图表被海报边缘截断是最常见的缺陷，也很容易在屏幕上被忽略。因此，请提前规划各部分和文字的篇幅，并在导出后检查四周边缘。

1. 限制内容部分（最多 5-6 个）：

✅ GOOD - 5 sections with room to breathe:
   - Title/Header
   - Introduction/Problem
   - Methods
   - Results (1-2 key findings)
   - Conclusions

❌ BAD - 8+ sections crammed together

2. 字数限制：

• 每部分：50-100 个词
• 整张海报：300-800 个词
• 如果内容更多：删减内容，或将其移至讲义

---

核心功能

1. HTML/CSS 海报设计

HTML 模板（assets/poster_html_template.html）提供：

• 固定海报尺寸（36×48 英寸 = 2592×3456 pt）
• 带渐变样式的专业页眉
• 三栏内容布局
• 采用现代样式的分块版块
• 包含参考资料和联系信息的页脚

2. 海报结构

标准布局：

┌─────────────────────────────────────────┐
│  HEADER: Title, Authors, Hero Image     │
├─────────────┬─────────────┬─────────────┤
│ Introduction│   Results   │  Discussion │
│             │             │             │
│   Methods   │   (charts)  │ Conclusions │
│             │             │             │
│  (diagram)  │   (data)    │   (summary) │
├─────────────┴─────────────┴─────────────┤
│  FOOTER: References & Contact Info      │
└─────────────────────────────────────────┘

3. 视觉整合

每个版块都应醒目地展示 AI 生成的视觉内容：

主视觉图片（页眉）：

<img src="figures/hero.png" class="hero-image">

版块图形：

<div class="block">
  <h2 class="block-title">Methods</h2>
  <div class="block-content">
    <img src="figures/workflow.png" class="block-image">
    <ul>
      <li>Brief methodology point</li>
    </ul>
  </div>
</div>

4. 生成视觉元素

按上文所述，通过 alterlab-scientific-schematics（图表）或 alterlab-generate-image（图片）生成图示。以下示例提示词可用于生成简洁易读的海报图形（保存到 figures/ 目录）：

• 主视觉图片 — "POSTER FORMAT for A0. Hero banner: '[TOPIC]' in huge text (120pt+). Dark blue gradient background. One iconic visual. Minimal text. Readable from 15 feet."
• 引言视觉 — "POSTER FORMAT for A0. Simple visual with only 3 icons: [icon1] → [icon2] → [icon3]. One-word labels (80pt+). 50% white space. Readable from 8 feet."
• 方法流程图 — "POSTER FORMAT for A0. Simple flowchart with only 4 boxes: STEP1 → STEP2 → STEP3 → STEP4. Giant labels (100pt+). Thick arrows. 50% white space. No sub-steps."
• 结果可视化 — "POSTER FORMAT for A0. Simple bar chart with only 3 bars: BASELINE (70%), EXISTING (85%), OURS (95%). Giant percentages on bars (120pt+). No axis, no legend. 50% white space."
• 结论 — "POSTER FORMAT for A0. Exactly 3 cards: '95%' (150pt) 'ACCURACY' (60pt), '2X' (150pt) 'FASTER' (60pt), checkmark 'READY' (60pt). 50% white space. No other text."

---

PPTX 海报创建工作流

阶段 1：规划

1. 确认是否明确要求创建 PPTX
2. 确定海报要求：
   • 尺寸：36×48 英寸（最常见）或 A0
   • 方向：纵向（最常见）
3. 拟定内容大纲：
   • 确定 1-3 条核心信息
   • 规划 3-5 个视觉元素
   • 起草精简文本（总计 300-800 个词）

阶段 2：生成视觉元素（AI 驱动）

保持每个生成的图示简洁——只传达一条信息、包含少量元素——因为密集的图形在海报观看距离下会变得难以辨读。

mkdir -p figures

# Generate each element with POSTER FORMAT specifications
# (See examples in Section 4 above)

阶段 3：创建 HTML 海报

1. 复制模板，模板位于此技能的 assets/ 目录中：

   cp assets/poster_html_template.html poster.html
   

2. 更新内容：

   • 替换占位标题和作者
   • 插入 AI 生成的图片
   • 添加精简的辅助文本
   • 更新参考资料和联系信息

3. 在浏览器中预览：

   open poster.html  # macOS
   # or
   xdg-open poster.html  # Linux
   

阶段 4：导出为 PDF

模板中的 @page 规则（添加在模板的 <style> 中）会将 PDF 页面固定为海报尺寸，因此导出的文件会保留完整尺寸，而不是被裁剪为 Letter/A4 尺寸。

浏览器打印方法：

1. 在 Chrome 中打开 poster.html
2. 打印（Cmd/Ctrl + P）
3. 选择“另存为 PDF”
4. 纸张尺寸：保留 @page 规则设置的尺寸，或选择与海报匹配的自定义尺寸
5. 页边距：无
6. 启用“背景图形”（否则渐变和区块背景不会被导出）

命令行（Chrome 无头模式）：

# Use the new headless mode (Chrome 132+ ships old --headless only as the
# separate chrome-headless-shell binary). On macOS the binary lives at:
#   /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new \
  --no-pdf-header-footer \
  --print-to-pdf=poster.pdf \
  "file://$PWD/poster.html"

--no-pdf-header-footer 可替代旧版 --print-to-pdf-no-header；对于约 118 之前的 Chrome 版本，请改用旧标志名称。页面尺寸和零页边距由模板的 @page 规则设置，而非由 CLI 标志设置。

阶段 5：转换为 PPTX（如有需要）

根据“PPTX”的用途选择方案：

方案 1 — 单图片幻灯片（速度快，无法编辑）。 将导出的 PDF 页面（或栅格化后的 PNG）转换为海报尺寸幻灯片上的一张满版图片。适用于用户只需要一个用于投影或提交的 .pptx 容器 的情况。LibreOffice 将 PDF 导入为绘图，因此幻灯片内容实际上是扁平化图片——在 PowerPoint 中无法编辑文本。

# Rasterize the PDF to a PNG, then place it as one slide (see python-pptx below).
# A direct `libreoffice --convert-to pptx poster.pdf` produces a non-editable,
# image-like slide and often misplaces content — prefer the python-pptx path.
magick -density 150 poster.pdf poster.png

方案 2 — 使用 python-pptx 创建原生 PPTX（可编辑）。 适用于用户确实想在 PowerPoint 中编辑海报的情况。使用相同的 figures/ 和文本构建幻灯片，让每个元素都成为可移动的 PowerPoint 对象。幻灯片尺寸应与海报方向一致——模板为纵向，宽 36in × 高 48in：

from pptx import Presentation
from pptx.util import Inches, Pt

prs = Presentation()
prs.slide_width = Inches(36)   # portrait: width < height (match the template)
prs.slide_height = Inches(48)

slide = prs.slides.add_slide(prs.slide_layouts[6])  # Blank

# Add images from figures/ (positions in inches from top-left)
slide.shapes.add_picture("figures/hero.png", Inches(0), Inches(0), width=Inches(36))
# ... add text boxes and other images for each section

prs.save("poster.pptx")

使用 uv pip install python-pptx（或 uvx）安装；magick 是 ImageMagick。

---

HTML 模板结构

提供的模板（assets/poster_html_template.html）包含：

可自定义的 CSS 变量

/* Poster dimensions */
body {
  width: 2592pt;   /* 36 inches */
  height: 3456pt;  /* 48 inches */
}

/* Color scheme - customize these */
.header {
  background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 50%, #3182ce 100%);
}

/* Typography */
.poster-title { font-size: 108pt; }
.authors { font-size: 48pt; }
.block-title { font-size: 52pt; }
.block-content { font-size: 34pt; }

主要类

类	用途	字号
.poster-title	主标题	108pt
.authors	作者姓名	48pt
.affiliations	机构	38pt
.block-title	小节标题	52pt
.block-content	正文	34pt
.key-finding	突出显示框	36pt

---

质量检查清单

步骤 0：生成前检查

对于计划制作的每张图表，请确认：

• 能否用 3–4 项或更少内容说明？（不能是 5 项以上）
• 是否为简单工作流（3–4 个步骤，不能是 7 个以上）？
• 能否用 10 个字或更少描述所有文本？
• 是否只传达一条信息（而非多条）？

拒绝以下模式：

• ❌“7 阶段工作流”→ 简化为“3 个主要阶段”
• ❌“多个案例研究”→ 每张图只展示一个案例
• ❌“2015–2024 年度时间线”→“仅展示 3 个关键年份”
• ❌“比较 6 种方法”→“仅比较 2 种：我们的方法与最佳方法”

步骤 2b：生成后检查

以 25% 缩放比例检查每张生成的图：

✅ 通过标准（必须全部满足）：

• 所有文本均清晰可读
• 数量：不超过 3–4 个元素
• 留白：空白区域占 50% 以上
• 2 秒内即可理解
• 不是复杂的 5 个以上阶段的工作流
• 没有多个嵌套小节

❌ 未通过标准（任一项成立即重新生成）：

• 文本太小／难以阅读 → 使用“150pt+”重新生成
• 元素超过 4 个 → 使用“仅 3 个元素”重新生成
• 留白不足 50% → 使用“60% 留白”重新生成
• 流程复杂、包含多个阶段 → 拆分为 2–3 张图
• 多个案例过于拥挤 → 拆分为多张图

导出后

• 四边均无任何内容被裁切（请仔细检查）
• 所有图片均正确显示
• 颜色渲染符合预期
• 文本在 25% 缩放比例下仍可阅读
• 图表看起来简洁（而非复杂的 7 阶段工作流）

---

应避免的常见问题

AI 生成图表时常见的问题：

• ❌ 元素过多（10 项以上）→ 最多保留 3–5 项
• ❌ 文本太小 → 在提示词中指定“超大（100pt+）”
• ❌ 缺少留白 → 在每条提示词中添加“50% 留白”
• ❌ 流程图过于复杂（8 个以上步骤）→ 限制为 4–5 个步骤

HTML／导出时常见的问题：

• ❌ 内容超出海报尺寸 → 在浏览器中检查溢出情况
• ❌ PDF 中缺少背景图形 → 在打印设置中启用背景图形
• ❌ PDF 纸张尺寸错误 → 与海报尺寸完全一致
• ❌ 图片分辨率低 → 至少使用 300 DPI

内容方面常见的问题：

• ❌ 文本过多（超过 1000 个词）→ 精简至 300–800 个词
• ❌ 小节过多（7 个以上）→ 合并至 5–6 个
• ❌ 缺乏清晰的视觉层次 → 突出显示关键发现

---

与其他技能的集成

此技能可与以下技能配合使用：

• alterlab-scientific-schematics：海报示意图和流程图
• alterlab-generate-image：主视觉图片和风格化图形
• alterlab-latex-posters：海报制作的默认技能（除非明确要求 PPTX／PowerPoint 或 HTML，否则请使用此技能）

---

模板资源

位于 assets/ 目录中：

• poster_html_template.html：主海报 HTML 模板（36×48 英寸）
• poster_quality_checklist.md：提交前验证清单

参考资料

位于 references/ 目录中：

• poster_content_guide.md：内容组织和写作指南
• poster_design_principles.md：排版、色彩理论和视觉层次
• poster_layout_design.md：布局原则和网格系统

属于 AlterLab Academic Skills 套件。