home / skills / bahayonghang / my-claude-code-settings / article-cover

article-cover skill

safe

/content/skills/media-skills/article-cover

This skill generates professional article cover SVGs with title, subtitle, and tech-themed visuals to enhance posts.

npx playbooks add skill bahayonghang/my-claude-code-settings --skill article-cover

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

8.3 KB

---
name: article-cover
description: Generate professional article cover images as SVG files. Use when user wants to create cover/banner images for blog posts, technical articles, or documentation. Creates visually appealing covers with titles, diagrams, and tech-themed graphics.
category: content-creation
tags: [svg, graphics, cover-image, blog, design]
---

# Article Cover SVG Generation

Generate professional, visually striking article cover images in SVG format for technical blogs, documentation, and articles.

## Critical Rules

1. **ViewBox Standard**: Use `viewBox="0 0 1200 630"` (social media friendly 1.91:1 ratio)

2. **Text Readability (MUST follow)**:
   - Main title: 44-48px, bold, high contrast
   - Subtitle: 28-32px, white or light color
   - Labels/tags: 14-16px
   - Never use fonts smaller than 11px

3. **Background Design**:
   - Always use gradient backgrounds (avoid flat solid colors)
   - Dark tech themes: `#0d1117` → `#161b22` (GitHub dark style)
   - Add subtle grid patterns or decorative elements for depth

4. **Visual Hierarchy**:
   - Title area: bottom 1/3 of the image (y: 420-540)
   - Diagram/illustration area: top 2/3 (y: 80-400)
   - Tags/labels: bottom edge (y: 550-600)

5. **Color Contrast**: Ensure text is readable against backgrounds
   - Light text on dark backgrounds
   - Use gradients for emphasis (orange/yellow for tech, blue/cyan for data)

## Design Patterns

### Tech Article Cover (Comparison Layout)
Best for: Performance comparisons, version upgrades, before/after scenarios

```
┌─────────────────────────────────────────────────┐
│  [Logo]                           [Badge: 100x+]│
│                                                 │
│  ┌─────────┐    VS    ┌─────────┐    ┌────────┐│
│  │ Before  │  ────►   │ Middle  │ ►  │ After  ││
│  │  ❌     │          │   ⚠     │    │   ✓    ││
│  └─────────┘          └─────────┘    └────────┘│
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]  [Tag5]      │
└─────────────────────────────────────────────────┘
```

### Tech Article Cover (Flow Layout)
Best for: Process explanations, architecture overviews

```
┌─────────────────────────────────────────────────┐
│  [Logo]                                         │
│                                                 │
│  [Input] ──► [Process Box] ──► [Output]         │
│     │            │                │             │
│     └────────────┴────────────────┘             │
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]              │
└─────────────────────────────────────────────────┘
```

## Color System

| Purpose | Background | Stroke/Text | Use Case |
|---------|------------|-------------|----------|
| Negative/Before | `#1c2128` | `#dc3545` | Problems, old version |
| Warning/Transition | `#1c2128` | `#ffcc02` | Partial solution, v1 |
| Positive/After | `#1c2128` | `#00f2fe` | Solution, new version |
| Success | `#22863a` | `#22863a` | Checkmarks, improvements |
| Accent | `#ff6b35` → `#ffcc02` | gradient | Titles, highlights |

