/ 目錄 / 演練場 / smart-illustrator
← 全部伺服器 ↗ GitHub
● 社群 axtonliu ⚡ 即開即用

smart-illustrator

作者 axtonliu · axtonliu/smart-illustrator

Claude Code skill that auto-inserts contextual illustrations into articles and covers — Gemini, Excalidraw, and Mermaid combined.

Smart Illustrator analyzes your markdown article, detects optimal illustration points, and picks the right engine for each — Gemini for creative visuals, Excalidraw for hand-drawn diagrams, Mermaid for structured flows. Supports article, slides, and platform-optimized cover modes (YouTube, WeChat, Twitter). Resume-safe so you can re-run without regenerating existing images.

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

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
步驟
  1. 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
  2. Review engine choices
    Show me which engine you picked for each illustration and why. Let me override any.✓ 已複製
    → Per-position table: position → engine → reason
  3. 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
步驟
  1. 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
  2. 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.

步驟
  1. Run slides mode
    Take talk-outline.md, slides mode, one standalone infographic per H2 section.✓ 已複製
    → One PNG per section, each self-contained
  2. 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 搭配，撬動十倍槓桿

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).
每次呼叫 Token 數
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.

故障排查

常見錯誤與修復

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-skillYou only need photorealistic hero images, not diagramsNo position detection, no diagram engines
Manual Midjourney/DALL-E workflowYour publication has a strict brand style guide that LLM routing won't respectMore control, much slower

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills