baoyu-skills

왜 쓰나요

핵심 기능

다양한 레이아웃/스타일의 샤오홍수 카드 시리즈 생성기
21개 레이아웃 × 17개 시각 스타일의 인포그래픽 생성기
SVG 다이어그램 skills: 플로우차트 / 시퀀스 / 구조 / 일러스트
슬라이드 덱 + 아티클 일러스트 + 만화 skills
멀티 제공자 이미지 생성 라우팅 (OpenAI / Google / DashScope / MiniMax)
이중 언어 문서; 다수의 중국 인터넷 통합

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

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

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.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는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

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

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "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
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

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

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

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

context_servers에 추가. 저장 시 Zed가 핫 리로드.

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

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: baoyu-skills

기사에서 샤오홍수 9장 카드 포스트 생성

👤 小红书(RED)의 콘텐츠 크리에이터 ⏱ ~15 min beginner

언제 쓸까: 긴 형식의 기사를 썼고 플랫폼을 위한 정사각형 카드 비주얼이 필요할 때.

사전 조건

Skill 설치 — git clone https://github.com/JimLiu/baoyu-skills ~/.claude/skills/baoyu-skills

흐름

레이아웃 + 스타일 선택

Use baoyu-skills. From article.md, generate a 9-card Xiaohongshu series in 'minimal' style with serif title font.✓ 복사됨

→ 9개 SVG/PNG 카드 생성됨, 정사각형 비율
커버 수정

Cover (card 1) is too plain — try 'magazine' style with a number badge.✓ 복사됨

→ 새 커버 변형; 하나 선택
내보내기

Export all 9 cards as PNG at 1080×1080, save to /posts/<slug>/.✓ 복사됨

→ 업로드 준비된 PNG

결과: 포스트당 10분 이내에 업로드 준비된 카드 시리즈.

함정

긴 중국어 문장에서 카드 텍스트 넘침 — 카드당 텍스트를 ≤24자로 요약하거나 auto_shrink=true 전달

함께 쓰기: humanizer-skill

소규모 데이터셋에서 인포그래픽 제작

👤 마케터, 분석가, 숫자를 발표해야 하는 모든 분 ⏱ ~20 min beginner

언제 쓸까: 5–10개 통계가 있는 CSV가 있고 공유 가능한 인포그래픽 하나가 필요할 때.

흐름

레이아웃 선택

Use baoyu-skills. From data.csv (5 rows), pick the most appropriate of the 21 infographic layouts.✓ 복사됨

→ 근거가 있는 레이아웃 추천
생성

Generate it in 'editorial' style. Use my brand colors #0F172A and #38BDF8.✓ 복사됨

→ SVG 출력; 채팅에서 미리보기
정제

Add a 1-line takeaway under each stat. Reduce icon weight by 30%.✓ 복사됨

→ 정제된 SVG

결과: Figma 없이 블로그/소셜용 인포그래픽 완성.

함정

21개 레이아웃 × 17개 스타일 = 결정 마비 — 데이터 형태에 따라 skill이 추천하도록; 강한 의견이 있을 때만 재정의

함께 쓰기: filesystem

설명에서 SVG 아키텍처 다이어그램 생성

👤 문서를 작성하는 엔지니어 ⏱ ~12 min beginner

언제 쓸까: README에 시스템 다이어그램이 필요한데 드로잉 도구를 열기 싫을 때.

흐름

시스템 설명

Use baoyu-skills. Generate a structural diagram for: web client → API gateway → 3 services (auth, billing, content) → Postgres + Redis. Show external dependencies.✓ 복사됨

→ 이름이 있는 노드로 SVG 생성됨
주석 추가

Add HTTP/gRPC labels on edges; mark Postgres as 'primary' and 'replica'.✓ 복사됨

→ 주석 적용됨

결과: 저장소에 있는 다이어그램; 모든 Markdown 뷰어에서 렌더링됨.

함정

