网页海报工坊 / HTML Poster Studio

Overview

把用户的自然语言描述，生成单文件 HTML 海报，并内置「下载为图片」按钮，让成品既能像网页一样在浏览器打开（可交互、可响应式），又能一键导出 PNG 发到微信/朋友圈/社群。

核心洞察（本 skill 的立身之本）：
- 普通人很难写出优质的图像生成 prompt（构图、光影、材质描述门槛高）。
- 但大模型写代码的能力很强，HTML/CSS 表达视觉的能力足以覆盖绝大多数"海报/PPT"信息。
- HTML 还可以承载交互与更丰富的样式，且只要有浏览器就能打开，零安装。
- 因此用 HTML 承载内容，再补一个"导出图片"按钮打通分享闭环——比直接生图更可控、可改、可复用。

When To Use

• 用户想做：海报、活动/结营卡、对比图、金句卡、打卡提醒、课程/产品介绍长图、人物/团队展示卡。
• 用户表达："帮我做个 XX 海报""把这段内容做成图片发出去""生成一张对比图"。
• 不要用本 skill 做：需要真实照片级渲染、复杂插画、品牌 LOGO 设计（这些仍优先图像生成工具）。

Workflow

Step 1 — 澄清需求（1 轮即可，不过度提问）

从用户的自然语言里提炼：
1. 海报类型：金句/提醒卡、对比卡、人物/卡片列表、长图、单页活动卡。
2. 主题与核心信息：标题、副标题、关键数据/要点、落款（主办方、日期）。
3. 风格倾向（默认按内容自动选主题）：先做 Apple 风精致卡片（大量留白、SF 字重、柔和分层阴影、发丝级描边、克制高级强调色）。主题按内容语义自动匹配——这是本 skill 的默认行为，不要让所有海报都用同一个颜色。匹配规则：
- air（蓝青/浅，冷静专业）→ 科技 / AI / Agent / 产品 / 技术 / 数据 / 商务 / 分析类。
- sunset（暖橙，温度感）→ 结营 / 毕业 / 庆祝 / 节日 / 温暖 / 感恩 / 招募 / 社群 / 活动类。
- aurora（森绿，生长感）→ 成长 / 自然 / 环保 / 健康 / 知识沉淀 / 学习 / 读书类。
- space（暗夜 keynote，重磅感）→ 发布会 / 盛典 / 年度 / 高端 / 暗黑质感 / 颁奖类。
- 都不明显命中 → 用 air。
- 实现两种方式（二选一，用户显式指定色系时覆盖）：① 生成时直接把 <html data-theme> 写成具体主题（air/sunset/aurora/space）；② 写成 data-theme="auto"，骨架会在加载时按 #poster-content 的文案关键词自动挑主题（骨架已内置该启发式，作为 AI 漏选时的兜底）。

只问最关键的不确定项（如"对比图要对比哪两个对象？""有没有需要放的真实头像/图片？"），其余按最佳实践兜底。

Step 2 — 生成单文件 HTML（用统一骨架）

始终基于 assets/poster-template.html 的骨架产出：
- 结构固定为：body(屏幕底，仅预览，不进导出图) → .download-btn(顶部导出按钮) → #poster-content(内容卡，导出对象，放真实内容)。不再有渐变外框包裹层——卡片本身就是主角，靠阴影与描边做出精致层次。
- 全内联：CSS/JS 全部内联，不引外部样式/CDN（html2canvas 除外，见 Step 3）。
- 字体：系统字体栈 -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif。
- 响应式：容器 max-width（手机竖版图 420~480px，对比/宽图 820px），padding 适配，窄屏用 @media (max-width:640px) 调整字号与栅格。
- 装饰性 emoji 可用作内容元素（如 🔥🏆💡），但不要用 emoji 替代 UI 控件图标；按钮文字可带 emoji 增强语气。
- 细节质感：圆角(16~28px)、柔和阴影、::before/::after 径向光晕、渐变描边标签；留白充足。

Step 3 — 加「导出图片」按钮（关键，必须含）

