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:

PlatformDimensionsPurposeXiaohongshu1080×1440 (3:4)Post coverWeChat Official Account900×500Article cover (large)WeChat Official Account (small)200×200Article cover (small)Weibo1080×1260Long image / 9-gridDouyin1080×1920 (9:16)Video coverBilibili1920×1080 (16:9)Video coverZhihu1120×630Article coverTwitter/X1200×675Tweet imageInstagram1080×1080 (1:1)Square postInstagram Story1080×1920 (9:16)StoryLinkedIn1200×627Post 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:

css

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:

bash

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

Conversion Principle:

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

Execution Command Example:

bash

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:

html

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

1. Generate HTML: Create an HTML file based on user requirements and save it to the working directory
2. Convert to PNG: Execute node scripts/html2png.js <html-file> <png-file>
3. 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:

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

Color Scheme Suggestions#

StyleGradient ColorsMotivational / Energetic#FF6B6B → #FFA500Knowledge / Education#4FACFE → #00F2FEBusiness / Professional#667EEA → #764BA2Lifestyle / Warm#FA8BFF → #2BD2FFTech / Future#0F0C29 → #302B63 → #24243ENature / Fresh#11998E → #38EF7DElegant / Minimal#E0C3FC → #8EC5FC

Notes#

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