wechat-article-formatter-skill MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

Markdown → WeChat-ready HTML
Inline styles (WeChat strips <style> tags)
Customizable theme (colors, fonts, spacing)
Handles code blocks, quotes, lists, images
Preview as HTML before pasting

라이브 데모

실제 사용 모습

wechat-article-formatter-skill.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "wechat-article-formatter-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/iamzifei/wechat-article-formatter-skill",
        "~/.claude/skills/wechat-article-formatter-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "wechat-article-formatter-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/iamzifei/wechat-article-formatter-skill",
        "~/.claude/skills/wechat-article-formatter-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "wechat-article-formatter-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/iamzifei/wechat-article-formatter-skill",
        "~/.claude/skills/wechat-article-formatter-skill"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "wechat-article-formatter-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/iamzifei/wechat-article-formatter-skill",
        "~/.claude/skills/wechat-article-formatter-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "wechat-article-formatter-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/iamzifei/wechat-article-formatter-skill",
        "~/.claude/skills/wechat-article-formatter-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "wechat-article-formatter-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/iamzifei/wechat-article-formatter-skill",
          "~/.claude/skills/wechat-article-formatter-skill"
        ]
      }
    }
  }
}

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

claude mcp add wechat-article-formatter-skill -- git clone https://github.com/iamzifei/wechat-article-formatter-skill ~/.claude/skills/wechat-article-formatter-skill

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

사용 사례

실전 활용법: wechat-article-formatter-skill

Publish a technical article to 公众号 without formatting pain

👤 Chinese-speaking tech writers, 运营 ⏱ ~10 min beginner

언제 쓸까: You wrote in Markdown and need to post to WeChat within 15 minutes.

사전 조건

Skill installed — git clone https://github.com/iamzifei/wechat-article-formatter-skill ~/.claude/skills/wechat-article-formatter-skill

흐름

Feed the draft

使用 wechat-article-formatter-skill. 这是我的Markdown文章，帮我转成公众号可用的HTML：[paste draft]✓ 복사됨

→ Inline-styled HTML output with proper heading hierarchy
Tweak the theme

把主色从蓝色换成绿色，正文字号略小一点。✓ 복사됨

→ Updated HTML with theme diff
Copy and paste

给我最终版本，我要复制到公众号编辑器。✓ 복사됨

→ Clean HTML block ready for WeChat

결과: An article that looks good on WeChat without manual CSS fighting.

함정

Images break — WeChat requires re-uploaded images — Upload images in WeChat's media library first; skill leaves img placeholders

Build a reusable brand theme for every post

👤 公众号 teams wanting visual consistency ⏱ ~20 min intermediate

언제 쓸까: You're about to post the 10th article and realize each one looks different.

흐름

Define the theme

用 wechat-article-formatter-skill 帮我定义品牌主题: 主色 #1A73E8，标题 PingFang，正文行距 1.8。✓ 복사됨

→ Saved theme file with all token defaults
Apply across drafts

对 drafts/ 里的所有文章应用这个主题。✓ 복사됨

→ Batch-formatted HTMLs

결과: Every post looks like it came from the same brand.

함께 쓰기: filesystem

조합

다른 MCP와 조합해 10배 효율

wechat-article-formatter-skill + filesystem

Batch-format a drafts/ folder

格式化 drafts/ 里的每一篇文章，输出到 formatted/。✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
format_article	markdown, theme name	Every article
save_theme	theme spec	Once per brand
preview_html	html string	Before pasting

비용 및 제한

운영 비용

API 쿼터: None
호출당 토큰: Modest — text in, HTML out
금액: Free
팁: Save theme once; don't re-specify every article.

보안

권한, 시크릿, 파급범위

자격 증명 저장: None

데이터 외부 송신: None from skill

WeChat strips certain tags and inline events — the skill targets what WeChat allows, but test each new theme once in the WeChat editor.

문제 해결

자주 발생하는 오류와 해결

Layout broken after paste into WeChat

WeChat stripped something; re-run with fallback inline styles

Images missing

Upload to WeChat media library and replace placeholders manually

Code blocks don't preserve language highlighting

WeChat doesn't support JS-based highlighters; skill bakes colors inline — verify the theme has them

대안

wechat-article-formatter-skill 다른 것과 비교

대안	언제 쓰나	단점/장점
md2wechat / wechat-format online tools	One-off, no Claude integration	Can't batch; no customization via prompts
wechat-article-publisher-skill	You want to auto-publish, not just format	Requires WeChat API credentials

wechat-article-formatter-skill