code-to-image

Files (17)

• SKILL.md
• render.py
• apple.html · templates/
• art-deco.html · templates/
• blueprint.html · templates/
• cinematic.html · templates/
• dark-botanical.html · templates/
• editorial.html · templates/
• hermes.html · templates/
• kinfolk.html · templates/
• mit-tech-review.html · templates/
• monocle.html · templates/
• notebook.html · templates/
• paper-ink.html · templates/
• swiss.html · templates/
• wired.html · templates/
• zen.html · templates/

SKILL.md (first lines)

# Code-to-Image · 代码生图

**将前端设计代码渲染为高清图片——免费、无限分辨率、完全可控。**

## 核心理念

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

## 为什么这个方案最强

| | Code-to-Image 🆓 | AI API 生图 💰 |
|---|:---:|:---:|
| **费用** | $0 永久免费 | $0.02-0.10/张 |
| **分辨率** | 任意 (4K/8K/16K) | 通常 ≤2K |
| **中文文字** | 100% 准确 | 经常乱码/糊掉 |
| **品牌一致性** | 代码保证 | 每次随机 |
| **批量生成** | 无限，改参数即可 | API 限流 |
| **可复现性** | Git 版本管理 | 不可复现 |
| **灵活性** | HTML/CSS/JS/Canvas/SVG | 纯提示词 |
| **本地运行** | ✅ 无需网络 | ❌ 需API |

## 前置依赖

```bash
pip install playwright && playwright install chromium
```

## 默认风格：Editorial 杂志风

**Daniel 选定，所有封面默认此风格。**

特征：衬线体(Noto Serif SC) · 米白底(#faf8f5) · 红色强调(#dc2626) · 左侧8px彩条
适用：公众号封面 · 知乎头图 · 知识星球 · 内容型产品

```bash
# 基于模板快速生成
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
```

## 顶尖风格模板库（15款）

| # | 风格 | 审美来源 | 主色调 | 感觉 | 适合 |
|---|------|---------|--------|------|------|
| 1 | **Editorial** ✅默认 | 财新/三联 | 米白+红黑 | 权威深度 | 公众号/知乎 |
| 2 | Monocle | FT Weekend | 三文鱼粉+棕 | 精致知识分子 | 经济/商业 |
| 3 | Art Deco | 1920s Gatsby | 金+藏蓝 | 奢华权威 | 重大事件 |
| 4 | Zen 侘寂 | 日本美学 | 纸白+柿子红 | 禅意克制 | 深度思考 |
| 5 | Blueprint | 工程图纸 | 深蓝+Cyan | 技术精密 | 硬核科技 |
| 6 | Swiss | 瑞士国际主义 | 白+青蓝几何 | 干净高端 | 品牌/官网 |
| 7 | Kinfolk | 慢生活杂志 | 暖棕+奶油 | 自然呼吸 | 人文/生活 |
| 8 | Cinematic | A24电影 | 黑+胶片颗粒 | 电影级氛围 | 重磅专题 |
| 9 | Hermès | 爱马仕 | 橙+奶油白 | 极致克制 | 高端品牌 |
| 10 | MIT Tech Review | MIT科技评论 | 白+红顶条 | 学术权威 | 科技分析 |
| 11 | WIRED | WIRED杂志 | 黑+霓虹黄 | 前卫科技 | 科技媒体 |
| 12 | Paper & Ink | 文学期刊 | 暖奶油+深红 | 印刷厚重 | 长文/文学 |
| 13 | Dark Botanical | 当代画廊 | 黑+粉金赤陶 | 优雅艺术 | 高端品牌 |
| 14 | Notebook | Moleskine | 灰底+彩标签 | 触感手工 | 知识/工具 |
| 15 | Apple | Apple.com | 灰白+蓝 | 极致简洁 | 品牌/产品 |

## 使用方式

### 基础用法

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

### 常用参数

```bash
# 小红书竖版封面 (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
```

## 完整工作流

### Step 1: 设计 HTML

使用 `frontend-design` skill 生成设计稿：

```html
<!-- 暗黑科技风封面 -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body {

From aAAaqwq/AGI-Super-Team, MIT.

More from aAAaqwq/AGI-Super-Team