/ 目錄 / 演練場 / 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

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： 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.

步驟
  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

替代方案

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