HTML + Playwright 高端海报制作

概述

本技能用于将 HTML/CSS 设计稿渲染为高清 PNG 图片，适合制作 9:16 竖版海报、个人介绍页、营销物料等。相比 AI 生图，本方案更可控、文字清晰、排版精确、可反复迭代。

何时使用

• 用户要求制作海报、个人介绍、品牌物料
• 强调 "高大上"、"极简"、"高端/私人银行风格"、"大留白"、"大字体"
• 需要精确文字、二维码、Footer 等确定性内容
• 用户要求 9:16、1080×1920 等固定尺寸
• 已有参考照片/QR码，需要合成排版

标准流程

1. 明确需求与素材

确认：

• 目标尺寸（常见 1080×1920，9:16）
• 是否已有照片/QR码/Logo
• 文案内容（姓名、头衔、Slogan、联系方式、Footer）
• 风格方向（深色戏剧性 / 极简留白 / 经典格局）
• 输出路径

2. 撰写 HTML/CSS

使用 Write 工具创建 .html 文件。关键规范：

尺寸与视图：

.poster {
  width: 1080px;
  height: 1920px;
  position: relative;
  overflow: hidden;
}

字体：

• 标题用衬线体：'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', serif
• 正文用无衬线体：'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif
• 可选通过 Google Fonts 引入 Noto Serif SC/Noto Sans SC，但需预留加载时间

图片引用：

• 海报中的图片使用本地绝对路径，如 D:/path/to/photo.jpg
• Playwright 的 file:/// 协议可以访问本地文件

设计原则：

• 大留白，文字信息密度低
• 标题字距拉开（letter-spacing 大）
• 色彩克制：1-2 个主色 + 1 个点缀色（暖橙 #e87928 → #f5a623）
• Footer 用固定格式：品牌名 + 联系方式/公众号指引 + 知识库/官网指引 + 二维码（可选，可放 1-2 个，按你的品牌自定义）

3. 截图输出

使用 Playwright 将 HTML 渲染为 PNG。推荐用脚本：scripts/screenshot_poster.js

NODE_PATH=/node_modules  screenshot_poster.js  

要点：

• viewport 设为 1080×1920
• fullPage: true
• 等待字体加载完成（3-5秒）
• 使用 managed Node 运行时，避免污染环境

4. 审核交付

检查：

• 文字是否清晰、无截断
• 图片是否被压缩或拉伸
• Footer 是否完整
• 尺寸是否正确
• 是否符合用户品牌规范

背景处理建议

• 若照片背景为纯色且与肤色差异大：可用 Python 颜色替换或 rembg 去除背景
• 若背景与肤色接近（常见暖橙色背景）：简单颜色替换会吃脸，建议改用设计手法兼容：
  • 转灰度：让背景变成中性灰
  • 深色渐变：人物从暗影中浮出
  • 装裱效果：给照片加细线框和阴影，让灰色背景像照片纸

常见坑

• 直接用 npm install -g 会污染环境，必须安装在 managed Node workspace
• 字体未加载会导致文字显示为默认宋体，需加 waitForTimeout
• 中文文字过长容易换行，需控制字号或加 white-space: nowrap
• 有 Footer 时要预留底部空间，避免内容被 Footer 压住

资源

• scripts/screenshot_poster.js：通用 Playwright 截图脚本