instagram-carousel

Instagram 轮播帖设计器

使用你的品牌生成独立的 HTML 文件形式的 Instagram 轮播帖。每个轮播帖都是一个 HTML 文件，包含固定尺寸的幻灯片（420x525px），并可通过 Playwright 导出为像素完美的 1080x1350px PNG。

此技能同时处理文案和设计。提供一个主题，选择一种风格，它就会撰写幻灯片文案并构建视觉效果——使用你的配色、照片和姓名。

---

架构

固定尺寸

每张幻灯片都是一个固定的 420x525px 盒子。不响应式，尺寸固定。

Design:  420 x 525px  (what you see in browser)
Export:  1080 x 1350px (what gets uploaded to Instagram)
Scale:   2.5714x (via Playwright device_scale_factor)
Ratio:   4:5 (Instagram carousel standard)

模块化参考文件

文件	内容
references/design-system.md	尺寸、排版、颜色令牌、幻灯片架构
references/components.md	个人资料页眉、进度条、箭头、水印、CTA 幻灯片、IG 边框
references/styles.md	4 种视觉风格及完整 CSS
references/export-guide.md	Playwright 导出脚本、关键规则、常见错误

---

4 种设计风格

风格	名称	适用场景	气质
1	Bold Impact	编号洞见、转变、错误、技巧	深色、大号文字、强调色、胶片颗粒、高级感
2	Tweet Post	热门观点、看法、引言、智慧箴言	极简、清爽、零特效、对话感
3	Clean Editorial	框架、教程、案例研究、清单文章	白色背景、网格叠层、珊瑚色强调、教育性
4	Product Showcase	工具评测、比较、精选列表	柔和暖色渐变、应用卡片、分页圆点

风格选择逻辑

1. 明确要求——用户说“大胆冲击风格”“推文风格”“编辑风格”或“产品展示”
2. 根据内容自动检测：
   • 热门观点 / 看法 / 对话式内容 / 引言 → Tweet Post
   • 工具列表 / 产品比较 / 类别细分 → Product Showcase
   • 框架 / 教程 / 教育内容 / 操作指南 / 案例研究 → Clean Editorial
   • 其他内容（编号洞见、技巧、转变、错误）→ Bold Impact（默认）
3. 如有歧义——最多提问 1 个问题，默认选择 Bold Impact

---

工作流

按顺序执行以下阶段。

阶段 0：品牌设置（仅首次使用）

检查当前工作目录中是否存在 carousels/brand-config.json。

• **如果存在：**读取该文件，并将其中的值用于所有品牌元素。跳至阶段 1。
• **如果不存在：**先执行以下品牌引导流程，再进行其他操作。

品牌引导问答

向用户提出以下 6 个问题（可以一次性全部询问）：

Before we build your first carousel, I need to set up your brand. This only runs once.

1. What's your full name? (shown on every slide as the profile name)
2. What's your @handle? (watermark on every slide, e.g. @yourname)
3. What's your subtitle or tagline? (e.g. "Paid Media | Growth Marketing")
4. Path to your profile photo? (e.g. carousels/photo.jpg — or type "skip" to use initials)
5. What's your brand accent color? (paste a hex code like #6EE421, or describe: green / coral / blue / purple / orange)
6. Default style preference? (dark / light / minimal — or type "auto" to let me decide per content)

保存品牌配置

收集完答案后，保存 carousels/brand-config.json：

{
  "name": "User's Full Name",
  "handle": "@userhandle",
  "subtitle": "Their Tagline Here",
  "profile_photo": "carousels/photo.jpg",
  "accent_color": "#HEXCODE",
  "initials": "XX",
  "default_style": "dark",
  "setup_complete": true
}

强调色映射（如果用户用文字描述，而非提供十六进制值）：

描述	十六进制值
绿色	#6EE421
珊瑚色 / 橙红色	#e8553d
蓝色	#3b82f6
紫色	#8b5cf6
橙色	#f97316
粉色	#ec4899
青绿色	#14b8a6
黄色	#eab308

**姓名首字母：**取名字的首字母和姓氏的首字母。如果只有一个名字，则取前两个字母。

**个人资料照片备用方案：**如果用户跳过或文件不存在，则使用强调色圆形，并在其中显示用户的姓名首字母。

创建 carousels/ 文件夹

如果不存在，还要创建 carousels/[year]/[month]/ 结构。

---

阶段 1：研究

1. 检查 carousels/ 中过去的轮播帖——浏览标题和文件名，避免重复主题
2. 确定风格（参见上述选择逻辑）

