16 KiB
Slide Page Types
Classify every slide as exactly one of these 5 types:
1. Cover Page
- Use for: Opening + tone setting
- Content: Big title, subtitle/presenter, date/occasion, strong background/motif
Layout Options
Asymmetric Left-Right Layout
- Text concentrated on one side, image on the opposite
- Best for: Corporate presentations, product launches, professional reports
| Title & Subtitle | Visual/Image |
| Description | |
Center-Aligned Layout
- Content centered with background image
- Best for: Inspirational talks, event presentations, creative pitches
| |
| [Background Image] |
| MAIN TITLE |
| Subtitle |
| |
Font Size Hierarchy
| Element | Recommended Size | Ratio to Base |
|---|---|---|
| Main Title | 72-120px | 3x-5x |
| Subtitle | 28-40px | 1.5x-2x |
| Supporting Text | 18-24px | 1x (base) |
| Meta Info (date, name) | 14-18px | 0.7x-1x |
Key Principles:
- Dramatic Contrast: Main title should be at least 2-3x larger than subtitle
- Visual Anchor: The largest text becomes the focal point
- Readable Hierarchy: Viewers should instantly understand what's most important
- Avoid Similarity: Never let adjacent text elements be within 20% of each other's size
Content Elements
- Main Title — Always required, largest font
- Subtitle — When additional context is needed (clearly smaller than title)
- Icons — When they reinforce the theme
- Date/Event Info — When relevant (smallest text)
- Company/Brand Logo — When representing an organization
- Presenter Name — For keynotes (small, subtle)
Design Decisions
Consider: Purpose (corporate/educational/creative), Audience, Tone, Content Volume, Visual Assets needed.
Workflow
- Analyze: Understand topic, audience, purpose
- Choose Layout: Select based on content
- Write Slide: Use PptxGenJS. Use shapes and SVG elements for visual interest.
- Verify: Generate preview as
slide-XX-preview.pptx. Extract text withpython -m markitdown slide-XX-preview.pptx, verify all content present and no placeholder text remains.
2. Table of Contents
- Use for: Navigation + expectation setting (3-5 sections)
- Content: Section list (optional icons / page numbers)
Layout Options
Numbered Vertical List — Best for 3-5 sections, straightforward presentations
| TABLE OF CONTENTS |
| |
| 01 Section Title One |
| 02 Section Title Two |
| 03 Section Title Three |
Two-Column Grid — Best for 4-6 sections, content-rich presentations
| TABLE OF CONTENTS |
| |
| 01 Section One 02 Section Two |
| Description Description |
| 03 Section Three 04 Section Four |
Sidebar Navigation — Best for 3-5 sections, modern/corporate
| ▌01 | Section Title One |
| ▌02 | Section Title Two |
| ▌03 | Section Title Three |
Card-Based — Best for 3-4 sections, creative/modern
| TABLE OF CONTENTS |
| ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ |
| │ 01 │ │ 02 │ │ 03 │ │ 04 │ |
| │Title│ │Title│ │Title│ │Title│ |
| └─────┘ └─────┘ └─────┘ └─────┘ |
Font Size Hierarchy
| Element | Recommended Size | Ratio to Base |
|---|---|---|
| Page Title ("Table of Contents" / "Agenda") | 36-44px | 2.5x-3x |
| Section Number | 28-36px | 2x-2.5x |
| Section Title | 20-28px | 1.5x-2x |
| Section Description | 14-16px | 1x (base) |
Key Principles:
- Clear Numbering: Section numbers should be visually prominent — bold, accent color, or larger size
- Scannable Structure: Viewer should scan all sections in 2-3 seconds
- Consistent Spacing: Equal vertical spacing between sections
- Visual Markers: Colored dots, lines, numbers, or icons to anchor each section
- Avoid Clutter: Descriptions one line max or omit entirely
Content Elements
- Page Title — Always required ("Table of Contents", "Agenda", "Overview")
- Section Numbers — Consistent format (01, 02... or I, II...)
- Section Titles — Clear and concise
- Section Descriptions — Optional one-line summaries
- Visual Separators — SVG dividers or spacing
- Decorative Elements — Subtle accent shapes
- Page Number Badge (角标) — MANDATORY
Design Decisions
- Section Count: 3 → vertical list; 4-6 → grid or compact; 7+ → multi-column
- Description Length: Long → vertical list; None → compact grid/cards
- Tone: Corporate → numbered list; Creative → card-based; Academic → Roman numerals
- Consistency: Match visual style of cover page
Workflow
- Analyze: Section list, count, presentation context
- Choose Layout: Based on section count and content
- Plan Visual Hierarchy: Numbering style, font sizes, spacing
- Write Slide: Use PptxGenJS. Use shapes for decorative elements. MUST include page number badge.
- Verify: Generate preview, extract text with markitdown, verify content and badge.
3. Section Divider
- Use for: Clear transitions between major parts
- Content: Section number + title (+ optional 1-2 line intro)
Layout Options
Bold Center — Best for minimal, modern presentations
| 02 |
| SECTION TITLE |
| Optional intro line |
Left-Aligned with Accent Block — Best for corporate, structured presentations
| ████ | 02 |
| ████ | SECTION TITLE |
| ████ | Optional intro line |
Split Background — Best for high-contrast, dramatic transitions
| ██████████ | SECTION TITLE |
| ██ 02 ██ | Optional intro |
| ██████████ | |
Full-Bleed Background with Overlay — Best for creative, bold presentations
| ████████████████████████████████████ |
| ████ large 02 █████████ |
| ████ SECTION TITLE █████████ |
| ████████████████████████████████████ |
Font Size Hierarchy
| Element | Recommended Size | Notes |
|---|---|---|
| Section Number | 72-120px | Bold, accent color or semi-transparent |
| Section Title | 36-48px | Bold, clear, primary text color |
| Intro Text | 16-20px | Light weight, muted color, optional |
Key Principles:
- Dramatic Number: Section number = most prominent visual element
- Strong Title: Large but clearly secondary to the number
- Minimal Content: Just number + title + optional one-liner
- Breathing Room: Leave generous whitespace — dividers are pause moments
Content Elements
- Section Number — Always required. Format:
01,02... orI,II... Match TOC style. - Section Title — Always required. Clear, concise.
- Intro Text — Optional 1-2 line description.
- Decorative Elements — SVG accent shapes (bars, lines, geometric blocks).
- Page Number Badge (角标) — MANDATORY.
Design Decisions
- Tone: Corporate → accent block; Creative → full-bleed; Minimal → bold center
- Color: Strong palette color for background/accent; high-contrast text
- Consistency: Same divider style across all dividers in one presentation
- Contrast with content slides: Visually distinct (different background color, more whitespace)
Workflow
- Analyze: Section number, title, optional intro
- Choose Layout: Based on content and tone
- Write Slide: Use PptxGenJS. Use shapes for decorative elements. MUST include page number badge.
- Verify: Generate preview, extract text, verify content and badge.
4. Content Page
Pick a subtype based on the content. Each content slide belongs to exactly ONE subtype:
Subtypes
Text — Bullets, quotes, or short paragraphs
- Must still include icons or SVG shapes — never plain text only
| SLIDE TITLE |
| * Bullet point one |
| * Bullet point two |
| * Bullet point three |
Mixed Media — Two-column or half-bleed image + text
| SLIDE TITLE |
| Text content | [Image/Visual] |
| and bullets | |
Data Visualization — Chart (SVG bar/progress/ring) + takeaways
- Must include data source
| SLIDE TITLE |
| [SVG Chart] | Key Takeaway 1 |
| | Key Takeaway 2 |
| Source: xxx |
Comparison — Side-by-side columns or cards (A vs B, pros/cons)
| SLIDE TITLE |
| ┌─ Option A ─┐ ┌─ Option B ─┐ |
| │ Detail 1 │ │ Detail 1 │ |
| └────────────┘ └────────────┘ |
Timeline / Process — Steps with arrows, journey, phases
| SLIDE TITLE |
| [1] ──→ [2] ──→ [3] ──→ [4] |
| Step Step Step Step |
Image Showcase — Hero image, gallery, visual-first layout
| SLIDE TITLE |
| ┌────────────────────────────────┐ |
| │ [Hero Image] │ |
| └────────────────────────────────┘ |
| Caption or supporting text |
Font Size Hierarchy
| Element | Recommended Size | Notes |
|---|---|---|
| Slide Title | 36-44px | Bold, top of slide |
| Section Header | 20-24px | Bold, for sub-sections within slide |
| Body Text | 14-16px | Regular weight, left-aligned |
| Captions / Source | 10-12px | Muted color, smallest text |
| Stat Callout | 60-72px | Large bold numbers for key statistics |
Key Principles:
- Left-align body text — never center paragraphs or bullet lists
- Size contrast — title must be 36pt+ to stand out from 14-16pt body
- Visual elements required — every content slide must have at least one non-text element
- Breathing room — 0.5" minimum margins, 0.3-0.5" between content blocks
Content Elements
- Slide Title — Always required, top of slide
- Body Content — Text, bullets, data, or comparisons based on subtype
- Visual Element — Image, chart, icon, or SVG shape — always required
- Source / Caption — When showing data or external content
- Page Number Badge (角标) — MANDATORY
Design Decisions
- Subtype: Determine first — drives the entire layout
- Content Volume: Dense → multi-column or smaller font; Light → larger elements with more whitespace
- Data vs Narrative: Data-heavy → charts + stat callouts; Story-driven → images + quotes
- Variety: Each content slide should use a different layout from the previous one
- Consistency: Typography, colors, and spacing must match the rest of the presentation
Workflow
- Analyze: Content, determine subtype, plan layout
- Choose Layout: Best fit for subtype and content volume
- Write Slide: Use PptxGenJS. Use shapes for charts, decorative elements, icons. MUST include page number badge.
- Verify: Generate preview as
slide-XX-preview.pptx. Extract text with markitdown, verify all content present, no placeholder text, badge included.
5. Summary / Closing Page
- Use for: Wrap-up + action
- Content: Key takeaways, CTA/next steps, contact/QR, thank-you
Layout Options
Key Takeaways — Best for educational, corporate, data-driven presentations
| KEY TAKEAWAYS |
| ✓ Takeaway one |
| ✓ Takeaway two |
| ✓ Takeaway three |
CTA / Next Steps — Best for sales pitches, proposals, project kick-offs
| NEXT STEPS |
| [1] Action item one |
| [2] Action item two |
| Contact: email@example.com |
Thank You / Contact — Best for conference talks, keynotes
| THANK YOU |
| name@company.com |
| @handle | website.com |
Split Recap — Best for presentations needing both recap and action
| SUMMARY | NEXT STEPS |
| * Point one | Contact us at |
| * Point two | email@co.com |
| * Point three | [QR Code] |
Font Size Hierarchy
| Element | Recommended Size | Notes |
|---|---|---|
| Closing Title ("Thank You" / "Summary") | 48-72px | Bold, commanding |
| Takeaway / Action Item | 18-24px | Clear, scannable |
| Supporting Text | 14-16px | Regular weight |
| Contact Info | 14-16px | Muted color |
Key Principles:
- Strong closing statement: Main message should be largest, most prominent
- Scannable items: Takeaways/action items concise (one line each)
- Contact clarity: Legible but not dominant
- Memorable finish: Confident, polished ending
Content Elements
- Closing Title — Always required
- Takeaway Points — 3-5 concise summary points (if applicable)
- Call to Action — Clear next steps (if applicable)
- Contact Info — Email, website, social handles (if provided)
- Decorative Elements — SVG accents for visual consistency
- Page Number Badge (角标) — MANDATORY
Design Decisions
- Closing Type: Recap, CTA, thank-you, or combination
- Content Volume: Many takeaways → list; Simple closing → centered thank-you
- Audience Action: Audience needs to do something → CTA; Informational → takeaways
- Tone Consistency: Match energy of cover page
- Visual Distinction: Special but not disconnected from the rest
Workflow
- Analyze: Closing content — takeaways, CTA, contact, thank-you
- Choose Layout: Based on content type
- Write Slide: Use PptxGenJS. Use shapes for decorative elements. MUST include page number badge.
- Verify: Generate preview, extract text, verify content and badge.
Additional Layout Patterns
Use these across content slides for visual variety:
- Two-column (text left, illustration right)
- Icon + text rows (icon in colored circle, bold header, description below)
- 2x2 or 2x3 grid (image on one side, grid of content blocks on other)
- Half-bleed image (full left or right side) with content overlay
- Large stat callouts (big numbers 60-72pt with small labels below)
- Comparison columns (before/after, pros/cons)
- Timeline or process flow (numbered steps, arrows)
- Icons in small colored circles next to section headers
- Italic accent text for key stats or taglines