{"skill":{"slug":"social-media-cover-generator","displayName":"Social Media Cover Generator","summary":"Social media cover image generator. Generates HTML pages based on title content and automatically converts them to PNG images, suitable for creating cover im...","description":"---\nname: social-media-cover-generator\ndescription: 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.\n---\n\n# Social Media Cover Image Generator\n\nGenerate beautiful HTML pages based on title content and automatically convert them to PNG images.\n\n## Use Cases\n\n- User requests to generate social media covers, social media graphics, or article cover images\n- User mentions keywords such as \"cover image,\" \"graphic,\" \"social media image,\" or \"self-media image\"\n- User needs to create images for specific platforms (Xiaohongshu, WeChat, Weibo, Douyin, Bilibili, Zhihu, Twitter, Instagram, LinkedIn)\n\n\n## Workflow\n\n### 1. Confirm Platform and Dimensions\n\nUse the following preset dimensions (width×height, in pixels) based on the platform specified by the user:\n\n| Platform | Dimensions | Purpose |\n|----------|-----------|---------|\n| Xiaohongshu | 1080×1440 (3:4) | Post cover |\n| WeChat Official Account | 900×500 | Article cover (large) |\n| WeChat Official Account (small) | 200×200 | Article cover (small) |\n| Weibo | 1080×1260 | Long image / 9-grid |\n| Douyin | 1080×1920 (9:16) | Video cover |\n| Bilibili | 1920×1080 (16:9) | Video cover |\n| Zhihu | 1120×630 | Article cover |\n| Twitter/X | 1200×675 | Tweet image |\n| Instagram | 1080×1080 (1:1) | Square post |\n| Instagram Story | 1080×1920 (9:16) | Story |\n| LinkedIn | 1200×627 | Post image |\n\nIf the user does not specify a platform, default to **Xiaohongshu 1080×1440**.\n\n### 2. Design and Generate HTML Page\n\nDesign a visually appealing HTML page based on the title content, then call the conversion script to generate a PNG.\n\n**Design Principles:**\n- Strong visual impact with prominent titles\n- Harmonious color schemes suitable for the target platform's style\n- Appropriate whitespace to avoid clutter\n- Support for Chinese fonts\n- **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)\n\n**Required Elements:**\n- Title text (large, prominent)\n- Background (gradient, solid color, or pattern)\n- Decorative elements (optional: shapes, lines, icons)\n\n**Font Recommendations:**\n```css\nfont-family: \"PingFang SC\", \"Microsoft YaHei\", \"Helvetica Neue\", sans-serif;\n```\n\n### 3. Automatically Generate PNG Image\n\nUse the `scripts/html2png.js` script to automatically convert HTML to PNG:\n\n```bash\nnode scripts/html2png.js [output.png]\n```\n\n**Conversion Principle:**\n1. Launch a headless browser using Puppeteer\n2. Load the HTML file\n3. Use snapdom to render the `#cover` element to canvas\n4. Export as a PNG file\n\n**Execution Command Example:**\n```bash\nnode scripts/html2png.js cover.html cover.png\n```\n\n### 4. Return Results\n\nReturn the path of the generated PNG image to the user.\n\n## HTML Template\n\nThe generated HTML file must contain the following structure:\n\n```html\n\n\n\n \n Cover Image\n \n \n\n\n \n
\n
{TITLE}
\n
\n\n\n```\n\n**Key Requirements:**\n- Must include snapdom: ``\n- Cover container must have `id=\"cover\"`\n- Styles must be inline in the HTML\n\n## Complete Execution Flow\n\n1. **Generate HTML**: Create an HTML file based on user requirements and save it to the working directory\n2. **Convert to PNG**: Execute `node scripts/html2png.js `\n3. **Return Results**: Inform the user of the PNG file path\n\n## Usage Example\n\n**User Input:**\n> Help me generate a Xiaohongshu cover image with the title \"5 Habits to Make You More Disciplined\"\n\n**Execution Flow:**\n1. Confirm platform: Xiaohongshu → 1080×1440\n2. Generate HTML: `cover_xiaohongshu_5habits.html`\n3. Execute conversion: `node scripts/html2png.js cover_xiaohongshu_5habits.html cover_xiaohongshu_5habits.png`\n4. Return: `cover_xiaohongshu_5habits.png`\n\n## Color Scheme Suggestions\n\n| Style | Gradient Colors |\n|-------|-----------------|\n| Motivational / Energetic | `#FF6B6B → #FFA500` |\n| Knowledge / Education | `#4FACFE → #00F2FE` |\n| Business / Professional | `#667EEA → #764BA2` |\n| Lifestyle / Warm | `#FA8BFF → #2BD2FF` |\n| Tech / Future | `#0F0C29 → #302B63 → #24243E` |\n| Nature / Fresh | `#11998E → #38EF7D` |\n| Elegant / Minimal | `#E0C3FC → #8EC5FC` |\n\n## Notes\n\n1. **Font Rendering**: Use system fonts for Chinese to ensure compatibility\n2. **Image Dimensions**: Strictly follow platform requirements to avoid cropping\n3. **Title Length**: Recommended to not exceed 20 characters; wrap to a new line if exceeded\n4. **Contrast**: Ensure sufficient contrast between text and background for clear readability\n5. **id=\"cover\"**: The cover container must have this id; otherwise the conversion script will not work","topics":["LinkedIn","Twitter","WeChat"],"tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":373,"installsAllTime":14,"installsCurrent":0,"stars":0,"versions":1},"createdAt":1777602429455,"updatedAt":1778492818233},"latestVersion":{"version":"1.0.0","createdAt":1777602429455,"changelog":"- Initial release of social-media-cover-generator.\n- Generates platform-optimized social media cover images by converting user-supplied titles into HTML and PNGs.\n- Supports presets for Xiaohongshu, WeChat, Weibo, Douyin, Bilibili, Zhihu, Twitter/X, Instagram, and LinkedIn.\n- Includes design templates, font recommendations, and color schemes for visually appealing results.\n- Automates HTML to PNG conversion using a built-in script and Puppeteer.","license":"MIT-0"},"metadata":null,"owner":{"handle":"openlark","userId":"s1727wv2g20pc729snzcm4nf8183hy72","displayName":"OpenLark","image":"https://avatars.githubusercontent.com/u/260858787?v=4"},"moderation":null}