article-cover_skill

Overview

This skill generates professional article cover images as SVG files tailored for technical blogs, documentation, and articles. It produces social-media-friendly 1200×630 designs with clear visual hierarchy, readable typography, and tech-themed graphics. Outputs are ready to open in a browser or convert to PNG for publishing.

How this skill works

The generator builds SVGs using a standard viewBox (0 0 1200 630), layered gradients, decorative grids, and simple diagram components (boxes, arrows, badges). It places the main illustration in the top two-thirds, the title area in the bottom third, and tag pills along the bottom edge. Text sizes, contrast rules, and layout patterns (comparison, flow, centered concept) are enforced to ensure legibility and consistent brandable covers.

When to use it

• Creating cover or banner images for blog posts, tutorials, or documentation.
• Illustrating comparisons, before/after scenarios, or performance results.
• Visualizing architecture, process flows, or data summaries for articles.
• Generating lightweight SVG assets that scale for social sharing and thumbnails.
• Automating cover production for a content pipeline or static site generator.

Best practices

• Always use viewBox="0 0 1200 630" and keep 20–40px padding around text.
• Use gradients for backgrounds and title highlights; avoid flat solid fills.
• Follow text size rules: title 44–48px bold, subtitle 28–32px, tags 14–16px, never below 11px.
• Place title in the bottom third (y ≈ 420–540) and illustrations in the top two-thirds (y ≈ 80–400).
• Ensure high contrast (light text on dark gradients) and test the SVG in a browser before exporting.

Example use cases

• A performance comparison article showing Before → Middle → After panels with status icons and a 100x+ badge.
• A process or architecture post using a flow layout: Input → Process Box → Output with labeled arrows.
• A single-concept tutorial with a centered illustration and a bold gradient title.
• Batch-generating covers for a documentation site with consistent tag pills and branding accents.
• Producing social-ready banners that convert cleanly to PNG for Twitter/Open Graph previews.