mckinsey-style-visualization

📁 kgraph57/mckinsey-style-visualization-skill 📅 8 days ago
3
总安装量
3
周安装量
#60065
全站排名
安装命令
npx skills add https://github.com/kgraph57/mckinsey-style-visualization-skill --skill mckinsey-style-visualization

Agent 安装分布

opencode 2
gemini-cli 2
claude-code 2
github-copilot 2
codex 2
kimi-cli 2

Skill 文档

McKinsey/BCG Style Visualization

Professional consulting-style data visualization and infographics creation skill for strategic analysis and executive presentations.


Overview

This skill enables the creation of high-density, professional consulting presentation slides and data visualizations in the style of top-tier strategy firms (McKinsey, BCG, Bain). The output combines institutional authority with editorial financial-report aesthetics, designed for boardroom-ready executive presentations.


When to Use This Skill

Use this skill when:

  • Creating strategic analysis presentations for executive audiences
  • Developing competitive benchmarking visualizations
  • Building data-driven consulting deliverables
  • Designing market analysis infographics
  • Producing high-information-density business reports
  • Visualizing complex strategic frameworks and comparisons

Do NOT use for:

  • Marketing materials or promotional content
  • Startup pitch decks with bright colors
  • Decorative or artistic visualizations
  • Low-information-density slides

Core Design Principles

1. Strategic Framing (Mandatory)

Every visualization must be hypothesis-driven, not descriptive.

Requirements:

  • State a clear, insight-led headline that answers a strategic question directly
  • Every section must drive toward a specific strategic implication
  • Avoid neutral comparison — highlight structural trade-offs, capability gaps, competitive moats, and strategic asymmetries
  • The visualization should implicitly support an executive-level decision (e.g., invest, partner, build, acquire, differentiate)

Bad Example: “Comparison of AI Video Models” Good Example: “Temporal Consistency Emerges as the Key Differentiator in GenAI Video — Seedance 2.0 Leads on Technical Benchmarks but Lags on Ecosystem Integration”


2. Visual & Design Standards

Aesthetic

  • Tech-minimalist but information-heavy
  • Clean, sharp, authoritative
  • Institutional and boardroom-ready
  • NOT startup-style or decorative

Typography

For Cover Slides:

  • Main Title: Serif font (Times New Roman / Georgia / Playfair Display / Libre Baskerville)
    • Size: Very large (48-72pt equivalent)
    • Weight: Regular or Medium (not bold – maintains elegance)
    • Color: White #FFFFFF
  • Subtitle: Sans-serif (Inter / Helvetica / Arial)
    • Size: Medium (18-24pt equivalent)
    • Weight: Light or Regular
    • Color: Light Grey #E5E7EB
  • Metadata: Sans-serif (Inter / Helvetica / Arial)
    • Size: Small (10-12pt equivalent)
    • Weight: Light
    • Color: Light Grey #E5E7EB

For Content Slides:

  • Headlines: Serif (Times New Roman / Georgia)
    • Size: Large (24-36pt equivalent)
    • Weight: Bold
    • Color: Black #000000
  • Body Text: Sans-serif (Inter / Helvetica / Arial)
    • Size: Medium (14-16pt equivalent)
    • Weight: Regular
    • Color: Dark Grey #374151
  • Data Labels: Sans-serif (Inter / Helvetica / Arial / Roboto)
    • Size: Small-Medium (12-14pt equivalent)
    • Weight: Medium or Semibold
    • Color: Black #000000 or Deep Royal Blue #1E3A8A
  • Emphasis: Bold for key numbers and strategic insights

Color Palette

For Content Slides (Data Visualizations):

  • Background: Pure White #FFFFFF
  • Primary Text: Sharp Black #000000
  • Primary Accent: Deep Royal Blue #1E3A8A
  • Secondary Accent: Medium Blue #2563EB
  • Grey Hierarchy:
    • Dark Grey (primary text): #374151
    • Medium Grey (secondary text): #6B7280
    • Light Grey (borders/dividers): #D1D5DB
    • Very Light Grey (subtle backgrounds): #F3F4F6

For Cover Slides:

  • Background: Deep Navy Blue #1E3A5F
  • Alternative Background: Gradient from #1E3A5F to #2C4A6F
  • Primary Text: Pure White #FFFFFF
  • Secondary Text: Light Grey #E5E7EB
  • Optional Accent: Subtle Gold #D4AF37 (for premium touch, use sparingly)

General Rules:

  • NO gradients on content slides (only subtle gradients allowed on cover slides)
  • NO bright startup colors (avoid neon, pastels, or vibrant hues)

Graphic Rules

  • Hairline borders for tables (thin, precise lines)
  • Precise vector lines for charts and frameworks
  • NO decorative icons (use functional icons only when necessary)
  • NO visual clutter (every element must serve a purpose)

3. Aspect Ratio Standards

CRITICAL: Always use landscape (horizontal) orientation for consistency.

Recommended aspect ratios:

  • Landscape (16:9): Default for all visualizations — ensures consistency across slides
  • Landscape (3:2): Alternative for wider layouts

Avoid:

  • Portrait orientation (unless specifically requested)
  • Square formats (unless for specific use cases like social media)

Rationale:

  • Landscape orientation is standard for business presentations
  • Maintains visual consistency when multiple charts are used together
  • Optimized for screen sharing and projection
  • Easier to read in document formats

Visualization Types & Use Cases

Type 1: Time-Series Growth Charts

Use when: Showing adoption rates, market growth, performance over time

Elements:

  • Line chart or bar chart with clear time axis
  • Large percentage numbers above data points
  • Annotation box for key insights (e.g., “2x growth in 2 years”)
  • Clean gridlines every 10-20%
  • Upward arrow for positive trends

Example: AI adoption rate from 38% (2023) to 72% (2025)


Type 2: Gap/Funnel Visualizations

Use when: Highlighting dramatic differences, maturity gaps, conversion funnels

Elements:

  • Horizontal bars or funnel shape
  • Extreme contrast in bar lengths to emphasize gap
  • Large percentage labels
  • Annotation explaining the implication (e.g., “Only 1 in 90 organizations…”)

Example: 90% using AI vs. 1% with mature operations


Type 3: Before/After Comparisons

Use when: Demonstrating impact, ROI, performance improvement

Elements:

  • Two vertical bars side by side
  • Different colors (grey for “before”, royal blue for “after”)
  • Curved arrow with improvement metric (e.g., “+28.8 points”)
  • Y-axis with clear scale
  • Annotation box for context (e.g., “RCT study in Pakistan”)

Example: Diagnostic accuracy 50% → 78.8% after 20-hour training


Type 4: Market Share / Adoption Rate

Use when: Showing percentage breakdowns, market penetration

Elements:

  • Donut chart with center percentage
  • Left side: chart; Right side: key statistics in large text
  • Two-color scheme (primary + grey)
  • Legend with color-coded boxes

Example: 77% of US medical schools adopted AI curriculum


Type 5: Investment / Scale Infographics

Use when: Comparing organizational investments, scale of operations

Elements:

  • Horizontal layout with vertical divider
  • Left section: Organization A with icon, large numbers, context
  • Right section: Organization B with icon, large numbers, context
  • Clean vector icons in royal blue
  • Hairline divider between sections

Example: Kaiser Permanente (40 hospitals, 600+ facilities) vs. Mayo Clinic ($1B, 200+ projects)


Type 6: Timeline Visualizations

Use when: Showing chronological events, policy changes, milestones

Elements:

  • Horizontal timeline with circular nodes
  • Icons above each milestone
  • Event labels above line, dates below line
  • Connecting line in royal blue
  • Clean sans-serif labels

Example: 2025 medical education AI integration (July AAMC → Fall Stanford → November AMA)


Type 7: Comparison / Contrast Diagrams

Use when: Highlighting differences between regions, organizations, or strategies

Elements:

  • Split design with vertical divider
  • Left side: data-rich with bullet points and icons
  • Right side: sparse or question marks to emphasize gap
  • High contrast between sections
  • Clear header labels

Example: US/Global Leaders (72%, 77%, $1B+) vs. Japan (status unclear, unknown data)


Type 8: Strategic Frameworks

Use when: Positioning analysis, capability assessment, competitive mapping

Elements:

  • 2×2 matrix with clearly labeled axes
  • Positioning markers for each player
  • Thin vector lines for grid
  • Quadrant labels explaining strategic implications

Example: Market Share (x-axis) vs. Technical Capability (y-axis)


Type 9: Competitive Benchmarking Tables

Use when: Detailed multi-dimensional comparison across players

