instagram-carousel

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Instagram Carousel Designer

Instagram轮播图设计器

Generate Instagram carousel posts as self-contained HTML files in your brand. Each carousel is a single HTML file with fixed-dimension slides (420x525px) that export as pixel-perfect 1080x1350px PNGs via Playwright.

This skill handles both copy and design. Give it a topic, pick a style, and it writes the slides + builds the visual — using your colors, your photo, your name.

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

该skill同时处理文案和设计。给它一个主题，选择一种风格，它就会写出幻灯片并构建视觉——使用你的颜色、你的照片、你的名字。

Architecture

架构

Fixed Dimensions

固定尺寸

Every slide is a fixed 420x525px box. Not responsive. Fixed pixel dimensions.

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)

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

设计：  420 x 525px  （浏览器中看到的）
导出：  1080 x 1350px （上传到Instagram的）
缩放：  2.5714x （通过Playwright device_scale_factor）
比例：  4:5（Instagram轮播图标准）

Modular Reference Files

模块化参考文件

File	Contains
`references/design-system.md`	Dimensions, typography, color tokens, slide architecture
`references/components.md`	Profile header, progress bar, arrow, watermark, CTA slide, IG frame
`references/styles.md`	All 4 visual styles with complete CSS
`references/export-guide.md`	Playwright export script, critical rules, common mistakes

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

4 Design Styles

4种设计风格

Style	Name	Best For	Vibe
1	Bold Impact	Numbered insights, shifts, mistakes, tips	Dark, massive text, accent color, film grain, premium
2	Tweet Post	Hot takes, opinions, quotes, wisdom	Minimal, clean, zero effects, conversational
3	Clean Editorial	Frameworks, tutorials, case studies, listicles	White bg, grid overlay, coral accent, educational
4	Product Showcase	Tool reviews, comparisons, curated lists	Soft warm gradient, app cards, pagination dots

风格	名称	最适合	氛围
1	Bold Impact	编号洞察、转变、错误、技巧	深色、大号文本、强调色、胶片颗粒、高级感
2	Tweet Post	热门观点、意见、引述、智慧	极简、干净、零效果、对话式
3	Clean Editorial	框架、教程、案例研究、列表文章	白色背景、网格叠加、珊瑚色强调、教育感
4	Product Showcase	工具评测、对比、精选列表	柔和暖渐变、应用卡片、分页点

Style Selection Logic

风格选择逻辑

Explicit request — user says "bold impact", "tweet style", "editorial", "product showcase"
Auto-detection by content:
- Hot take / opinion / conversational / quote → Tweet Post
- List of tools / product comparison / category breakdown → Product Showcase
- Framework / tutorial / educational / how-to / case study → Clean Editorial
- Everything else (numbered insights, tips, shifts, mistakes) → Bold Impact (default)
If ambiguous — ask 1 question max, default to Bold Impact

明确请求 — 用户说“bold impact”、“tweet style”、“editorial”、“product showcase”
根据内容自动检测：
- 热门观点 / 意见 / 对话式 / 引述 → Tweet Post
- 工具列表 / 产品对比 / 类别分解 → Product Showcase
- 框架 / 教程 / 教育 / 操作指南 / 案例研究 → Clean Editorial
- 其他所有内容（编号洞察、技巧、转变、错误）→ Bold Impact（默认）
如果不确定 — 最多问1个问题，默认为Bold Impact

Workflow

工作流程

Follow these phases in order.

按顺序执行以下阶段。

Phase 0: Brand Setup (First Use Only)

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

Check if
carousels/brand-config.json
exists in the current working directory.

If it exists: Read it and use those values for all brand elements. Skip to Phase 1.
If it does NOT exist: Run the brand onboarding below before doing anything else.

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

如果存在： 读取它并使用其中的值作为所有品牌元素。跳到阶段1。
如果不存在： 在进行任何其他操作之前，先运行下面的品牌引导流程。

Brand Onboarding Interview

品牌引导访谈

Ask the user these 6 questions (can be asked all at once):

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)

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

在构建你的第一个轮播图之前，我需要设置你的品牌。这只会运行一次。

1. 你的全名是什么？（作为每张幻灯片上的个人资料名称）
2. 你的@账号是什么？（每张幻灯片上的水印，例如 @yourname）
3. 你的副标题或标语是什么？（例如 “Paid Media | Growth Marketing”）
4. 你的个人资料照片路径？（例如 carousels/photo.jpg — 或输入“skip”使用姓名缩写）
5. 你的品牌强调色是什么？（粘贴十六进制代码如 #6EE421，或描述：绿色 / 珊瑚色 / 蓝色 / 紫色 / 橙色）
6. 默认风格偏好？（深色 / 浅色 / 极简 — 或输入“auto”让我根据内容决定）

Saving Brand Config

保存品牌配置

After collecting answers, save

carousels/brand-config.json

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
}

Accent color mapping (if user describes instead of hex):

Description	Hex
green	`#6EE421`
coral / orange-red	`#e8553d`
blue	`#3b82f6`
purple	`#8b5cf6`
orange	`#f97316`
pink	`#ec4899`
teal	`#14b8a6`
yellow	`#eab308`

Initials: Extract first letter of first name + first letter of last name. If only one name, use first two letters.

Profile photo fallback: If user skips or file doesn't exist, use a circle with their initials in the accent color.

收集答案后，保存

carousels/brand-config.json

：

json

{
  "name": "用户的全名",
  "handle": "@用户账号",
  "subtitle": "他们的标语",
  "profile_photo": "carousels/photo.jpg",
  "accent_color": "#HEXCODE",
  "initials": "XX",
  "default_style": "dark",
  "setup_complete": true
}

