carousels

LinkedIn + Instagram 轮播图生成器

将一段优质的源内容转化为可滑动浏览的图片轮播图。一套 4:5 幻灯片同时适用于两个平台——Instagram 使用 PNG，LinkedIn 使用合并后的 PDF。

品牌固定不变，不可配置：米白色 #F5F1E8、墨黑色 #0F0F0F、柔和青绿色 #2A6F6A、Inter 字体、手绘信息图插画。每次生成的视觉效果都完全一致。不要询问用户主题、颜色或字体。

技能文件（相对于仓库根目录 /Users/craighewitt/Coding/second-brain 的路径）：

• output/cowork-context/skills/carousels/assets/carousel.css — 品牌样式表
• output/cowork-context/skills/carousels/references/slide-layouts.md — HTML 模式
• output/cowork-context/skills/carousels/scripts/generate-image.mjs — GPT Image（OpenAI）
• output/cowork-context/skills/carousels/scripts/render.mjs — 幻灯片 → PNG + PDF

---

阶段 0 — 预检

先运行以下检查。如果任何一项未通过，指出解决方法并停止，直到问题解决——不要在环境异常时继续操作。

1. Node — node -v（需要 v18+；仓库使用 v22）。

2. 无头浏览器 — render.mjs 会启动 puppeteer。如果缺少 puppeteer 或其浏览器，脚本会打印安装命令。不要提前处理；只需运行渲染步骤，并根据任何错误采取相应操作。

3. OPENAI_API_KEY — 只有轮播图包含图片幻灯片时才需要。使用 [ -n "$OPENAI_API_KEY" ] && echo set || echo missing 检查。如果缺少，请告知用户：

   GPT Image（OpenAI）需要 OpenAI API 密钥。请在 platform.openai.com/api-keys 创建密钥并添加账单信息，然后在 shell 中运行 export OPENAI_API_KEY="sk-..."（切勿提交此密钥）。

   如果用户目前无法设置密钥，可提出制作纯文字轮播图（不含图片幻灯片）——无需密钥也能完整使用此技能。

---

阶段 1 — 收集素材

获取源内容。接受以下任一形式：

• 粘贴的文本 — 邮件、脚本片段、笔记。
• 本地文件路径 — 例如 output/ 中的脚本或文章草稿。

不要抓取 URL。如果用户提供了 URL，请让他们粘贴内容（遵循 CLAUDE.md）。

然后各读取一次：

• context/brand/02-voice.md — 用于确定配文语气。
• context/brand/03-visual-identity.md — 确认品牌视觉的配色和字体。

只询问确实会影响输出的内容（一次简短询问）：

• 希望从源内容中提炼出什么角度？（可选）
• 最后一张幻灯片的 CTA 词语——希望读者评论什么？（可选；默认使用与主题相关的词语）
• 有什么引流赠品需要推荐吗？（可选）

如果用户已在提示中说明方向，请跳过提问。

创建本次运行文件夹：output/carousels/<source-slug>-<YYYY-MM-DD>/，并创建 images/ 和 publish/ 子文件夹。将 carousel.css 复制到运行文件夹中（渲染时需要它与 slides.html 放在同一目录）。

---

阶段 2 — 编辑加工

这是最关键的部分——轮播图成败取决于编辑，而非渲染。

将源内容提炼为 5-8 个要点，每张幻灯片一个观点。根据源内容决定页数：一篇精炼的 4 条建议文章可做成 7 张幻灯片；内容密集的文章可能需要 8 张。绝不凑数。

结构：

• 第 1 张 — 封面／钩子。 抓住读者目光。提出承诺或引人深思的观点。
• 第 2 张至倒数第 2 张 — 内容。 每张一个观点。一张幻灯片只解释一件事。
• 第 N 张 — CTA。 收藏／关注／评论指定词语。

为每张内容幻灯片决定采用纯文字还是图片形式。图片幻灯片适用于画出来比写出来更清晰的观点——流程、关系、前后对比、系统。目标是 2-4 张图片幻灯片，而非每张都用图片。纯文字幻灯片使用大数字、步骤、引言、对比或陈述布局。

在运行文件夹中编写 01-slide-plan.md：记录每张幻灯片的编号、角色、布局、一句话概述，以及图片／纯文字标记。

---

第 3 阶段 — 幻灯片文案

编写每张幻灯片上显示的文案。规则：

• 标题不超过 12 个词。正文不超过 30 个词。社交媒体上的注意力很短。
• 每张幻灯片只讲一个观点——如果文案需要用两句话铺垫，就拆成两张幻灯片。
• Craig 的风格：直接、实用，不夸大，不说“势如破竹 / 改变游戏规则”之类的话。
• 封面要让人愿意滑动；CTA 要求用户收藏并评论指定词语。

