wechat-infographic

What problem does it solve?

Converts HTML/CSS infographic designs into WeChat-ready static images and inline HTML so designers can produce high-quality mobile screenshots and shareable graphics without building an app or custom export pipeline. It removes the friction of matching mobile viewport, retina export, and WeChat editor constraints while preserving brand visuals and SVG clarity.

Core Features & Use Cases

• Pixel-perfect mobile export: Templates and guidance for a 390px viewport and deviceScaleFactor 3 to produce 1170px-wide Retina PNGs suitable for Moments and group shares.
• Design system & components: Predefined patterns (grid visualizations, stat cards, callouts, summaries, legends, brand footer) and spacing/color rules to keep visuals consistent.
• WeChat compatibility: Checklist and transformation rules to convert CSS-variable-based HTML into inline-styled, WeChat-friendly HTML and guidance for inline SVG usage.
• Use Case: Produce a branded long-form infographic PNG for a product update or a WeChat inline article version that preserves SVG diagrams and layout fidelity.

Quick Start

Generate an HTML infographic optimized for a 390px mobile viewport and export a full-page 3x Retina PNG using Playwright.