Install
openclaw skills install @openlark/social-media-cover-generatorSocial 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.
openclaw skills install @openlark/social-media-cover-generatorGenerate beautiful HTML pages based on title content and automatically convert them to PNG images.
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) |
| 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 |
| 1080×1080 (1:1) | Square post | |
| Instagram Story | 1080×1920 (9:16) | Story |
| 1200×627 | Post image |
If the user does not specify a platform, default to Xiaohongshu 1080×1440.
Design a visually appealing HTML page based on the title content, then call the conversion script to generate a PNG.
Design Principles:
Required Elements:
Font Recommendations:
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
Use the scripts/html2png.js script to automatically convert HTML to PNG:
node scripts/html2png.js <input.html> [output.png]
Conversion Principle:
#cover element to canvasExecution Command Example:
node scripts/html2png.js cover.html cover.png
Return the path of the generated PNG image to the user.
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:
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>id="cover"node scripts/html2png.js <html-file> <png-file>User Input:
Help me generate a Xiaohongshu cover image with the title "5 Habits to Make You More Disciplined"
Execution Flow:
cover_xiaohongshu_5habits.htmlnode scripts/html2png.js cover_xiaohongshu_5habits.html cover_xiaohongshu_5habits.pngcover_xiaohongshu_5habits.png| 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 |