HTML to WeChat

HTML to WeChat

Take existing HTML content — a file, a URL, or pasted HTML — and publish it to the WeChat Official Account draft box in one streamlined workflow.

This is the simplest WeChat publishing skill: no file conversion, no web scraping. Just HTML, a compatibility check, and publish.

User-Facing Promise

Accept requests like:

• "把这个 HTML 文件发到我的微信公众号"
• "我有一个现成的 HTML 页面，帮我发到公众号草稿箱"
• "Publish this HTML to my WeChat account"
• "把这个链接里的 HTML 推送到微信"
• "我有一段 HTML 代码，发到公众号"
• "Help me push this HTML page to my WeChat draft box"

Return a published draft in the WeChat draft box, not a proposal.

---

First-Time Setup

1. Configure WeChat Credentials

You need a WeChat Official Account (服务号 or 订阅号 with API access).

Get your credentials:

1. Log in to https://mp.weixin.qq.com/
2. Go to: 设置与开发 -> 基本配置
3. Copy your AppID and reset/view AppSecret
4. Add your server's public IP to the IP白名单

SECURITY: NEVER hardcode credentials in scripts or source files. Always use environment variables or interactive prompts.

Set environment variables (recommended):

On macOS / Linux:

export WECHAT_APP_ID="your_appid_here"
export WECHAT_APP_SECRET="your_appsecret_here"

On Windows (PowerShell, persistent):

[Environment]::SetEnvironmentVariable("WECHAT_APP_ID", "your_appid_here", "User")
[Environment]::SetEnvironmentVariable("WECHAT_APP_SECRET", "your_appsecret_here", "User")

On Windows (Command Prompt, session only):

set WECHAT_APP_ID=your_appid_here
set WECHAT_APP_SECRET=your_appsecret_here

No environment variables set? The publish script will prompt interactively on first run. You can also pass credentials at runtime via Python subprocess (see Phase 5).

2. Install Companion Skill

This skill depends on the anything-to-wechat skill from ClawHub:

clawhub install anything-to-wechat

• anything-to-wechat -- provides publish_to_wechat.py (WeChat API publishing) and convert_for_wechat.py (HTML compatibility conversion)

---

Prerequisites

All pip dependencies auto-install on first use if missing.

---

Workflow

Phase 1: Collect HTML Input

Determine the source of the HTML content.

If the user has already provided one of the following, skip to Phase 2:

• A local file path (e.g., ./article.html)
• A URL pointing to an HTML page
• Pasted HTML source code

Otherwise, ask the user:

Question: "请提供你想发布到微信公众号的 HTML 内容"
Options:
  - "本地 HTML 文件路径"
  - "粘贴 URL 链接"
  - "直接粘贴 HTML 代码"

Handling each input type:

Important for URLs: Use WebFetch only to fetch the raw HTML. If the page requires JavaScript rendering or returns a login wall, inform the user and ask them to provide the HTML file directly.

Save the HTML to /input.html before proceeding.

---

Phase 2: Validate HTML for WeChat Compatibility

Before converting, inspect the HTML for known WeChat incompatibilities.

Read the HTML file and check for the following issues:

WeChat Strips / Rejects

Decision after validation:

• No issues found -- Skip Phase 3, proceed directly to Phase 4.
• Issues found -- Proceed to Phase 3 for automated conversion.

Report the validation results to the user with a brief summary:

[WeChat Compatibility Check]
- Found 2  tags (will be inlined)
- Found CSS variables (will be resolved)
- Found position:sticky (will be removed)
- File size: 145KB (OK, under 2MB limit)
- Background: #ffffff (OK)

---

Phase 3: Convert HTML for WeChat

If Phase 2 found incompatibilities, run the conversion script from the anything-to-wechat skill:

python "/scripts/convert_for_wechat.py" \
  --input "/input.html" \
  --output "/wechat_article.html"

This script automatically:

• Extracts CSS from `` tags and inlines them as style="" attributes
• Converts dark backgrounds to light themes
• Resolves all CSS variables (var(--xxx)) to literal color values
• Removes WeChat-incompatible CSS properties (position: fixed/sticky, backdrop-filter, z-index)
• Ensures all elements have inline styles
• Applies system font fallbacks

After conversion: Re-validate the output by reading wechat_article.html and confirming:

