Weixin Long Image#

Use this skill to turn rich HTML layouts into long PNGs for Weixin delivery.

Core Rule#

In Weixin direct chats, if the reply body for the user would exceed 150 Chinese characters, treat this as a hard rule: prefer this skill over a long plain-text message.

When To Use#

Use this skill when any of these is true:

• The Weixin reply would be long and hard to read as plain chat text.
• The user asks for a card, poster, beautiful layout, or visually polished output.
• The content needs HTML rendering power, such as:
  • charts
  • tables
  • timelines
  • curves / trend visuals
  • relation diagrams
  • dashboards
  • mixed text + image layouts
• You want stable final presentation rather than chat-native formatting.

Default Visual Standard#

Unless the user explicitly wants a poster/card/dashboard style, default to a WeChat public-article layout, not a centered floating card.

Night Rule#

In Asia/Shanghai time, if the image is being prepared at 22:00 or later, default to a dark-mode article template to reduce eye strain, unless the user explicitly asks for a light theme.

Default article layout#

• Use a plain white page background.
• Keep only moderate side margins for readability.
• Do not wrap the whole article in a large rounded card with heavy shadow.
• Prefer continuous reading flow, like a WeChat public account article.
• Use readable typography, generous line height, and responsive images.

Default dark article layout after 22:00#

• Use a dark page background with softened contrast.
• Keep the same article flow and margins as the daytime template.
• Avoid excessive glow, neon accents, or dashboard-style visuals unless explicitly requested.
• Preserve readability first: muted metadata, bright headings, comfortable code blocks, and responsive images.

Use card style only when appropriate#

Reserve card/poster/dashboard styling for cases like:

• cover cards
• poster-like announcements
• KPI / dashboard views
• side-by-side comparison blocks
• highly visual share cards

For ordinary long articles, analysis notes, translated writeups, and image-heavy explanations, prefer article layout.

Reusable Templates#

Use assets/wechat-article-template.html as the default starting point for daytime article-style pages. Use assets/wechat-article-template-dark.html as the default starting point for article-style pages prepared at or after 22:00 Asia/Shanghai.

They provide:

• WeChat-like article spacing
• narrower side margins
• no outer card shell
• responsive images
• readable tables
• wrapped code blocks
• simple note/tip blocks
• matched light/dark article styles

Workflow#

1. Write a complete HTML document first.
2. For article-like content, choose the template by time:
   • before 22:00 Asia/Shanghai → assets/wechat-article-template.html
   • at or after 22:00 Asia/Shanghai → assets/wechat-article-template-dark.html
3. Render the HTML with scripts/render_long_image.py.
4. Send the PNG with the message tool using an absolute local path.
5. After the message send succeeds, immediately delete temporary render artifacts ( .png and temporary .html) unless the user explicitly asked to keep them.
6. In Weixin direct chats, use message for any progress update; do not rely on multi-part assistant text arriving in order.

Quick Start#

bash

python3 scripts/render_long_image.py \
  --input /absolute/path/to/page.html \
  --png-out /absolute/path/to/output.png

You may also pass raw HTML via --input or stdin.

Input Rules#

• The script accepts complete HTML only.

• --input can be a file path or inline HTML.

• If --input is omitted, read HTML from stdin.

• --html-out is optional.

  • If provided, persist the rendered HTML there.
  • If omitted and --input is an existing HTML file, reuse that file.
  • If omitted and the source is inline HTML or stdin, create a temporary HTML file and auto-delete it after rendering.

• If the source content starts as text, convert it into HTML first.

Rendering Guidance#

• Build for phone reading first.
• For long-form articles, prefer article layout over card layout.
• For tables, charts, diagrams, and mixed media, define layout explicitly in CSS instead of relying on browser defaults.
• If images are embedded in the HTML, make them responsive with max-width: 100% unless overflow is intentional.
• Use absolute output paths so the PNG can be delivered reliably.
• If the content is sensitive, write outputs inside the workspace or /tmp, send the PNG, then remove temporary files if appropriate.

Sending#

Use message with the generated PNG path.

• action=send
• channel=openclaw-weixin
• media=/absolute/path/to/output.png
• message=一句很短的说明

Post-send cleanup#

For temporary outputs, once message reports success, delete the local render artifacts immediately.

Typical cleanup:

bash

rm -f /absolute/path/to/output.png /absolute/path/to/output.html

Rules:

• Prefer writing temporary outputs under /tmp.
• Delete the PNG after a successful send unless the user asked to keep the file.
• Delete the HTML too when it is only an intermediate artifact.
• If render_long_image.py used inline HTML or stdin without --html-out, the script already auto-deletes its temporary HTML file; you still need to delete the PNG after send.

After a user-visible message send, reply with NO_REPLY to avoid duplicates.

Troubleshooting#

• If Playwright cannot launch Chromium, verify the local Playwright browser runtime is installed.
• If the screenshot looks clipped, increase --width or fix the HTML/CSS layout first.
• If the result is too tall, split the content into multiple HTML pages and render multiple images.
• If the content is short and visually simple, skip this skill and reply normally.

Assets#

• assets/wechat-article-template.html: Default daytime HTML template for WeChat-article-style long images.
• assets/wechat-article-template-dark.html: Default night-mode HTML template for WeChat-article-style long images after 22:00 Asia/Shanghai.

Script#

• scripts/render_long_image.py: Render complete HTML into a long PNG screenshot.