--- name: mckinsey-presentation-generator description: "McKinsey consulting-style multi-page HTML presentation generator. Creates data-rich, visually compelling slide decks with rigorous research, SVG charts, and proper source citations. TRIGGERS: McKinsey, consulting deck, presentation, PPT, slide deck, data visualization, business presentation, market analysis slides." --- # 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 - Market size, CAGR, growth rates - Company metrics and milestones - Competitor analysis and market share - Historical trend data for charts - Verified statistics with source citations #### 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:** - [ ] At least 15 specific statistics/data points - [ ] At least 5 different sources - [ ] Data for each planned content slide - [ ] Historical trend data for at least 1 chart - [ ] Competitor comparison data - [ ] Proper source citations in PPT format **AVOID:** - ❌ Unsourced claims - ❌ Outdated data (>2 years old for fast-moving industries) - ❌ Vague qualitative statements ("significant growth") - ❌ Single-source critical facts #### 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: - Default: 10 slides (unless user specifies otherwise) - **Recommended structure**: Cover → Content Pages → Summary - **Section dividers are OPTIONAL** — only include if content naturally divides into distinct sections - For most presentations, a simple Cover + Content + Summary structure is preferred **Typical 10-slide structure:** - Slide 1: Cover page - Slides 2–9: Content pages with data visualizations - Slide 10: Summary/Conclusion ### Step 3: Generate Cover Page - NO generated images allowed - NO graphical elements (shapes, icons, decorations) - Use solid colors OR subtle gradients ONLY - Centered typography is the PRIMARY visual element - Elegant, restrained, professional See [Cover Page Specifications](#cover-page) below. ### Step 4: Generate Content Pages For each content slide: - Minimum 4 distinct content zones per page - White background is MANDATORY default (80%+ of slides) - SVG charts only — no generated images - Include source citations in footer See [Content Page Specifications](#content-page) below. ### Step 5: Generate Optional Pages If needed, generate: - Table of Contents (see [TOC Specifications](#table-of-contents)) - Section Dividers (see [Section Divider Specifications](#section-divider)) - Summary/Closing Page (see [Summary Page Specifications](#summary-closing-page)) ### 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 ```css /* 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: - Market Positioning Map (based on actual research data) - Timeline/Milestone Diagram (actual company data) - Process Flow Diagram (actual workflow) - Geographic Map (when location is central) **FORBIDDEN:** - ❌ Generic decorative images - ❌ Stock photo style images - ❌ Concept illustrations without data - ❌ Background images for aesthetics - ❌ Icons (use SVG instead) **All other visuals must be SVG charts created in HTML/CSS.** --- ## Slide Types ### Cover Page **Design: Elegant & Minimal — centered typography only.** #### ALLOWED Elements - Solid color backgrounds (from the color palette) - Subtle CSS gradients (linear, very subtle transitions) - Typography as the PRIMARY visual element #### FORBIDDEN Elements - ❌ Generated images - ❌ SVG geometric shapes (circles, rectangles, polygons) - ❌ Decorative icons or illustrations - ❌ Color blocks or split layouts - ❌ Any graphical ornamentation #### 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 ```html

Presentation Title

Subtitle or Tagline

``` #### Cover Verification Checklist - [ ] Typography is perfectly centered (horizontal and vertical) - [ ] Text contrast is correct (white text on dark, navy text on light) - [ ] No decorative shapes or graphics present - [ ] Title is NOT truncated — all text fits within the slide - [ ] Clean, elegant, professional appearance --- ### 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 - **Height**: 0.6" (32px) - **Background**: Deep Navy `#0B1F3A` - **Page Title**: Arial Black, 24px, White `#FFFFFF`, left-aligned with 0.5" padding - **Page Number**: Right-aligned, White, 14px ```html

Page Title

``` #### 2. Insight Zone - **Position**: 0.1" (5px) below header bar - **Font**: Arial Bold, 16px, Cobalt Blue `#1B5AB5` - **Content**: One-line summary of the page's key finding/insight ```html

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

``` #### 3. Content Area - **Left/Right Margins**: 0.5" (26px) - **Inter-zone Spacing**: 0.2" (10px) - **Must contain 4+ distinct zones** #### 4. Footer Zone (MANDATORY SOURCE CITATION) - **Height**: 0.4" (21px) - **Font**: Arial, 8px, Medium Gray `#8C8C8C` ```html

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:** - Zone 1: SVG bar chart with trend data - Zone 2: Prose paragraph explaining context - Zone 3: Data table with competitor comparison - Zone 4: 3 bullet points summarizing key takeaways #### Content Subtypes - **Text**: bullets/quotes/short paragraphs (still add icons/shapes) - **Mixed media**: two-column / half-bleed image + text overlay - **Data visualization**: chart + 1–3 key takeaways + source - **Comparison**: side-by-side columns/cards (A vs B, pros/cons) - **Timeline / process**: steps with arrows, journey, phases - **Image showcase**: hero image, gallery, or visual-first layout #### Content Page Verification Checklist - [ ] Header bar with navy background - [ ] Insight zone with blue text - [ ] 4+ content zones - [ ] Footer with source citation - [ ] Page number badge present - [ ] **Text Overflow Check**: No text cut off at edges, no truncation with "..." - [ ] **Whitespace Check**: No large empty gaps (>52px), 70%+ of content area filled, check right side and bottom - [ ] **Accent Color Count**: ≤2 accent colors (excluding base colors) - [ ] **Content Variety**: Not all bullet points — mix prose, tables, charts --- ### 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 - Solid color backgrounds (from the color palette) - Subtle CSS gradients - Typography as the PRIMARY visual element - Centered layout only #### FORBIDDEN Elements - ❌ SVG geometric shapes (circles, rectangles, bars, polygons) - ❌ Color blocks or split layouts - ❌ Accent bars or stripes - ❌ Decorative icons or illustrations #### 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 - **Corner radius**: 0 (SQUARE corners — NO rounded edges) - **Bar width ratio**: 70% of available space - **Use chart series colors in order** - **NO rx/ry attributes on rect elements** ```html ``` ### Line Chart - **Line width**: 2px - **Data points**: Small circles (r=3) - **Use chart series colors in order** ```html ``` ### Progress Bar (NO ROUNDED CORNERS) ```html

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: ```html ``` ### Appendix B — CSS Rules (REQUIRED) #### ⚠️ Inline-Only CSS **All CSS styles MUST be inline (except the snippet in Appendix A).** - Do NOT use `

``` #### ⚠️ Background on .slide-content Directly **Do NOT create a full-size background DIV inside `.slide-content`.** Set background directly on `.slide-content` itself. ```html

Title

``` #### ⚠️ No Bold for Body Text and Captions Reserve bold (`font-weight: 600+`) for titles, headings, and key emphasis only. Body text, captions, legends, and footnotes must use normal weight (400–500). ### Appendix C — Color Palette Rules (REQUIRED) - **Strictly use the provided color palette.** Do NOT create or modify color values. - **Only exception**: You may add opacity to palette colors for overlays (e.g., `rgba(r,g,b,0.1)`) - **No gradients on content pages** — No CSS `linear-gradient()`, `radial-gradient()`, `conic-gradient()` on content slides - **No animations** — No CSS `animation`, `@keyframes`, `transition`, hover effects, or SVG `` ### Appendix D — SVG Conversion Constraints (CRITICAL) #### Supported SVG Elements (WHITELIST) - ✅ `` — rectangles (with `rx`/`ry` for rounded corners) - ✅ `` — circles - ✅ `` — ellipses - ✅ `` — straight lines - ✅ `` — connected line segments (stroke only, NO fill) - ✅ `` — closed polyline (stroke only, NO fill) - ✅ `` — **ONLY with M/L/H/V/Z commands** - ✅ `` — repeating patterns #### `` Command Restrictions (CRITICAL) **ONLY these commands are supported:** - ✅ `M/m` — moveTo - ✅ `L/l` — lineTo - ✅ `H/h` — horizontal line - ✅ `V/v` — vertical line - ✅ `Z/z` — close path **FORBIDDEN commands (will cause SVG to be SKIPPED in PPTX):** - ❌ `Q/q` — quadratic Bézier curve - ❌ `C/c` — cubic Bézier curve - ❌ `S/s` — smooth cubic Bézier - ❌ `T/t` — smooth quadratic Bézier - ❌ `A/a` — elliptical arc #### Additional SVG Constraints - ❌ **NO rotated shapes** — `transform="rotate()"` on shapes causes fallback failure - ❌ **NO `` in complex SVGs** — SVG text becomes rasterized, not editable in PPTX - ❌ **Filled `` must be rectangles** — if a path has fill, it must form a closed rectangle with only M/L/H/V/Z - ⚠️ **Gradients in SVG are DISCOURAGED** — technically supported but can break #### Workaround: Approximate Curves with Line Segments ```html ``` ### Appendix E — Advanced SVG Techniques - **SVG is for decorative elements ONLY** — it does NOT satisfy "real image" requirements - Prefer SVG for all decorative shapes (lines/dividers, corner accents, badges, frames, arrows) - Use SVG when pixel-crisp geometry is needed under `transform: scale()` - **Background shapes MUST use SVG** `` or ``, NOT CSS `background`/`border` - **Dividers MUST use SVG**, NOT CSS `background`, `border`, or `

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