1. No `` tags remain
2. No `` tags remain
3. All elements have inline style="" attributes
4. Background is light (white or near-white)
5. File size is under 2MB

If any issues persist after conversion, manually fix them using the Edit tool:

• Remove remaining or blocks
• Replace dark background colors with #ffffff
• Add max-width: 680px; margin: 0 auto; to the outermost container
• Ensure font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif on the body

If no conversion was needed in Phase 2, copy the input file:

copy "/input.html" "/wechat_article.html"

---

Phase 4: Prepare Cover Image

WeChat requires a cover image for thumb_media_id upload. The image must be under 64KB.

Option A: User provides a cover image

If the user supplied a cover image path, use it directly and proceed to compression.

Option B: Generate a cover image

Use the ImageGen tool with a prompt derived from the HTML content:

• Read the HTML or first to determine the topic
• Generate a visually compelling cover image
• Size: 1024x768 (WeChat cover ratio 4:3)
• Save as /wechat_cover.png

Compress the cover image:

WeChat requires cover images (thumb_media_id) to be under 64KB.

python "/scripts/compress_image.py" \
  --input "/wechat_cover.png" \
  --output "/wechat_cover_compressed.jpg" \
  --max-size 64

Always run compression, even if the image seems small -- it will not enlarge files.

Fallback: If compress_image.py fails to reach 64KB, use ImageGen to regenerate a simpler cover image (fewer details, simpler composition, larger flat color areas) and try compression again.

---

Phase 5: Publish to WeChat Draft Box

Use publish_to_wechat.py from the anything-to-wechat skill.

IMPORTANT: Credentials must NEVER be hardcoded in scripts. Use environment variables or the Python subprocess pattern below.

macOS / Linux

WECHAT_APP_ID="$WECHAT_APP_ID" WECHAT_APP_SECRET="$WECHAT_APP_SECRET" \
python "/scripts/publish_to_wechat.py" \
  --file "/wechat_article.html" \
  --title "" \
  --cover "/wechat_cover_compressed.jpg" \
  --digest ""

Windows (Python subprocess for env vars + UTF-8 encoding)

On Windows, environment variable passing via set in cmd or $env: in PowerShell can be unreliable across sessions and may have encoding issues with Chinese characters. Use the Python subprocess pattern:

python -c "
import os, subprocess, sys
os.environ['WECHAT_APP_ID'] = ''
os.environ['WECHAT_APP_SECRET'] = ''
result = subprocess.run([
    sys.executable,
    r'\scripts\publish_to_wechat.py',
    '--file', r'\wechat_article.html',
    '--title', '',
    '--cover', r'\wechat_cover_compressed.jpg',
    '--digest', ''
], capture_output=True, text=True, encoding='utf-8')
print(result.stdout)
print(result.stderr)
"

Key Windows notes:

• Always pass encoding='utf-8' to subprocess.run to handle Chinese titles and digests correctly
• Use raw strings (r'...') for Windows file paths to avoid backslash escape issues
• Never write credentials to disk -- pass them via os.environ in the subprocess wrapper only

If credentials are not set: The script will prompt interactively for AppID and AppSecret.

Handle IP whitelist errors:

If the API returns ip not in whitelist:

1. Extract the server's public IP from the error message
2. Tell the user: "请将 IP `` 添加到微信公众号后台的 IP 白名单中（设置与开发 -> 基本配置 -> IP白名单）"
3. Wait for confirmation, then retry the publish command

---

Phase 6: Confirm and Handoff

After successful publishing, report to the user:

1. Success status with the Media ID
2. Link to WeChat backend: https://mp.weixin.qq.com/
3. Message: "文章已发送到你的微信公众号草稿箱，请登录微信公众平台审核后一键发布。"

Include the following summary:

[Publish Complete]
- Title: 
- Media ID: 
- Cover image:  (KB)
- HTML file:  (KB)
- Digest: 
- Next step: Log in to https://mp.weixin.qq.com/ to review and publish

---

WeChat HTML Compatibility Reference

What WeChat Strips

What WeChat Requires

Recommended HTML Structure

  Article Title
  Article content...
  

---

Error Handling

---

Script Reference

---

Configuration

Never commit credentials to version control. Always use environment variables, and the publish script falls back to interactive prompts when env vars are missing.