Social Media Cover Generator — Social Media Cover 生成器

Social Media Cover Image 生成器

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

Use Cases User 请求s to 生成 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 创建 images for specific 平台s (Xiaohongshu, WeChat, Weibo, Douyin, Bilibili, Zhihu, Twitter, Instagram, LinkedIn) 工作流

• Confirm 平台 and Dimensions

Use the following pre设置 dimensions (width×height, in pixels) based on the 平台 specified by the user:

平台 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 平台, default to Xiaohongshu 1080×1440.

• De签名 and 生成 HTML Page

De签名 a visually 应用ealing HTML page based on the title content, then call the conversion script to 生成 a PNG.

De签名 Principles:

Strong visual impact with prominent titles Harmonious color schemes suitable for the tar获取 平台's style 应用ropriate 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 cor响应s to 应用roximately 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;

• Automatically 生成 PNG Image

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

node scripts/html2png.js <输入.html> [输出.png]

Conversion Principle:

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

Execution Command Example:

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

• Return 结果s

Return the path of the 生成d PNG image to the user.

HTML Template

The 生成d HTML file must contAIn the following structure:

Key Requirements:

Must include snapdom: Cover contAIner must have id="cover" Styles must be inline in the HTML Complete Execution Flow 生成 HTML: 创建 an HTML file based on user requirements and save it to the working directory Convert to PNG: 执行 node scripts/html2png.js Return 结果s: 信息rm the user of the PNG file path Usage Example

User 输入:

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

Execution Flow:

Confirm 平台: Xiaohongshu → 1080×1440 生成 HTML: cover_xiaohongshu_5habits.html 执行 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 / Ener获取ic #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 系统 fonts for Chinese to ensure compatibility Image Dimensions: Strictly follow 平台 requirements to avoid cropping Title Length: Recommended to not exceed 20 characters;