/ Directorio / Playground / baoyu-skills
← Todos los servidores ↗ GitHub
● Comunidad JimLiu ⚡ Instantáneo

baoyu-skills

por JimLiu · JimLiu/baoyu-skills

Convierte ideas en visuales para compartir — tarjetas de Xiaohongshu, infografías, diagramas SVG, presentaciones — todo desde prompts en lenguaje natural.

baoyu-skills agrupa más de 20 skills de contenido visual para Claude Code. Con gran potencia para formatos del internet chino (tarjetas de Xiaohongshu, listas para WeChat), aunque las skills de SVG/infografía/slides son independientes del idioma. Incluye enrutamiento de generación de imágenes multi-proveedor (OpenAI, Google, DashScope, MiniMax) y utilidades de contenido como extracción de transcripciones de YouTube y URL-a-markdown.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_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": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_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": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "baoyu-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "baoyu-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/JimLiu/baoyu-skills",
          "~/.claude/skills/baoyu-skills"
        ]
      }
    }
  }
}

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

claude mcp add baoyu-skill -- git clone https://github.com/JimLiu/baoyu-skills ~/.claude/skills/baoyu-skills

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

Casos de uso

Usos del mundo real: baoyu-skills

Generar una serie de 9 tarjetas para Xiaohongshu a partir de un artículo

👤 Creadores de contenido en RED / Xiaohongshu ⏱ ~15 min beginner

Cuándo usarlo: Escribiste un artículo largo y necesitas visuales de tarjetas cuadradas para la plataforma.

Requisitos previos
  • Skill instalada — git clone https://github.com/JimLiu/baoyu-skills ~/.claude/skills/baoyu-skills
Flujo
  1. Elegir layout + estilo
    Use baoyu-skills. From article.md, generate a 9-card Xiaohongshu series in 'minimal' style with serif title font.✓ Copiado
    → 9 tarjetas SVG/PNG generadas, ratio cuadrado
  2. Iterar sobre la portada
    Cover (card 1) is too plain — try 'magazine' style with a number badge.✓ Copiado
    → Nuevas variantes de portada; elige una
  3. Exportar
    Export all 9 cards as PNG at 1080×1080, save to /posts/<slug>/.✓ Copiado
    → PNGs listos para subir

Resultado: Serie de tarjetas lista para publicar en menos de 10 minutos por post.

Errores comunes
  • El texto de la tarjeta se desborda con frases largas en chino — Pide a la skill que resuma el texto por tarjeta a ≤24 caracteres o active la reducción automática de fuente
Combinar con: humanizer-skill

Crear una infografía a partir de un pequeño conjunto de datos

👤 Marketers, analistas, cualquiera que presenta números ⏱ ~20 min beginner

Cuándo usarlo: Tienes un CSV con 5–10 estadísticas y quieres una sola infografía para compartir.

Flujo
  1. Elegir layout
    Use baoyu-skills. From data.csv (5 rows), pick the most appropriate of the 21 infographic layouts.✓ Copiado
    → Recomendación de layout con razonamiento
  2. Generar
    Generate it in 'editorial' style. Use my brand colors #0F172A and #38BDF8.✓ Copiado
    → Salida SVG; vista previa en el chat
  3. Refinar
    Add a 1-line takeaway under each stat. Reduce icon weight by 30%.✓ Copiado
    → SVG refinado

Resultado: Infografía lista para blog/redes sociales — sin necesidad de Figma.

Errores comunes
  • 21 layouts × 17 estilos = parálisis de decisión — Deja que la skill recomiende según la forma de los datos; solo anula si tienes una opinión firme
Combinar con: filesystem

Generar un diagrama de arquitectura SVG a partir de una descripción

👤 Ingenieros escribiendo documentación ⏱ ~12 min beginner

Cuándo usarlo: Necesitas un diagrama de sistema para un README y no quieres abrir una herramienta de dibujo.

