smart-illustrator MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Intelligent position detection — picks where illustrations actually help the reader
Tri-engine routing: Gemini (creative), Excalidraw (sketchy), Mermaid (structured)
10+ illustration types: flowcharts, sequence diagrams, mindmaps, metaphors, covers
Cover generation tuned per platform (YouTube 16:9, WeChat 3:4, Twitter)
Prompt-only mode — output prompts for manual batch generation without API calls
Resume-safe: skip already-generated images when re-running

Démo en direct

Aperçu en pratique

smart-illustrator-skill.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "smart-illustrator-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ],
      "_inferred": true
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "smart-illustrator-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ],
      "_inferred": true
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "smart-illustrator-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ],
      "_inferred": true
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "smart-illustrator-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ],
      "_inferred": true
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "smart-illustrator-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/axtonliu/smart-illustrator",
        "~/.claude/skills/smart-illustrator"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "smart-illustrator-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/axtonliu/smart-illustrator",
          "~/.claude/skills/smart-illustrator"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add smart-illustrator-skill -- git clone https://github.com/axtonliu/smart-illustrator ~/.claude/skills/smart-illustrator

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : smart-illustrator

How to auto-illustrate a long-form blog post

👤 Technical writers and content creators publishing markdown articles ⏱ ~20 min beginner

Quand l'utiliser : You have a finished markdown article that needs 4-8 illustrations before publishing, and you don't want to hand-prompt each one.

Prérequis

Skill installed under ~/.claude/skills/smart-illustrator — git clone https://github.com/axtonliu/smart-illustrator into that path
Gemini API key (for creative visuals) — Export GEMINI_API_KEY; skill reads from env
Mermaid CLI if you want diagram rendering — npm i -g @mermaid-js/mermaid-cli

Déroulement

Point the skill at your article

Run smart-illustrator on posts/2026-04-launch.md in article mode. Pick 5 illustration points.✓ Copié

→ Skill echoes chosen positions with one-line rationale each
Review engine choices

Show me which engine you picked for each illustration and why. Let me override any.✓ Copié

→ Per-position table: position → engine → reason
Generate and embed

Generate all images and write the updated markdown back to the same file.✓ Copié

→ Article updated with inline image references; PNGs saved under assets/

Résultat : A publishable markdown file with 5 context-appropriate illustrations and a cover image.

Pièges

Gemini returns a stock-looking image for an abstract concept — Re-run that single position with --engine excalidraw for a sketchy metaphor instead
Mermaid syntax fails to render because LLM mis-escaped quotes — Use --prompt-only for diagrams, paste into mermaid.live to debug, then re-inject

Combiner avec : banana-claude-skill

Generate platform-optimized covers for a post

👤 Creators repurposing one article across YouTube, WeChat, and Twitter ⏱ ~10 min beginner

Quand l'utiliser : You're about to cross-post and need the same concept rendered at 3 different aspect ratios and tones.

Prérequis

Finished article title + 1-line hook — Prepare a short prompt; skill uses it as brief

Déroulement

Run cover mode for each platform

Use smart-illustrator in cover mode for title 'The 2AM Bug That Cost Us $40k' — generate for youtube, wechat, twitter.✓ Copié

→ 3 PNGs at correct resolutions, platform-appropriate composition
A/B variants

Regenerate the YouTube cover with 2 alternative angles so I can A/B test.✓ Copié

→ 3 thumbnails, visibly different

Résultat : A cover-pack ready to upload across channels without opening a design tool.

Pièges

Text on cover looks garbled — Gemini text rendering is unreliable — ask skill to add title as post-processing overlay instead

Turn a talk outline into slide infographics

👤 Speakers preparing technical talks from a markdown outline ⏱ ~25 min intermediate

Quand l'utiliser : You have a talk outline and want one infographic per key section before designing the deck.

Déroulement

Run slides mode

Take talk-outline.md, slides mode, one standalone infographic per H2 section.✓ Copié

→ One PNG per section, each self-contained
Refine weak ones

Section 3's infographic is too abstract. Re-do with Excalidraw engine, focus on the 3-step loop.✓ Copié

→ Hand-drawn replacement that matches outline

Résultat : A folder of slide-ready infographics keyed to your outline.

Pièges

Infographics don't match your deck's visual style — Pass --style='flat pastel' or a style reference image so outputs stay consistent

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

smart-illustrator-skill + banana-claude-skill

Use Smart Illustrator for diagrams and Banana Claude for photorealistic hero shots in the same post

For posts/launch.md, use smart-illustrator for the architecture diagram at section 2, then banana-claude for a photorealistic hero at the top.✓ Copié

smart-illustrator-skill + notebooklm-skill

NotebookLM researches the topic, Claude drafts the article, Smart Illustrator decorates it

Research 'CRDT conflict resolution' with notebooklm, draft a 2000-word article, then illustrate with smart-illustrator.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
detect_illustration_points	markdown_path: str, count?: int	First pass on any article to decide where images help	~2k Claude tokens
generate_illustration	position: str, engine: 'gemini'\|'excalidraw'\|'mermaid', prompt: str	Per chosen position after review	1 Gemini call or 0 (for Mermaid/Excalidraw)
generate_cover	title: str, platform: 'youtube'\|'wechat'\|'twitter', style?: str	Cover mode; call once per target platform	1 Gemini call
embed_into_markdown	markdown_path: str, illustrations: list	Final step after all images are generated	0

Coût et limites

Coût d'exécution

Quota d'API: Gemini free tier: 15 req/min, 1500/day. Mermaid/Excalidraw engines are free (local rendering).
Tokens par appel: 2k-5k Claude tokens for position detection; image generation is separate Gemini quota
Monétaire: Free with Gemini free tier. Paid Gemini ~$0.04 per image at current rates.
Astuce: Use --prompt-only to draft all prompts, then batch-generate overnight to stay in free tier.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : GEMINI_API_KEY in shell env. No OAuth, no PATs.

Sortie de données : Article content is sent to Google Gemini for illustration prompts. Do not run on confidential drafts.

Article text is uploaded to Gemini — treat as public-grade content before running.

Dépannage

Erreurs courantes et correctifs

Gemini 429 quota exceeded

Wait for daily reset or upgrade to paid tier. Use --engine mermaid|excalidraw for remaining positions.

Vérifier : curl -s https://generativelanguage.googleapis.com/v1beta/models?key=$GEMINI_API_KEY

Mermaid render fails with 'Parse error'

LLM produced invalid Mermaid. Use --prompt-only, paste into mermaid.live, fix syntax, regenerate.

Vérifier : mmdc -i test.mmd -o test.png

Skill not found by Claude Code

Confirm clone path is ~/.claude/skills/smart-illustrator and SKILL.md exists at root.

Vérifier : ls ~/.claude/skills/smart-illustrator/SKILL.md

Alternatives

smart-illustrator vs autres

Alternative	Quand l'utiliser	Compromis
banana-claude-skill	You only need photorealistic hero images, not diagrams	No position detection, no diagram engines
Manual Midjourney/DALL-E workflow	Your publication has a strict brand style guide that LLM routing won't respect	More control, much slower

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills