| name | wechat-publisher |
| description | 微信公众号发布工具 — This skill should be used whenever the user mentions 微信公众号 (WeChat Official Account) in the context of publishing, posting, or sharing content. Trigger phrases include 发到公众号, 发布到微信公众号, 微信公众号文章, post to WeChat. Accepts any source format (text, markdown, structured content) and converts it to beautifully formatted HTML for pasting into the WeChat Official Account editor. Handles the full workflow from HTML generation to rich-text clipboard copy via browser automation. |
| default_theme | classic-purple |
微信公众号发布工具
Overview
Convert any content into beautifully formatted HTML optimized for the WeChat Official Account (微信公众号) editor, then copy the rendered rich text to the clipboard for the user to paste into the editor. The workflow handles all WeChat-specific formatting quirks automatically.
Workflow
Step 1: Generate WeChat-Compatible HTML
Write the HTML to /tmp/wechat-article.html. The file MUST follow these critical rules:
Document Structure (REQUIRED)
Always wrap content in a full HTML document with explicit white background to override Chrome dark mode:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>微信公众号文章预览</title>
<style>
html, body { background: #fff !important; color: #333; }
body { max-width: 680px; margin: 0 auto; padding: 20px 16px; }
</style>
</head>
<body>
<div id="article-content">
</div>
</body>
</html>
Critical Formatting Rules
-
ALL styles must be inline. WeChat strips <style> blocks and external CSS. Every element needs style="..." attributes.
-
NEVER use <br/> for line breaks between paragraphs or list items. WeChat editor strips <br/> tags. Use separate <p> tags for each line instead.
<p>Step 1: Do this<br/>Step 2: Do that<br/>Step 3: Done</p>
<p style="...">Step 1: Do this</p>
<p style="...">Step 2: Do that</p>
<p style="...">Step 3: Done</p>
-
Use <section> for colored blocks, not <div>. WeChat handles <section> better.
-
Code blocks: Use dark background <section> with <p> tags per line, monospace font:
<section style="background:#1e1e2e;border-radius:8px;padding:16px 20px;margin:16px 0;">
<p style="font-size:13px;color:#cdd6f4;margin:0;line-height:2;font-family:Menlo,Monaco,Consolas,monospace;">code line 1</p>
<p style="font-size:13px;color:#cdd6f4;margin:0;line-height:2;font-family:Menlo,Monaco,Consolas,monospace;">code line 2</p>
</section>
-
Use for indentation in code blocks (not spaces or tabs).
-
Numbered circle badges for step lists:
<span style="display:inline-block;width:24px;height:24px;background:#7c3aed;color:#fff;border-radius:50%;text-align:center;line-height:24px;font-size:12px;font-weight:bold;margin-right:8px;">1</span>
-
Tables: Use inline styles on every <th>, <td>, <tr>. WeChat strips class-based styling.
-
Section headings with left border:
<section style="border-left:4px solid #7c3aed;padding-left:12px;margin:30px 0 20px;">
<h2 style="font-size:18px;font-weight:bold;color:#1a1a1a;margin:0;line-height:1.6;">标题</h2>
</section>
-
Warning/info boxes: Use colored <section> with border:
<section style="background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:14px 18px;margin:16px 0;">
<p style="font-size:14px;color:#991b1b;margin:0;line-height:2;">...</p>
</section>
<section style="background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:14px 18px;margin:16px 0;">
<p style="font-size:14px;color:#9a3412;margin:0;line-height:2;">...</p>
</section>
<section style="background:#f3f0ff;border-radius:8px;padding:16px 20px;margin:16px 0;">
<p style="font-size:15px;color:#5b21b6;margin:0;line-height:2;">...</p>
</section>
-
Inline code: <code style="background:#f3f0ff;color:#7c3aed;padding:2px 6px;border-radius:3px;font-size:13px;">code</code>
-
Body text standard: font-size:15px;color:#333;line-height:2;margin:10px 0;
-
Bullet lists: Use · character with left margin, each item in its own <p>:
<p style="font-size:15px;color:#333;line-height:2;margin:4px 0 4px 10px;">· Item one</p>
<p style="font-size:15px;color:#333;line-height:2;margin:4px 0 4px 10px;">· Item two</p>
Step 2: Serve the HTML via Local HTTP Server
NEVER use pbcopy — it corrupts Chinese characters due to encoding issues.
NEVER use file:// URLs — Chrome blocks them in extension-managed tabs.
Start a Python HTTP server from /tmp:
cd /tmp && python3 -m http.server <PORT> &
If the default port is in use, try another port. Verify serving works:
curl -s http://localhost:<PORT>/wechat-article.html | head -5
Step 3: Copy Rich Text via Browser
- Get browser tab context using
tabs_context_mcp
- Navigate to
http://localhost:<PORT>/wechat-article.html
- Verify page loaded using
read_page (content should be visible in accessibility tree even if screenshot appears dark due to Chrome dark mode)
- Click page body to focus:
left_click at center of page
- Select all:
key → Ctrl+A (Windows) or Cmd+A (macOS)
- Copy:
key → Ctrl+C (Windows) or Cmd+C (macOS)
This copies the rendered HTML as rich text (text/html MIME type) to the system clipboard.
IMPORTANT: Do NOT attempt these clipboard methods — they all fail:
pbcopy — corrupts Chinese encodingnavigator.clipboard.write() via JS injection — fails due to permission restrictionsdocument.execCommand('copy') via JS injection — fails without user gesture context- Only keyboard shortcuts (Ctrl+A/Ctrl+C or Cmd+A/Cmd+C) work reliably through browser automation
Step 4: Instruct User to Paste
Tell the user:
- Switch to the WeChat Official Account editor tab
- Click into the article body area
- Ctrl+A (Windows) or Cmd+A (macOS) to select any existing content, then Delete
- Ctrl+V (Windows) or Cmd+V (macOS) to paste the rich text
Note: The paste may include the page's non-article elements. Remind the user to delete any extra text at the beginning/end.
Step 5: Cleanup
Kill the HTTP server after the user confirms success:
kill $(lsof -t -i :<PORT>) 2>/dev/null
Theme System
Available Themes
| Theme | Primary Color | Best For |
|---|
classic-purple | #7c3aed | 科技/创意类内容 |
business-blue | #2563eb | 企业/商业类内容 |
fresh-green | #059669 | 教育/生活类内容 |
Theme Selection Logic
Priority:
- User specifies theme in request → Use specified theme
- No specification → Use
default_theme from config
- No config → Use
classic-purple (fallback)
Trigger phrases:
- "用商务蓝主题发布" / "用蓝色主题" →
business-blue
- "用清新绿主题发布" / "用绿色主题" →
fresh-green
- "用经典紫主题发布" / "用紫色主题" / 无指定 →
classic-purple
Theme Color Palettes
Classic Purple (default)
| Element | Color |
|---|
| Primary accent | #7c3aed |
| Primary dark | #5b21b6 |
| Highlight bg | #f3f0ff |
| Table header bg | #7c3aed |
| Table alt row | #faf8ff |
| Table border | #e9e3f5 |
Business Blue
| Element | Color |
|---|
| Primary accent | #2563eb |
| Primary dark | #1d4ed8 |
| Highlight bg | #eff6ff |
| Table header bg | #2563eb |
| Table alt row | #f8fafc |
| Table border | #dbeafe |
Fresh Green
| Element | Color |
|---|
| Primary accent | #059669 |
| Primary dark | #047857 |
| Highlight bg | #ecfdf5 |
| Table header bg | #059669 |
| Table alt row | #f6fdf9 |
| Table border | #d1fae5 |
Shared Colors (all themes)
| Element | Color |
|---|
| Body text | #333 |
| Subtitle/meta | #888 |
| Code bg (dark) | #1e1e2e |
| Code text | #cdd6f4 |
| Code comment | #6c7086 |
| Warning bg | #fef2f2 |
| Warning text | #991b1b |
| Info bg | #fff7ed |
| Info text | #9a3412 |
Design System (Classic Purple Theme)
The colors below are for the default classic-purple theme. For other themes, see the Theme System section above.
Default color palette (can be customized per article):
| Element | Color |
|---|
| Primary accent | #7c3aed (purple) |
| Primary dark | #5b21b6 |
| Body text | #333 |
| Subtitle/meta | #888 |
| Code bg (dark) | #1e1e2e |
| Code text | #cdd6f4 |
| Code comment | #6c7086 |
| Highlight bg | #f3f0ff |
| Warning bg | #fef2f2 |
| Warning text | #991b1b |
| Info bg | #fff7ed |
| Info text | #9a3412 |
| Table header bg | #7c3aed |
| Table alt row | #faf8ff |
| Table border | #e9e3f5 |
