Infographic Skill

Create professional, mobile-friendly infographic images from structured content using HTML + Playwright screenshot.

When to Use

User shares an article/tweet and asks for an infographic or visual summary
User wants a shareable image for WeChat groups, Telegram, Twitter, etc.
User asks for a "knowledge card", "one-pager", or "visual breakdown"

Workflow

Article/Content → Extract Key Points → Design HTML → Screenshot (3x) → Deliver PNG

Step 1: Extract & Structure Content

Analyze the source material and identify:

Title (bilingual if applicable: Chinese primary, English subtitle)
Core thesis (1-2 sentence summary for callout box)
Main sections (3-7 sections, each with title + 1-3 bullet points)
Key insight or takeaway (for the dark bottom section)
Source attribution (author, platform, URL)

Keep text concise — infographics are scannable, not readable. If a section needs more than 3 short lines, split it.

Step 2: Design the HTML

Create a single self-contained HTML file (no external dependencies). Read {baseDir}/references/design-system.md for the full color palette, typography, and component library.

Page setup:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  width: 750px;
  background: #faf6f0;
  font-family: -apple-system, 'PingFang SC', 'Noto Sans SC', sans-serif;
  padding: 44px 40px;
}
</style>
</head>

Key rules:

Width: always 750px (renders to 2250px at 3x — optimal for mobile)
No fixed height — content determines length, no wasted whitespace
Minimum font size: 12px (renders to 36px physical pixels at 3x)
Background: #faf6f0 (cream) or #fff — never transparent
All CSS inline in

Main infographic

概述

Infographic Skill

When to Use

Workflow

Step 1: Extract & Structure Content

Step 2: Design the HTML