Elements:

  • Multi-row, multi-column table
  • Quantified metrics (numbers, percentages, scores)
  • Clear ranking or benchmarking logic
  • Hairline borders
  • Numeric alignment and hierarchy
  • Visual indicators for leaders/laggards (e.g., color coding)

Example: Comparison of GenAI video models across architecture, consistency, prompt adherence


Type 10: Waterfall Charts

Use when: Showing cumulative effect, step-by-step changes, variance analysis

Elements:

  • Horizontal bars showing incremental changes
  • Starting value → intermediate steps → ending value
  • Color coding for positive (blue) and negative (grey/red) changes
  • Connecting lines between bars
  • Clear labels for each step

Example: Revenue bridge from Q1 to Q4 showing growth drivers


Type 11: Cover Slide

Use when: Creating the opening slide for a consulting presentation

Elements:

  • Deep navy blue background (solid #1E3A5F or subtle gradient from #1E3A5F to #2C4A6F)
  • Large serif font title in white (centered or left-aligned)
  • Subtitle in smaller sans-serif font
  • Optional metadata (date, author, organization) in small text at bottom
  • Optional subtle gold accent (#D4AF37) for premium touch
  • Minimal or no graphics — focus on typography

Example: “The Future of AI in Healthcare: Strategic Implications for 2026”


Prompt Engineering Templates

When generating visualizations using image generation tools, use these templates:

Template 1: Time-Series Growth Chart

Create a professional consulting-style time-series growth chart in landscape 16:9 format. 
White background, black text, royal blue (#1E3A8A) line chart. 
Serif headline in bold: "[Your Insight-Driven Headline]"
X-axis: [Time periods], Y-axis: [Metric with gridlines every 10-20%]
Large percentage labels above data points: [Data points]
Annotation box in top right: "[Key insight, e.g., '2x growth in 2 years']"
Clean, minimal, institutional aesthetic. No gradients, no decorative elements.

Template 2: Gap/Funnel Visualization

Create a professional consulting-style gap visualization in landscape 16:9 format.
White background, black text. Serif headline in bold: "[Your Insight-Driven Headline]"
Two horizontal bars: 
- Top bar (royal blue #1E3A8A): [X%] - [Label]
- Bottom bar (light grey #D1D5DB): [Y%] - [Label]
Extreme contrast in bar lengths to emphasize gap.
Large percentage labels on right side of each bar.
Annotation below: "[Strategic implication]"
Clean, minimal, institutional aesthetic. No gradients, no decorative elements.

Template 3: Before/After Comparison

Create a professional consulting-style before/after comparison chart in landscape 16:9 format.
White background, black text. Serif headline in bold: "[Your Insight-Driven Headline]"
Two vertical bars side by side:
- Left bar (grey #6B7280): [Before value] - labeled "Before"
- Right bar (royal blue #1E3A8A): [After value] - labeled "After"
Curved arrow between bars with improvement metric: "+[X] points"
Y-axis with clear scale from 0 to [max value]
Annotation box: "[Context, e.g., 'RCT study in Pakistan']"
Clean, minimal, institutional aesthetic. No gradients, no decorative elements.

Template 4: Cover Slide

Create a professional consulting-style cover slide in landscape 16:9 format.
Deep navy blue background (#1E3A5F) with subtle gradient to (#2C4A6F).
Large serif font title in white (#FFFFFF), centered or left-aligned: "[Your Title]"
Subtitle in smaller sans-serif font, light grey (#E5E7EB): "[Your Subtitle]"
Optional metadata at bottom in small text: "[Date | Author | Organization]"
Optional subtle gold accent (#D4AF37) for premium touch (use sparingly).
Minimal or no graphics — focus on elegant typography.
Clean, institutional, boardroom-ready aesthetic.

General prompt engineering tips:

  • Always specify “landscape 16:9 format” at the beginning
  • Always specify “white background” for content slides, “deep navy blue background” for cover slides
  • Always specify “serif headline in bold” for content slides
  • Always include exact hex codes for colors
  • Always emphasize “clean, minimal, institutional aesthetic”
  • Always add “No gradients, no decorative elements” at the end for content slides
  • Use specific data points and labels from your analysis
  • Include strategic insight in the headline

Workflow

  1. Define the strategic question — What decision does this visualization support?
  2. Choose the visualization type — Select from the 11 types above
  3. Draft the insight-driven headline — Make it hypothesis-driven, not descriptive
  4. Gather and structure data — Organize data points, labels, and annotations
  5. Select the prompt template — Use the appropriate template from above
  6. Customize the prompt — Fill in your specific data, headline, and insights
  7. Generate the visualization — Use image generation tools with the customized prompt
  8. Review and refine — Check against the quality checklist below

Language Considerations

Default language: English

While this skill can be used in Japanese or other languages, English is strongly recommended for the following reasons:

  1. Font rendering: Image generation models handle English typography more reliably
  2. Consistency: Serif/sans-serif font pairing works better in English
  3. Readability: Latin characters render more clearly at small sizes
  4. International audience: English is standard for global business presentations

If Japanese is required:

  • Use sans-serif fonts only (avoid serif for Japanese text)
  • Increase font sizes for better readability
  • Test rendering quality before finalizing
  • Be prepared for potential issues:
    • Font substitution
    • Character spacing problems
    • Inconsistent font rendering

Best practice: Use English for all text in visualizations, then provide Japanese translations in accompanying documents if needed.


Multi-Visualization Projects

When creating multiple visualizations for a single project:

  1. Maintain consistent aspect ratio — Use landscape for all charts
  2. Use the same color palette — Deep royal blue, greys, white, black
  3. Apply consistent typography — Serif for headlines, sans-serif for data
  4. Align visual density — Similar level of information across all charts
  5. Create a visual hierarchy — Most important insights first

Batch generation:

  • Generate up to 5 images per batch using image generation tools
  • Ensure all images in a batch use the same aspect ratio
  • Review all images for consistency before delivering

Quality Checklist

Before delivering any visualization, verify:

  • Aspect ratio: Landscape orientation used
  • Color palette: White background, black text, royal blue accents, no gradients (for content slides)
  • Typography: Serif headline, sans-serif data labels
  • Data accuracy: All numbers, percentages, and labels are correct
  • Strategic insight: Headline is insight-driven, not descriptive
  • Visual clarity: No clutter, every element serves a purpose
  • Annotations: Key insights and context provided
  • Consistency: If multiple charts, all follow same design system
  • Language: English used to avoid rendering issues (unless Japanese explicitly requested)

Common Pitfalls to Avoid

❌ Decorative over functional — Every element must serve a strategic purpose ❌ Bright, startup-style colors — Stick to institutional blue, grey, black, white ❌ Portrait orientation — Always use landscape for consistency ❌ Descriptive headlines — Use insight-driven, strategic headlines ❌ Low information density — Pack in data while maintaining clarity ❌ Marketing language — Use analytical, objective tone ❌ Inconsistent design — Maintain visual consistency across all charts


Example Use Cases

Use Case 1: Market Analysis

Scenario: Analyze GenAI video model market Visualizations needed:

  • Competitive benchmarking table (architecture, consistency, prompt adherence)
  • 2×2 positioning matrix (technical capability vs. market share)
  • Timeline of product launches
  • Investment comparison infographic

Use Case 2: Performance Reporting

Scenario: Show quarterly business performance Visualizations needed:

  • Waterfall chart (revenue bridge)
  • Before/after comparison (KPI improvements)
  • Time-series growth chart (adoption metrics)
  • Gap visualization (target vs. actual)

Use Case 3: Strategic Recommendation

Scenario: Support investment decision Visualizations needed:

  • Comparison diagram (option A vs. option B)
  • Strategic framework (capability assessment)
  • Investment scale infographic
  • Timeline of implementation milestones

Integration with Other Skills

This skill works well with:

  • design-sensei: For additional design principles and accessibility
  • paper-presentation-slides: For academic presentation context
  • paper-article-generator: For article-embedded visualizations

Version History

  • v1.1 (2026-02-11): Added Type 11 Cover Slide, detailed color palette with hex codes, enhanced typography specifications, and cover slide prompt templates
  • v1.0 (2026-02-11): Initial skill creation with comprehensive visualization types, aspect ratio standards, and prompt engineering templates

References

  • McKinsey & Company presentation style guidelines
  • BCG visual identity and data visualization standards
  • Financial Times editorial design principles
  • Harvard Business Review chart design best practices

Skill Author: KEN
Last Updated: 2026-02-11
Skill Type: Visualization & Design