create-html-carousel

已弃用： 此技能已由 goose-graphics 取代。请参阅 skills/composites/goose-graphics/（使用 npx goose-skills install goose-graphics 安装）。轮播格式是新版技能支持的 7 种格式之一，并支持 36 种样式预设、图像来源选择和 PNG 导出。此技能将在保留一个发布周期后移除。

LinkedIn 轮播图创建工具

创建精美的 LinkedIn 轮播帖子 PNG 图片。此技能会生成经过样式设计的 HTML 幻灯片，针对方形格式（1080×1080px）进行了优化，然后自动为每张幻灯片截图，方便直接上传到 LinkedIn。

核心理念

1. 优先考虑 LinkedIn 设计 — 方形格式（1080×1080px），针对移动端信息流浏览进行了优化
2. 信息类内容 — 技巧、工作流、列表、框架（而非演示文稿）
3. 统一样式 — 重用 frontend-slides 中经过验证的设计系统
4. 自动导出 — 生成 HTML → 截图 → 输出可直接用于 LinkedIn 的 PNG 文件
5. 完美适配视口 — 每张幻灯片都必须恰好适配 1080×1080px，无需滚动

---

LinkedIn 轮播图规格

格式： 方形（1080×1080px）

• 宽高比： 1:1
• 文件格式： PNG（推荐）或 JPG
• 文件大小： 每张图片小于 10MB
• 幻灯片上限： 每个轮播最多 10 张图片
• 理想幻灯片数量： 5–8 张（互动效果最佳）

内容结构：

1. 封面幻灯片 — 吸引点 + 标题 + 品牌
2. 内容幻灯片 — 每张幻灯片呈现一个要点（3–6 张）
3. 结尾幻灯片 — 行动号召 / 总结 / 关注提示

---

何时使用此技能

适用于创建以下类型的 LinkedIn 轮播帖子：

• “你应该使用的 5 个 AI GTM 工作流”
• “如何构建 X：分步指南”
• “创始人在 Y 上常犯的 7 个错误”
• “Z 的完整框架”
• “前后对比：我们的指标如何提升了 10 倍”

不适用于：

• 长篇演示文稿（请使用 frontend-slides）
• 视频内容
• 单图帖子

---

工作流概览

1. Content Input → User provides topic/outline
2. Style Selection → Choose visual style (or preview options)
3. HTML Generation → Create 1080×1080px HTML slides
4. Screenshot → Auto-capture each slide as PNG
5. Delivery → Folder of PNG files ready for LinkedIn upload

---

阶段 1：内容探索

步骤 1.1：获取主题和结构

询问用户：

问题 1：主题是什么？

• 标题：“主题”
• 问题：“这个轮播帖子的主要主题是什么？”
• （自由文本输入）

问题 2：内容类型

• 标题：“格式”
• 问题：“这是什么类型的帖子？”
• 选项：
  • “编号列表” — “5 种方法……”“7 个错误……”“3 个步骤……”
  • “操作指南” — 分步教程或流程
  • “框架” — 以结构化方式解释概念
  • “前后对比” — 转变过程或案例研究
  • “见解/技巧” — 建议或经验总结

问题 3：幻灯片数量

• 标题：“长度”
• 问题：“需要多少张幻灯片？”
• 选项：
  • “短（5–6 张）” — 快速精炼（最适合移动端滚动浏览）
  • “中（7–8 张）” — 标准轮播长度
  • “长（9–10 张）” — LinkedIn 允许的最大数量

问题 4：品牌标识

• 标题：“品牌”
• 问题：“每张幻灯片上应显示什么账号标识或名称？”
• （自由文本输入 — 例如，“@yourhandle”、“Acme Inc”，或留空表示不显示）

问题 5：内容是否已准备好？

• 标题：“内容”
• 问题：“内容已经写好了吗？”
• 选项：
  • “是，内容都已写好” — 请粘贴内容
  • “我有要点” — 需要简单排版
  • “只有主题” — 需要协助拟定大纲

如果用户已有内容，请让他们提供内容。

LinkedIn 内容密度规则

每张幻灯片都应能在移动设备上 2–3 秒内浏览完毕：

幻灯片类型	内容上限
封面	标题（1 行）+ 副标题（1 行）+ 品牌标识
列表项	编号/图标 + 标题（最多 2 行）+ 正文（最多 3 行）
框架	图表/视觉元素 + 2–4 个标签
引言/数据	1 个醒目的数据或引言 + 背景说明
行动号召	1 项行动 + 视觉元素

如果内容超出限制： 拆分到多张幻灯片，或简化内容。

---

阶段 2：样式选择

用户可以通过两种方式选择样式：

选项 A：直接选择（更快）

显示预设选择器：

问题：选择一种风格

• 标题：「风格」
• 问题：「哪种视觉风格最适合你的内容？」
• 选项：
  • 「醒目信号」——深色背景上的高对比度卡片，自信鲜明
  • 「暗色植物」——优雅的深色风格，搭配柔和的抽象图形
  • 「笔记本标签」——编辑风的奶油色纸张，搭配彩色标签
  • 「柔彩几何」——友好的柔和彩色搭配装饰性胶囊图形
  • 「霓虹赛博」——未来科技美学
  • 「双色柔彩」——活泼的双色分割设计

（各风格的详细信息请参阅 STYLE_PRESETS.md）

选项 B：引导探索

如果用户不确定，可以询问：

问题：受众与语气

• 标题：「氛围」
• 问题：「你的受众是谁？希望采用什么语气？」
• 选项：
  • 「专业／企业风」→ 推荐：醒目信号、暗色植物
  • 「创意／活泼」→ 推荐：双色柔彩、柔彩几何
  • 「技术／面向开发者」→ 推荐：霓虹赛博、终端绿
  • 「优雅／高端」→ 推荐：暗色植物、纸与墨

然后生成 2-3 张预览幻灯片，让用户选择。

---

第 3 阶段：生成 HTML 轮播图

文件结构

所有轮播图文件（HTML 源文件和 PNG 导出文件）都保存在共享资源目录中。

[carousel-name]/
├── index.html              # Full carousel (all slides)
├── slides/
│   ├── slide-01.html       # Individual slide pages
│   ├── slide-02.html
│   └── ...
└── exports/
    ├── slide-01.png        # Screenshots (generated in Phase 4)
    ├── slide-02.png
    └── ...

1080×1080px 的 HTML 架构

重要：LinkedIn 轮播图幻灯片为正方形（1:1 比例），而非宽屏格式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Slide 01</title>

    
    <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=..." />

    <style>
      /* ===========================================
           LINKEDIN CAROUSEL: SQUARE FORMAT
           Fixed 1080×1080px for screenshot
           =========================================== */
      :root {
        /* Fixed size for LinkedIn */
        --slide-width: 1080px;
        --slide-height: 1080px;

        /* Colors (from chosen preset) */
        --bg-primary: #0a0f1c;
        --text-primary: #ffffff;
        --accent: #00ffcc;

        /* Typography - scaled for square format */
        --title-size: 72px;
        --subtitle-size: 36px;
        --body-size: 28px;
        --small-size: 20px;

        /* Spacing */
        --slide-padding: 80px;
        --content-gap: 40px;

        /* Animation */
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        width: var(--slide-width);
        height: var(--slide-height);
        overflow: hidden;
      }

      body {
        font-family: var(--font-body);
        background: var(--bg-primary);
        color: var(--text-primary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--slide-padding);
      }

      /* Content container */
      .slide-content {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--content-gap);
      }

      /* Typography hierarchy */
      h1 {
        font-size: var(--title-size);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 20px;
      }

      h2 {
        font-size: var(--subtitle-size);
        font-weight: 700;
        line-height: 1.2;
      }

      p,
      li {
        font-size: var(--body-size);
        line-height: 1.4;
      }

      /* List styling */
      ul {
        list-style: none;
      }

      li {
        padding-left: 40px;
        position: relative;
        margin-bottom: 20px;
      }

      li::before {
        content: "→";
        position: absolute;
        left: 0;
        color: var(--accent);
        font-weight: bold;
      }

      /* Number badge (for list items) */
      .number {
        font-size: 120px;
        font-weight: 900;
        color: var(--accent);
        opacity: 0.15;
        position: absolute;
        top: -40px;
        left: -20px;
        z-index: 0;
      }

      /* Branding footer */
      .brand {
        position: absolute;
        bottom: var(--slide-padding);
        right: var(--slide-padding);
        font-size: var(--small-size);
        opacity: 0.7;
      }

      /* ===========================================
           STYLE-SPECIFIC OVERRIDES
           Inject preset styles here
           =========================================== */
      /* ... preset-specific CSS ... */
    </style>
  </head>
  <body>
    <div class="slide-content">
      
      <h1>Your Title Here</h1>
      <p>Your content here</p>
    </div>

    <div class="brand">@yourbrand</div>
  </body>
</html>

内容幻灯片模板

封面幻灯片：

