/ Diretório / Playground / baoyu-skills
← Todos os servidores ↗ GitHub
● Comunidade JimLiu ⚡ Instantâneo

baoyu-skills

por JimLiu · JimLiu/baoyu-skills

Transforme ideias em visuais compartilháveis — cards Xiaohongshu, infográficos, diagramas SVG, apresentações — tudo a partir de prompts em linguagem natural.

baoyu-skills reúne mais de 20 skills de conteúdo visual para o Claude Code. Forte em formatos da internet chinesa (cards Xiaohongshu, prontos para WeChat), mas as skills de SVG/infográfico/slides são independentes de idioma. Inclui roteamento de geração de imagens para múltiplos provedores (OpenAI, Google, DashScope, MiniMax) e utilitários de conteúdo como extração de transcrição do YouTube e URL para markdown.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

pronto

Instalar

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

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.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 o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a 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
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "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
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

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

O Continue usa um array de objetos de servidor em vez de um map.

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

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: baoyu-skills

Gerar uma série de 9 cards Xiaohongshu a partir de um artigo

👤 Criadores de conteúdo no RED / Xiaohongshu ⏱ ~15 min beginner

Quando usar: Você escreveu um artigo longo e precisa de cards quadrados para a plataforma.

Pré-requisitos
  • Skill instalada — git clone https://github.com/JimLiu/baoyu-skills ~/.claude/skills/baoyu-skills
Fluxo
  1. Escolher layout + estilo
    Use baoyu-skills. From article.md, generate a 9-card Xiaohongshu series in 'minimal' style with serif title font.✓ Copiado
    → 9 cards SVG/PNG gerados, proporção quadrada
  2. Iterar na capa
    Cover (card 1) is too plain — try 'magazine' style with a number badge.✓ Copiado
    → Variantes de capa; escolha uma
  3. Exportar
    Export all 9 cards as PNG at 1080×1080, save to /posts/<slug>/.✓ Copiado
    → PNGs prontos para upload

Resultado: Série de cards pronta para publicar em menos de 10 minutos por post.

Armadilhas
  • Texto do card transborda em frases longas em chinês — Peça à skill para resumir o texto por card em ≤24 caracteres ou reduzir automaticamente a fonte
Combine com: humanizer-skill

Criar um infográfico a partir de um pequeno conjunto de dados

👤 Profissionais de marketing, analistas, qualquer pessoa apresentando números ⏱ ~20 min beginner

Quando usar: Você tem um CSV com 5–10 estatísticas e quer um único infográfico compartilhável.

Fluxo
  1. Escolher o layout
    Use baoyu-skills. From data.csv (5 rows), pick the most appropriate of the 21 infographic layouts.✓ Copiado
    → Recomendação de layout com justificativa
  2. Gerar
    Generate it in 'editorial' style. Use my brand colors #0F172A and #38BDF8.✓ Copiado
    → Saída SVG; preview no chat
  3. Refinar
    Add a 1-line takeaway under each stat. Reduce icon weight by 30%.✓ Copiado
    → SVG refinado

Resultado: Infográfico pronto para blog/redes sociais — sem Figma necessário.

Armadilhas
  • 21 layouts × 17 estilos = paralisia de decisão — Deixe a skill recomendar com base na forma dos dados; só substitua se tiver uma opinião forte
Combine com: filesystem

Gerar um diagrama de arquitetura SVG a partir de uma descrição

👤 Engenheiros escrevendo documentação ⏱ ~12 min beginner

Quando usar: Você precisa de um diagrama de sistema para um README e não quer abrir uma ferramenta de desenho.

Fluxo
  1. Descrever o 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 produzido com nós nomeados
  2. Anotar
    Add HTTP/gRPC labels on edges; mark Postgres as 'primary' and 'replica'.✓ Copiado
    → Anotações aplicadas

Resultado: Diagrama no repositório; renderiza em qualquer visualizador de markdown.

Armadilhas
  • Diagrama fica ilegível com muitos nós — Divida em dois diagramas (alto nível + detalhe por serviço); nunca sobrecarregue
Combine com: filesystem

Transformar uma palestra do YouTube em rascunho de blog post

👤 Bloggers reutilizando conteúdo de vídeo ⏱ ~25 min beginner

Quando usar: Você assistiu a uma ótima palestra de conferência e quer um resumo pronto para publicar.

Fluxo
  1. Buscar transcrição
    Use baoyu-skills YouTube transcript skill on <url>. Translate if non-English.✓ Copiado
    → Transcrição limpa no chat
  2. Reestruturar
    Convert to a 1200-word post: hook, 4 sections matching the talk's arc, takeaways. Cite timestamps.✓ Copiado
    → Rascunho do post com citações de timestamps

Resultado: Rascunho de post com fontes em 15 minutos.

Armadilhas
  • Transcrições automáticas ouvem errado termos técnicos — Peça à skill para sinalizar palavras de baixa confiança; confira com o vídeo
Combine com: humanizer-skill

Combinações

Combine com outros MCPs para 10× de alavancagem

baoyu-skill + humanizer-skill

Gerar cards/posts, depois remover traços de IA

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

Salvar saídas em um repositório de conteúdo

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

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
make_xhs_cards source_text, layout, style, count Série de cards para RED / Xiaohongshu API de geração de imagem para imagens renderizadas
make_infographic data, layout, style, palette? Visualização de dados em imagem única 0 (SVG é renderizado por template)
make_svg_diagram type (flow|seq|struct|illust), description Diagramas para documentação 0
make_slides outline, theme Decks para talks rápidas 0
yt_transcript url, translate_to? Reutilizar vídeo 0
url_to_md url Citar um artigo da web de forma limpa 0

Custo e limites

O que custa rodar

Cota de API
Skills de geração de imagem dependem da cota do provedor escolhido
Tokens por chamada
Skills SVG/template: baixo. Geração de imagem: varia por modelo
Monetário
Gratuito (skill); pague pela geração de imagem se usada
Dica
Use skills de template SVG (cards, infográficos, diagramas) — elas não chamam modelos pagos

Segurança

Permissões, segredos, alcance

Escopos mínimos: filesystem-write (para saída)
Armazenamento de credenciais: Chaves de API de geração de imagem via variáveis de ambiente; a skill lê do ambiente, não comprometido
Saída de dados: Apenas quando sub-skills de geração de imagem são usadas; skills SVG/template são locais

Solução de problemas

Erros comuns e correções

Caracteres chineses renderizam como caixinhas

Instale uma fonte com suporte a CJK; a skill tem lista de fallback mas o OS local pode não ter nenhuma correspondente

Verificar: Verifique as fontes disponíveis; instale Noto Sans CJK
Sub-skill de geração de imagem falha

Verifique a variável de ambiente do provedor; o provedor pode estar fora do ar ou sem créditos

Texto do card transborda

Forneça texto mais curto por card (≤24 chars para o título) ou passe auto_shrink=true

SVG não renderiza no README do GitHub

Converta para PNG no GitHub (ele remove algumas tags SVG); SVG funciona bem na maioria dos blogs

Alternativas

baoyu-skills vs. outros

AlternativaQuando usarTroca
skyll-skillVocê quer um estúdio de cards de imagem focado em vez de um bundle de 20 skillsMenos superfície, mais focado
AntV mcp-server-chartVocê só precisa de gráficos de dados, não de cards visuais/ilustraçõesFormato diferente — centrado em gráficos

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills