McKinsey-Style Multi-Page Presentation Generator

Overview

This skill produces professional McKinsey consulting-style HTML slide decks. Every presentation is data-driven, information-dense, and visually rigorous. The workflow covers end-to-end generation: research → planning → slide creation (cover, content, section dividers, TOC, summary) → deployment. All slides are rendered as static HTML with inline SVG charts — no generated images except in rare, data-driven cases.

Workflow (MANDATORY ORDER — No Skipping Steps)

Step 1: Research Phase (CRITICAL — DO FIRST)

NEVER skip this step. Data quality determines presentation quality.

Gather comprehensive data before any slide creation:

#### Research Objectives

#### Information Source Prioritization

| Tier | Source Type | Examples | |------|-------------|----------| | 1 | Official Data/APIs | Company filings, government databases, central banks | | 2 | Research Institutions | McKinsey, BCG, Goldman Sachs, Morgan Stanley, IMF, World Bank | | 3 | Industry Reports | Gartner, Statista, CB Insights, PitchBook | | 4 | News Organizations | Reuters, Bloomberg, Financial Times | | 5 | Company Websites | Official press releases, investor relations |

#### Search Strategy

Execute multiple targeted searches: 1. "[Topic] market size 2025" 2. "[Topic] industry report" 3. "[Company] revenue growth 2025" 4. "[Topic] competitors market share" 5. "[Topic] trends forecast 2026" 6. "[Company] founding history milestones" 7. "[Topic] CAGR growth rate" 8. "[Topic] regional breakdown"

#### Data Quality Requirements

For every piece of data collected, record: 1. The specific data point (number, percentage, fact) 2. The source name (organization) 3. The publication date or data date 4. The original URL

MANDATORY minimums before completing research:

AVOID:

#### Research Output Format

## RESEARCH SUMMARY
Topic: [Topic Name]
Research Date: [Current Date]
SLIDE N: [Slide Title]
Key Data Points:
1. [Data point 1] - [Value]
2. [Data point 2] - [Value]
Chart Data (if applicable):
| Year | Value | YoY Growth |
|------|-------|------------|
| 2023 | $XX   | +XX%       |
| 2024 | $XX   | +XX%       |
| 2025 | $XX   | +XX%       |
Source Citation: Source: [Organization 1], [Organization 2] | [Date]
ALL SOURCES
| # | Source Name | Type | Date | URL | Reliability |
|---|-------------|------|------|-----|-------------|
| 1 | [Name] | [Report/News/Official] | [Date] | [URL] | High/Medium |

Step 2: Presentation Planning

Based on research findings, plan the slide structure:

Typical 10-slide structure:

Step 3: Generate Cover Page

See Cover Page Specifications below.

Step 4: Generate Content Pages

For each content slide:

See Content Page Specifications below.

Step 5: Generate Optional Pages

If needed, generate:

Step 6: Deployment

Deploy the completed presentation using deploy_html_presentation.

Design System

Core Design Philosophy

Professional & Serious: All presentations must be square, formal, and business-appropriate. This is a consulting deck, NOT a creative portfolio.

Data-Driven: Every content slide must be backed by verifiable data with proper source citations.

Information Density: Content pages should maximize information density with at least 4 distinct content zones per slide.

Style: Sharp & Compact — square corners, high information density, professional severity. border-radius: 0 on ALL elements.

Color System

#### Primary Colors

| Element | Color Name | Hex | Usage | |---------|------------|-----|-------| | Main Background | White | #FFFFFF | Primary slide background (MANDATORY DEFAULT) | | Title Bar/Header | Deep Navy Blue | #0B1F3A | Top header bar (0.6" height) | | Primary Accent | Cobalt Blue | #1B5AB5 | Primary chart series, emphasis elements, insight text | | Body Text/Labels | Dark Gray | #2D2D2D | Primary body text, data labels | | Secondary Text/Footnotes | Medium Gray | #8C8C8C | Secondary text, footnotes, sources | | Grid Lines/Dividers | Light Gray | #E0E0E0 | Chart grid lines, separators |

#### Cover Page & Section Divider Background Colors (Choose ONE)

| Option | Hex Code | Effect | Text Color | |--------|----------|--------|------------| | White | #FFFFFF | Clean, minimal, modern | Navy #0B1F3A | | Navy Blue | #0B1F3A | Professional, authoritative | White #FFFFFF | | Cobalt Blue | #1B5AB5 | Bold, confident | White #FFFFFF | | Cyan | #2E8BC0 | Fresh, innovative | White #FFFFFF | | Emerald Green | #3AAF6C | Growth, sustainability | White #FFFFFF | | Gray | #4A4A4A | Neutral, sophisticated | White #FFFFFF |

