SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillscode-to-image

code-to-image

Design & creation

View repository

Updated 10-13 16:23

About this skill

Code-to-Image · Code-Generated Images

Render front-end design code into high-definition images—free, unlimited resolution, fully controllable.

Core Concept

HTML/CSS/JS/Canvas 设计稿 ──→ Playwright 无头渲染 ──→ 高清 PNG
       ↑                          ↑                    ↑
   设计层                      渲染层                输出层
 frontend-design             render.py             任意分辨率
 canvas-design               @1x/@2x/@4x           PNG/JPEG/WebP
 frontend-design-ultimate    全平台兼容             100%中文准确

Why This Solution Is the Strongest

Code-to-Image 🆓 AI API Image Generation 💰
Cost $0, free forever $0.02-0.10/image
Resolution Any (4K/8K/16K) Usually ≤2K
Chinese Text 100% accurate Often garbled/blurry
Brand Consistency Guaranteed by code Random each time
Batch Generation Unlimited, just change parameters API rate limits
Reproducibility Git version control Not reproducible
Flexibility HTML/CSS/JS/Canvas/SVG Pure prompts
Local Operation ✅ No network needed ❌ API required

Prerequisites

pip install playwright && playwright install chromium

Default Style: Editorial Magazine Style

Selected by Daniel; all covers use this style by default.

