visual-mind
visual-mind
Intelligent infographic generation skill. Classifies information topology, profiles audience trust, validates cognitive load, then generates SVG and tested image prompts. 20 layouts, 17 styles, CHI 2025 research.
visual-mind — Intelligent Infographic Generation
Claude, but for infographics. Reasons about your content's structure, your audience's trust signals, and cognitive load limits — then generates a ready-to-use SVG and a tested image prompt. Every time.
Why this exists
Ask vanilla Claude to make an infographic and you get the same answer every time: a layout name, a colour suggestion, and a prompt so generic it could apply to anything. The output looks like it was designed by committee for nobody in particular.
The problem isn't Claude's writing ability. It's that infographic design requires reasoning that Claude doesn't do by default:
- What is the structural shape of this content — is it a process, a hierarchy, a comparison, a cycle?
- What visual signals build credibility with this specific audience — and which ones destroy it?
- Can this layout actually hold this much information, or will it collapse cognitively?
- What exact prompt formula does this layout need to produce a usable result?
visual-mind does all four before touching a single design decision.
The difference — same request, completely different result
Without visual-mind — vanilla Claude on a transformer attention paper:
"Here's a hub-spoke infographic prompt: Create a colourful hub-spoke diagram with the main topic in the centre and subtopics as spokes. Use bright colours and clean fonts. Aspect ratio 16:9."
Generic layout choice. No audience calibration. No cognitive load check. That prompt produces output that looks busy, feels random, and wouldn't survive peer review.
With visual-mind — same paper, after topology → audience → cognitive reasoning:
"The transformer attention content is Concept topology with a Radial VIF pattern — it defines a central abstraction (attention) with 8 parallel components radiating outward, which maps exactly to hub-spoke geometry. For ML researchers, I'm recommending hub-spoke × technical-schematic: the schematic aesthetic signals mathematical rigour that expert audiences require (CHI 2025: clarity = 83.8% primary trust factor for technical readers). At 5 primary units, we're well within the 8-spoke cognitive ceiling (PASS). Prompt: 'Central hub (circle) representing Scaled Dot-Product Attention. 8 spokes at equal angles. Each node: icon + label. Blueprint-grid background #1E3A5F, primary blue #2563EB, Helvetica Neue, technical line-art aesthetic, 16:9. --style raw --v 6'"
One of these is a guess. The other is a reasoned argument you can interrogate.
See it reason — 3 real scenarios
Scenario 1 — The research paper
Input: Section from "Attention Is All You Need" (transformer architecture) Audience: ML researchers and practitioners
visual-mind reasons:
"Concept topology (defines what attention IS, not how to DO it) + Radial VIF pattern (8 heads radiating from one mechanism). Expert audience needs mathematical precision — technical-schematic style, not decorative. 5 primary units, ceiling is 8. PASS. Layout: hub-spoke. Style: technical-schematic."
Output: A hub-spoke SVG with the attention formula at the hub, Q/K/V/Multi-Head/Output as nodes — plus a Midjourney-ready prompt that actually produces a schematic, not clip art.
Scenario 2 — The startup pitch deck section
Input: 22-item company overview (team, product, traction, market, financials, roadmap...) Audience: Investors
visual-mind reasons:
"22 primary units. Maximum ceiling for any layout: 9. This is 2.4× the cognitive limit — a single infographic would be cognitively catastrophic. SPLIT verdict. Recommended: 3 companion visuals — bento-grid (company snapshot, 6 units) + dashboard (traction metrics: $3.1M ARR, 280% YoY, 120 customers, 3 units) + structural-breakdown (product architecture, 3 modules). Each passes cognitive assessment independently."
Output: An editorial plan for 3 coordinated visuals, each with its own SVG and prompt — instead of one unreadable wall of information.
Scenario 3 — The dangerous style choice
Input: Series B board presentation — €47.3M raise, Revenue €12.8M, ARR €15.2M, burn €890K/month
Request: --style cyberpunk-neon
visual-mind reasons:
"CONFLICT DETECTED before output. cyberpunk-neon = dark background + neon colours. CHI 2025 trust research: dark-background styles reduce perceived credibility by 34% for financial data in formal contexts. Board audience = skeptical + high-stakes. Neon pink numbers on a black background in a €47M funding conversation. Redirecting: dashboard × corporate-memphis. Financial data verbatim. Credibility preserved."
Output: The right visual for the highest-stakes moment — not the one that was requested.
What you get — every time
| Output | Always? | What it is |
|---|---|---|
infographic.svg | ✅ Always | A complete, working SVG — opens in any browser, imports into Figma or Illustrator. Zero dependencies. |
prompts/infographic.md | ✅ Always | A tested, layout-specific prompt with Midjourney, DALL-E, and Stable Diffusion variants. |
topology.md | ✅ Always | The classification evidence — Horn type, VIF pattern, hybrid weights, confidence rating. |
audience-profile.md | ✅ Always | Audience type, trust signals, design constraints from CHI 2025 research. |
cognitive-assessment.md | ✅ Always | Unit count, density verdict, split recommendation if needed. |
selection.md | ✅ Always | The full reasoning chain — layout, style, justification, alternatives. |
prompts/infographic-dalle.png | Optional | Auto-generated if $OPENAI_API_KEY is in your environment. |
prompts/infographic-gemini.png | Optional | Auto-generated if $GEMINI_API_KEY is in your environment. |
prompts/infographic-sd.png | Optional | Auto-generated if $STABILITY_API_KEY is in your environment. |
prompts/infographic-claude.png | Optional | Auto-generated if $ANTHROPIC_API_KEY is in your environment. |
No API key? No problem. The SVG is the primary output — a real file you can open right now. API-generated images are a bonus for users who have access.
How it works
Every infographic starts with reasoning, not lookup.
Step 1 — Topology Classification
Before any design decision, visual-mind classifies the structural shape of your content using Horn's 6 information types (Procedure, Process, Principle, Concept, Structure, Fact) and VIF structural patterns (Linear, Radial, Hierarchical, Network, Grid, Spectrum).
Why this matters: A tutorial and a mechanism description are both "informational content" — but a tutorial is Procedure topology (sequential steps with an actor) while an explanation is Concept topology (defining what something is). They need completely different layouts. Mixing them up is the most common infographic failure mode.
Step 2 — Audience & Trust Profiling
Using CHI 2025 research on visual trust signals, visual-mind profiles your audience and identifies which design choices build credibility vs. trigger skepticism for that specific reader type.
Why this matters: The same infographic that signals authority to a data scientist signals manipulation to a skeptical executive. Hand-drawn styles and dark backgrounds that work beautifully for casual audiences destroy credibility in formal contexts. CHI 2025: clarity is the #1 trust factor at 83.8% — ahead of colour, imagery, and layout.
Step 3 — Cognitive Load Validation
Miller's Law (7±2 rule) applied to infographics: working memory holds 5–9 information units simultaneously. visual-mind counts your primary information units and validates them against the chosen layout's ceiling.
Why this matters: A layout that looks beautiful with 5 items becomes unreadable with 12. Most AI tools never check this — they just output whatever fits. visual-mind either confirms your content fits, flags a warning, or recommends splitting into multiple visuals before a single design decision is made.
Step 4 — Layout × Style Selection
Only now, with topology + audience + cognitive load known, does the layout decision happen. The output is a reasoned argument — not a recommendation card.
Example output: "This content is Procedure topology — the sourdough guide walks through sequential steps a baker must perform in order. Novice audience means we need warm, approachable aesthetics that don't intimidate. At 6 steps, we're within the linear-progression ceiling of 7. I'm recommending linear-progression × craft-handmade: the illustrated aesthetic signals that this is approachable and human — craft-handmade is one of the highest-trust styles for educational/casual content. If you want a more structured look, ikea-manual × bold-graphic gives the same clarity with a more neutral aesthetic."
Step 5 — Content Structuring
All source data — statistics, quotes, dates, names — is mapped to the layout's structural slots with verbatim discipline. "37.4%" stays "37.4%". Quotes are copied word-for-word. No rounding, no paraphrasing, no summarisation.
Step 6 — SVG + Prompt + Optional API Images
- Always: A complete SVG file written natively by Claude — all 20 layouts, zero external dependencies
- Always: A tested image generation prompt for Midjourney, DALL-E, Gemini Imagen, and Stable Diffusion
- Optional: If API keys are detected in your environment, images are generated automatically
20 layouts. Each one earns its recommendation.
| Layout | Topology family | Ceiling | Real-world use |
|---|---|---|---|
| bento-grid | Structure / Fact / Concept | 9 units | SaaS product overview, quarterly OKR snapshot |
| linear-progression | Process / Procedure | 7 steps | Onboarding journey, Git workflow, drug pipeline |
| binary-comparison | Principle | 2×6 units | Mac vs PC, remote vs in-office |
| comparison-matrix | Principle | 4×6 matrix | CRM vendor selection, cloud provider comparison |
| hierarchical-layers | Structure | 4 levels | Maslow's hierarchy, OSI model, risk pyramid |
| tree-branching | Structure | 12 nodes | Org chart, ML algorithm taxonomy |
| hub-spoke | Concept | 8 spokes | React ecosystem, CEO direct reports |
| structural-breakdown | Structure | 10 parts | Anatomy diagram, system components, teardown |
| iceberg | Concept | 2 layers | Technical debt, brand perception vs culture |
| bridge | Process | 5 steps | Legacy → cloud migration, problem → solution |
| funnel | Process | 5 stages | SaaS conversion, hiring pipeline |
| isometric-map | Structure | 8 locations | Office floor plan, data centre layout |
| dashboard | Fact | 6 metrics | Monthly KPIs, DevOps health, marketing metrics |
| periodic-table | Principle / Fact | 20 elements | UX principles, marketing channels by category |
| comic-strip | Procedure | 6 panels | How to submit a PR, support escalation flow |
| story-mountain | Process | 5 stages | Product launch arc, startup funding journey |
| jigsaw | Structure | 6 pieces | Strategy pillars, microservices architecture |
| venn-diagram | Principle | 3 circles | DevOps (Dev ∩ Ops), product-market fit |
| winding-roadmap | Process | 8 milestones | Product roadmap, 90-day onboarding plan |
| circular-flow | Process | 6 stages | Agile sprint cycle, DevOps continuous delivery |
17 styles. Each one is a trust decision.
| Style | Trust (formal) | Best audience | Never use for |
|---|---|---|---|
| technical-schematic | ⭐⭐⭐⭐⭐ High | Expert, skeptical, technical | Casual, children, emotional content |
| corporate-memphis | ⭐⭐⭐⭐ High | Intermediate, neutral, business | Academic, highly technical |
| ui-wireframe | ⭐⭐⭐⭐ High | Developer, product, expert | Non-technical audiences |
| aged-academia | ⭐⭐⭐⭐ High | Academic, expert | Youth, casual, fast-scan |
| ikea-manual | ⭐⭐⭐⭐ High | Novice, intermediate | Expert (condescending) |
| bold-graphic | ⭐⭐⭐⭐ Med-high | Enthusiastic, general public | Skeptical, data-heavy |
| subway-map | ⭐⭐⭐ Medium | Intermediate | Pure data, formal reports |
| origami | ⭐⭐⭐ Medium | General | High-density data |
| knolling | ⭐⭐⭐ Medium | Product, intermediate | Abstract concepts |
| chalkboard | ⭐⭐⭐ Medium | Educational, casual | C-suite, board presentations |
| craft-handmade | ⭐⭐⭐ Med-low (formal) | Casual, educational | Formal audiences |
| storybook-watercolor | ⭐⭐ Med-low | Casual, narrative | Any data-forward context |
| cyberpunk-neon | ⭐ Low (formal) | Tech-enthusiast only | Finance, healthcare, board |
| claymation | ⭐ Low (formal) | Children, lifestyle | Any professional context |
| kawaii | ⭐ Low (formal) | Children, casual | Expert, skeptical, formal |
| pixel-art | ⭐ Low (formal) | Gaming, nostalgic | Credibility-sensitive contexts |
| lego-brick | ⭐ Low (formal) | Children, educational | Adult professional contexts |
Frequently asked questions
"Can't Claude just do this without a skill?" Vanilla Claude can name a layout. It cannot reason about topology before layout selection, apply CHI 2025 trust research to audience profiling, validate information unit counts against layout ceilings, or produce per-layout prompt formulas. It will also paraphrase your statistics. visual-mind does all five systematically, every time, and explains every decision.
"Do I need API keys?" No. The SVG is the primary output — Claude writes it natively with zero external dependencies. API keys for OpenAI, Gemini, Anthropic, or Stability AI are detected automatically if present and used to generate bonus PNG images. If none are present, you still get a complete SVG and a tested prompt ready to paste into any image generation tool.
"What if my content is complex or spans multiple topics?" That's exactly what the topology classification and cognitive load validation are designed for. When content spans multiple information types (hybrid topology), visual-mind documents all signals with weights and selects the layout that serves the dominant pattern while accommodating secondary signals. When content exceeds cognitive ceilings, it recommends a split into coordinated companion visuals with an explicit editorial plan.
"What about my language? I don't work in English." visual-mind is locale-adaptive. It mirrors the language of your first message — if you write in Portuguese, French, Spanish, Japanese, or any other language, all output prose mirrors that language. Technical identifiers (file paths, command names, code) stay in their original form.
"Can I override the layout or style if I already know what I want?"
Yes. Use --layout and --style flags. visual-mind will validate your override against the topology and trust research — if a conflict is detected, it explains why and suggests alternatives. It never silently complies with a structurally incompatible request.
Three disasters this skill prevents
The Credibility Trap
A founder asks for a cyberpunk-neon infographic to present €47.3M Series B financials to a board. visual-mind catches the conflict before generating a single element — dark backgrounds + neon colours reduce perceived credibility by 34% for financial data in formal contexts (CHI 2025). Redirects to dashboard × corporate-memphis. The board sees clean, authoritative numbers. The funding conversation stays on track.
The Cognitive Collapse
A PM pastes a 22-item company overview for an investor deck. A standard tool would attempt to squeeze all 22 items into a single visual — producing something unreadable. visual-mind issues a SPLIT verdict at 2.4× the cognitive ceiling and produces an editorial plan: 3 coordinated visuals, each passing cognitive validation independently. The investor sees three crisp visuals instead of one overwhelming wall.
The Topology Mismatch
A developer forces --layout venn-diagram on a 7-stage DevOps pipeline. visual-mind refuses the override — Venn diagrams show overlapping sets, not sequential dependencies. Stage 3 cannot start before Stage 2 completes; that's not overlap, that's order. Redirects to linear-progression × technical-schematic. The pipeline reads correctly. The factual error is prevented.
Install
myclaude install visual-mind
Or manually: copy SKILL.md and references/ into .claude/skills/visual-mind/
Quick start
# From a file
/visual-mind path/to/content.md
# Paste content directly
/visual-mind
# With audience and style hints
/visual-mind content.md --audience expert --style technical-schematic
# Force a layout (visual-mind will validate and warn if wrong)
/visual-mind content.md --layout hub-spoke --aspect portrait
# Specify output platform
/visual-mind content.md --platform midjourney
# In another language (output will mirror your language)
/visual-mind contenido.md --lang es
Requirements
- Claude Code ≥ 1.0.0
- Source content: text file, URL, or paste (minimum ~100 words for meaningful topology analysis)
- API keys: optional — SVG output requires none
Compatibility
Claude Code ≥ 1.0.0 · Midjourney · DALL-E 3 · Gemini Imagen 3 · Stable Diffusion · Figma · Illustrator
Language
Source: en-GB · Adapts to your language at runtime via locale-adaptive clause
License
MIT © lzcarpi · myclaude.sh
<!-- Published with MyClaude Creator Engine v3.0.1 --><sub>Built with MyClaude Studio Engine</sub>
Reviews (0)
Loading reviews...