<div class="slide-content">
  <h1>5 AI GTM Workflows<br />You Should Be Using</h1>
  <p>Scale your outbound without scaling your team</p>
</div>
<div class="brand">@yourhandle</div>

编号条目（例如，第 2/6 张幻灯片）：

<div class="slide-content">
  <div class="number">01</div>
  <h2>Signal-Based Outbound</h2>
  <p>
    Monitor job postings, funding announcements, and tech stack changes to find
    companies actively solving your problem.
  </p>
</div>
<div class="brand">@yourhandle • 1/5</div>

框架幻灯片：

<div class="slide-content">
  <h2>The GTM Engineering Stack</h2>
  <div class="framework-grid">
    <div class="box">Research</div>
    <div class="box">Personalization</div>
    <div class="box">Outreach</div>
    <div class="box">Tracking</div>
  </div>
</div>
<div class="brand">@yourhandle • 3/5</div>

行动号召幻灯片：

<div class="slide-content">
  <h2>Want more like this?</h2>
  <p>Follow me for more tips and workflows.</p>
  <div class="cta">Hit that follow button →</div>
</div>
<div class="brand">@yourhandle</div>

---

第 4 阶段：生成截图

生成 HTML 后，自动截取屏幕截图。

使用 Playwright（推荐）

创建 Node.js 脚本，为每张幻灯片截取屏幕截图：

// screenshot-slides.js
const { chromium } = require("playwright");
const path = require("path");
const fs = require("fs");

async function screenshotSlides(slidesDir, outputDir) {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Set viewport to LinkedIn carousel size
  await page.setViewportSize({ width: 1080, height: 1080 });

  // Ensure output directory exists
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }

  // Find all HTML files in slides directory
  const slideFiles = fs
    .readdirSync(slidesDir)
    .filter((f) => f.endsWith(".html"))
    .sort();

  console.log(`Found ${slideFiles.length} slides to screenshot`);

  for (const slideFile of slideFiles) {
    const slidePath = path.join(slidesDir, slideFile);
    const outputName = slideFile.replace(".html", ".png");
    const outputPath = path.join(outputDir, outputName);

    console.log(`Capturing ${slideFile}...`);

    await page.goto(`file://${path.resolve(slidePath)}`);

    // Wait for fonts and animations
    await page.waitForTimeout(500);

    // Take screenshot
    await page.screenshot({
      path: outputPath,
      type: "png",
      fullPage: false,
    });

    console.log(`✓ Saved ${outputName}`);
  }

  await browser.close();
  console.log("\n✨ All slides captured!");
}

// Usage
const carouselName = process.argv[2];
if (!carouselName) {
  console.error("Usage: node screenshot-slides.js <carousel-name>");
  process.exit(1);
}

const slidesDir = path.join(__dirname, carouselName, "slides");
const outputDir = path.join(__dirname, carouselName, "exports");

screenshotSlides(slidesDir, outputDir);

安装

技能目录需要安装以下依赖：

{
  "name": "linkedin-carousel-screenshots",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "playwright": "^1.40.0"
  }
}

首次设置：

cd /path/to/skills/create-html-carousel
npm install

运行截图脚本

生成 HTML 幻灯片后：

node screenshot-slides.js carousel-name

此脚本将：

1. 在无头浏览器中打开每张幻灯片的 HTML 文件
2. 将视口设为 1080×1080px
3. 等待字体和动画加载完成
4. 截取 PNG 屏幕截图
5. 保存到 [carousel-name]/exports/

---

第 5 阶段：交付

生成截图后，向用户展示：

✨ Your LinkedIn carousel is ready!

📁 Location: /assets/carousel-name/

**Slides:**
- 6 HTML slides in slides/ folder
- 6 PNG images in exports/ folder (1080×1080px)

**Preview:**
Open index.html to see all slides with navigation.

**Upload to LinkedIn:**
1. Create new post on LinkedIn
2. Click "Add media"
3. Upload all PNGs from exports/ folder in order
4. Add your post copy
5. Publish!

**File sizes:**
- slide-01.png: 234 KB ✓
- slide-02.png: 198 KB ✓
- slide-03.png: 256 KB ✓
(All under 10MB limit)

Want to make any changes to the slides?

---

针对正方形格式调整风格

frontend-slides 中的所有风格都适用于轮播图，但需要进行以下调整：

字体缩放

正方形格式的水平空间较小，因此要缩小字体：

