Metadata

name: social-media-cover-generator
description: Social media cover image generator. Generates HTML pages based on title content and automatically converts them to PNG images, suitable for creating cover images and graphics for platforms such as Xiaohongshu, WeChat Official Accounts, Weibo, Douyin, Bilibili, Zhihu, Twitter/X, Instagram, and LinkedIn.

Social Media Cover Image Generator

Generate beautiful HTML pages based on title content and automatically convert them to PNG images.

Use Cases

User requests to generate social media covers, social media graphics, or article cover images
User mentions keywords such as "cover image," "graphic," "social media image," or "self-media image"
User needs to create images for specific platforms (Xiaohongshu, WeChat, Weibo, Douyin, Bilibili, Zhihu, Twitter, Instagram, LinkedIn)

Workflow

1. Confirm Platform and Dimensions

Use the following preset dimensions (width×height, in pixels) based on the platform specified by the user:

Platform	Dimensions	Purpose
Xiaohongshu	1080×1440 (3:4)	Post cover
WeChat Official Account	900×500	Article cover (large)
WeChat Official Account (small)	200×200	Article cover (small)
Weibo	1080×1260	Long image / 9-grid
Douyin	1080×1920 (9:16)	Video cover
Bilibili	1920×1080 (16:9)	Video cover
Zhihu	1120×630	Article cover
Twitter/X	1200×675	Tweet image
Instagram	1080×1080 (1:1)	Square post
Instagram Story	1080×1920 (9:16)	Story
LinkedIn	1200×627	Post image

If the user does not specify a platform, default to Xiaohongshu 1080×1440.

2. Design and Generate HTML Page

Design a visually appealing HTML page based on the title content, then call the conversion script to generate a PNG.

Design Principles:

Strong visual impact with prominent titles
Harmonious color schemes suitable for the target platform's style
Appropriate whitespace to avoid clutter
Support for Chinese fonts
Text content width occupies 80% of container width: Control via font size (title font size = container width × 0.067 × 1.5 = container width × 0.1005; e.g., 1080px width corresponds to approximately 108px font size)

Required Elements:

Title text (large, prominent)
Background (gradient, solid color, or pattern)
Decorative elements (optional: shapes, lines, icons)

Font Recommendations:

font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;

3. Automatically Generate PNG Image

Use the scripts/html2png.js script to automatically convert HTML to PNG:

node scripts/html2png.js <input.html> [output.png]

Conversion Principle:

Launch a headless browser using Puppeteer
Load the HTML file
Use snapdom to render the #cover element to canvas
Export as a PNG file

Execution Command Example:

node scripts/html2png.js cover.html cover.png

4. Return Results

Return the path of the generated PNG image to the user.

HTML Template

The generated HTML file must contain the following structure:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Cover Image</title>
  <script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f0f0f0;
    }
    
    /* Must have a container with id="cover" */
    .cover {
      width: {WIDTH}px;
      height: {HEIGHT}px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px;
    }
    
    .title {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 108px;  /* Font size = container width × 0.1005 (approximately 80% width, 1.5x scaling) */
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- Must have id="cover" -->
  <div class="cover" id="cover">
    <div class="title">{TITLE}</div>
  </div>
</body>
</html>

Key Requirements:

Must include snapdom: <script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>
Cover container must have id="cover"
Styles must be inline in the HTML

Complete Execution Flow

Generate HTML: Create an HTML file based on user requirements and save it to the working directory
Convert to PNG: Execute node scripts/html2png.js <html-file> <png-file>
Return Results: Inform the user of the PNG file path

Usage Example

User Input:

Help me generate a Xiaohongshu cover image with the title "5 Habits to Make You More Disciplined"

Execution Flow:

Confirm platform: Xiaohongshu → 1080×1440
Generate HTML: cover_xiaohongshu_5habits.html
Execute conversion: node scripts/html2png.js cover_xiaohongshu_5habits.html cover_xiaohongshu_5habits.png
Return: cover_xiaohongshu_5habits.png

Color Scheme Suggestions

Style	Gradient Colors
Motivational / Energetic	`#FF6B6B → #FFA500`
Knowledge / Education	`#4FACFE → #00F2FE`
Business / Professional	`#667EEA → #764BA2`
Lifestyle / Warm	`#FA8BFF → #2BD2FF`
Tech / Future	`#0F0C29 → #302B63 → #24243E`
Nature / Fresh	`#11998E → #38EF7D`
Elegant / Minimal	`#E0C3FC → #8EC5FC`

Notes

Font Rendering: Use system fonts for Chinese to ensure compatibility
Image Dimensions: Strictly follow platform requirements to avoid cropping
Title Length: Recommended to not exceed 20 characters; wrap to a new line if exceeded
Contrast: Ensure sufficient contrast between text and background for clear readability
id="cover": The cover container must have this id; otherwise the conversion script will not work

Social Media Cover Generator

安装技能