Openclaw-skills infographic

install

source · Clone the upstream repo

git clone https://github.com/jincai/openclaw-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/jincai/openclaw-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/infographic" ~/.claude/skills/jincai-openclaw-skills-infographic && rm -rf "$T"

OpenClaw · Install into ~/.openclaw/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/jincai/openclaw-skills "$T" && mkdir -p ~/.openclaw/skills && cp -r "$T/infographic" ~/.openclaw/skills/jincai-openclaw-skills-infographic && rm -rf "$T"

manifest: infographic/SKILL.md

source content

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
```
<style>
```
— no external files, no Google Fonts CDN

Chinese font stack:

-apple-system, 'PingFang SC', 'Noto Sans SC', sans-serif

Layout pattern (adapt to content):

Header: badge + title + subtitle + divider
Callout box: core thesis in yellow box with gold left border
Content cards: numbered sections with colored accent circles
Takeaway box: dark background, key conclusions
Footer: source attribution + brand

Use the design system reference for exact colors, spacing, and component HTML.

Step 3: Screenshot with Playwright

Use the bundled screenshot script:

node {baseDir}/scripts/screenshot.js /tmp/infographic.html /path/to/output.png 3 750

Arguments:

<input.html> <output.png> [scaleFactor=3] [viewportWidth=750]

The script automatically finds Playwright in the npx cache or global install.

If the script fails, use this inline approach:

NODE_PATH=$(find ~/.npm/_npx -name "index.mjs" -path "*/playwright/*" -exec dirname {} \; -exec dirname {} \; 2>/dev/null | head -1) \
node -e "
const pw = require('playwright');
(async () => {
  const browser = await pw.chromium.launch();
  const ctx = await browser.newContext({ viewport: { width: 750, height: 600 }, deviceScaleFactor: 3 });
  const page = await ctx.newPage();
  await page.goto('file:///tmp/infographic.html', { waitUntil: 'networkidle' });
  await page.locator('body').screenshot({ path: 'OUTPUT.png', type: 'png' });
  await browser.close();
})();
"

Never use

npx playwright screenshot

CLI — it doesn't support

deviceScaleFactor

and produces blurry 1x images.

Step 4: Deliver

Telegram delivery (lossless):

OpenClaw's

message send

routes

.png

files through Telegram's

sendPhoto

API, which compresses images to max 2048px on the longest side. To deliver the original high-res image, use

sendDocument

directly:

bash {baseDir}/scripts/send_telegram.sh /path/to/output.png "Caption text"

Or with the

message

tool if the platform doesn't compress (Discord, etc.), just send normally.

Other platforms: Most platforms preserve document uploads. Use the

message

tool with

filePath

for non-Telegram delivery.

Design Principles

Scannable, not readable — if someone has to zoom in to read, there's too much text
Visual hierarchy — title → callout → numbered cards → takeaway. Eyes should flow top-to-bottom naturally
Consistent color coding — each section gets one accent color from the palette, don't mix randomly
Mobile-first — 750px width at 3x = 2250px physical. Looks crisp on any phone
Self-contained — single HTML file, no external resources, works offline

Customization

For English-only content: same layout, adjust font stack to include serif options
For data-heavy content: use the 2×2 grid pattern or horizontal bar charts in CSS
For comparison content: use side-by-side dark cards in the takeaway section
For longer articles (7+ sections): consider splitting into 2 images or using a more compact card style

Requirements

Node.js (any recent version)
Playwright with Chromium (
```
npx playwright install chromium
```
)
For Telegram lossless delivery:
```
curl
```
+ bot token in
```
~/.openclaw/openclaw.json
```