用途
carousel-instagram 用于从文字与照片生成 Instagram 轮播图幻灯片，输出尺寸为 1080x1350 像素的 PNG。每张幻灯片是一个自包含的 HTML 文件，再通过无头浏览器渲染为 PNG。该技能驱动 LLM 规划并编写幻灯片 HTML，内置的设计系统是其核心价值。
主要能力
- 根据用户提供的幻灯片文字（标题 + 正文）和照片生成轮播图。
- 支持三类卡片：封面（Cover / hook）、内容页（Content slides）、CTA 页。
- 封面支持三种布局：Layout A（照片作全背景、文字在底部）、Layout B（照片在上、文字在下硬分割）、Layout C（文字在上、照片在下）。
- 内容页固定为照片在上、文字在下，照片高度根据文字区域高度动态计算。
- 内置设计系统：颜色、字体、装饰元素与标点规则。
- 渲染时等待字体加载完成（document.fonts.ready）后再截图。
设计系统
颜色
- 背景：#1C1510
- 强调色：#D97757（珊瑚色）
- 主文字：#FFFFFF
- 次要文字：rgba(255,255,255,0.65)
- 装饰线：rgba(217,119,87,0.35)
可替换强调色与背景令牌以适配其他品牌，布局规则保持不变。
字体
- 字体：Montserrat，来自 Google Fonts
- 标题：ExtraBold 800，64-80px，letter-spacing: -0.04em
- 正文：Regular 400，36-42px，letter-spacing: -0.04em
- CTA：Bold 700，52-64px，letter-spacing: -0.04em
装饰元素 仅使用细几何线条：角落 L 形、水平强调线、斜线。不使用插画、图标或 logo。每张卡片最多 3 个装饰元素。描边 1-2px，颜色 rgba(217,119,87,0.35)。
标点 始终使用短连字符（-），不使用 em-dash 或 en-dash，适用于标题、正文和 CTA。
使用方式
安装（一次性）
npm i playwright && npx playwright install chromium
渲染器仅需以上依赖。幻灯片加载 Google Fonts 的 Montserrat，因此渲染时需要网络连接。
工作流
- 收集输入：用户的幻灯片文字（标题 + 正文）和照片。将照片放入本地
./photos/目录，并以file://URL 引用。 - 规划每张幻灯片：确定卡片角色（cover / content / CTA）、布局、照片位置，并计算照片与文字高度。
- 生成 HTML：每张幻灯片一个文件，命名为
slide_01.html、slide_02.html等，存放在 slides 目录（例如./slides/）。 - 渲染为 PNG：
node scripts/render.mjs ./slides ./out。每个slide_*.html在 1080x1350 下打开，等待字体加载后截图到./out/slide_NN.png。 - QA：对每张 PNG 运行渲染前检查清单。文字被裁剪或覆盖面部的幻灯片视为不合格，需修复并重新渲染。
- 交付：交付完成的 PNG（上传顺序即幻灯片顺序）。
照片处理
- 将源照片保留在本地
./photos/目录。 - 引用格式：
file:///abs/path/to/photos/filename.jpg（绝对 file:// URL）。 - 照片图像始终使用
object-fit: cover。
适用场景
- 需要从文字与照片批量生成 Instagram 轮播图幻灯片的场景。
- 希望使用统一设计系统（颜色、字体、布局规则）保持视觉一致的轮播图制作。
- 需要按封面、内容页、CTA 页结构组织叙事顺序的轮播内容。
限制与注意事项
- 渲染时需要联网加载 Montserrat 字体。
- 文字溢出是严重问题：计算文字区域高度时须额外加 80px 溢出安全边距；文字区域需设置
overflow: hidden。 - 文字不得与面部、颈部或肩部重叠，需在最低肩部以下保留 80px 安全缓冲。
- 标题仅在确实无法单行放下时才换行。
- 每张卡片四边内边距 80px，文字元素之间最大间距 40px。
- 装饰元素每张最多 3 个。
- 除 Layout A 的覆盖渐变外，只使用纯色 #1C1510 背景，不使用渐变背景。
- 不使用除 Montserrat 之外的字体，不得添加 logo、@handle 或任何品牌标识。
- 照片高度必须根据文字区域计算，不能硬编码。
- 渲染前需逐项检查清单，避免文字被裁剪或覆盖面部。