1/2第 1 张，共 2 张
活动宣传长图别让 AI 硬画：让它写网页，浏览器一键截成长图
热度 80
做活动宣传长图，直接让 GPT 画，常见三个坑：一次画不了那么长，分段画又风格对不上；小字容易糊、容易错；改个时间就得整张重来。
社区里更成熟的做法是换个分工：让 AI 写一张网页当排版，再用浏览器把网页截成长图。 文字是真文字，清楚不出错；改时间地点只改一个词；换风格一句话的事。
这条提示词就按这个思路整理，ChatGPT、Claude、DeepSeek、Kimi、豆包都能用。封面和第 2 张长图就是用它做的示例（活动信息是虚构的）。
适合谁
- 运营、社群、市场：活动海报、招募长图、沙龙和课程宣传
- 不会 PS、Figma，但经常要出图的人
怎么用（5 分钟）
- 复制下面的提示词，把【活动信息】填好发给 AI。没有的信息空着就行，它不会乱编。
- AI 会回一整段 HTML 代码。Claude 可以直接下载成文件；其他 AI 就复制代码，存成 poster.html（Windows 用记事本「另存为」，编码选 UTF-8；Mac 用「文本编辑」，先点「格式 → 制作纯文本」再保存）。
- 用 Chrome 打开这个文件看效果。不满意就直接跟 AI 说「标题再大一点」「换成清新活力风」「嘉宾改成两列」，它会在原代码上改。
- 导出长图：按 F12（Mac 按 ⌘ + ⌥ + I）打开开发者工具 → 在 Elements 面板里点中
<main id="poster">这一行 → 右键 →「Capture node screenshot」（中文界面叫「截取节点屏幕截图」），整张长图就下载好了。Mac 上截出来是 2 倍高清图。
几个小技巧
- 图交给生图模型，字交给网页。 想要主视觉插画，就让 GPT 单独画一张，提示里写明「画面里不要出现任何文字」，再跟 AI 说「把主视觉占位换成同一文件夹里的 hero.png」。
- 第一屏最值钱。 群里和朋友圈里，大家先看到的是开头：活动名、时间、地点、为什么值得来，都要在第一屏说清楚。
- 别太长。 4–6 屏最合适，信息多就拆成两张发；太长的图截图容易出错，发到微信也会被压缩。
- 用 Claude Code、Codex 这类 Agent 的朋友，可以直接说「用 Playwright 把 poster.html 里的 #poster 截成 2 倍图」，一步出图。
提示词
你是一位资深活动视觉设计师，也是前端工程师。请把我下面的活动信息做成一张「手机竖版活动宣传长图」，用一个完整的 HTML 文件交付。我会用浏览器把它截成长图，发朋友圈、社群和公众号。
【活动信息】（我没写的不要编造：删掉对应模块，或写「待定」）
- 活动名称：
- 一句话亮点：
- 时间：
- 地点（线上活动写平台）：
- 主办 / 协办：
- 适合谁来：
- 你能收获什么（3–5 条）：
- 活动流程（时间 + 环节）：
- 嘉宾（姓名 + 头衔 + 一句话介绍）：
- 报名方式（二维码 / 链接、费用、名额、截止时间）：
- 品牌主色（可不填）：
- 风格（可不填，你按活动主题选）：科技发布会 / 清新活力 / 杂志编辑 / 国风雅致 / 高级极简
【版式】
1. 画布固定宽 750px，高度随内容往下长，总长 4–6 屏（每屏约 1334px，总高不超过 8000px）。不做响应式，不出现横向滚动。
2. 所有内容放在 <main id="poster"> 里；body 外边距为 0，背景色和海报一致。
3. 第一屏（前 1334px）必须让人看懂：什么活动、什么时间、在哪、为什么值得来。
4. 往下依次是：收获 / 亮点 → 流程时间轴 → 嘉宾 → 报名信息 → 底部行动区（二维码 + 一句行动号召 + 主办方）。信息少就合并，别硬凑模块。
5. 字号按 750 宽来定：主标题 72–112px，模块标题 40–52px，正文不小于 26px，最小的注释不小于 22px；行高 1.5–1.7。短句别让最后一个字单独掉到下一行。
6. 模块之间要有节奏：用色块、大号编号、时间轴、卡片区分，留白充足，不要一屏塞满字。
7. 装饰只用 CSS 和内联 SVG（渐变、几何图形、线条、图标），不用 emoji 当图标。
8. 嘉宾没有照片，就用圆形色块 + 姓氏当头像。二维码、主视觉照片等需要真图的地方，画成同尺寸占位框，框内写「替换为：××，建议 ××× × ××× px」；二维码占位不小于 240×240px，四周留白。
【技术要求】（保证在任何电脑上截出来都一样）
- 不引用任何外部资源：不用 CDN、网络字体、网络图片，样式全写在 <style> 里。
- 字体用 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif。
- 不用 vh / vw 单位，不用 position: fixed，不加动画。
- 文字和背景对比要够，重要文字不要压在复杂花纹上。
【文案】
- 时间、地点、价格、嘉宾姓名等事实信息一字不改；亮点文案可以润色得更有吸引力，但不添加我没给的承诺和数据。
【交付】
1. 先用 2–3 句话说明你选的配色和风格。
2. 再输出一个完整的 HTML 代码块，从 <!DOCTYPE html> 到 </html>，不要省略任何部分。
3. 最后列出我需要替换的占位。
之后我说「换个风格」「亮点再精简」「加一个模块」，都在这份代码上改，改完重新给我完整代码。评论 0
更多
登录后可点赞、收藏、评论和举报。
还没有评论，先发起一个具体问题。