back
loading skill details...
Transform articles, blog posts, reports, or any text content into visually stunning, self-contained HTML infographics. Use when the user wants to convert tex...
---
name: article-to-infographic
description: Transform articles, blog posts, reports, or any text content into visually stunning, self-contained HTML infographics. Use when the user wants to convert text into an infographic, create a visual summary of an article, make a data visualization from written content, or generate an infographic from a URL, file, or pasted text. Supports multiple infographic styles (timeline, statistics, comparison, process flow, listicle) with distinctive, non-generic aesthetics.
---
# Article to Infographic
Transform any article or text content into a visually compelling, self-contained HTML infographic. Output is a single HTML file with inline CSS/JS -- zero dependencies, opens in any browser, print-ready for PDF export.
## Core Philosophy
1. **Content-First** -- Analyze the article before choosing layout.
2. **Smart Layout** -- Match infographic type to content type automatically.
3. **Distinctive Design** -- No generic AI aesthetics. Every infographic feels custom-crafted.
4. **Zero Dependencies** -- Single HTML file with inline CSS/JS.
5. **Print-Ready** -- Include print media queries for clean PDF export.
---
## Workflow Overview
**Strict 3-Step Confirmation Process:**
```
Step 1: Outline Confirmation (BLOCKING)
↓ User must confirm
Step 2a: Layout Selection (BLOCKING)
↓ User must confirm
Step 2b: Style Selection (BLOCKING)
↓ User must confirm
Step 2c: Illustrations (BLOCKING)
↓ User must confirm
Step 3: Output Format (BLOCKING)
↓ User must confirm
Generation Phase (automatic)
```
**CRITICAL RULE**: Each step requires explicit user confirmation before proceeding. Do NOT batch confirmations. Do NOT proceed to next step until current step is confirmed.
---
## Detailed Workflow
1. Acquire and analyze article content
2. Extract key information and classify content type
3. **Step 1: Present outline → Get explicit confirmation**
4. **Step 2a: Present layout options → Get explicit confirmation**
5. **Step 2b: Present style options → Get explicit confirmation**
6. **Step 2c: Present illustration options → Get explicit confirmation**
7. **Step 3: Present output format options → Get explicit confirmation**
8. Generate the HTML infographic (only after all confirmations)
9. Export to PNG if selected in Step 3
10. Deliver the final output
## Confirmation Flow Summary (For AI Reference)
When executing this skill, follow this EXACT sequence:
| Phase | Step | Action | User Confirmation Required |
|-------|------|--------|---------------------------|
| 1 | Content Acquisition | Get article URL/file/text | ❌ No |
| 2 | Content Analysis | Extract info, classify type | ❌ No |
| 2.5 | **Step 1** | Present outline table | ✅ **MUST CONFIRM** |
| 3a | **Step 2a** | Present layout options | ✅ **MUST CONFIRM** |
| 3b | **Step 2b** | Present style options | ✅ **MUST CONFIRM** |
| 3c | **Step 2c** | Present illustration options | ✅ **MUST CONFIRM** |
| 4 | **Step 3** | Present output format options | ✅ **MUST CONFIRM** |
| 5 | Generation | Create HTML | ❌ Automatic |
| 6 | Delivery | Present results | ❌ Automatic |
| 7 | PNG Export | If selected in Step 3 | ❌ Automatic |
**FORBIDDEN ACTIONS:**
- ❌ Never combine Step 1 + Step 2 confirmations
- ❌ Never combine Step 2a + 2b + 2c into one question
- ❌ Never combine Step 2 + Step 3 confirmations
- ❌ Never proceed to generation without all 3 steps confirmed
---
## Phase 1: Content Acquisition
Determine the content source:
- **URL** -- Use WebFetch to retrieve article content
- **File** -- Read the file directly
- **Pasted text** -- Use as-is
If content is ambiguous or too short, ask for clarification.
---
## Phase 2: Content Analysis
Extract from the article:
1. **Title and subtitle** -- Main topic and secondary context
2. **Key statistics** -- Numbers, percentages, data points
3. **Key points** -- 4-8 most important takeaways
4. **Quotes** -- Notable statements
5. **Comparisons** -- Before/after, pros/cons, A vs B
6. **Sequential steps** -- Process flows, timelines, chronological events
7. **Categories** -- Natural groupings
8. **Entities** -- People, organizations, places
Classify the best infographic type:
| Content Signal | Infographic Type |
|---|---|
| Dates, milestones, chronological events | **Timeline** |
| Numbers, percentages, survey data | **Statistics Dashboard** |
| A vs B, pros/cons, before/after | **Comparison** |
| Step-by-step, how-to, tutorial | **Process Flow** |
| Multiple independent tips/facts | **Listicle / Card Grid** |
| Mixed content types | **Magazine / Editorial** |
---
## Phase 2.5: Step 1 - Outline Confirmation (BLOCKING)
**⚠️ CRITICAL: Must get explicit user confirmation before proceeding to Phase 3.**
After content analysis, present the user with a structured outline in table form:
```
| Block | Content | Notes |
|---|---|---|
| Header | Title + subtitle | Top section |
| Hero Stats (3) | [stat1] / [stat2] / [stat3] | Key data highlights |
| ... | ... | ... |
```
**DO NOT proceed until user explicitly confirms.**
Using AskUserQuestion:
- Header: "Step 1/3: Outline Confirmation"
- Question: "Please review the outline above with [N] blocks. Confirm to proceed or request changes:"
- Options:
- "✅ Outline confirmed - proceed to style selection" -- ONLY THEN go to Phase 3
- "📝 Need adjustments" -- User specifies changes (add/remove/modify blocks), then RE-CONFIRM
- "🔄 Simplify to core blocks" -- Auto-trim to core blocks only, then RE-CONFIRM
**Hard rule**: If user chooses adjustments, update the outline and return to this same confirmation step. Do NOT proceed to Phase 3 until "✅ Outline confirmed" is selected.
---
## Phase 3: Step 2 - Style Selection (BLOCKING)
**⚠️ CRITICAL: Must get explicit user confirmation for BOTH layout AND style before proceeding to Phase 4.**
This phase requires **TWO separate confirmations**:
### Step 2a: Layout Selection (BLOCKING)
Using AskUserQuestion:
- Header: "Step 2a/3: Layout Selection"
- Question: "Based on your article, I recommend a **[detected type]** layout. Confirm your choice:"
- Options:
- "✅ [detected type] - recommended"
- "📊 Statistics Dashboard"
- "📅 Timeline"
- "⚖️ Comparison"
- "🔄 Process Flow"
- "📝 Listicle / Card Grid"
- "📖 Magazine / Editorial"
**STOP HERE**. Wait for user selection. Do NOT show style options yet.
### Step 2b: Style Selection (BLOCKING)
ONLY after layout is confirmed, present style options:
Using AskUserQuestion:
- Header: "Step 2b/3: Visual Style Selection"
- Question: "What visual style for the **[confirmed layout]** infographic?"
- Options (show 4-5 most relevant):
**Standard Styles:**
- "🎨 Bold & Vibrant" -- High contrast, saturated colors, strong visual impact
- "🌿 Clean & Minimal" -- Whitespace, subtle colors, elegant typography
- "🌃 Dark & Techy" -- Dark backgrounds, neon accents, modern feel
- "📰 Warm & Editorial" -- Magazine-style, warm tones, serif typography
**Premium Styles:**
- "🚀 Sci-fi HUD" -- Cyberpunk terminal, particle network, neon glow
- "💎 Premium Magazine" -- Luxury editorial, massive serif typography
- "🔮 Glassmorphism Aurora" -- Frosted glass, animated aurora blobs
**STOP HERE**. Wait for user selection.
### Step 2c: Illustrations (optional, but ASK)
Using AskUserQuestion:
- Header: "Step 2c/3: Illustrations (Optional)"
- Question: "Add illustrations to the **[confirmed style]** infographic?"
- Options:
- "🚫 No illustrations - text and data only"
- "🔹 Decorative icons - small SVG icons next to headings"
- "👤 Character illustrations - full SVG characters from open-source libraries"
**ONLY after all 2a→2b→2c are confirmed, proceed to Phase 4.**
For detailed color palettes and font pairings per style, see [references/style-presets.md](references/style-presets.md).
---
## Phase 4: Step 3 - Output Format Confirmation (BLOCKING)
**⚠️ CRITICAL: Must get explicit user confirmation for output format BEFORE generating anything.**
Using AskUserQuestion:
- Header: "Step 3/3: Output Format"
- Question: "How would you like to receive the **[confirmed style]** infographic?"
- Options:
- "📄 HTML only - single file, opens in browser"
- "🖼️ HTML + PNG - include high-res image export"
- "📦 Both formats - explicit delivery of both files"
**ONLY after output format is confirmed, proceed to Phase 5 (Generation).**
---
## Phase 5: Generate Infographic
### HTML Architecture
Single self-contained HTML file:
```html
<!DOCTYPE html>
<html lang="[content language]">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Infographic Title]</title>
<link rel="stylesheet" href="[Google Fonts / Fontshare URL]">
<style>
:root {
--bg-primary: ...; --bg-secondary: ...;
--text-primary: ...; --text-secondary: ...;
--accent-1: ...; --accent-2: ...;
--font-display: ...; --font-body: ...;
}
/* Layout, components, animations */
@media print { /* linearize, remove animations */ }
@media (prefers-reduced-motion: reduce) { /* disable animations */ }
</style>
</head>
<body>
<article class="infographic">
<header class="infographic-header">...</header>
<main class="infographic-body">...</main>
<footer class="infographic-footer">...</footer>
</article>
<script>/* Intersection Observer animations, counter effects */</script>
</body>
</html>
```
### Design Rules
**Typography:**
- Distinctive Google Fonts or Fontshare fonts -- NEVER Inter, Roboto, Arial, or system fonts
- Display font for headings, clean font for body
- Responsive sizing with `clamp()`
**Color:**
- CSS custom properties for entire palette
- Max 3-4 colors: one dominant, one accent, one-two neutrals
- WCAG AA contrast for readability
**Layout:**
- CSS Grid for overall structure, Flexbox for components
- Max-width 1200px, centered
- **Compact spacing**: Use `2-3rem` between sections, NOT 5rem+. Infographics should feel dense and information-rich, not stretched out. Header padding: 2-2.5rem. Section padding: 2-3rem. Grid gaps: 2-2.5rem.
- Responsive: stack on mobile, multi-column on desktop
**Data Visualization:**
- Pure CSS for simple charts (bar via width%, pie via conic-gradient)
- Inline SVG for complex shapes
- Animate numbers with counter effect (Intersection Observer)
- Always label data clearly
**Animations:**
- Intersection Observer triggers `.visible` class
- Stagger children with animation-delay
- Subtle fade + translateY baseline
- `prefers-reduced-motion` media query required
**Print:**
- `@media print` rules: linearize layout, remove animations, ensure readability
- Appropriate page breaks between sections
### Layout Patterns
**Timeline:**
- Vertical center line, alternating left/right entries
- Date badges on line, content cards offset
- Mobile: single-column stack
**Statistics Dashboard:**
- Hero stat at top (large number + context)
- Grid of stat cards (2-3 columns)
- CSS bar/pie charts where appropriate
- Counter animation on scroll
**Comparison:**
- Side-by-side columns with central divider
- Matching rows, color-coded sides
- Mobile: vertical stack with labels
**Process Flow:**
- Numbered steps with connecting lines/arrows
- Icon + title + description per step
- Progress indicator
**Listicle / Card Grid:**
- Numbered/icon cards in responsive grid (2-3 cols desktop, 1 mobile)
- Each card: icon/number + title + description
- Hover effects
**Magazine / Editorial:**
- Mix of full-width, card grids, pull quotes, stat highlights
- Alternate dense and spacious sections
- Strong typographic hierarchy
### Anti-Patterns -- NEVER
- Purple gradient on white background
- Generic card layouts with no visual character
- Font Awesome or emoji spam as decoration
- Flat, lifeless color schemes
- Walls of small text (defeats infographic purpose)
- Charts without labels
- Cookie-cutter layouts
---
## Phase 6: Delivery
**All 3 confirmation steps completed. Generating final output...**
Write the HTML file and present a summary:
```
✅ Infographic generated!
📄 File: [filename].html
📐 Layout: [confirmed layout]
🎨 Style: [confirmed style]
🖼️ Illustrations: [confirmed option]
📦 Output: [confirmed format]
📊 Sections: [count]
Open in browser to view. Ctrl+P / Cmd+P to save as PDF.
```
**Generation is complete. No further confirmations needed.**
---
## Edge Cases
**Short articles (< 200 words):** Compact single-section, 3-5 key points as cards.
**Long articles (> 3000 words):** Summarize to 6-10 key sections max. Prioritize data and takeaways.
**No statistics:** Focus on quotes, process flows, or listicle. Use icons instead of charts.
**Technical/code-heavy:** Code snippet sections, architecture diagrams with CSS shapes, conceptual flow.
**Non-English content:** Set `lang` attribute correctly on `<html>`. Use appropriate fonts for CJK, RTL, etc.
---
## Phase 7: PNG Export (if selected in Step 3)
After generating the HTML, if PNG was selected in Step 3, proceed with export:
### Method A: Browser tool (preferred in Claude Code / HappyCapy)
If a `browser` CLI tool is available:
1. Start a local HTTP server serving the HTML file
2. Navigate browser to the page
3. Force all `.reveal` elements to visible state (skip scroll animations)
4. Force all bar fills and counters to final values
5. Take a full-page screenshot
6. Close browser
```javascript
// JS to inject before screenshot:
document.querySelectorAll('.reveal').forEach(el => {
el.classList.add('visible');
el.style.opacity = '1';
el.style.transform = 'none';
});
document.querySelectorAll('.ba-fill, .bar-fill').forEach(bar => {
const w = bar.dataset.width;
if (w) bar.style.width = w + '%';
});
document.querySelectorAll('[data-counter]').forEach(el => {
const target = el.dataset.counter;
const suffix = el.dataset.suffix || '';
el.textContent = parseInt(target).toLocaleString() + suffix;
});
```
### Method B: Playwright script (standalone environments)
Run the bundled script:
```bash
python3 scripts/html_to_png.py infographic.html output.png --width 1200 --scale 2
```
The script uses headless Chromium via Playwright. It auto-installs dependencies if needed.
Arguments:
- `--width` : viewport width in px (default 1200)
- `--scale` : HiDPI scale factor (default 2, produces 2400px wide image)
### When to export PNG
Ask the user after HTML delivery:
- Header: "Export"
- Question: "Want a PNG image export as well?"
- Options:
- "Yes, export PNG" -- Run export
- "HTML only is fine" -- Skip
---
## OpenClaw / Non-Interactive Adaptation
When deploying to environments without interactive question-answer support (e.g., OpenClaw, API-only setups), the skill operates in **parameterized mode** where ALL options must be specified upfront.
**⚠️ CRITICAL**: In parameterized mode, you MUST provide ALL confirmations in a single prompt because the system cannot ask follow-up questions.
### Parameterized Invocation (Single Prompt)
Users must specify ALL 3 confirmation steps in one prompt:
```
Generate an infographic from [article source].
STEP 1 - OUTLINE:
[Provide your preferred outline structure, or "use auto-generated outline"]
STEP 2 - STYLE:
Layout: [timeline|statistics|comparison|process|listicle|magazine]
Style: [bold-vibrant|clean-minimal|dark-techy|warm-editorial|scifi-hud|premium-magazine|glassmorphism]
Illustrations: [none|icons|characters]
STEP 3 - OUTPUT:
Format: [html|png|both]
```
**Example complete prompt:**
```
Generate an infographic from https://example.com/article.
STEP 1: Use auto-generated outline
STEP 2:
Layout: timeline
Style: dark-techy
Illustrations: icons
STEP 3:
Format: both
```
### Parameter Reference
**Style options:**
- `bold-vibrant` -- High contrast, saturated colors
- `clean-minimal` -- Whitespace, subtle colors, serif typography
- `dark-techy` -- Dark background, neon accents
- `warm-editorial` -- Magazine-style, warm tones
- `scifi-hud` -- Cyberpunk terminal, particle network, neon glow (premium)
- `premium-magazine` -- Luxury editorial, massive serif, cream/charcoal/vermillion (premium)
- `glassmorphism` -- Frosted glass, aurora blobs, Apple-inspired depth (premium)
**Layout options:**
- `timeline` -- Chronological events
- `statistics` -- Data dashboard
- `comparison` -- Side-by-side
- `process` -- Step-by-step flow
- `listicle` -- Card grid
- `magazine` -- Mixed editorial (default for complex articles)
- `auto` -- Let the skill decide based on content analysis
**Outline adjustments** (natural language):
- "remove [block name]"
- "add [block description]"
- "replace [block] with [new content]"
- "simplify" / "expand"
**Export options:**
- `html` -- HTML only (default)
- `png` -- HTML + PNG export
- `both` -- Explicitly output both
### Fallback Behavior
If no style/layout is specified and AskUserQuestion is not available, use these defaults:
- **Layout**: `auto` (detect from content)
- **Style**: `dark-techy` for technical content, `warm-editorial` for narrative content, `bold-vibrant` for data-heavy content
- **Export**: `html` only
### Font CDN for China Deployment
When deployed behind the GFW, replace Google Fonts CDN:
```html
<!-- Instead of: -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<!-- Use mirror: -->
<link href="https://fonts.loli.net/css2?family=..." rel="stylesheet">
<!-- Or use: -->
<link href="https://fonts.font.im/css2?family=..." rel="stylesheet">
```
Alternatively, for CJK-heavy content, use system fonts as fallback:
```css
--font-heading: 'Noto Serif SC', 'STSong', 'SimSun', serif;
--font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
```
don't have the plugin yet? install it then click "run inline in claude" again.
by @freestylefly