SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场code-to-image

code-to-image

设计与创作

查看项目

更新于 10-13 16:23

技能介绍

Code-to-Image · 代码生图，是将前端设计代码渲染为高清图片的方案，定位为免费、无限分辨率、完全可控。

【核心理念与流程】 HTML/CSS/JS/Canvas 设计稿 → Playwright 无头渲染 → 高清 PNG。资料将其分为三层：设计层（frontend-design、canvas-design、frontend-design-ultimate）、渲染层（render.py，支持 @1x/@2x/@4x、全平台兼容）、输出层（任意分辨率，PNG/JPEG/WebP，号称 100% 中文准确）。

【与 AI API 生图的对比（资料自述）】 资料给出的对比为：费用上 Code-to-Image 为 0 永久免费，AI API 生图为每张 0.02-0.10 美元；分辨率上可到任意 4K/8K/16K，AI API 通常 ≤2K；中文文字准确，AI API 常乱码或糊掉；品牌一致性由代码保证，AI API 每次随机；批量生成无限制（改参数即可），AI API 受 API 限流；可复现性通过 Git 版本管理，AI API 不可复现；灵活性支持 HTML/CSS/JS/Canvas/SVG，AI API 为纯提示词；本地运行无需网络，AI API 需 API。

【前置依赖与安装】 pip install playwright && playwright install chromium

【默认风格：Editorial 杂志风】 资料称此为 Daniel 选定、所有封面默认使用的风格。特征：衬线体（Noto Serif SC）、米白底（#faf8f5）、红色强调（#dc2626）、左侧 8px 彩条。适用于公众号封面、知乎头图、知识星球、内容型产品。

【基于模板快速生成示例】 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：白+红顶条，学术权威，适合科技分析。
  11. WIRED：黑+霓虹黄，前卫科技，适合科技媒体。
  12. Paper & Ink：文学期刊，暖奶油+深红，印刷厚重，适合长文/文学。
  13. Dark Botanical：当代画廊，黑+粉金赤陶，优雅艺术，适合高端品牌。
  14. Notebook：Moleskine，灰底+彩标签，触感手工，适合知识/工具。
  15. Apple：Apple.com，灰白+蓝，极致简洁，适合品牌/产品。

【使用方式】 基础用法：python3 ~/.openclaw/skills/code-to-image/render.py cover.html（输出 cover_render.png，1080×1440 @2x → 2160×2880）。 常用参数示例：小红书竖版 1080×1440（-w 1080 -h 1440 --scale 2）；抖音横版 1920×1080；知乎/公众号竖版 1440×2560；Instagram 方形 1080×1080；超高清 4K@4x（-w 3840 -h 2160 --scale 4）；指定输出（-o final.png）；截取特定元素（--selector "#hero-section"）；完整长页面（--fullpage）。

【完整工作流】 Step 1：设计 HTML（示例使用 frontend-design skill 生成暗黑科技风封面，含 body 尺寸、背景色、字体、渐变文字标题等）。 Step 2：渲染，python3 ~/.openclaw/skills/code-to-image/render.py cover.html -o ai-agent-cover.png。 Step 3：输出 2160×2880 PNG。

【平台尺寸速查（比例 / viewport / @2x 输出 / 命令）】 小红书封面 3:4 / 1080×1440 / 2160×2880 / -w 1080 -h 1440；小红书横版 4:3 / 1440×1080 / 2880×2160；抖音/视频号 9:16 / 1080×1920 / 2160×3840；抖音横版 16:9 / 1920×1080 / 3840×2160；公众号封面 16:9 / 900×383 / 1800×766；知乎头图 16:9 / 1920×1080 / 3840×2160；Instagram 1:1 / 1080×1080 / 2160×2160；Twitter/X 16:9 / 1200×675 / 2400×1350；B站封面 16:9 / 1920×1080 / 3840×2160；海报印刷 A3 1:√2 / 3508×4961 / A3@300dpi（--scale 1）。

【设计 → 渲染联动最佳实践】 先让 frontend-design 产出 HTML，保存到文件，再调用本 skill 渲染。示例：用户要求生成 AI Agent 实战指南的小红书封面 → 调 frontend-design 产出 index.html（暗黑科技风 3:4）→ 调 code-to-image 渲染 → 输出 agent-cover.png（2160×2880）。

【进阶技巧】

  1. 批量生成：用脚本遍历颜色变量替换模板后批量渲染，输出到 output 目录。
  2. Canvas 方案：使用 canvas-design skill 创建纯 Canvas 设计，同样通过本 skill 渲染。
  3. 组件化复用：将常用 UI 组件（标签、分割线、数据面板）抽成 CSS class 跨封面复用。
  4. 字体处理：谷歌字体用 @import url(...) 自动加载；本地字体用 CSS @font-face + 文件路径；系统字体直接使用。

【故障排查】 字体未加载：增加 --delay 3；动画未完成：增加 --delay 2；中文乱码：确保 HTML <meta charset="UTF-8">；分辨率不够：提高 --scale 4；只截部分：用 --selector "#id"；颜色不准：使用 sRGB 色值，避免 Display P3。

【自定义规则】 默认 Editorial 杂志风，除非用户明确指定其他风格；不加出品署名，除非用户要求；每次生成前先问平台以确定尺寸；渲染用 --scale 2 保证清晰度。

【模板文件目录】 ~/.openclaw/skills/code-to-image/templates/ 下包含 editorial.html（默认模板）、monocle.html、art-deco.html、zen.html、blueprint.html、swiss.html、kinfolk.html、cinematic.html、hermes.html、mit-tech-review.html、wired.html、paper-ink.html、dark-botanical.html、notebook.html、apple.html。

【与其他 Skill 的关系】 code-to-image 作为渲染器，上游可接 frontend-design（HTML/CSS 设计稿）、canvas-design（Canvas 设计稿）、frontend-design-ultimate（React 组件设计）、design-md-collection（71 套设计参考）、content-cover-gen（封面隐喻方法论）、poster-design-generation（海报版式参考）。

【限制与说明】 资料未提供具体的收费/价格与官方服务信息，未提供实际渲染效果的性能数据与兼容性说明；架构、参数与模板以资料描述为准，实际使用需自行验证。资料未涉及托管平台、云服务或团队成员信息。