pptx-posters
使用 HTML/CSS 创建可导出为 PDF 或 PPTX 的研究海报。仅当用户明确请求 PowerPoint/PPTX 海报格式时,才使用此技能。对于常规研究海报,请改用 latex-posters。该技能提供现代化的基于网页的海报设计,具备响应式布局和便于进行视觉整合的特点。
分类
开发工具安装
下载并解压到你的 skills 目录
复制命令,发送给智能体自动安装:
PPTX Research Posters (HTML-Based)
Overview
⚠️ USE THIS SKILL ONLY WHEN USER EXPLICITLY REQUESTS PPTX/POWERPOINT POSTER FORMAT.
For standard research posters, use the latex-posters skill instead, which provides better typographic control and is the default for academic conferences.
This skill creates research posters using HTML/CSS, which can then be exported to PDF or converted to PowerPoint format. The web-based approach offers:
When to Use This Skill
ONLY use this skill when:
DO NOT use this skill when:
AI-Powered Visual Element Generation
STANDARD WORKFLOW: Generate ALL major visual elements using AI before creating the HTML poster.
This is the recommended approach for creating visually compelling posters:
Target: 60-70% of poster area should be AI-generated visuals, 30-40% text.
CRITICAL: Poster-Size Font Requirements
⚠️ ALL text within AI-generated visualizations MUST be poster-readable.
When generating graphics for posters, you MUST include font size specifications in EVERY prompt. Poster graphics are viewed from 4-6 feet away, so text must be LARGE.
MANDATORY prompt requirements for EVERY poster graphic:
POSTER FORMAT REQUIREMENTS (STRICTLY ENFORCE):
- ABSOLUTE MAXIMUM 3-4 elements per graphic (3 is ideal)
- ABSOLUTE MAXIMUM 10 words total in the entire graphic
- NO complex workflows with 5+ steps (split into 2-3 simple graphics instead)
- NO multi-level nested diagrams (flatten to single level)
- NO case studies with multiple sub-sections (one key point per case)
- ALL text GIANT BOLD (80pt+ for labels, 120pt+ for key numbers)
- High contrast ONLY (dark on white OR white on dark, NO gradients with text)
- MANDATORY 50% white space minimum (half the graphic should be empty)
- Thick lines only (5px+ minimum), large icons (200px+ minimum)
- ONE SINGLE MESSAGE per graphic (not 3 related messages)⚠️ BEFORE GENERATING: Review your prompt and count elements
Example - WRONG (7-stage workflow):
# ❌ Creates tiny unreadable text
python scripts/generate_schematic.py "Drug discovery workflow: Stage 1 Target ID, Stage 2 Synthesis, Stage 3 Screening, Stage 4 Lead Opt, Stage 5 Validation, Stage 6 Clinical Trial, Stage 7 FDA Approval with metrics." -o figures/workflow.pngExample - CORRECT (3 mega-stages):
# ✅ Same content, simplified to readable poster format
python scripts/generate_schematic.py "POSTER FORMAT for A0. ULTRA-SIMPLE 3-box workflow: 'DISCOVER' → 'VALIDATE' → 'APPROVE'. Each word in GIANT bold (120pt+). Thick arrows (10px). 60% white space. ONLY these 3 words. NO substeps. Readable from 12 feet." -o figures/workflow_simple.pngCRITICAL: Preventing Content Overflow
⚠️ POSTERS MUST NOT HAVE TEXT OR CONTENT CUT OFF AT EDGES.
Prevention Rules:
1. Limit Content Sections (MAXIMUM 5-6 sections):
✅ GOOD - 5 sections with room to breathe:
- Title/Header
- Introduction/Problem
- Methods
- Results (1-2 key findings)
- Conclusions
❌ BAD - 8+ sections crammed together2. Word Count Limits:
Core Capabilities
1. HTML/CSS Poster Design
The HTML template (assets/poster_html_template.html) provides:
2. Poster Structure
Standard Layout:
┌─────────────────────────────────────────┐
│ HEADER: Title, Authors, Hero Image │
├─────────────┬─────────────┬─────────────┤
│ Introduction│ Results │ Discussion │
│ │ │ │
│ Methods │ (charts) │ Conclusions │
│ │ │ │
│ (diagram) │ (data) │ (summary) │
├─────────────┴─────────────┴─────────────┤
│ FOOTER: References & Contact Info │
└─────────────────────────────────────────┘3. Visual Integration
Each section should prominently feature AI-generated visuals:
Hero Image (Header):
<img src="figures/hero.png" class="hero-image">Section Graphics:
<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. Generating Visual Elements
Before creating the HTML, generate all visual elements:
# Create figures directory
mkdir -p figures
# Hero image - SIMPLE, impactful
python scripts/generate_schematic.py "POSTER FORMAT for A0. Hero banner: '[TOPIC]' in HUGE text (120pt+). Dark blue gradient background. ONE iconic visual. Minimal text. Readable from 15 feet." -o figures/hero.png
# Introduction visual - ONLY 3 elements
python scripts/generate_schematic.py "POSTER FORMAT for A0. SIMPLE visual with ONLY 3 icons: [icon1] → [icon2] → [icon3]. ONE word labels (80pt+). 50% white space. Readable from 8 feet." -o figures/intro.png
# Methods flowchart - ONLY 4 steps
python scripts/generate_schematic.py "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." -o figures/workflow.png
# Results visualization - ONLY 3 bars
python scripts/generate_schematic.py "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." -o figures/results.png
# Conclusions - EXACTLY 3 key findings
python scripts/generate_schematic.py "POSTER FORMAT for A0. EXACTLY 3 cards: '95%' (150pt) 'ACCURACY' (60pt), '2X' (150pt) 'FASTER' (60pt), checkmark 'READY' (60pt). 50% white space. NO other text." -o figures/conclusions.pngWorkflow for PPTX Poster Creation
Stage 1: Planning
- Size: 36×48 inches (most common) or A0
- Orientation: Portrait (most common)
- Identify 1-3 core messages
- Plan 3-5 visual elements
- Draft minimal text (300-800 words total)
Stage 2: Generate Visual Elements (AI-Powered)
CRITICAL: Generate SIMPLE figures with MINIMAL content.
mkdir -p figures
# Generate each element with POSTER FORMAT specifications
# (See examples in Section 4 above)Stage 3: Create HTML Poster
cp skills/pptx-posters/assets/poster_html_template.html poster.html- Replace placeholder title and authors
- Insert AI-generated images
- Add minimal supporting text
- Update references and contact info
open poster.html # macOS
# or
xdg-open poster.html # LinuxStage 4: Export to PDF
Browser Print Method:
Command Line (if Chrome available):
# Chrome headless PDF export
google-chrome --headless --print-to-pdf=poster.pdf \
--print-to-pdf-no-header \
--no-margins \
poster.htmlStage 5: Convert to PPTX (If Required)
Option 1: PDF to PPTX conversion
# Using LibreOffice
libreoffice --headless --convert-to pptx poster.pdf
# Or use online converters for simple casesOption 2: Direct PPTX creation with python-pptx
from pptx import Presentation
from pptx.util import Inches, Pt
prs = Presentation()
prs.slide_width = Inches(48)
prs.slide_height = Inches(36)
slide = prs.slides.add_slide(prs.slide_layouts[6]) # Blank
# Add images from figures/
slide.shapes.add_picture("figures/hero.png", Inches(0), Inches(0), width=Inches(48))
# ... add other elements
prs.save("poster.pptx")HTML Template Structure
The provided template (assets/poster_html_template.html) includes:
CSS Variables for Customization
/* 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; }Key Classes
| Class | Purpose | Font Size |
|---|---|---|
.poster-title | Main title | 108pt |
.authors | Author names | 48pt |
.affiliations | Institutions | 38pt |
.block-title | Section headers | 52pt |
.block-content | Body text | 34pt |
.key-finding | Highlight box | 36pt |
Quality Checklist
Step 0: Pre-Generation Review (MANDATORY)
For EACH planned graphic, verify:
Reject these patterns:
Step 2b: Post-Generation Review (MANDATORY)
For EACH generated figure at 25% zoom:
✅ PASS criteria (ALL must be true):
❌ FAIL criteria (regenerate if ANY true):
After Export
Common Pitfalls to Avoid
AI-Generated Graphics Mistakes:
HTML/Export Mistakes:
Content Mistakes:
Integration with Other Skills
This skill works with:
Template Assets
Available in assets/ directory:
poster_html_template.html: Main HTML poster template (36×48 inches)poster_quality_checklist.md: Pre-submission validation checklistReferences
Available in references/ directory:
poster_content_guide.md: Content organization and writing guidelinesposter_design_principles.md: Typography, color theory, and visual hierarchyposter_layout_design.md: Layout principles and grid systems