强调色映射（如果用户描述而非给出十六进制）：

描述	Hex
绿色	`#6EE421`
珊瑚色 / 橙红色	`#e8553d`
蓝色	`#3b82f6`
紫色	`#8b5cf6`
橙色	`#f97316`
粉色	`#ec4899`
青色	`#14b8a6`
黄色	`#eab308`

姓名缩写： 提取名字的首字母 + 姓氏的首字母。如果只有一个名字，使用前两个字母。

个人资料照片后备方案： 如果用户跳过或文件不存在，使用一个带有其姓名缩写（强调色）的圆形。

Create the

carousels/

folder

创建

carousels/

文件夹

Also create

carousels/[year]/[month]/

structure if it doesn't exist.

同时创建

carousels/[年]/[月]/

结构（如果不存在）。

Phase 1: Research

阶段1：研究

Check
```
carousels/
```
for any past carousels — scan titles/filenames to avoid repeating topics
Determine style (see selection logic above)

检查
```
carousels/
```
中是否有过去的轮播图 — 扫描标题/文件名以避免重复主题
确定风格（参见上面的选择逻辑）

Phase 2: Write Slide Copy

阶段2：撰写幻灯片文案

Follow these copy rules:

Voice:

Direct and opinionated — clear stances, not wishy-washy
Experience-backed — real examples, real specifics
Anti-fluff — no corporate speak, no filler words
Punchy — fragments fine, contrast wins

Banned words: "just", "really", "actually", "basically", "simply", "literally"

Hook formulas (Slide 1):

Contrarian: "Your [strategy] is backwards."
Number promise: "5 [topic] mistakes burning your [resource]."
Challenge: "I bet you're still doing this in [year]."
Bold statement: "[Thing] didn't kill [people]. [Behaviour] killed [people]."

Slide count: 5-10 slides (7 is the sweet spot). Every slide readable in 3-4 seconds.

遵循以下文案规则：

语气：

直接且有主见 — 立场明确，不模棱两可
有经验支撑 — 真实例子，具体细节
反废话 — 不用企业套话，不用填充词
有力 — 短句没问题，对比制胜

禁用词： “just”、“really”、“actually”、“basically”、“simply”、“literally”

钩子公式（第1张幻灯片）：

反常规："你的[策略]是倒过来的。"
数字承诺："消耗你[资源]的5个[主题]错误。"
挑战："我打赌你在[年份]还在这样做。"
大胆陈述："[事情]没有杀死[人们]。[行为]杀死了[人们]。"

幻灯片数量： 5-10张（7张是最佳点）。每张幻灯片在3-4秒内可读完。

Phase 3: Build HTML

阶段3：构建HTML

Generate a single self-contained HTML file using brand config values. Read all reference files:

```
references/design-system.md
```
— dimensions, fonts, colors
```
references/components.md
```
— shared components
```
references/styles.md
```
— chosen style's CSS and layout

Critical build rules:

Every slide:
```
width: 420px; height: 525px;
```
— FIXED, never responsive
Use
```
brand.accent_color
```
for all accent/highlight elements
Use
```
brand.name
```
,
```
brand.handle
```
,
```
brand.subtitle
```
in profile header and watermark
Profile photo: if
```
brand.profile_photo
```
file exists → base64 encode and embed; else → initials circle using
```
brand.initials
```
and
```
brand.accent_color
```
All images: base64 encoded inline (self-contained HTML)
Always use Python to generate HTML — never shell/bash (corrupts special characters)
IG preview frame wraps carousel for in-browser preview
Navigation: touch swipe + mouse drag + keyboard arrows
Export buttons: PNG per slide + PDF (all slides)

Save to:

carousels/[year]/[month]/carousel-XX-topic.html

MANDATORY — accent color sanitisation: The reference files contain example hex values (
```
#6EE421
```
,
```
#85F040
```
,
```
#5BC01C
```
) from a sample brand. After generating the full HTML string, run a global replace in Python before writing the file:

python

undefined

使用品牌配置值生成一个自包含的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/[年]/[月]/carousel-XX-topic.html

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

python

undefined

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"])


This guarantees no one else's carousel ever shows your design's green.

SAMPLE_ACCENTS = ["#6EE421", "#85F040", "#5BC01C", "#6ee421", "#85f040", "#5bc01c"] for sample in SAMPLE_ACCENTS: html = html.replace(sample, brand["accent_color"])


这确保了别人的轮播图永远不会显示你的设计的绿色。

Phase 4: Preview and Iterate

阶段4：预览和迭代

Show the carousel. Present a slide-by-slide summary. Ask if any slides need changes.

展示轮播图。呈现逐张幻灯片的摘要。询问是否有任何幻灯片需要更改。

Phase 5: Export

阶段5：导出

Primary (Playwright — pixel-perfect): Run the Python export script from

references/export-guide.md

. Produces 1080x1350px PNG per slide.

Fallback (Browser): HTML file includes Export buttons using html2canvas + jsPDF.

主要方法（Playwright — 像素完美）： 运行

references/export-guide.md

中的Python导出脚本。生成每张幻灯片1080x1350px的PNG。

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

Phase 6: Save and Suggest

阶段6：保存和建议

Save to

carousels/[year]/[month]/carousel-XX-topic.html

Suggest an Instagram caption with relevant hashtags
Present file path and next steps

保存到

carousels/[年]/[月]/carousel-XX-topic.html

建议一个带有相关话题标签的Instagram标题
展示文件路径和后续步骤