Flujo
  1. Describir el sistema
    Use baoyu-skills. Generate a structural diagram for: web client → API gateway → 3 services (auth, billing, content) → Postgres + Redis. Show external dependencies.✓ Copiado
    → SVG producido con nodos nombrados
  2. Anotar
    Add HTTP/gRPC labels on edges; mark Postgres as 'primary' and 'replica'.✓ Copiado
    → Anotaciones aplicadas

Resultado: Diagrama en el repositorio; se renderiza en cualquier visor de markdown.

Errores comunes
  • El diagrama se vuelve ilegible con muchos nodos — Divide en dos diagramas (alto nivel + detalle por servicio); nunca lo aprietes todo
Combinar con: filesystem

Convertir una charla de YouTube en un borrador de publicación de blog

👤 Bloggers que reutilizan contenido en video ⏱ ~25 min beginner

Cuándo usarlo: Viste una gran charla en una conferencia y quieres un resumen listo para publicar.

Flujo
  1. Obtener la transcripción
    Use baoyu-skills YouTube transcript skill on <url>. Translate if non-English.✓ Copiado
    → Transcripción limpia en el chat
  2. Reestructurar
    Convert to a 1200-word post: hook, 4 sections matching the talk's arc, takeaways. Cite timestamps.✓ Copiado
    → Borrador del post con citas de timestamps

Resultado: Borrador de post con fuentes en 15 minutos.

Errores comunes
  • Las transcripciones automáticas escuchan mal los términos técnicos — Pide a la skill que marque las palabras de baja confianza; verifica contra el video
Combinar con: humanizer-skill

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

baoyu-skill + humanizer-skill

Generar tarjetas/posts y luego eliminar señales de IA

Generate the post draft via baoyu-skills, then run humanizer on it before publishing.✓ Copiado
baoyu-skill + filesystem

Guardar salidas en un repositorio de contenido

Save all generated cards under /content/<slug>/ with a stable naming convention.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
make_xhs_cards source_text, layout, style, count Series de tarjetas para RED / Xiaohongshu Image gen API for any rendered images
make_infographic data, layout, style, palette? Visualización de datos en una sola imagen 0 (SVG is template-rendered)
make_svg_diagram type (flow|seq|struct|illust), description Diagramas para documentación 0
make_slides outline, theme Presentaciones de charlas relámpago 0
yt_transcript url, translate_to? Reutilizar contenido de video 0
url_to_md url Citar un artículo web de forma limpia 0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
Las skills de generación de imágenes dependen de la cuota del proveedor elegido
Tokens por llamada
Skills SVG/template: bajo. Generación de imágenes: varía según el modelo
Monetario
Gratuito (skill); paga la generación de imágenes si se usa
Consejo
Usa las skills de plantilla SVG (tarjetas, infografías, diagramas) — no llaman a modelos de pago

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: filesystem-write (for output)
Almacenamiento de credenciales: Claves API de generación de imágenes mediante variables de entorno; la skill las lee del entorno, no están en el código
Salida de datos: Solo cuando se usan las sub-skills de generación de imágenes; las skills SVG/template son locales

Resolución de problemas

Errores comunes y soluciones

Los caracteres chinos se renderizan como cuadros

Instala una fuente compatible con CJK; la skill incluye una lista de fallback pero el SO local puede no tener coincidencia

Verificar: Check fonts available; install Noto Sans CJK
La sub-skill de generación de imágenes falla

Verifica la variable de entorno del proveedor; el proveedor puede estar caído o sin créditos

El texto de la tarjeta se desborda

Proporciona texto más corto por tarjeta (≤24 caracteres para el titular) o pasa auto_shrink=true

El SVG no se renderiza en el README de GitHub

Convierte a PNG para GitHub (elimina algunas etiquetas SVG); el SVG funciona bien en la mayoría de blogs

Alternativas

baoyu-skills vs otros

AlternativaCuándo usarlaContrapartida
skyll-skillQuieres un estudio de tarjetas de imágenes enfocado en lugar de un paquete de 20 skillsMenos superficie, más enfocado
AntV mcp-server-chartSolo necesitas gráficos de datos, no tarjetas visuales/ilustracionesForma diferente — centrado en gráficos

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills