SuperAPI AI 工具集

create-html-image

设计与创作

查看项目

更新于 10-15 20:29

技能介绍

用途:该技能把用户的需求转化为带品牌风格的视觉图,用户编写 HTML/CSS,再由 render_html_image 经无头 Chromium 渲染并返回永久 PNG URL。适用于布局驱动的视觉,如社交卡片、引用贴、OG 图、英雄横幅、功能公告、信息图、统计卡、活动邀请等。若需要照片或插画类视觉,资料建议改用 /create-image(generate_image);两者也可组合,先用 AI 生成背景,再用 HTML 叠加品牌元素。

主要能力:支持完整浏览器 CSS,包括 Flexbox、Grid、filter、mask-image、clip-path、transform、渐变、@keyframes、变量字体等。渲染结果确定,同一输入得到同一输出;渲染成本低、速度快,通常冷启动约 1–3 秒、热启动约 700 毫秒–1.5 秒。可通过 get_theme 获取品牌主题(颜色、字体、Logo、形状等),默认加载 Inter 字体,支持传入 Google Fonts 字体族名。外部图片需通过 inline_images 以 token 替换为 data URI,避免 CORS、重定向与过期链接问题。

使用方式:先调用 get_theme 获取主题;确认尺寸与格式;用文字描述布局;编写 HTML,样式写在 head 的 style 中;通过 inline_images 传入图片,通过 fonts 参数声明额外 Google Fonts;调用 render_html_image,传入 html、width、height、fonts、inline_images、name 与 tags;随后把 URL 给用户并迭代调整。需要重复渲染同一布局时,可保存为 create_template,再用 render_template。相关工具还包括 search_assets、upload_asset、generate_image、remove_background。

限制:静态渲染不支持 JavaScript 交互,动画只会捕获最终帧;非 Google Fonts 字体不支持;页面网络请求只能经由服务器代理;默认尺寸为 1200×630,需显式设置宽高;视口固定,超出范围会被裁剪;无头 Chromium 不依赖 UA 判断。资料未提供具体收费价格与配额信息。