SuperAPI AI 工具集

poster

前端与建站

查看项目

更新于 10-16 06:47

技能介绍

用途:poster 提供单一工具 poster_render,把单文件 React 组件(Tailwind + Recharts + lucide-react)渲染为 PNG / SVG / PDF / JPG / WebP。适合图表、仪表盘快照、OG 图、社交分享卡、年度回顾、编辑型数据故事、杂志排版、活动海报、日历、封面图、PDF 单页、README 主图等静态构图,不适合交互 UI、表单、多页站点或渲染后需要运行时 JS 的场景。

主要能力与约定:工具没有宽高参数,根元素的 Tailwind 尺寸即画布,渲染器按此精确测量。根元素必须声明宽度(如 w-[1600px]),高度可由内容决定;固定比例时再加 h-[Npx]。禁止 min-h-screen、w-full 与显式宽度并存、仅用 aspect 而无宽度。字号下限 14px,Recharts 轴刻度 fontSize 13。内置三种字体:Inter/system-ui、'Source Serif 4'、'JetBrains Mono',通过内联 fontFamily 设置。

使用方式:按形状选画布尺寸,如 twitter/landscape 1600、OG 1200×630、instagram 方形 1200×1200、story 1080×1350、杂志 1400×1800、仪表盘 1600×1000、海报 1200×1600。常用布局原语包括 header(kicker + 标题 + 右侧 chip)、eyebrow kicker、斜体渐变 reveal word、卡片、KPI 统计、超大 hero 数字、活动环、贡献热力图、页脚。Recharts 用法为静态渲染:无 tooltip、无图例、极简坐标轴、渐变填充,需放在固定高度父容器内的 ResponsiveContainer 中。

限制:固定比例海报需预算内容高度,超出会被裁剪;百分比高度在无固定高度父元素下会解析为 0,需用像素计算;混用 3 种以上强调色会显得浑浊。资料未提供安装命令、收费、价格与平台信息。