阶段 2：撰写幻灯片文案

遵循以下文案规则：

语气：

• 直接、有主见——立场鲜明，不含糊其辞
• 有经验支撑——提供真实案例和具体细节
• 拒绝废话——不说企业套话，不用填充词
• 简洁有力——可以使用片段句，突出对比

禁用词： "just", "really", "actually", "basically", "simply", "literally"

开场钩子公式（幻灯片 1）：

• 反常识：「你的 [strategy] 方向错了。」
• 数字承诺：「5 个 [topic] 错误正在耗费你的 [resource]。」
• 挑战：「我敢打赌，你在 [year] 还在这么做。」
• 大胆断言：「[Thing] 没有害死 [people]。[Behaviour] 才害死了 [people]。」

**幻灯片数量：**5–10 张（7 张最合适）。每张幻灯片应在 3–4 秒内读完。

阶段 3：构建 HTML

使用品牌配置中的值生成一个独立的 HTML 文件。阅读所有参考文件：

• references/design-system.md — 尺寸、字体、颜色
• references/components.md — 共享组件
• references/styles.md — 所选样式的 CSS 和布局

关键构建规则：

1. 每张幻灯片：width: 420px; height: 525px;——固定尺寸，绝不响应式
2. 所有强调和高亮元素均使用 brand.accent_color
3. 在个人资料标题和水印中使用 brand.name、brand.handle、brand.subtitle
4. 个人资料照片：如果 brand.profile_photo 文件存在 → 转为 base64 并嵌入；否则 → 使用 brand.initials 和 brand.accent_color 创建姓名首字母圆形头像
5. 所有图片：以内嵌 base64 编码，确保 HTML 独立完整
6. 始终使用 Python 生成 HTML——绝不使用 shell/bash（会破坏特殊字符）
7. IG 预览框需包裹轮播内容，以便在浏览器中预览
8. 导航：支持触控滑动、鼠标拖动和键盘方向键
9. 导出按钮：逐张导出 PNG，以及导出包含所有幻灯片的 PDF
10. 保存到：carousels/[year]/[month]/carousel-XX-topic.html
11. **强制要求——清理强调色：**参考文件包含示例十六进制颜色值（#6EE421、#85F040、#5BC01C），它们来自示例品牌。生成完整 HTML 字符串后，在写入文件前使用 Python 执行全局替换：

# Replace all sample accent colors with the user's brand color
SAMPLE_ACCENTS = ["#6EE421", "#85F040", "#5BC01C", "#6ee421", "#85f040", "#5bc01c"]
for sample in SAMPLE_ACCENTS:
    html = html.replace(sample, brand["accent_color"])

这样可确保其他人的轮播内容不会使用你的设计中的绿色。

阶段 4：预览并迭代

展示轮播内容。逐张概述幻灯片内容，并询问是否需要修改。

阶段 5：导出

首选方案（Playwright——像素级精准）： 运行 references/export-guide.md 中的 Python 导出脚本。该脚本会为每张幻灯片生成 1080x1350px 的 PNG。

备用方案（浏览器）： HTML 文件包含使用 html2canvas + jsPDF 的导出按钮。

阶段 6：保存并提出建议

1. 保存到 carousels/[year]/[month]/carousel-XX-topic.html
2. 建议一条带有相关标签的 Instagram 配文
3. 提供文件路径和后续步骤

---

质量检查清单

展示轮播内容前，确认：

• 已读取品牌配置（没有使用硬编码值）
• 已通过 Google Fonts CDN 加载 Poppins 字体
• 每张幻灯片尺寸严格为 420x525px——不使用响应式宽度
• 幻灯片数量为 5–10 张（最好是 7 张）
• 每张幻灯片都能在 3–4 秒内读完
• 首张主视觉幻灯片有能吸引注意力的钩子
• 每张幻灯片都有个人资料标题（照片或姓名首字母备用方案）
• 每张幻灯片都有进度条
• 除 CTA 幻灯片外，每张幻灯片都有箭头指示符
• 每张幻灯片都有账号名水印
• CTA 幻灯片采用白色或纹理设计
• 全程正确使用强调色（没有硬编码绿色）
• 文字大小符合所选样式
• 按所选样式正确应用视觉效果
• 导航正常工作（触控／鼠标／键盘）
• IG 预览框正好以 420px 宽度包裹轮播内容
• PNG + PDF 导出按钮存在且可正常使用
• 文件已保存到正确路径
• 已提供 Instagram 配文建议