Immutable. This exact content is served forever at /api/v1/blob/6c2573740be767db.
--- name: poster-maker display_name: 海报生成器（社媒封面/分享卡/OG图） display_name_en: Poster Maker (social covers, share cards, OG images) description: 生成海报/做海报/公众号封面/小红书配图/朋友圈配图/OG图/分享卡/头图/横幅/banner — social-ready posters, covers and share cards with big-type layouts, brand gradients and platform size specs. Pixel-exact, offline, no browser. description_zh: 生成社媒视觉物料:海报、公众号封面、小红书/朋友圈配图、OG 分享卡、头图、横幅。大字排版 + 品牌渐变,像素精确、离线毫秒级出图,内置封面/OG/方图等现成模板与尺寸规范。 description_en: Generate social-ready posters, article covers, OG/share cards and banners with big-type layouts and brand gradients. Pixel-exact, offline, milliseconds per render, with ready-made templates and platform size specs. category: image version: 1.0.1 author: AutoClaw --- # 海报生成器 为社媒与营销场景产出视觉物料:海报、公众号封面、小红书/朋友圈配图、OG 分享卡、横幅。本技能在通用渲染引擎之上沉淀了**海报排版规范、平台尺寸表和视觉质量清单**,照着做就能出可发布的图。 ## 何时使用 - 用户要"做一张图":海报、封面、配图、分享卡、头图、banner、活动视觉 - 给文章/产品/活动配一张有文字的视觉图(精确文字、品牌色、排版要求) - 不适用:发票/报价单等文档(用 invoice-maker);纯照片级艺术图(用平台 AI 生图);任意自定义图形(用 code2media 通用技能) ## 平台尺寸速查 | 场景 | 尺寸 | 模板 | | :--- | :--- | :--- | | 小红书/朋友圈方图 | 1080 × 1080 | `social-post.html` | | 公众号首图封面 | 900 × 383 | `cover.html` | | 博客/官网 OG 分享卡 | 1200 × 630 | `og-card.html` | | 竖版海报(印刷感) | 1080 × 1440 | 改方图模板尺寸即可 | | 视频封面 | 1280 × 720 | 改封面模板尺寸即可 | ## 工作流程 1. **选模板**:从 `templates/` 选最接近的,把文案/配色/品牌元素替换掉。没有合适的就从零写。 2. **写 HTML**:语法三条铁律(详见 `@references/syntax-guide.md`): - Tailwind 工具类写 **`tw` 属性**(`class` 不编译 Tailwind); - 用 v4 规范名(渐变 `bg-linear-to-br`,不是 `bg-gradient-to-br`); - 根元素撑满画布 `tw="w-full h-full ..."`。 3. **渲染**: ```bash node "<技能目录>/scripts/render.mjs" --html poster.html -o poster.png --width 1080 --height 1080 ``` 4. **过质量清单**(下方),不满意改了重跑——渲染是毫秒级的。 ## 海报视觉质量清单 - **文字层级 ≤ 3 级**:主标题(最大)/副标题/说明文字,一眼能分清主次;主标题占画面高度 ≥ 1/5 - **留白要狠**:内边距不小于画布短边的 5%(如 1080 宽至少 54px);元素之间用 `gap`/`mt` 拉开呼吸感 - **对比度**:文字与背景必须有足够对比;浅色文字配深色渐变,或深色文字配浅色底 - **中文不斜体**(斜体在无衬线中文里很丑),强调用加粗/变色/字号 - **一图一重点**:不要把所有信息塞进一张图;胶囊标签 ≤ 3 个 - **品牌一致性**:有品牌色/Logo 就放角标位,颜色用品牌色的渐变家族 - 字体:`style="font-family:msyh,NotoSansCJK-Regular,wqy-zenhei"`,离线环境 Emoji 保持纯文本 ## 批量与变体 一个活动要 5 种尺寸、10 个城市的本地化海报?同一模板改文案/尺寸循环调用脚本即可,输出确定性保证同模板永远同品质。渲染完可用 `identify`(ImageMagick)或直接看文件大小做粗校验。 ## 环境要求 Node.js >= 20.19;首次运行自动安装 takumi-js/takumi-pdf(一次性,需网络)。容器内中文需字体包(`font-noto-cjk`)。需要完全自定义的非海报图形时,用 `code2media` 通用技能。