## SVG Template

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
  <defs>
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0d1117"/>
      <stop offset="100%" style="stop-color:#161b22"/>
    </linearGradient>
    <!-- Title gradient (orange/yellow for tech) -->
    <linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff6b35"/>
      <stop offset="100%" style="stop-color:#ffcc02"/>
    </linearGradient>
    <!-- Glow effect for emphasis -->
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="1200" height="630" fill="url(#bgGradient)"/>

  <!-- Top accent bar -->
  <rect x="0" y="0" width="1200" height="5" fill="url(#titleGradient)"/>

  <!-- Logo area (top-left) -->
  <g transform="translate(50, 30)">
    <!-- Logo elements here -->
  </g>

  <!-- Main illustration area (center) -->
  <g transform="translate(600, 220)">
    <!-- Diagram/comparison elements here -->
  </g>

  <!-- Main title -->
  <text x="600" y="450" fill="url(#titleGradient)"
        font-family="Arial, sans-serif" font-size="46"
        text-anchor="middle" font-weight="bold">
    Article Title Here
  </text>

  <!-- Subtitle -->
  <text x="600" y="510" fill="#fff"
        font-family="Arial, sans-serif" font-size="28"
        text-anchor="middle">
    Subtitle or Description
  </text>

  <!-- Bottom tags -->
  <g transform="translate(600, 580)">
    <!-- Tag pills here -->
  </g>
</svg>
```

## Element Templates

### Comparison Box (with status icon)
```svg
<g transform="translate(X, Y)">
  <rect x="0" y="0" width="300" height="180" rx="10"
        fill="#1c2128" stroke="#COLOR" stroke-width="2"/>
  <text x="150" y="30" fill="#COLOR" font-size="17"
        text-anchor="middle" font-weight="bold">ICON Title</text>
  <!-- Content here -->
</g>
```

Status icons: `❌` (negative), `⚠` (warning), `✓` (positive)

### Performance Badge
```svg
<g transform="translate(X, Y)">
  <rect x="-60" y="-25" width="140" height="50" rx="25"
        fill="#00f2fe" opacity="0.15" stroke="#00f2fe" stroke-width="2"/>
  <text x="10" y="8" fill="#00f2fe" font-size="28"
        text-anchor="middle" font-weight="bold">100x+</text>
</g>
```

### Tag Pill
```svg
<rect x="X" y="-22" width="100" height="36" rx="18"
      fill="transparent" stroke="#COLOR" stroke-width="2"/>
<text x="X+50" y="4" fill="#COLOR" font-size="14"
      text-anchor="middle" font-weight="bold">TagName</text>
```

### Arrow (with label)
```svg
<g transform="translate(X, Y)">
  <path d="M 0 0 L 35 0" stroke="#COLOR" stroke-width="3" fill="none"/>
  <polygon points="35,0 25,-6 25,6" fill="#COLOR"/>
</g>
```

### Data Bar (for showing proportions)
```svg
<rect x="X" y="Y" width="WIDTH" height="12" rx="2"
      fill="#COLOR" opacity="0.8"/>
```

## Workflow

1. **Understand the article**: What's the main topic? Is it a comparison, tutorial, or overview?

2. **Choose layout pattern**:
   - Comparison → Use 2-3 column comparison layout
   - Process/Flow → Use flow diagram layout
   - Single concept → Use centered illustration

3. **Extract key elements**:
   - Main title (keep concise, 10-15 Chinese chars or 5-8 English words)
   - Subtitle (descriptive, can be longer)
   - Key metrics (performance numbers, version info)
   - Tags (3-5 relevant keywords)

4. **Design the illustration**:
   - Use simple shapes (rectangles, arrows)
   - Show the core concept visually
   - Use color to differentiate states/versions

5. **Generate SVG**: Follow the template, ensure all text is readable

## Output

- Filename: `{article-slug}-cover.svg`
- Location: Same directory as the article or `assets/` folder
- Tell user: Can be opened in browser, converted to PNG via Inkscape/browser screenshot

## Tips

- **Chinese text**: Use `font-family="Arial, sans-serif"` which has good CJK support
- **Emphasis**: Use `filter="url(#glow)"` sparingly on key elements
- **Spacing**: Keep 20-40px padding around text elements
- **Testing**: Open SVG in browser to verify rendering before finalizing

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.

FAQ

What file name and location should I use for the generated SVG?

Name the file {article-slug}-cover.svg and place it next to the article or in an assets/ folder.

How do I convert the SVG to PNG?

Open the SVG in a browser and take a screenshot or use a converter like Inkscape to export a PNG.