노드가 많아지면 다이어그램이 읽기 어려워짐 — 두 다이어그램으로 분리 (고수준 + 서비스별 상세); 절대 밀어 넣지 않기

함께 쓰기: filesystem

YouTube 발표를 블로그 포스트 초안으로 변환

👤 영상 콘텐츠를 재사용하는 블로거 ⏱ ~25 min beginner

언제 쓸까: 멋진 컨퍼런스 발표를 보고 포스트 요약이 필요할 때.

흐름

스크립트 가져오기

Use baoyu-skills YouTube transcript skill on <url>. Translate if non-English.✓ 복사됨

→ 채팅에 정리된 스크립트
재구성

Convert to a 1200-word post: hook, 4 sections matching the talk's arc, takeaways. Cite timestamps.✓ 복사됨

→ 타임스탬프 인용이 있는 포스트 초안

결과: 15분 만에 출처가 있는 포스트 초안.

함정

자동 스크립트가 기술 용어를 잘못 인식 — skill에게 저신뢰도 단어를 표시하도록 요청; 영상과 대조해 확인

함께 쓰기: humanizer-skill

조합

다른 MCP와 조합해 10배 효율

baoyu-skill + humanizer-skill

카드/포스트를 생성한 다음 AI 느낌 제거

Generate the post draft via baoyu-skills, then run humanizer on it before publishing.✓ 복사됨

baoyu-skill + filesystem

출력물을 콘텐츠 저장소에 저장

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

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
make_xhs_cards	source_text, layout, style, count	RED / 샤오홍수용 카드 시리즈	Image gen API for any rendered images
make_infographic	data, layout, style, palette?	단일 이미지 데이터 시각화	0 (SVG is template-rendered)
make_svg_diagram	type (flow\|seq\|struct\|illust), description	문서용 다이어그램	0
make_slides	outline, theme	라이트닝 토크 덱	0
yt_transcript	url, translate_to?	영상 재사용	0
url_to_md	url	웹 기사를 깔끔하게 인용	0

비용 및 제한

운영 비용

API 쿼터: 이미지 생성 skills는 선택한 제공자의 할당량에 의존
호출당 토큰: SVG/템플릿 skills: 낮음. 이미지 생성: 모델에 따라 다름
금액: 무료 (skill); 이미지 생성 사용 시 비용 발생
팁: SVG 템플릿 skills 사용 (카드, 인포그래픽, 다이어그램) — 유료 모델 호출 없음

보안

권한, 시크릿, 파급범위

최소 스코프: filesystem-write (for output)

자격 증명 저장: 이미지 생성 API 키는 환경 변수로; skill은 환경에서 읽음, 커밋하지 않음

데이터 외부 송신: 이미지 생성 하위 skills 사용 시만; SVG/템플릿 skills는 로컬

로고/사진을 삽입하면 브랜드 IP가 출력물에 포함될 수 있음 — 사용 권한 확인

문제 해결

자주 발생하는 오류와 해결

중국어 문자가 네모로 표시됨

CJK 지원 폰트 설치; skill에 폴백 목록이 있지만 로컬 OS에 없을 수 있음

확인: Check fonts available; install Noto Sans CJK

이미지 생성 하위 skill 실패

제공자 환경 변수 확인; 제공자가 다운됐거나 크레딧 부족

카드 텍스트 넘침

카드당 더 짧은 텍스트 제공 (헤드라인 ≤24자) 또는 auto_shrink=true 전달

GitHub README에서 SVG가 렌더링 안 됨

GitHub용으로 PNG로 변환 (일부 SVG 태그 제거됨); 대부분의 블로그에서는 SVG 작동

대안

baoyu-skills 다른 것과 비교

대안	언제 쓰나	단점/장점
skyll-skill	20개 skill 번들이 아닌 집중적인 이미지 카드 스튜디오를 원할 때	범위가 적고 더 집중적
AntV mcp-server-chart	시각 카드/일러스트가 아닌 데이터 차트만 필요할 때	형태가 다름 — 차트 중심