skills.rest
yuyuxinli
yuyuxinliOFFICIAL
Explore all skills by this author →
GitHub

wechat-infographic

Convert HTML and CSS infographics into WeChat-ready PNGs and inline HTML.

1|1|Updated Mar 29, 2026
Search Tags:#playwright#svg#wechat#infographic#mobile-design#retina-screenshot
One-click install
npx skills add https://github.com/yuyuxinli/moodcoco --skill wechat-infographic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wechat-infographic
Source: https://github.com/yuyuxinli/moodcoco/tree/main/.claude/skills/wechat-infographic
Command: npx skills add https://github.com/yuyuxinli/moodcoco --skill wechat-infographic

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about wechat-infographic

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I export an HTML infographic as a high-resolution mobile PNG for WeChat sharing?▼

To export an HTML infographic as a high-resolution mobile PNG for WeChat sharing, use Playwright to capture a full-page screenshot. Configure a 390px viewport and deviceScaleFactor 3 to generate 1170px-wide Retina PNGs suitable for Moments and group shares.

Does WeChat inline HTML support CSS variables for infographic layouts?▼

WeChat inline HTML does not support CSS variables for infographic layouts. You must convert CSS-variable-based HTML into inline-styled HTML using specific transformation rules to ensure WeChat compatibility and render styles correctly within the editor.

What is the best way to include SVG diagrams in WeChat infographic articles?▼

The best way to include SVG diagrams in WeChat infographic articles is to use inline SVG support. Converting external SVG references into inline SVG code ensures your visual data diagrams maintain clarity and layout fidelity when viewed on mobile devices.

Can I use Playwright to generate static long-form PNGs from mobile CSS designs?▼

Yes, you can use Playwright to generate static long-form PNGs from mobile CSS designs. It captures full-page exports of your HTML designs by applying predefined patterns like grid visualizations, stat cards, and brand footers to produce pixel-perfect mobile images.

Why does my WeChat infographic layout break when pasting HTML into the editor?▼

Your WeChat infographic layout breaks when pasting HTML into the editor because WeChat strips external CSS and variable definitions. Converting your CSS to inline styles and ensuring all visual rules are directly applied to HTML elements prevents this layout fidelity loss.

What viewport width should I use for mobile-first infographic design?▼

You should use a 390px viewport width for mobile-first infographic design. This standard mobile viewport size, combined with specific spacing and color rules, ensures your stat cards and data visualizations display correctly before exporting to a Retina PNG.

Related Skills

Explore More Design & Creative Skills→
laravellaravel
3.6k

tailwindcss-development

Apply Tailwind CSS v4 utilities for styling and responsive layouts.

Official
Intermediate
acefrost511acefrost511

md2wechat

Convert Markdown articles into WeChat-compatible HTML with inline styles.

Community
Intermediate
onbluerosesonblueroses
3

mobile-preview

Capture mobile viewport screenshots of web pages to test responsiveness.

Community
Basic
kk580kkkk580kk
1

pptx-posters

Create PPTX research posters with AI-generated graphics and predefined templates.

Community
Advanced