LABEL

``` #### SVG Background Patterns ```html ``` #### SVG Icons (Supported Patterns) ```html ``` #### SVG Implementation Tips - Add `vector-effect="non-scaling-stroke"` to keep stroke widths stable under scaling - For thin lines, prefer filled rectangles over stroked lines - Use `overflow="visible"` when SVG extends beyond its box - Use `aria-hidden="true"` for decorative SVGs - Use `currentColor` for easy theming - Use `pointer-events: none` for overlay SVGs ### Appendix F — HTML2PPTX Validation Rules (REQUIRED) #### Layout and Dimensions - Slide content must not overflow the body (no scroll) - Text elements larger than 12pt must be at least 0.5" above the bottom edge - HTML body dimensions must match presentation layout size #### Backgrounds and Images - Do NOT use CSS gradients - Do NOT use `background-image` on `div` elements - For slide backgrounds, use a real `` element as background - Solid background colors on a dedicated shape/div element #### Text Elements - `p`, `h1`–`h6`, `ul`, `ol`, `li` must NOT have background, border, or shadow - Inline elements (`span`, `b`, `i`, `u`, `strong`, `em`) must NOT have margins - Do NOT use manual bullet symbols — use `

`, `

`) as overlay on SVG — it will be lost in PPTX - Text on SVG shapes must use `` element inside the SVG - SVG `` must use `text-anchor="middle"` and `dominant-baseline="central"` #### Placeholders - Elements with class `placeholder` must have non-zero width and height ### Appendix G — Page Number Badge (REQUIRED) All slides **except Cover Page** MUST include a page number badge. Shows current slide number in bottom-right corner. - **Position**: `position:absolute; right:32px; bottom:24px;` - **Must use SVG** (text inside ``, not overlaid ``) - Colors from palette only; keep it subtle; same style across all slides - Show current number only (e.g. `3` or `03`), **not** "3/12" ```html

``` --- ## No Excessive Whitespace (MANDATORY CHECK) **Every page must be information-dense.** Avoid large empty areas. | Check | Requirement | |-------|-------------| | **Content Coverage** | At least 70% of the content area must contain meaningful content | | **Gap Size** | No single empty gap larger than 1" (52px) in any direction | | **Zone Balance** | All 4+ zones should have substantial content, not filler | **During page verification, check for:** - Large empty margins between zones - Sparse content zones (single bullet point only) - Unbalanced layouts (one zone full, others empty) - Content that could be expanded to fill space --- ## Slide Page Type Classification Classify **every slide** as **exactly one** of these 5 page types: 1. **Cover Page** — Opening + tone setting 2. **Table of Contents** — Navigation + expectation setting (3–5 sections) 3. **Section Divider** — Clear transitions between major parts 4. **Content Page** — Data-rich slides (pick a subtype) 5. **Summary / Closing Page** — Wrap-up + action --- ## Common Mistakes to Avoid - **Don't repeat the same layout** — vary columns, cards, and callouts across slides - **Don't center body text** — left-align paragraphs and lists; center only titles - **Don't skimp on size contrast** — titles need clear differentiation from body text - **Don't use colors outside the palette** — strictly use provided color values - **Don't mix spacing randomly** — choose consistent gaps - **Don't create text-only slides** — add charts, data tables, or visual elements - **Don't forget text box padding** — account for padding when aligning shapes with text - **Don't use low-contrast elements** — icons AND text need strong contrast against background - **NEVER use accent lines under titles** — hallmark of AI-generated slides; use whitespace instead - **NEVER use rounded corners** — all elements must have `border-radius: 0` - **NEVER skip source citations** — every data slide needs a footer citation - **NEVER exceed 2 accent colors per page** (except multi-series charts) - **NEVER use generated images for decoration** — SVG charts only --- ## Verification Workflow (MANDATORY for Every Slide) After generating each slide's HTML, verify using screenshots: 1. **Layout Structure**: Correct header/insight/content/footer zones 2. **Text Overflow/Truncation**: No text cut off, no "..." truncation 3. **Whitespace**: No large empty gaps, 70%+ fill rate, check right side and bottom 4. **Accent Colors**: Count ≤2 (excluding base colors) 5. **Content Variety**: Not all bullet points 6. **Square Corners**: No border-radius anywhere 7. **Source Citation**: Footer citation present on data slides 8. **Page Number Badge**: Present on all non-cover slides **If ANY issue is found, FIX immediately before proceeding to the next slide.**

McKinsey Presentation Generator

Description

Latest Changes

Install McKinsey Presentation Generator with One Click