Article To Infographic

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:

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:

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.

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:

<!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