smart-illustrator MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

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

Живое демо

Как выглядит на практике

smart-illustrator-skill.replay ▶ готово

0/0

Установка

Выберите клиент

~/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
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.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 использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

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
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "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
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

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

Continue использует массив объектов серверов, а не 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"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

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

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: smart-illustrator

How to auto-illustrate a long-form blog post

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

Когда использовать: You have a finished markdown article that needs 4-8 illustrations before publishing, and you don't want to hand-prompt each one.

Предварительные требования

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

Поток

Point the skill at your article

Run smart-illustrator on posts/2026-04-launch.md in article mode. Pick 5 illustration points.✓ Скопировано

→ 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.✓ Скопировано

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

Generate all images and write the updated markdown back to the same file.✓ Скопировано

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

Итог: A publishable markdown file with 5 context-appropriate illustrations and a cover image.

Подводные камни

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

Сочетать с: banana-claude-skill

Generate platform-optimized covers for a post

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

Когда использовать: You're about to cross-post and need the same concept rendered at 3 different aspect ratios and tones.

Предварительные требования

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

Поток

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.✓ Скопировано

→ 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.✓ Скопировано

→ 3 thumbnails, visibly different

Итог: A cover-pack ready to upload across channels without opening a design tool.

Подводные камни

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

Когда использовать: You have a talk outline and want one infographic per key section before designing the deck.

Поток

Run slides mode

Take talk-outline.md, slides mode, one standalone infographic per H2 section.✓ Скопировано

→ 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.✓ Скопировано

→ Hand-drawn replacement that matches outline

Итог: A folder of slide-ready infographics keyed to your outline.

Подводные камни

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

Комбинации

Сочетайте с другими MCP — эффект 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.✓ Скопировано

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.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
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

Стоимость и лимиты

Во что обходится

Квота API: Gemini free tier: 15 req/min, 1500/day. Mermaid/Excalidraw engines are free (local rendering).
Токенов на вызов: 2k-5k Claude tokens for position detection; image generation is separate Gemini quota
Деньги: Free with Gemini free tier. Paid Gemini ~$0.04 per image at current rates.
Совет: Use --prompt-only to draft all prompts, then batch-generate overnight to stay in free tier.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: GEMINI_API_KEY in shell env. No OAuth, no PATs.

Исходящий трафик: 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.

Устранение неполадок

Частые ошибки и исправления

Gemini 429 quota exceeded

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

Проверить: 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.

Проверить: 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.

Проверить: ls ~/.claude/skills/smart-illustrator/SKILL.md

Альтернативы

smart-illustrator в сравнении

Альтернатива	Когда использовать	Компромисс
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

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills