商务投放动态周知 HTML 生成器

要解决什么问题

商务侧每周会发「投放动态周知」：一段带 emoji、▪️ 列表、文档名与多张案例截图的文案，最终形态往往是一张不滚动、可直接发给客户的整页截图。手工在 PPT 或设计工具里拼版，既要对齐参考样式，又要保证截图不被裁切、标红范围不错，重复劳动且容易漏规则。

技能如何工作

本技能把「参考截图 + 标题日期 + 页脚版权日期 + 正文（按展示顺序原样）+ 配图清单（01-xxx.png 顺序）」收敛成可交付的 ./index.html，并约定 ./images/ 下由同事放入真实 PNG。

核心流程包括：

• 收齐输入：缺参考截图则先补齐；若用户已贴满 prompt 模板，则解析各段而非重复追问。
• 五条不可协商规则：全文不改写不删序；图片 object-fit: contain（最大转化量截图 max-height:200px，案例图 max-height:320px）；每个文档名前插入蓝色描边文档 SVG；仅用户标明「标红」的片段使用 #e02424 加粗；图片用相对路径 images/01-xxx.png 并带 onerror 虚线占位。
• 复刻参考版式：约 1200px 居中、浅灰紫底、白卡片、彩色左侧条、首模块浅色底与深色字、卡片间距约 10px 等，与参考截图视觉一致。
• 自检：对照 references/rules.md 核对规则、正文字节级一致、单屏无溢出后再交付；本地可用 8765 端口预览。

适用边界

仅在用户提到「投放动态周知」「周知页」「周知 HTML」或要求按周知模板/参考截图生成单页 HTML 时使用。不要用于通用营销页，也不要用于「机器人赛道拓客指引」类深色科技风页面。技能不会伪造图片内容，只生成 HTML 与目录结构。