---

第 4 阶段 — 生成图片

仅适用于带图片的幻灯片。如果制作纯文字轮播图，则完全跳过。

为每张带图片的幻灯片编写一段两段式提示词：

第 1 段（固定 — 品牌插画风格，原样粘贴）：

手绘极简信息图，黑色墨线绘制于纯色、平坦的暖白背景上（十六进制 #F5F1E8），搭配单一低饱和度的青绿色点缀色（#2A6F6A），简洁的白板手绘风格，笔触自信，手写文字，简单的几何图标，留有充足空白。

**第 2 段：**描述该幻灯片的具体示意图——概念、布局、标签和流程。描述要具体（“一个 3 步水平流程：起草 → 审核 → 发布，每一步都放在带标签的方框中，并以箭头连接”）。不要使用写实图库照片、渐变或人物。第 2 段始终以以下文字结尾：“整个示意图，包括所有图标和标签，都完整地置于画面之内，四边留有充足空白边距——没有任何内容被裁切，也没有任何内容贴近边缘。” 否则，模型往往会绘制延伸至边缘的内容，导致最外侧的标签被裁切。

逐张生成：

node output/cowork-context/skills/carousels/scripts/generate-image.mjs \
  --prompt-file <run>/images/slide-04-prompt.txt \
  --out <run>/images/slide-04.png

先将提示词写入 .txt 文件，以避免 shell 转义问题。生成后，脚本会将图片背景规范为精确的 #F5F1E8（--bg-hex 的默认值），让插画与浅色幻灯片背景无缝衔接——看不到面板边缘。默认尺寸为 1024x1024，质量为 medium。每张 PNG 按对应幻灯片编号命名为 slide-NN.png。由于墨线是黑色的，带图片的幻灯片必须使用浅色背景，而不是青绿色变体。（如果需要让图片幻灯片使用其他背景，请传入 --bg-hex #RRGGBB 进行匹配。）

---

第 5 阶段 — 构建 slides.html 并审批样稿

使用 references/slide-layouts.md 中的样式编写 <run>/slides.html。 每张幻灯片按顺序对应一个 .slide div。链接 carousel.css（运行文件夹中的副本）。将插图引用为 images/slide-NN.png。

**样稿审批检查点：**在渲染整组幻灯片之前，只渲染封面，让用户查看样式：

node output/cowork-context/skills/carousels/scripts/render.mjs \
  --slides <run>/slides.html --out <run>/publish

向用户展示 publish/slide-01.png。如果用户希望修改文案或布局，请编辑 slides.html 并重新渲染。只有在封面获批后才能继续。

---

第 6 阶段 — 渲染

运行完整渲染（与上文相同的命令——会渲染每个 .slide）：

node output/cowork-context/skills/carousels/scripts/render.mjs \
  --slides <run>/slides.html --out <run>/publish

生成 publish/slide-01.png … slide-NN.png（Instagram）和 publish/carousel.pdf（LinkedIn）。所有 PNG 的尺寸均为 1080×1350。

---

第 7 阶段 — 配文

编写 publish/caption.md，配文需同时适用于两个平台：

• 开场句要呼应封面幻灯片。
• 2-4 行简短内容——说明轮播图讲了什么，以及为什么重要。
• CTA：收藏帖子、关注 @thecraighewitt，并评论指定词语。
• 保持 Craig 的风格。不要堆砌标签——末尾最多加 3-5 个相关标签，可选。

如果值得区分 LinkedIn 和 Instagram 版本（篇幅或语气不同），请在清晰的标题下分别撰写。否则，共用一份配文即可。

---

阶段 8 — 审核与交付

打开渲染后的 PNG，并逐一检查是否符合品牌规范：

• 仅使用 #F5F1E8 / #0F0F0F / #2A6F6A（以及少量用于数据标注的 #C75A2C）。
• 仅使用 Inter。不得使用渐变、投影，幻灯片界面元素中不得使用表情符号。
• 每张幻灯片只使用一个青绿色元素。
• 每张幻灯片只表达一个观点；文字在手机屏幕上也清晰易读。
• 除封面外，每张幻灯片的页脚都要包含账号名和页码。
• 页脚中的幻灯片页码应与实际总数一致（03 / 07）。

修复 slides.html 中不符合规范的幻灯片，然后重新渲染。接着报告运行文件夹，并告知用户：将 PNG 上传到 Instagram，作为轮播帖发布；将 carousel.pdf 上传到 LinkedIn，作为文档帖发布；两个平台都使用 caption.md。

最终交付文件位于 output/carousels/<slug>-<date>/publish/：

• slide-01.png … slide-NN.png
• carousel.pdf
• caption.md