每个海报必须带一个"下载为图片"按钮，逻辑见 assets/poster-template.html 的 downloadPoster()，要点：
- 引入 html2canvas：https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js（CDN 版，联网即可；若需离线自包含，把该库 min.js 内联进 <script>）。
- 截取对象固定为 #poster-content（仅内容卡，保留完整背景），不要截 body，也不要截 #poster-wrapper 渐变外框。渐变外框只是屏幕预览时的"展框"，不应进入导出图。
- scale: 2~2.5 保证清晰；大图用 canvas.toBlob(...) 比 toDataURL 更稳。
- backgroundColor: null（透明）：四角圆角外为透明，导出图是带弧角的干净卡片，不再有方角多余底色；卡片自身背景（含渐变）仍完整保留。若想要方形白底卡片，再设回 #ffffff。
- 渐变文字必须用实色兜底：background-clip:text 的渐变标题在 html2canvas 里会渲染成透明（直接消失）。截图前要把这类元素的 backgroundImage 置空、-webkit-text-fill-color 与 color 设为渐变第一个色。骨架的 downloadPoster() 已内置该拉平逻辑，改文案时无需重写。
- 含外部图片时 useCORS:true, allowTaint:true（图片需允许跨域）；同目录相对路径图片无跨域问题。

Step 4 — 导出前的"冻结动画"陷阱（最重要，否则图会残）

html2canvas 不跑 CSS 动画，会抓到半透明/位移的中间帧。截图前必须把动画关掉：

document.querySelectorAll('.fade-in, .reminder, .footer-info, #poster-wrapper').forEach(el => {
  el.style.animation = 'none';
  el.style.opacity = '1';
  el.style.transform = 'none';
});
await new Promise(r => setTimeout(r, 400)); // 等一帧稳定

渐变/霓虹动画靠 @keyframes 的，导出前把 background-position 固定（或在截图对象上直接重置为静态渐变）。

Step 5 — 交付与分享

• 直接给文件：用户本地双击 HTML 即可看、可点按钮导出 PNG。
• 要分享到手机：用 workbuddy_cloudstudio_deploy 部署拿链接（微信里打不开本地 HTML，只能给链接），教用户"浏览器打开 → 添加到主屏幕"；或导出 PNG 直接发图。
• 隐私提醒：部署后是公网可访问，页面不要预填真实隐私（手机号、真实收入等）。

Design Principles（速查）

Common Pitfall Reference（必看）

1. 动画没冻结 → 导出图残缺/半透明。先 animation:none; opacity:1; transform:none 再截。
2. 截了 body 或外框 → 截到深色页面背景或渐变边框，导出图带"黑边/彩框"。固定截 #poster-content，导出才是纯内容本体。
   2.1 backgroundColor 设成某色 → 四角圆角外被该色填成方角（多余底色）。想要干净弧角就设 backgroundColor: null（透明）。
   2.2 标题用 background-clip:text 渐变字 → html2canvas 渲染成透明，标题直接消失。截图前把这类文字 backgroundImage 置空、-webkit-text-fill-color 与 color 改为实色（骨架已内置）。
3. scale 过大 + 大图 → 内存溢出崩溃。大图用 toBlob，scale 不超 3。
4. 外部图片跨域 → 导出报 tainted canvas。用 useCORS+allowTaint，或改同域/内联 base64。
5. backdrop-filter / 复杂滤镜 → html2canvas 可能忽略。导出前用纯色/渐变兜底。
6. 依赖 CDN 但用户离线 → 导出按钮失效。需要离线场景时把 html2canvas 内联。

Resources

• assets/poster-template.html — 开箱即填的海报骨架：含外框+内卡结构、下载按钮、downloadPoster() 完整逻辑（带动画冻结、toBlob 导出、错误兜底）。新海报直接复制此文件填内容即可，保证一致性与可导出性。

注：本 skill 源自用户 VCode 的实战方法论——用 HTML 替代图像 prompt 来承载海报/PPT 信息，再补导出图片按钮打通分享。已验证于 6 类真实海报（打卡提醒、结营教练卡、志愿者助教卡、活动介绍长图、AI 对比图、其他分享内容海报图）。