元素	演示文稿（16:9）	轮播图（1:1）
标题	clamp(2rem, 6vw, 5rem)	72px（固定）
副标题	clamp(1.25rem, 3vw, 2.5rem)	36px（固定）
正文	clamp(0.875rem, 1.5vw, 1.125rem)	28px（固定）
小字	clamp(0.75rem, 1vw, 0.875rem)	20px（固定）

为什么使用固定字号？ 我们的目标是单一导出尺寸（1080×1080px），而不是适配响应式网页浏览。

布局调整

垂直空间十分宝贵：

• 减少顶部／底部内边距（使用 80px，而不是 4rem）
• 缩小行高（使用 1.2-1.4，而不是 1.5-1.6）
• 每张幻灯片减少列表项（最多 3-4 项）
• 缩小装饰元素

以移动端优先的思路设计：

• 大多数 LinkedIn 用户使用手机浏览
• 缩略图尺寸下的文字也必须清晰可读
• 高对比度至关重要
• 大胆、简洁的布局胜过复杂精细的设计

---

内容最佳实践

吸引注意力的公式（封面幻灯片）

适用于 LinkedIn 轮播图的吸睛开场：

• 数字 + 承诺：「5 个让我们的外向营销效率提升 10 倍的工作流」
• 反常识：「别再做 X 了，试试这个。」
• 前后对比：「我们如何在 30 天内从 X 做到 Y」
• 提问：「为什么只有 3% 的创始人在做这件事？」
• 留下悬念：「没人谈论的 GTM 策略」

正文幻灯片（第 2-9 张）

每张幻灯片应做到：

1. 突出一个明确要点——不要塞入多个概念
2. 建立视觉层次——大号数字／图标 + 标题 + 正文
3. 具体而非抽象——写「利用招聘信息发现意向」，而不是「利用各种信号」
4. 便于快速浏览——阅读时间最多 2-3 秒

结束页

始终添加 CTA：

• “关注我，获取更多 [主题] 内容”
• “如果这对你有帮助，请转发”
• “评论说说你最大的收获”
• “如果你想要完整的行动指南，请给我发私信”

避免：

• “链接在评论区”（通常很容易被忽略）
• “看看我的网站”（感觉像是在推销）
• 完全没有 CTA（浪费机会）

---

故障排查

截图中的字体未加载

**症状：**截图显示的是默认系统字体

解决方案：

1. 使用 Web 安全字体（Arial、Georgia），或
2. 截图前添加 await page.waitForLoadState('networkidle')
3. 增加等待超时时间：await page.waitForTimeout(1000)

截图模糊

**症状：**文字看起来模糊或分辨率较低

解决方案：

1. 在 Playwright 中设置设备缩放系数：

   await page.setViewportSize({
     width: 1080,
     height: 1080,
     deviceScaleFactor: 2, // Retina-quality
   });
   

内容溢出幻灯片

**症状：**截图中的文字或元素被截断

解决方案：

1. 减小字号
2. 减小内边距
3. 拆分为多张幻灯片
4. 简化内容（减少要点、缩短文字）

导出的颜色看起来不同

**症状：**PNG 颜色与 HTML 预览不一致

解决方案：

• 确保浏览器的颜色配置文件与 sRGB 一致
• 使用十六进制颜色，避免使用可能导致渲染效果不同的 CSS 滤镜
• 生成所有幻灯片前，先测试截图脚本

---

预设速查

预设	最适合	风格
Bold Signal	自信、影响力强	专业
Dark Botanical	优雅、高端	精致
Notebook Tabs	编辑风格、条理清晰	友好、专业
Pastel Geometry	友好、平易近人	活泼
Neon Cyber	科技、创新	未来感
Split Pastel	创意、有趣	充满活力

有关完整的样式详情，请参阅 STYLE_PRESETS.md。

---

相关技能

• frontend-slides — 用于完整演示文稿（而非轮播图）
• personalized-email — 用于搭配 LinkedIn 帖子的外联内容
• deep-web-research — 用于研究轮播图内容的主题和数据

---

示例会话流程

1. 用户：“创建一个关于 5 个 AI GTM 工作流的 LinkedIn 轮播图”
2. 技能询问：内容类型、幻灯片数量、是否已有内容？
3. 用户提供这 5 个工作流的要点
4. 技能询问：风格偏好
5. 用户选择“Bold Signal”
6. 技能生成 7 张 HTML 幻灯片（封面 + 5 个工作流 + CTA）
7. 技能自动运行截图脚本
8. 技能交付包含 HTML 和 PNG 导出的文件夹
9. 用户将 PNG 上传到 LinkedIn 并发布

总耗时：从构思到轮播图可发布，只需 5–10 分钟。