smart-illustrator MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Detección inteligente de posiciones — elige dónde las ilustraciones realmente ayudan al lector
Enrutamiento tri-motor: Gemini (creativo), Excalidraw (sketch), Mermaid (estructurado)
10+ tipos de ilustración: diagramas de flujo, diagramas de secuencia, mapas mentales, metáforas, portadas
Generación de portadas ajustada por plataforma (YouTube 16:9, WeChat 3:4, Twitter)
Modo solo-prompts — genera prompts para creación manual por lotes sin llamadas a API
Reanudable: omite imágenes ya generadas al volver a ejecutar

Demo en vivo

Cómo se ve en la práctica

smart-illustrator-skill.replay ▶ listo

0/0

Instalar

Elige tu cliente

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

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.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 usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "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
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: smart-illustrator

Cómo auto-ilustrar un artículo de blog largo

👤 Escritores técnicos y creadores de contenido que publican artículos markdown ⏱ ~20 min beginner

Cuándo usarlo: Tienes un artículo markdown terminado que necesita 4-8 ilustraciones antes de publicar, y no quieres hacer un prompt manual para cada una.

Requisitos previos

Skill instalado en ~/.claude/skills/smart-illustrator — git clone https://github.com/axtonliu/smart-illustrator en esa ruta
Clave de API de Gemini (para efectos visuales creativos) — Exporta GEMINI_API_KEY; el skill lee desde env
Mermaid CLI si quieres renderizar diagramas — npm i -g @mermaid-js/mermaid-cli

Flujo

Apunta el skill a tu artículo

Ejecuta smart-illustrator en posts/2026-04-launch.md en modo artículo. Elige 5 puntos de ilustración.✓ Copiado

→ El skill señala las posiciones elegidas con una línea de razón para cada una
Revisa las opciones de motor

Muéstrame qué motor elegiste para cada ilustración y por qué. Déjame anular cualquiera.✓ Copiado

→ Tabla por posición: posición → motor → razón
Genera e inserta

Genera todas las imágenes y escribe el markdown actualizado de vuelta al mismo archivo.✓ Copiado

→ Artículo actualizado con referencias de imagen insertadas; PNGs guardados bajo assets/

Resultado: Un archivo markdown publicable con 5 ilustraciones contextualmente apropiadas y una imagen de portada.

Errores comunes

Gemini devuelve una imagen que parece de stock para un concepto abstracto — Vuelve a ejecutar esa posición única con --engine excalidraw para una metáfora sketch en su lugar
La sintaxis de Mermaid falla al renderizar porque el LLM escapó mal las comillas — Usa --prompt-only para diagramas, pega en mermaid.live para depurar, luego reinjecta

Combinar con: banana-claude-skill

Genera portadas optimizadas por plataforma para un artículo

👤 Creadores que reutilizan un artículo en YouTube, WeChat y Twitter ⏱ ~10 min beginner

Cuándo usarlo: Estás a punto de publicar en múltiples plataformas y necesitas el mismo concepto en 3 relaciones de aspecto y tonos diferentes.

Requisitos previos

Título del artículo terminado + gancho de una línea — Prepara un prompt corto; el skill lo usa como especificación

Flujo

Ejecuta modo portada para cada plataforma

Usa smart-illustrator en modo portada para el título 'El bug de las 2AM que nos costó $40k' — genera para youtube, wechat, twitter.✓ Copiado

→ 3 PNGs con resoluciones correctas, composición apropiada para cada plataforma
Variantes A/B

Regenera la portada de YouTube con 2 ángulos alternativos para que pueda hacer prueba A/B.✓ Copiado

→ 3 miniaturas, visiblemente diferentes

Resultado: Un paquete de portadas listo para subir en múltiples canales sin abrir una herramienta de diseño.

Errores comunes

El texto en la portada se ve garrapateado — El renderizado de texto de Gemini no es confiable — pide al skill que añada el título como superposición de post-procesamiento en su lugar

Convierte un esquema de charla en infografías de diapositivas

👤 Oradores que preparan charlas técnicas a partir de un esquema en markdown ⏱ ~25 min intermediate

Cuándo usarlo: Tienes un esquema de charla y quieres una infografía por cada sección clave antes de diseñar el deck.