#### Gradient Options (Cover/Divider pages ONLY, subtle only)

| Gradient | CSS Example | |----------|-------------| | Navy to Dark | background: linear-gradient(180deg, #0B1F3A 0%, #1B3A5C 100%); | | Blue to Navy | background: linear-gradient(180deg, #1B5AB5 0%, #0B1F3A 100%); |

Note: Gradients are ONLY allowed on cover pages and section dividers. Content pages MUST NOT use gradients.

#### Chart Data Series Colors (use in order)

| Series | Color Name | Hex | |--------|------------|-----| | 1 | Cobalt Blue | #1B5AB5 | | 2 | Cyan Blue | #2E8BC0 | | 3 | Amber Gold | #D4A843 | | 4 | Coral Red | #E05252 | | 5 | Emerald Green | #3AAF6C | | 6 | Purple Gray | #7B6D9E |

#### Semantic Colors

| Purpose | Color | Hex | |---------|-------|-----| | Positive Data | Green | #3AAF6C | | Negative Data | Red | #E05252 |

#### ⚠️ Accent Color Limit (STRICTLY ENFORCED — MAX 2 PER PAGE)

RULE: Maximum 2 accent colors per page. This is NON-NEGOTIABLE.

| Type | Colors | Can Use Freely | |------|--------|----------------| | Base Colors | Navy #0B1F3A, White #FFFFFF, Grays (#2D2D2D, #8C8C8C, #E0E0E0) | ✅ Yes | | Primary Accent | Cobalt Blue #1B5AB5 | ✅ Always allowed | | Secondary Accent | #2E8BC0, #D4A843, #E05252, #3AAF6C, #7B6D9E | ⚠️ Pick ONLY ONE |

Enforcement: 1. Before writing HTML: Decide which 2 accent colors you will use 2. During HTML writing: Only use those 2 colors for accents 3. During verification: Count accent colors — if >2, FIX by replacing extras with #1B5AB5 or #E0E0E0

ONLY EXCEPTION: Multi-series charts with 3+ distinct data categories may use additional colors within that single chart.

#### Alternative Color Schemes

Use ONLY when the McKinsey White Theme is not appropriate:

| # | Name | Colors | Style | Use Cases | |---|------|--------|-------|-----------| | 2 | Modern Health | #006d77 #83c5be #edf6f9 #ffddd2 #e29578 | Fresh, healing | Healthcare, wellness | | 3 | Business Authority | #2b2d42 #8d99ae #edf2f4 #ef233c #d90429 | Serious, classic | Annual reports, government | | 4 | Nature Outdoor | #606c38 #283618 #fefae0 #dda15e #bc6c25 | Earthy, grounded | Environmental, agriculture | | 5 | Dynamic Tech | #8ecae6 #219ebc #023047 #ffb703 #fb8500 | High energy | Startup pitches | | 6 | Pure Tech Blue | #03045e #0077b6 #00b4d8 #90e0ef #caf0f8 | Futuristic | Cloud/AI, clean energy | | 7 | Platinum White Gold | #0a0a0a #0070F3 #D4AF37 #f5f5f5 #ffffff | Premium | Fintech, luxury brands |

Typography

#### Font Family

| Language | Font | Notes | |----------|------|-------| | Chinese | Microsoft YaHei | Use for all titles and body text | | English | Arial / Arial Black | Arial Black for titles, Arial for body |

CSS font-family declaration: "Microsoft YaHei", Arial, sans-serif

#### Typography Hierarchy

| Element | Font | Size | Color | Notes | |---------|------|------|-------|-------| | Page Title (Header Bar) | Arial Black | 24px | #FFFFFF | White text on dark navy header | | Insight/Subtitle | Arial Bold | 16px | #1B5AB5 | Blue text, one-line key insight | | Chart Title | Arial Bold | 12px | #2D2D2D | Above each chart | | Body/Data Labels | Arial | 10–12px | #2D2D2D | Chart labels and body | | Chart Legend | Arial | 9px | #2D2D2D | Below or right of chart | | Footnotes/Sources | Arial | 8px | #8C8C8C | Bottom of slide |

#### Font Size Limits (STRICT)

| Element | Max Size | Notes | |---------|----------|-------| | Page Title | 24px | In header bar | | Insight Text | 16px | Below header | | Stat Callout | 48px | Large numbers only | | Chart Title | 12px | Above charts | | Body Text | 10–12px | Compact for density | | Labels | 9–10px | Chart labels | | Footnotes | 8px | Source citations |

NO element should exceed 48px except in rare stat callout situations.

Forbidden Elements (DO NOT USE)

| ❌ Forbidden | Reason | ✅ Use Instead | |-------------|--------|----------------| | Rounded corners (border-radius) | Looks casual/playful | Square corners (border-radius: 0) | | Generated images | Decorative, unprofessional | SVG charts, data visualizations | | Oversized fonts (>48px for body) | Looks like a billboard | Compact, data-dense typography | | Drop shadows | Looks dated/gimmicky | Clean flat design | | Gradients on content elements | Distracting | Solid colors | | Animations/transitions | Unprofessional for consulting | Static content | | Decorative icons | Cluttered | Minimal functional icons only | | Bright/saturated colors | Looks unprofessional | Muted, business colors |

Required Style Attributes

/* ALL elements must have square corners */
border-radius: 0;
/* Bars and charts - NO rounded corners */
rect { rx: 0; ry: 0; }
/* Progress bars - square ends */
.progress-bar { border-radius: 0; }
/* Cards and boxes - sharp edges */
.card, .box, .zone { border-radius: 0; }

Source Citation Format (MANDATORY)

Every slide containing data MUST include a footer citation:

Source: [Organization Name(s)] | [Data Period] | [Optional: Disclaimer]

Examples:

| Type | Example | |------|---------| | Financial | Source: Wind, CSRC, PBoC | Full Year 2025 | | Research | Source: Goldman Sachs, Morgan Stanley, JP Morgan, IMF | Forecasts as of early 2026 | Not investment advice | | Company | Source: Company Annual Report 2025 | Data as of December 2025 | | Industry | Source: Statista, IDC, Gartner | Q4 2025 | Market estimates | | Government | Source: National Bureau of Statistics | 2025 Annual Data |

Image Generation Rules (STRICT)

Maximum 3 images per entire presentation, only for:

FORBIDDEN:

All other visuals must be SVG charts created in HTML/CSS.

Slide Types

Cover Page

Design: Elegant & Minimal — centered typography only.

#### ALLOWED Elements

#### FORBIDDEN Elements

#### Layout

┌─────────────────────────────────────────┐
│                                         │
│                                         │
│           PRESENTATION TITLE            │
│           ─────────────────             │
│              Subtitle Here              │
│                                         │
│         Presenter | Date | Company      │
│                                         │
└─────────────────────────────────────────┘

#### Font Size Hierarchy (Cover)

| 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 |

#### Cover HTML Example

  
Presentation Title
  
Subtitle or Tagline

#### Cover Verification Checklist

Content Page

Every content slide MUST follow this vertical structure:

┌─────────────────────────────────────────────────────────┐
│  HEADER BAR (Deep Navy #0B1F3A, 0.6" / 32px height)    │
│  [Page Title - White, left-aligned] [Page# - right]    │
├─────────────────────────────────────────────────────────┤
│  INSIGHT ZONE (0.1" below header)                       │
│  One-line blue bold text summarizing the key finding   │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  CONTENT AREA (4+ zones)                               │
│  Charts, data, bullet points, comparisons              │
│  Left/Right margins: 0.5" (26px)                       │
│  Inter-chart spacing: 0.2" (10px)                      │
│                                                         │
├─────────────────────────────────────────────────────────┤
│  FOOTER ZONE (0.4" / 21px height)                      │
│  [Data source + Date + Disclaimer - Gray #8C8C8C, 8px] │
└─────────────────────────────────────────────────────────┘

#### 1. Header Bar

  
Page Title
  3

#### 2. Insight Zone

  Key Insight: Market grew 25% YoY driven by digital transformation initiatives

#### 3. Content Area

#### 4. Footer Zone (MANDATORY SOURCE CITATION)

  Source: Goldman Sachs, Morgan Stanley | Forecasts as of early 2026 | Not investment advice

#### ⚠️ 4-Zone Minimum Layout (MANDATORY)

Every content page MUST have at least 4 distinct content zones.

##### 2x2 Grid

┌─────────────────┬─────────────────┐
│  Zone 1         │  Zone 2         │
│  [Chart/Stats]  │  [Bullet List]  │
├─────────────────┼─────────────────┤
│  Zone 3         │  Zone 4         │
│  [Key Finding]  │  [Comparison]   │
└─────────────────┴─────────────────┘

##### 1+3 Layout

┌─────────────────────────────────────┐
│  Zone 1: Hero Chart                 │
├───────────┬───────────┬─────────────┤
│  Zone 2   │  Zone 3   │  Zone 4     │
│  Detail 1 │  Detail 2 │  Detail 3   │
└───────────┴───────────┴─────────────┘

#### Content Variety (NOT JUST BULLETS)

| Format | When to Use | |--------|-------------| | Prose paragraphs | Context, analysis, explanations (2–4 sentences) | | Data tables | Comparisons, specifications, metrics | | Bullet lists | Action items, key takeaways, features | | Charts/Graphs | Trends, distributions, relationships | | Callout stats | Highlight 1–3 key numbers | | Process flows | Sequential steps, workflows |

Example of good zone variety on one page:

#### Content Subtypes

#### Content Page Verification Checklist

Table of Contents

#### Layout Options

1. Numbered Vertical List (best for 3–5 sections)

|  TABLE OF CONTENTS            |
|  01  Section Title One         |
|  02  Section Title Two         |
|  03  Section Title Three       |

2. Two-Column Grid (best for 4–6 sections)

3. Sidebar Navigation (modern/corporate)

4. Card-Based Layout (3–4 sections, creative/modern)

#### Font Size Hierarchy (TOC)

| Element | Recommended Size | |---------|-----------------| | Page Title ("Table of Contents" / "Agenda") | 36–44px | | Section Number | 28–36px | | Section Title | 20–28px | | Section Description | 14–16px |

#### Content Elements 1. Page Title — Always required 2. Section Numbers — Consistent format (01, 02... or I, II...) 3. Section Titles — Clear and concise 4. Section Descriptions — Optional one-line summaries 5. Page Number Badge — MANDATORY (see Appendix G)

Section Divider

Design: Elegant & Minimal — same style as cover pages.

#### ALLOWED Elements

#### FORBIDDEN Elements

#### Layout

┌─────────────────────────────────────────┐
│                                         │
│                  02                     │
│           SECTION TITLE                 │
│         Optional intro line             │
│                                         │
└─────────────────────────────────────────┘

#### Font Size Hierarchy (Section Divider)

| 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 |

Page Number Badge is MANDATORY (see Appendix G).

Summary / Closing Page

#### Layout Options

1. Key Takeaways — 3–5 key points with icons or numbered markers

2. CTA / Next Steps — Clear call-to-action prominently displayed

3. Thank You / Contact — Closing message with contact info

4. Split Recap — Left: key takeaways; Right: CTA/contact

#### Font Size Hierarchy (Summary)

| Element | Recommended Size | |---------|-----------------| | Closing Title ("Thank You" / "Summary") | 48–72px | | Takeaway / Action Item | 18–24px | | Supporting Text | 14–16px | | Contact Info | 14–16px |

Page Number Badge is MANDATORY (see Appendix G).

Chart & Data Visualization Rules (MANDATORY)

General Chart Rules

1. No outer borders on any chart 2. Light gray grid lines (#E0E0E0) 3. Y-axis starts from zero (unless specifically noted) 4. Data labels directly on charts to reduce legend lookup cost 5. Legend position: Below chart or right side, 9px font 6. Square corners on ALL bars — NO rx/ry attributes

Bar/Column Chart

  
  
  
  
  
  
  85%
  62%
  92%
  71%
  
  Q1
  Q2
  Q3
  Q4

Line Chart

  
  
  
  
  
  $2.1M
  $2.8M
  $4.2M
  $3.5M

Progress Bar (NO ROUNDED CORNERS)

  

    Market Share
    75%
  
  
  

    

  

Pie Charts — Image Generation Tool is MANDATORY

Pie charts MUST be created using the image generation tool. SVG pie charts require arc commands (A) which are forbidden for PPTX conversion. ALL workarounds (layered circles, stroke-dasharray, clip-paths, conic-gradient, rotated segments) WILL FAIL during PPTX conversion.

HTML Implementation Specification

Appendix A — Responsive Scaling Snippet (REQUIRED)

Every slide HTML file MUST include this snippet:

Appendix B — CSS Rules (REQUIRED)

#### ⚠️ Inline-Only CSS

All CSS styles MUST be inline (except the snippet in Appendix A).

  
Title


  

Appendix D — SVG Conversion Constraints (CRITICAL)

#### Supported SVG Elements (WHITELIST)

#### Command Restrictions (CRITICAL)

ONLY these commands are supported:

FORBIDDEN commands (will cause SVG to be SKIPPED in PPTX):

#### Additional SVG Constraints

#### Workaround: Approximate Curves with Line Segments

Appendix E — Advanced SVG Techniques

#### SVG Badge Example (Text INSIDE SVG)

  
  LABEL

#### SVG Background Patterns

#### SVG Icons (Supported Patterns)

#### SVG Implementation Tips

Appendix F — HTML2PPTX Validation Rules (REQUIRED)

#### Layout and Dimensions

#### Backgrounds and Images

For slide backgrounds, use a real element as background

#### Text Elements