An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Mckinsey Style Visualization Skill
Agent Skill that turns messy notes into rendered strategy-consulting visuals, with SVG examples and validation.
Install
npx skills add kgraph57/mckinsey-style-visualization-skillInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Strategy Consulting Visualization Skill
Messy notes in. Board-ready slides out.
One skill for your AI agent: turn notes, metrics, and prose into consulting-grade visuals — as real SVG slides, as an animated HTML deck, or as a spec any designer or tool can execute.
Rendering existing JSON specs into SVG/HTML uses the Python 3 standard library only, with no API key or network access required. Generating slides from notes in the browser requires your own Anthropic API key. The sample trial needs no key. Automated PDF export has optional browser dependencies.
English | 日本語
An actual deck built by this repo: specs (JSON) → SVG slides → animated HTML deck. Nothing hand-drawn.
Reproduce it: python3 scripts/scaffold_deck.py board-update -o demo && python3 scripts/build_html_deck.py --manifest demo/deck.json -o demo/deck.html
What’s new — September 9, 2026
Try a presentation on your phone before setting up an API key. Open the browser trial, choose Explore a sample deck, then Start presentation.
- Present directly in the browser. Swipe or use Previous / Next to move through slides; rotate your phone for a larger landscape view. Desktop keyboard navigation is also supported.
- Share or save HTML. Use the device share sheet where supported, with a download fallback. Present from the browser; reopening interactive HTML from iOS Files is not yet verified.
- Save a PDF. Choose PDF / Print, select landscape in the native print dialog, then use its share/save options. iOS may initially select A4 portrait.
- See the outcome before trying it. The homepage pairs a clearly labeled AI-generated hero concept with actual renderer output and a path from examples to the trial or installation.
- iOS fixes verified in Simulator. Japanese text and controls use an explicit Hiragino fallback; HTML sharing no longer creates an extra text file.
Tested with iPhone 17 / iOS 26.3 Simulator Safari: sample loading, presentation, swipe navigation, rotation, nine-page print preview, and PDF/HTML saving to Files. Existing 335 tests pass. Physical iPhone hardware, live API generation and AirPlay/projector output remain unverified. See the test record.
What’s new — September 8, 2026
- Refined business slides and diagrams. Updated the executive summary, growth waterfall, priority matrix, process flow and roadmap layouts, with clearer hierarchy, labels and decision cues. Regenerated the English and Japanese landing decks and site previews from the current renderer.
- Real deliverables on the site. The homepage now shows actual slide previews alongside a complete A4 brief, with links to the finished PDFs. Examples use illustrative business data.
- HTML first, PDF for sharing. Keep chart data in JSON and report prose in Markdown, refine the generated HTML, then export it directly to PDF. Decks and reports include a Save as PDF button;
scripts/export_pdf.pyalso supports command-line export. - Reference-based layouts. A design study of nine public documents from six consulting firms informs the analytical slide and compact report templates.
Similar plugs
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Graphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex,…