instagram-carousel

用途

Instagram Carousel Designer 用于设计 Instagram 轮播帖子，输出为自包含的 HTML 文件，并采用用户自己的品牌。它同时处理文案与设计：给定一个主题、选择一种风格，它会撰写幻灯片文案并构建视觉，使用用户的颜色、照片和姓名。

主要能力

生成固定尺寸幻灯片的单一 HTML 文件，幻灯片尺寸为 420x525px，通过 Playwright 以 device_scale_factor 2.5714x 导出为 1080x1350px PNG，比例为 4:5（Instagram 轮播标准）。
提供 4 种设计风格：
1. Bold Impact：适合编号见解、转变、错误、提示；深色、大号文字、强调色、胶片颗粒、高级感。
2. Tweet Post：适合热门观点、意见、引用、智慧；极简、干净、无效果、对话式。
3. Clean Editorial：适合框架、教程、案例研究、列表文章；白色背景、网格叠加、珊瑚色强调、教育性。
4. Product Showcase：适合工具评测、对比、精选列表；柔和暖色渐变、应用卡片、分页点。
风格选择逻辑：支持用户明确指定风格；或根据内容自动检测：热门观点/意见/对话/引用 → Tweet Post；工具列表/产品对比/类别细分 → Product Showcase；框架/教程/教育/操作指南/案例研究 → Clean Editorial；其他（编号见解、提示、转变、错误）→ Bold Impact（默认）。若模棱两可，最多问 1 个问题，默认 Bold Impact。
模块化参考文件：references/design-system.md（尺寸、排版、颜色令牌、幻灯片架构）、references/components.md（个人资料头部、进度条、箭头、水印、CTA 幻灯片、IG 框架）、references/styles.md（全部 4 种视觉风格及完整 CSS）、references/export-guide.md（Playwright 导出脚本、关键规则、常见错误）。

使用方式

按以下阶段依次进行：

阶段 0：品牌设置（仅首次使用） 检查当前工作目录中是否存在 carousels/brand-config.json。若存在，读取并使用其中的值，跳到阶段 1。若不存在，先运行品牌引导。

品牌引导访谈（6 个问题，可一次性询问）：

你的全名？（显示在每张幻灯片上作为个人资料名称）
你的 @handle？（每张幻灯片上的水印，例如 @yourname）
你的副标题或标语？（例如 "Paid Media | Growth Marketing"）
个人资料照片的路径？（例如 carousels/photo.jpg — 或输入 "skip" 使用首字母）
你的品牌强调色？（粘贴十六进制代码如 #6EE421，或描述：green / coral / blue / purple / orange）
默认风格偏好？（dark / light / minimal — 或输入 "auto" 让技能根据内容决定）

收集答案后保存 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
}

强调色映射（若用户描述而非十六进制）：green → #6EE421；coral / orange-red → #e8553d；blue → #3b82f6；purple → #8b5cf6；orange → #f97316；pink → #ec4899；teal → #14b8a6；yellow → #eab308。

首字母：提取名字首字母 + 姓氏首字母。若只有一个名字，使用前两个字母。

照片回退：若用户跳过或文件不存在，使用强调色的首字母圆形。

创建 carousels/ 文件夹，并创建 carousels/[year]/[month]/ 结构（若不存在）。

阶段 1：研究 检查 carousels/ 中过去的轮播，扫描标题/文件名以避免重复主题。确定风格（见上述选择逻辑）。

阶段 2：撰写幻灯片文案 文案规则：

语气：直接且有主见——立场清晰，不模棱两可；有经验支撑——真实例子、真实细节；反废话——无企业套话、无填充词；有力——片段可以，对比取胜。
禁用词："just"、"really"、"actually"、"basically"、"simply"、"literally"。
钩子公式（幻灯片 1）：反直觉："Your [strategy] is backwards."；数字承诺："5 [topic] mistakes burning your [resource]."；挑战："I bet you're still doing this in [year]."；大胆陈述："[Thing] didn't kill [people]. [Behaviour] killed [people]."
幻灯片数量：5-10 张（7 张最佳）。每张幻灯片可在 3-4 秒内读完。

阶段 3：构建 HTML 使用品牌配置值生成单一自包含 HTML 文件。读取所有参考文件：references/design-system.md（尺寸、字体、颜色）、references/components.md（共享组件）、references/styles.md（所选风格的 CSS 和布局）。

关键构建规则：

每张幻灯片：width: 420px; height: 525px; — 固定，绝不响应式。
所有强调/高亮元素使用 brand.accent_color。
个人资料头部和水印使用 brand.name、brand.handle、brand.subtitle。
个人资料照片：若 brand.profile_photo 文件存在 → base64 编码并嵌入；否则 → 使用 brand.initials 和 brand.accent_color 的首字母圆形。
所有图片：base64 编码内联（自包含 HTML）。
始终使用 Python 生成 HTML——绝不使用 shell/bash（会损坏特殊字符）。
IG 预览框架包裹轮播以供浏览器内预览。
导航：触摸滑动 + 鼠标拖动 + 键盘箭头。
导出按钮：每张幻灯片 PNG + PDF（所有幻灯片）。
保存到：carousels/[year]/[month]/carousel-XX-topic.html。

强制——强调色清理：参考文件包含示例品牌的示例十六进制值（#6EE421、#85F040、#5BC01C）。生成完整 HTML 字符串后，在 Python 中写入文件前运行全局替换：

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：保存与建议 保存到 carousels/[year]/[month]/carousel-XX-topic.html。建议带有相关话题标签的 Instagram 标题。提供文件路径和后续步骤。

质量检查清单

展示轮播前验证：品牌配置已读取（非硬编码值）；Poppins 字体通过 Google Fonts CDN 加载；每张幻灯片恰好 420x525px——无响应式宽度；幻灯片数量 5-10（理想 7）；每张幻灯片可在 3-4 秒内读完；主幻灯片有阻止滚动的钩子；每张幻灯片有个人资料头部（照片或首字母回退）；每张幻灯片有进度条；除 CTA 外每张幻灯片有箭头指示器；每张幻灯片有 handle 水印；CTA 幻灯片使用白色/纹理设计；强调色全程正确使用（非硬编码绿色）；文字大小适合风格；视觉效果按风格正确应用；导航可用（触摸/鼠标/键盘）；IG 预览框架恰好以 420px 包裹轮播；PNG + PDF 导出按钮存在且可用；文件保存到正确路径；建议 Instagram 标题。

适用场景

适合需要快速生成品牌化 Instagram 轮播帖子的用户，涵盖从文案撰写到视觉设计再到导出的完整流程。适用于内容创作者、营销人员、社交媒体运营者等。

限制

幻灯片尺寸固定为 420x525px，非响应式。
导出依赖 Playwright 或浏览器端 html2canvas + jsPDF。
首次使用需完成品牌设置。
其他具体限制暂未提供。

技能介绍

用途

主要能力

使用方式

质量检查清单

适用场景

限制