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 は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

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

Cline サイドバーの MCP Servers アイコンをクリックし、"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 はマップではなくサーバーオブジェクトの配列を使用。

~/.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と組み合わせて10倍の力を

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

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る