A high-precision Chinese vertical image generation skill for Openclaw Skills that uses Playwright and HTML/CSS to create pixel-perfect infographics.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install chinese-image-gen
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 chinese-image-gen 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 Chinese Vertical Image Generation?
This skill provides a specialized solution for generating high-quality Chinese vertical images (750×1334px) specifically designed for social media platforms. Unlike standard AI image generators that often struggle with Chinese text accuracy, this component of Openclaw Skills leverages browser rendering technology to ensure 100% font precision and CSS-based layout control. It is the ideal tool for developers needing to automate the creation of data cards, infographics, and social media assets where text readability is non-negotiable.
Chinese Vertical Image Generation Use Cases
- Creating automated weekly or monthly data reports for token consumption and API costs.
- Generating comparison cards for AI model pricing and product specifications.
- Building social media infographics for platforms like Toutiao or WeChat with embedded code snippets.
- Producing high-resolution knowledge-sharing cards that require pixel-perfect Chinese typography.
How Chinese Vertical Image Generation Works
- The skill receives content data and populates a predefined HTML template with inline CSS styles.
- It connects to the Google Fonts CDN to load the Noto Sans SC typeface, avoiding common system font glyph bugs.
- A headless Chromium instance is launched via Playwright to render the content within a specific 750×1334px viewport.
- The system waits for the network to go idle and for fonts to load before capturing a high-resolution screenshot.
- The final image is exported as a PNG file, ensuring that all Chinese characters and data visualizations are rendered with absolute precision.
Chinese Vertical Image Generation Setup
To integrate this capability into your Openclaw Skills workflow, install the necessary dependencies and the Chromium browser engine:
pip install playwright
playwright install chromium
Chinese Vertical Image Generation Data Schema & Taxonomy
The skill organizes its output based on the following design specifications and metadata:
| Element | Specification | Description |
|---|---|---|
| Resolution | 750 x 1334 px | Standard vertical aspect ratio for mobile social media |
| Typography | Noto Sans SC | Loaded via Google Fonts for weights 300, 400, and 700 |
| Colors | Dark Theme | Uses a linear gradient from #1a1220 to #080e18 with vibrant accents |
| Components | Flexbox/Grid | Structured into Header, Data Cards, Activity Rows, and Charts |
Chinese Vertical Image Generation Advanced Features
- Multi-agent batch processing: Reuse a single browser instance to generate multiple images in a sequence for high-volume tasks.
- CSS-driven Data Visualization: Create dynamic bar charts and progress bars directly from raw numerical data.
- Custom Viewport Support: Although optimized for vertical screens, the rendering engine can be adjusted for custom dimensions in Openclaw Skills.
- Safe-area Management: Built-in 80px margins to ensure content remains visible across various mobile device displays.
SKILL.md
Loading
Related Openclaw Skills
Painpoint To MVP (pain2mvp)
A technical research and planning skill that extracts product opportunities from public user discussions and converts them into structured PRDs for AI coding agents.
XHS Publisher
A full-featured automation tool for publishing and managing text, image, and video content on XiaoHongShu via web-based protocols.
DeerFlow 2.0 Installation Skill
A comprehensive automation skill for deploying the DeerFlow 2.0 Super Agent within the OpenClaw ecosystem.
Skill Quality Check
A universal quality assessment framework designed to audit, score, and optimize SKILL.md files for any AI agent environment.
DevSecOps Roadmap Generator
A strategic planning tool that generates customized DevSecOps roadmaps based on organizational maturity and assessment data.
Recipe Finder AI Agent Skill
An intelligent culinary assistant that transforms available ingredients into detailed recipes and nutritional insights.
Featured*
