/ 디렉터리 / 플레이그라운드 / 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와 조합해 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.

문제 해결

자주 발생하는 오류와 해결

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 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기