A sophisticated tool that converts HTML and CSS templates into professional 800x1000px vertical images for social media using browser-based screenshots.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install xiaohongshu-image-generator
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install xiaohongshu-image-generator using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Xiaohongshu Image Generator?
The Xiaohongshu Image Generator is a specialized tool within the Openclaw Skills ecosystem designed to bridge the gap between structured data and high-quality visual content. By utilizing a web-centric approach, this skill allows AI agents to generate aesthetically pleasing social media posts that feature perfect text alignment, custom gradients, and modern UI components.
Rather than relying on unpredictable image generation models, this skill uses the precision of frontend technologies. It generates dynamic HTML content, styles it with modern CSS, and uses browser automation to capture pixel-perfect snapshots. This ensures that every generated image meets the specific branding and layout requirements typical of high-engagement social platforms.
Xiaohongshu Image Generator Use Cases
- Creating vertical cover cards for social media posts that require high visual impact.
- Automating the production of marketing assets using standardized HTML templates.
- Generating data-driven infographics or quote cards for digital marketing campaigns.
- Designing consistent visual layouts for AI-generated content across social platforms.
How Xiaohongshu Image Generator Works
- The agent analyzes the user request to extract key visual elements like text, color preferences, and style.
- It dynamically constructs an HTML file based on pre-defined templates located in the assets directory.
- A local HTTP server is launched to serve the generated HTML content.
- The agent uses a browser automation tool to open the local URL and waits for all assets to render.
- A high-resolution screenshot is captured, targeting the specific dimensions of the social media card.
- The resulting image path is returned for final delivery or further processing.
Xiaohongshu Image Generator Setup
To integrate this capability into your workflow using Openclaw Skills, follow these setup steps. Ensure you have a browser automation tool and a Python environment ready.
# 1. Prepare your HTML/CSS template in the assets/templates/ folder
# 2. Start a local HTTP server on a specific port (e.g., 8765)
python3 -m http.server 8765
# 3. Use the browser tool to navigate to the template
browser action=open url=http://localhost:8765/template.html
# 4. Wait for the DOM to fully render
sleep 2
# 5. Capture the vertical screenshot
browser action=screenshot targetId=<tab-id>
Xiaohongshu Image Generator Data Schema & Taxonomy
The skill follows a strict data and visual schema to maintain the quality expected from professional Openclaw Skills. The following table outlines the design specifications:
| Specification | Value | Description |
|---|---|---|
| Resolution | 800x1000px | The standard vertical aspect ratio for Xiaohongshu notes. |
| Layout Engine | CSS Flexbox | Used to ensure content is perfectly centered and responsive. |
| Backgrounds | CSS Gradients | Recommended use of linear-gradients (e.g., 135deg) for a modern look. |
| UI Components | .card class | Includes 32px border-radius and multi-layered box shadows for depth. |
Xiaohongshu Image Generator Advanced Features
- Custom CSS Variable Support: Easily swap brand colors and fonts during the HTML generation phase.
- Dynamic Content Injection: Replace placeholders in HTML templates with real-time data or AI-generated text.
- Multi-Agent Compatibility: Works seamlessly with browser-enabled AI agents to automate the entire design-to-post pipeline.
- Precise Text Rendering: Unlike generative AI, this skill ensures that all text is legible and follows specific typography rules.
- Automated Screenshot Delays: Built-in wait times ensure that heavy assets or web fonts are fully loaded before capture.
SKILL.md
Loading
Related Openclaw Skills
Writing Better Skills
A professional framework and control plane for authoring, organizing, and validating high-quality AI agent skills.
OCT Helper
OCT Helper is a desktop terminal that allows you to control your computer, manage files, and automate development tasks through natural language conversations.
Focus Tree
Maintain persistent agent focus and hierarchical task tracking to prevent context drift during long projects.
CRISPR sgRNA Designer
A professional-grade CRISPR sgRNA design tool optimized for high-GC viral and microbial genomes with specialized scoring and off-target analysis.
A-Share LOF Arbitrage Monitor
An automated financial monitoring tool designed to detect price discrepancies between on-market and off-market A-Share LOF funds.
CLI-Anything for Openclaw
A specialized methodology and toolkit for generating, refining, and packaging agent-usable command-line interfaces for existing software and codebases.
Featured*
