财经HTML高端海报生成

解决 AI 生图难以控制排版与文字的问题

在制作高端海报、个人介绍页或品牌物料时，直接使用 AI 生图经常遇到文字不清晰、排版错误或无法精确控制元素位置的问题。当需求中包含确定性内容，如精确的文案、Footer、二维码，或要求固定的 9:16 尺寸（如 1080×1920）时，生成式方案往往显得力不从心。

本技能通过 HTML/CSS 编写 + Playwright 截图 的工程化方案，将海报制作变成了一种可控的前端渲染任务，确保文字清晰、排版精确，并且可以反复迭代修改。

核心能力与标准工作流

该技能的工作流分为四个标准步骤，将设计意图转化为高清 PNG 图片：

1. 明确需求与素材：确认目标尺寸（如 1080×1920）、是否包含照片/QR码/Logo、文案内容（姓名、头衔、Slogan）以及风格方向（深色戏剧性或极简留白）。
2. 撰写 HTML/CSS：

- 尺寸与字体：标题使用衬线体（Noto Serif SC, Source Han Serif SC），正文使用无衬线体（Noto Sans SC, PingFang SC）。
- 图片引用：通过 file:/// 协议引用本地绝对路径（如 D:/path/to/photo.jpg）。
- 设计原则：采用大留白、大字距设计，色彩克制（1-2 主色 + 1 点缀色如暖橙 #e87928），并预设标准化的 Footer 布局。

1. 截图输出：运行 scripts/screenshot_poster.js 脚本，设置 viewport 为 1080×1920 并开启 fullPage: true，等待 3-5 秒确保字体加载完成后输出 PNG。
2. 审核交付：检查文字截断、图片比例变形及 Footer 完整性。

适用边界与技术注意点

在处理带人像的照片背景时，若背景为纯色且与肤色差异大，可使用 Python 颜色替换或 rembg 去除背景。但当背景与肤色接近（如暖橙色背景）时，简单的颜色替换会导致人物面部受损，此时建议采用转灰度、深色渐变或装裱效果（添加细线框与阴影）等设计手法进行兼容。

常见工程坑：

• 必须在 managed Node workspace 中运行依赖，直接全局安装会污染环境。
• 必须预留字体加载时间（waitForTimeout），否则中文会显示为默认宋体。
• 中文文案较长时需控制字号或增加 white-space: nowrap 防止意外换行。
• 页面底部需预留足够空间，避免主要内容被 Footer 遮挡。