mckinsey-style-visualization
npx skills add https://github.com/kgraph57/mckinsey-style-visualization-skill --skill mckinsey-style-visualization
Agent 安装分布
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
#000000or 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
- Dark Grey (primary text):
For Cover Slides:
- Background: Deep Navy Blue
#1E3A5F - Alternative Background: Gradient from
#1E3A5Fto#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
#1E3A5For subtle gradient from#1E3A5Fto#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
- Define the strategic question â What decision does this visualization support?
- Choose the visualization type â Select from the 11 types above
- Draft the insight-driven headline â Make it hypothesis-driven, not descriptive
- Gather and structure data â Organize data points, labels, and annotations
- Select the prompt template â Use the appropriate template from above
- Customize the prompt â Fill in your specific data, headline, and insights
- Generate the visualization â Use image generation tools with the customized prompt
- 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:
- Font rendering: Image generation models handle English typography more reliably
- Consistency: Serif/sans-serif font pairing works better in English
- Readability: Latin characters render more clearly at small sizes
- 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:
- Maintain consistent aspect ratio â Use landscape for all charts
- Use the same color palette â Deep royal blue, greys, white, black
- Apply consistent typography â Serif for headlines, sans-serif for data
- Align visual density â Similar level of information across all charts
- 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