Features: Serif typeface (Noto Serif SC) · Off-white background (#faf8f5) · Red accent (#dc2626) · 8px color bar on the left Use cases: WeChat Official Account covers · Zhihu header images · Knowledge Planet · Content-based products

# 基于模板快速生成
cp ~/.openclaw/skills/code-to-image/templates/editorial.html cover.html
# 编辑 cover.html 中的标题、副标题、数据
# 渲染
python3 ~/.openclaw/skills/code-to-image/render.py cover.html -o output.png -w 1080 --height 1440 --scale 2

Top-Tier Style Template Library (15 styles)

# Style Aesthetic Source Primary Color Palette Feel Suitable For
1 Editorial ✅Default Caixin/Sanlian Off-white + red and black Authoritative depth WeChat Official Account/Zhihu
2 Monocle FT Weekend Salmon pink + brown Refined intellectual Economics/Business
3 Art Deco 1920s Gatsby Gold + navy blue Luxurious authority Major events
4 Zen Wabi-Sabi Japanese aesthetics Paper white + persimmon red Zen restraint Deep thinking
5 Blueprint Engineering drawing Deep blue + Cyan Technical precision Hardcore tech
6 Swiss Swiss International Style White + cyan-blue geometric Clean and high-end Brand/Official website
7 Kinfolk Slow-living magazine Warm brown + cream Natural breathing Humanities/Lifestyle
8 Cinematic A24 film Black + film grain Cinematic atmosphere Heavyweight features
9 Hermès Hermès Orange + creamy white Extreme restraint High-end brands
10 MIT Tech Review MIT Technology Review White + red top bar Academic authority Tech analysis
11 WIRED WIRED magazine Black + Neon Yellow Avant-garde Tech Tech Media
12 Paper & Ink Literary Journal Warm Cream + Deep Red Print Heft Long-form/Literature
13 Dark Botanical Contemporary Gallery Black + Pink Gold Terracotta Elegant Art High-end Brand
14 Notebook Moleskine Gray Background + Colorful Tags Tactile Handcrafted Knowledge/Tools
15 Apple Apple.com Gray White + Blue Ultimate Minimalism Brand/Product

Usage

Basic Usage

python3 ~/.openclaw/skills/code-to-image/render.py cover.html
# 输出: cover_render.png (1080×1440 @2x → 2160×2880)

Common Parameters

# 小红书竖版封面 (1080×1440)
python3 render.py cover.html -w 1080 -h 1440 --scale 2

# 抖音横版 (1920×1080)
python3 render.py cover.html -w 1920 -h 1080 --scale 2

# 知乎/公众号竖版 (1440×2560)
python3 render.py cover.html -w 1440 -h 2560 --scale 2

# Instagram方形 (1080×1080)
python3 render.py cover.html -w 1080 -h 1080 --scale 2

# 超高清 (4K@4x = 15360×8640)
python3 render.py poster.html -w 3840 -h 2160 --scale 4

# 指定输出
python3 render.py index.html -o final.png

# 截取特定元素
python3 render.py index.html --selector "#hero-section"

# 完整长页面
python3 render.py landing.html --fullpage

Complete Workflow

Step 1: Design HTML

Use frontend-design skill to generate the design draft:

<!-- 暗黑科技风封面 -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 1080px; height: 1440px;
      background: #0a0a0f;
      font-family: 'Noto Sans SC', sans-serif;
    }
    h1 {
      font-size: 96px;
      background: linear-gradient(135deg, #00ff88, #a78bfa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* ...更多设计... */
  </style>
</head>
<body>
  <h1>AI Agent 实战指南</h1>
</body>
</html>

Step 2: Render

python3 ~/.openclaw/skills/code-to-image/render.py cover.html -o ai-agent-cover.png

Step 3: Output

Get 2160×2880 PNG, ready to publish to any platform.

Platform Size Quick Reference

Platform Ratio viewport @2x Output Command
Xiaohongshu Cover 3:4 1080×1440 2160×2880 -w 1080 -h 1440
Xiaohongshu Landscape 4:3 1440×1080 2880×2160 -w 1440 -h 1080
Douyin/Video Account 9:16 1080×1920 2160×3840 -w 1080 -h 1920
Douyin Landscape 16:9 1920×1080 3840×2160 -w 1920 -h 1080
WeChat Official Account Cover 16:9 900×383 1800×766 -w 900 -h 383
Zhihu Header Image 16:9 1920×1080 3840×2160 -w 1920 -h 1080
Instagram 1:1 1080×1080 2160×2160 -w 1080 -h 1080
Twitter/X 16:9 1200×675 2400×1350 -w 1200 -h 675
Bilibili Cover 16:9 1920×1080 3840×2160 -w 1920 -h 1080
Poster Print (A3) 1:√2 3508×4961 A3@300dpi -w 3508 -h 4961 --scale 1

Design → Render Linkage

Best Practices: First let frontend-design produce HTML, save it to a file, then call this skill to render.

用户: "生成一张AI Agent实战指南的小红书封面"
  ↓
1. 调 frontend-design → 产出 index.html (暗黑科技风, 3:4)
  ↓
2. 调 code-to-image → render.py index.html -w 1080 -h 1440 -o agent-cover.png
  ↓
3. 输出: agent-cover.png (2160×2880)

Advanced Techniques

1. Batch Generation

# 改标题颜色 → 批量出图
for color in '#00ff88' '#ff6b6b' '#a78bfa' '#fbbf24'; do
  sed "s/--accent-color--/$color/g" template.html > "cover-$color.html"
  python3 render.py "cover-$color.html" -o "output/cover-$color.png"
done

2. Canvas Approach

Use canvas-design skill to create a pure Canvas design, also rendered through this skill.

3. Component Reuse

Extract commonly used UI components (tags, dividers, data panels) into CSS classes for reuse across covers.

4. Font Handling

  • Google Fonts:@import url(...) loads automatically
  • Local Fonts: CSS @font-face + file path
  • System Fonts: Use directly, no import needed

Troubleshooting

Issue Solution
Fonts not loaded Increase --delay 3
Animation not finished Increase --delay 2
Chinese characters garbled Ensure HTML <meta charset="UTF-8">
Insufficient resolution Increase --scale 4
Only partial screenshot Use --selector "#id"
Inaccurate colors Use sRGB color values, avoid Display P3

Custom Rules

  1. Default Editorial magazine style, unless the user explicitly specifies another style
  2. No producer attribution, unless the user requests it
  3. Before each generation, first ask for the platform (Xiaohongshu/WeChat Official Account/Douyin/Zhihu…) to determine the size
  4. Render with --scale 2 to ensure clarity

Template Files

~/.openclaw/skills/code-to-image/templates/
├── editorial.html          ← 默认模板
├── monocle.html            ← FT Weekend
├── art-deco.html           ← 盖茨比黄金时代
├── zen.html                ← 日式侘寂
├── blueprint.html          ← 工程蓝图
├── swiss.html              ← 瑞士极简
├── kinfolk.html            ← 慢生活
├── cinematic.html          ← 电影海报
├── hermes.html             ← 爱马仕奢侈
├── mit-tech-review.html    ← MIT科技评论
├── wired.html              ← WIRED杂志
├── paper-ink.html          ← 文学期刊
├── dark-botanical.html     ← 当代画廊
├── notebook.html           ← Moleskine手帐
└── apple.html              ← Apple极致

Relationship with Other Skills

code-to-image ← 渲染器（本 skill）
    ↑
    ├── frontend-design       → HTML/CSS 设计稿
    ├── canvas-design         → Canvas 设计稿
    ├── frontend-design-ultimate → React 组件设计
    ├── design-md-collection  → 71套设计参考
    ├── content-cover-gen     → 封面隐喻方法论
    └── poster-design-generation → 海报版式参考