carousel-design

用途

carousel-design 用于把结构化的幻灯片数据渲染成 Instagram 轮播图的 PNG 图片。它使用用户预先搭建并确认过的品牌化 Puppeteer HTML 模板，将每张幻灯片的内容填入模板后逐张截图输出。

从 ~/.claude/skills/carousel/config.json 读取配置，包括幻灯片尺寸（默认 1080x1440，即 4:5 Instagram 轮播比例）、背景色与图案、字体（标题字体与等宽字体，通过 Google Fonts 加载）、文字/强调/背景颜色、账号 handle、头像、角色图片路径等。
接收来自 /carousel-copy 的 JSON 幻灯片数组，每张幻灯片可包含：name（文件名）、slideNum（如 "01 / 07"）、stepLabel（如 "STEP 01"）、headline（含 <br> 与 <span class="accent"> 的 HTML 字符串）、subline（全大写描述文字）、activateLabel（终端上方文字）、terminal（使用 .t-line、.prompt、.cmd、.check、.arrow 类的终端 HTML）、character（配置中的角色名）、以及可选的 isPill、isHook、isCTA、headlineSize、ctaKeyword。
支持三种幻灯片类型：钩子页（isHook: true, isPill: true，带强调色角标、分类胶囊徽章、底部头像与箭头）、内容页（默认，含步骤标签、激活标签、终端与角色、底部头像与箭头）、CTA 页（isCTA: true，全部居中，带强调色边框的关键词框与 "FOLLOW [HANDLE]"，无箭头、无终端、无角色）。
生成 Node.js 构建脚本，使用 Puppeteer 逐张截图，输出 PNG 到 ~/.claude/skills/carousel/output/，并在完成后读取样例图片验证输出、报告文件路径。

前置检查：读取 ~/.claude/skills/carousel/config.json；若不存在，提示用户先运行 /carousel 完成一次性模板搭建（约 10 分钟）并停止。同时验证 ~/.claude/skills/carousel/slide-template.html 与 ~/.claude/skills/carousel/node_modules/puppeteer 是否存在；模板缺失时提示运行 /carousel 重建，Puppeteer 缺失时运行 cd ~/.claude/skills/carousel && npm install puppeteer。
输入：接受 JSON 幻灯片数组（来自 /carousel-copy）。若未提供 JSON，则向用户索取或检查 /carousel-copy 的输出是否存在。
渲染流程：读取 HTML 模板与配置；对每张幻灯片替换模板占位符、将角色名映射到配置中的文件路径、应用幻灯片类型专属修改（钩子角标、CTA 居中布局等）、处理 headlineSize 覆盖、在 activateLabel 为空时隐藏；生成使用 Puppeteer 截图的构建脚本；通过 Node.js 运行；将 PNG 保存到 ~/.claude/skills/carousel/output/；读取样例图片验证；完成后报告文件路径。

适合需要按固定品牌模板批量生成 Instagram 轮播图 PNG 的场景，尤其是配合 /carousel-copy 产出的结构化文案数据，快速把多张幻灯片渲染为统一风格的图片。

必须先完成 /carousel 一次性搭建，模板与配置缺失时无法渲染。
不得重新生成角色图片或背景图案，它们位于 ~/.claude/skills/carousel/assets/。
标题文字应占幻灯片约 40-50%，必要时调整 headlineSize。
终端不得位于最底部，需通过 flexbox 保持间距；激活标签必须清晰地位于终端上方。
主内容区使用 display: flex; flex-direction: column; justify-content: space-evenly 实现等距分布，禁止对副标题或终端使用绝对定位。
CTA 页全部居中，无箭头、无角色。
报告完成前必须读取 PNG 验证输出。
所有文件路径均相对于 ~/.claude/skills/carousel/。
关于收费、价格、平台支持范围等具体信息，资料中暂未提供。