WeChat Official Account Typesetting Master

The Problem: Engineering Challenges in WeChat Typesetting

WeChat Official Account typesetting often feels like a technical skirmish against browser quirks, platform limitations, and the need for clear visual hierarchy. Converting Markdown or plain text into WeChat-compatible HTML is far more than a simple tag replacement exercise. It requires understanding the inherent structure of the content—where the core argument lies, what are the supporting details—and translating that into a legible visual rhythm. Simultaneously, the output HTML must be robust enough to survive WeChat's editor without relying on complex CSS, external fonts, or JavaScript that get stripped or break upon copy-paste.

Manual handling frequently leads to pitfalls: inconsistent heading levels causing reader fatigue, long unbroken paragraphs with oppressive density, styling that collapses in the WeChat editor, or over-designed templates that distract from the content itself.

How the Skill Works: A Principles-Driven Workflow

The WeChat Official Account Typesetting Master operates on a core set of principles: content temperament × reading rhythm × WeChat compatibility × replicability. It is not a dumb format converter but an analytical engine.

Its default workflow is a closed loop:

1. Analysis & Identification: First, it parses the input (Markdown, plain text, or existing HTML) to identify the complete structural map: titles (H1-H3), lists, steps, quotes, tables, images, code blocks, and more.
2. Intelligent Structuring: In a conservative manner, it automatically refines the structure. For instance, it may organize parallel sentences into a list, format obvious procedural paragraphs into step components, recognize figure captions below images, and add lightweight dividers at section transitions. The principle is strict: it does not alter facts, conclusions, or viewpoints. It only optimizes for readability.
3. Style Decision: Based on the content type (e.g., tech, business, culture) or an explicit user command, it selects from 32 built-in themes. These themes are not mere color schemes; they define the entire visual language—heading styles (e.g., underlines, background blocks), text density, container rounding, and component styling (for quotes, code blocks, etc.).
4. Rendering & Validation: The output uses simple HTML tags and inline styles to ensure maximum WeChat compatibility. Before delivery, it runs a mandatory 10-point diagnostic check, flagging issues like unclosed tags, high-risk CSS (position: fixed), invalid image links, and severe heading level skips, assigning a risk grade (PASS, CHECK, or BLOCK).

Applicability and Key Constraints

The skill explicitly defines its boundaries to ensure predictable output:

• Safe Mode: When the user specifies "don't change the text," it enters a strict mode, allowing only formatting adjustments and zero content modification.
• Transparent Rollback: All intelligent structuring steps preserve the original draft and never overwrite the user's source file.
• Deliverables: At minimum, it outputs the typeset article.html and a diagnostic report (article.diagnosis.md). Depending on the environment, it may also generate a structured intermediate draft or a visual preview.
• Non-Goals: It does not apply arbitrary heavy bolding, fabricate subheadings or summaries, force complex tables into images, or auto-generate fake link summaries.

In essence, it is a tool that respects content and focuses on solving the specific engineering challenges of the WeChat ecosystem, rather than being a general-purpose web designer. Its value lies in automating the tedious and error-prone process of ensuring typographic compatibility with WeChat, allowing creators and developers to focus on what matters most: the content.