Flujo

Ejecuta modo diapositivas

Toma talk-outline.md, modo diapositivas, una infografía independiente por cada sección H2.✓ Copiado

→ Un PNG por sección, cada uno autónomo
Refina los débiles

La infografía de la sección 3 es demasiado abstracta. Rehazla con motor Excalidraw, enfocándote en el bucle de 3 pasos.✓ Copiado

→ Reemplazo dibujado a mano que se alinea con el esquema

Resultado: Una carpeta de infografías listas para diapositivas alineadas con tu esquema.

Errores comunes

Las infografías no coinciden con el estilo visual de tu deck — Pasa --style='flat pastel' o una imagen de referencia de estilo para que los resultados mantengan consistencia

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

smart-illustrator-skill + banana-claude-skill

Usa Smart Illustrator para diagramas y Banana Claude para hero shots fotorrealistas en el mismo artículo

Para posts/launch.md, usa smart-illustrator para el diagrama de arquitectura en la sección 2, luego banana-claude para un hero shot fotorrealista en la parte superior.✓ Copiado

smart-illustrator-skill + notebooklm-skill

NotebookLM investiga el tema, Claude redacta el artículo, Smart Illustrator lo decora

Investiga 'CRDT conflict resolution' con notebooklm, redacta un artículo de 2000 palabras, luego ilústralo con smart-illustrator.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
detect_illustration_points	markdown_path: str, count?: int	Primera pasada en cualquier artículo para decidir dónde las imágenes ayudan	~2k tokens de Claude
generate_illustration	position: str, engine: 'gemini'\|'excalidraw'\|'mermaid', prompt: str	Por cada posición elegida después de revisar	1 llamada de Gemini o 0 (para Mermaid/Excalidraw)
generate_cover	title: str, platform: 'youtube'\|'wechat'\|'twitter', style?: str	Modo de portada; llama una vez por cada plataforma objetivo	1 llamada de Gemini
embed_into_markdown	markdown_path: str, illustrations: list	Paso final después de que todas las imágenes sean generadas	0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Tier gratuito de Gemini: 15 req/min, 1500/día. Los motores Mermaid/Excalidraw son gratuitos (renderizado local).
Tokens por llamada: 2k-5k tokens de Claude para detección de posiciones; la generación de imágenes usa cuota de Gemini por separado
Monetario: Gratuito con el tier gratuito de Gemini. Gemini de pago ~$0.04 por imagen a tasas actuales.
Consejo: Usa --prompt-only para redactar todos los prompts, luego genera por lotes durante la noche para permanecer en el tier gratuito.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: GEMINI_API_KEY en variable de shell. Sin OAuth, sin PATs.

Salida de datos: El contenido del artículo se envía a Google Gemini para prompts de ilustración. No ejecutes en borradores confidenciales.

El texto del artículo se sube a Gemini — trátalo como contenido de grado público antes de ejecutar.

Resolución de problemas

Errores comunes y soluciones

Cuota de Gemini 429 excedida

Espera al reinicio diario o actualiza al tier de pago. Usa --engine mermaid|excalidraw para las posiciones restantes.

Verificar: curl -s https://generativelanguage.googleapis.com/v1beta/models?key=$GEMINI_API_KEY

Renderizado de Mermaid falla con 'Parse error'

El LLM produjo un Mermaid inválido. Usa --prompt-only, pega en mermaid.live para depurar, corrige la sintaxis, regenera.

Verificar: mmdc -i test.mmd -o test.png

Skill no encontrado por Claude Code

Confirma que la ruta de clone es ~/.claude/skills/smart-illustrator y que SKILL.md existe en la raíz.

Verificar: ls ~/.claude/skills/smart-illustrator/SKILL.md

Alternativas

smart-illustrator vs otros

Alternativa	Cuándo usarla	Contrapartida
banana-claude-skill	Solo necesitas imágenes hero fotorrealistas, no diagramas	Sin detección de posiciones, sin motores de diagrama
Flujo manual de Midjourney/DALL-E	Tu publicación tiene una guía de estilo de marca estricta que el enrutamiento de LLM no respetará	Más control, mucho más lento

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills