skills.rest
jincai
jincaiCOMMUNITY
Explore all skills by this author →
GitHub

infographic

Convert articles and structured content into high-DPI PNG infographics.

18|6|Updated Mar 4, 2026
Search Tags:#mobile#playwright#sharing#screenshot#infographic#visual-summary#content-to-image
One-click install
npx skills add https://github.com/jincai/openclaw-skills --skill infographic-jincai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic
Source: https://github.com/jincai/openclaw-skills/tree/main/infographic
Command: npx skills add https://github.com/jincai/openclaw-skills --skill infographic-jincai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, curl, python3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Generate professional infographic images from articles, tweets, or any structured content. This skill helps transform long-form text into concise, shareable visuals that are optimized for mobile viewing and social platforms.

Core Features & Use Cases

  • Self-contained HTML-based infographics at 750px width designed for 3x DPR, with no external dependencies.
  • Produces high-DPI PNGs suitable for WeChat, Telegram, Twitter, and other sharing channels; supports bilingual Chinese/English content.
  • Includes a bundled workflow: content extraction, HTML design, Playwright-based screenshot, and optional Telegram lossless delivery.
  • References a design-system.md for color, typography, and component guidelines to maintain consistent visuals.

Quick Start

Provide an article or topic to convert into an infographic and Claude will generate a high-DPI PNG image using the included design system and scripts.

Frequently Asked Questions about infographic

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

FAQPage Schema
How do I turn long-form articles into mobile-friendly infographics?▼

You can turn long-form articles into mobile-friendly infographics by providing the text content to generate a self-contained 750px HTML design, which is then captured as a high-DPI PNG using Playwright.

What is the best way to create high-DPI PNG visual summaries for social sharing?▼

Creating high-DPI PNG visual summaries for social sharing is best done by rendering self-contained HTML at 3x DPR and capturing it via Playwright, producing optimized images for platforms like WeChat and Twitter.

Does this infographic generation workflow support bilingual Chinese and English content?▼

Yes, the infographic generation workflow supports bilingual Chinese and English content, allowing you to create visual summaries and knowledge cards across multilingual contexts.

Do I need Node.js and Playwright installed to generate content-to-image screenshots?▼

Yes, you need Node.js, Playwright, and a local toolchain installed to execute the content-to-image workflow, render the HTML design, and capture high-DPI screenshots.

Can I automatically deliver generated infographic images to Telegram?▼

Yes, you can automatically deliver generated infographic images to Telegram through an optional lossless delivery step included in the bundled workflow after the screenshot is captured.

Are there limitations when using HTML to create mobile infographics at 750px width?▼

When using HTML to create mobile infographics, the design is constrained to a fixed 750px width optimized for 3x DPR, meaning layouts are specifically tailored for mobile viewing rather than responsive desktop scaling.

Related Skills

Explore More Design & Creative Skills→
vm0-aivm0-ai
76

supadata

Extract video transcripts and scrape web content to Markdown via the Supadata API.

Official
Advanced
yuyuxinliyuyuxinli
1

wechat-infographic

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

Official
Advanced
BenWork17BenWork17

frontend-design

Identify UI design direction using front-end design guidelines for web interfaces.

Community
Advanced
felipesantiago-coderfelipesantiago-coder

image-generation

Generate images from text prompts via SDK or CLI with multiple output sizes.

Community
Intermediate