threads-carousel

Threads 轮播图生成器

将文本帖子转换为一组视觉轮播幻灯片，可用于 Threads、Instagram、LinkedIn、TikTok、Stories、YouTube 或独立演示文稿。采用可组合的设计系统，包含 3 个相互独立的风格轴（字体 × 颜色 × 用途）和 12 种幻灯片类型。

调用方式

/threads-carousel <post text>
/threads-carousel path/to/post.md

格式预设（选择目标平台）

预设	尺寸	平台
threads-4x5 （默认）	1080×1350	Threads、Instagram 信息流（纵向）
instagram-square	1080×1080	Instagram、Facebook、LinkedIn 信息流
linkedin-square	1080×1080	LinkedIn 文档帖子（PDF）
tiktok-9x16	1080×1920	TikTok 照片模式、Reels、Shorts
story-9x16	1080×1920	Instagram Stories、Threads Stories
wide-16x9	1920×1080	演示文稿、YouTube、桌面演示文稿

幻灯片类型（12 种）

类型	用途	必填字段
hook	开场页 — 最吸引人的一句话	text
body	标题 + 段落	title、text
body（要点）	带 ✓/✗ SVG 图标的优缺点列表	title、points[]（替代 text）
list	编号条目（有序列表）	title、items[]
stats	大号数字及标签	title、stats[]
quote	大号摘录引文	text、author
checklist	对勾项目符号	title、items[]
process	带连接线的编号步骤	title、steps[]
comparison	双栏对比／前后对比	leftLabel、leftItems[]、rightLabel、rightItems[]
cta	最终行动号召	text、handle
image	标题 + 截图／照片 + 可选说明	imageSrc、可选的 title、imageCaption
emoji	巨型表情符号插图 + 标题 + 文本	emoji、可选的 title、text
number	巨型醒目数字／字符串 + 标题 + 文本	bigNumber、可选的 title、text

points 结构：Array<{ type: "plus" | "minus"; text: string }> — plus 显示绿色 ✓，minus 显示柔和的 ✗。根据项目数量和最长一行的长度自适应调整字号（44–62px）。

所有类型还支持以下可选字段：

• badge — 标题上方的小型描边标签（例如 "01"、"TIP"）
• highlight — text／title 中的一个词或短语，会以预设的高亮色显示（深色主题使用黄色）
• highlightStyle: "italic-box" — 将高亮词显示为彩色矩形上的 Playfair 斜体（而非纯色文字）

幻灯片中的图片

image 幻灯片要求 imageSrc 是 Next.js 在 /public/ 下提供的路径。用户提供本地文件时，工作流如下：

1. 用户提供文件路径，例如 /Users/me/Desktop/screenshot.png（或通过聊天传送文件）。
2. 将文件复制到 template/public/images/，并使用安全的小写文件名 — 例如 cp "$USER_PATH" template/public/images/screenshot.png。
3. 在 slides.ts 中将其引用为 imageSrc: "/images/screenshot.png"（相对于 /public/ 的绝对路径）。

同源提供图片可避免 PNG 导出流程中的 CORS 错误。不要使用外部 URL — html-to-image 通常会将其渲染为空白。

背景装饰（8 种）

可通过预览中的工具栏切换。默认值：glow。

类型	说明
none	纯色背景
blobs	有机形状的彩色图案
grid	点状网格图案
lines	对角线图案
paper	带左侧边距的笔记本横线（与 paper/light/white 颜色搭配，营造文学气息）
noise	SVG 颗粒叠加层（叠加混合）
bignumber	作为水印的巨型幻灯片序号（01、02…）
glow （默认）	在交替角落呈现柔和的径向渐变

风格系统（3 个独立维度）

最终风格由运行时通过 composePreset(font, color, purpose) 根据 3 个维度组合而成：

字体维度（DEFAULT_FONT），共 5 种字体：

Id	字体	风格
minimal (默认)	Unbounded（正文 + hook）	几何展示风格、粗犷、独特
editorial	Playfair Display	经典衬线体、文学风格
clean	Inter	中性无衬线体、最为标准
mono	JetBrains Mono	等宽字体、科技 / 开发风格
condensed	Oswald	窄而高、编辑海报风格

表面维度（DEFAULT_SURFACE）——背景 + 文本中性色，共 8 种选择：

Id	背景	文本	风格
dark (默认)	#0A0A0A	白色	默认粗犷风格
white	纯 #FFFFFF	近黑色	鲜明、专业，Apple 风格
light	冷调锌灰 #F4F4F5	近黑色	中性冷灰，Vercel 风格
paper	奶油色 #ECE2C8	暖棕色	笔记本 / 文学暖调
gradient	紫色→粉色→琥珀色	白色	明亮渐变
pastel	淡紫色 #EDE9FE	靛蓝色	柔和
neon	深色渐变	浅青色	科技深色风格
ember	黑色→红色径向渐变	近白色	戏剧化

强调色维度（DEFAULT_ACCENT）——用于突出显示文字的亮色，共 8 种选择：

Id	Hex	适配表面
yellow (默认)	#FACC15	dark、ember
red	#DC2626	纯红色 — white、light、paper
teal	#14B8A6	通用 — dark、white、light、paper
coral	#FB7185	粉色系 — paper、light、white
orange	#F97316	南瓜色 — paper、light、dark
violet	#A78BFA	dark、neon、ember
lime	#D9F056	ember、dark
blue	#3B82F6	white、light、paper、dark
fuchsia	#C026D3	pastel、white、dark
pink	#EC4899	pastel、dark、light
amber	#F59E0B	gradient、dark、paper

组合总数：8 种表面 × 8 种强调色 × 5 种字体 × 2 种用途 = 640 种有效风格。表面用于选择中性基底，强调色用于选择亮色，两者独立。

参考组合（灵感源自设计参考）：

• dark + teal — 黑色电影风格 / 极简科技风格
• paper + orange — 文学暖调
• ember + lime — 戏剧化公告
• white + coral — 鲜明编辑风格
• light + teal — 平和的信息风格

用途维度（DEFAULT_PURPOSE）：

Id	标题	正文	分隔线
carousel (默认)	44px，字重 800，全部大写	字重 600，textColor，行高 1.2	显示（96×4px 强调色）
presentation	72px，字重 700，句首字母大写	字重 400，textSecondary，行高 1.45	隐藏

选择 purpose: "presentation" + format: "wide-16x9"，即可制作桌面端 / YouTube 演示文稿。任意 3 × 8 × 2 = 48 种组合均有效。

---

工作流程

步骤 1 — 获取文本

• 如果直接提供了文本 — 使用该文本。
• 如果提供了文件路径（.md、.txt）— 读取文件。
• 如果文本较长（>500 个字符）— 规划前确认文本是否完整。

步骤 2 — 确认参数（可选，可采用默认值）

一次性询问以下内容：

1. 幻灯片数量（3–10，默认 6）
2. 格式（参见上表，默认 threads-4x5；演示文稿使用 wide-16x9）
3. 用途（carousel 或 presentation，默认 carousel）
4. 字体（minimal / editorial / clean，默认 minimal）
5. 颜色（8 种配色方案，默认 dark）
6. CTA 幻灯片的账号名（例如 @username）

快捷方式：如果用户说“presentation” / “презентация” / “slide deck” → 默认设置为 purpose: presentation、format: wide-16x9、font: clean、color: white。

如果用户说“your call” — 使用默认值，不要因此暂停流程。

步骤 3 — 规划幻灯片结构

生成前，向用户展示预览列表：

Slide 1 (hook): "Headline..."  [highlight: "word"]
Slide 2 (body): badge 01 — "Title" / "Text..."
Slide 3 (list): badge 02 — "iOS stack" / 3 items
Slide 4 (stats): badge 03 — "Growth" / 3 stats
Slide 5 (quote): "Quote..." — Author
Slide 6 (cta): "Final message" @username

将文本拆分为幻灯片的规则

1. Hook = 帖子中最引人好奇的一句话。1–3 行短句。单独作为缩略图也能成立。
2. 正文幻灯片 = 每张只讲一个观点。最多 40 个词。最多 5 行。绝不要用“和”连接两个观点。
3. 混合幻灯片类型，增加视觉变化：枚举优先使用 list，数字优先使用 stats，直接引语使用 quote，VS／前后对比使用 comparison。不要让每张幻灯片都用 body。
4. CTA = 总结 + 关注账号。居中、简短。

步骤 4 — 生成

准备工作副本

WORK_DIR="/tmp/carousel-$(date +%s)"
rsync -a --exclude=node_modules ~/.claude/skills/threads-carousel/template/ "$WORK_DIR/"
ln -s ~/.claude/skills/threads-carousel/template/node_modules "$WORK_DIR/node_modules"
cd "$WORK_DIR"

建立 node_modules 的符号链接，可避免每次运行都复制 350MB。

将内容注入 src/slides.ts

所有内容和默认值都位于 src/slides.ts 中——绝不要修改引擎（src/app/CarouselApp.tsx、src/lib/*）。编辑 SLIDES 数组和 5 个默认常量。

完整注入示例：

import type { SlideData, BgType, FormatId, FontId, ColorThemeId, PurposeId } from "./lib/types";

export const SLIDES: SlideData[] = [
  { type: "hook", text: "Line one\nline two", highlight: "two" },
  { type: "body", badge: "01", title: "Title", text: "Body text...", highlight: "key" },
  { type: "body", badge: "02", title: "Pros & Cons", points: [
    { type: "plus",  text: "One click to register" },
    { type: "plus",  text: "Works on any background" },
    { type: "minus", text: "Requires provider setup" },
  ]},
  { type: "list", badge: "03", title: "Steps", items: ["First", "Second", "Third"] },
  { type: "stats", title: "Numbers", stats: [
    { value: "10×", label: "Faster" },
    { value: "50%", label: "Smaller" },
  ]},
  { type: "quote", text: "Big idea\nin few words", author: "Someone", role: "2026" },
  { type: "checklist", title: "Pre-flight", items: ["One", "Two", "Three"] },
  { type: "cta", text: "Last word", handle: "@username" },
];

export const DEFAULT_FONT: FontId = "minimal";
export const DEFAULT_COLOR: ColorThemeId = "dark";
export const DEFAULT_PURPOSE: PurposeId = "carousel";
export const DEFAULT_BG: BgType = "glow";
export const DEFAULT_FORMAT: FormatId = "threads-4x5";

启动预览并导出

bun dev --port 3333

请告知用户打开 http://localhost:3333。他们可以：

• 通过工具栏中的行即时切换 格式 / 模式 / 字体 / 颜色 / 背景
• 在右上角切换界面语言 RU / EN
• 点击 PDF，将所有幻灯片下载为一个文件（JPEG 压缩，10 张幻灯片约 5–8 MB）
• 点击 PNG（即“全部导出”），将每张幻灯片下载为 01-hook.png、02-body.png 等文件
• 点击单张幻灯片缩略图，仅将该张导出为 PNG

导出后，停止开发服务器。

并行制作轮播图

如果要同时制作多个轮播图：创建多个工作目录，并分别在端口 3333、3334、3335 上启动——它们可以并行运行，互不冲突。

---

设计系统

标准外观（font: minimal、color: dark、purpose: carousel）：

• 展示字体： Unbounded（Google Fonts），用于 Hook——仅当字体轴提供 hookFontFamily 时才应用
• 正文字体： Space Grotesk（minimal）／Playfair（editorial）／Inter（clean）——其他所有内容均使用 preset.fontFamily
• 配色（深色）： #0A0A0A 背景、#FFFFFF 文字、#FACC15 高亮
• 布局： 80px 内边距，左对齐，幻灯片计数器置于底部中央
• 标题规范： carousel 用途——标题 → 96×4px 强调分隔线 → 正文，正文上方留出 ≥64px 空白。presentation 用途——无分隔线，句首字母大写，72px。
• Hook 字号： 104–140px，根据字符数／行数自适应
• 正文字号： 48–88px，自适应
• 文本平衡： Hook 和标题使用 textWrap: "balance"（避免末行只剩一个词）

字体排版表（carousel 用途）

presentation 用途会将标题覆盖为 72px／700／句首字母大写，正文覆盖为 400／textSecondary／行高 1.45。

元素	大小	字重	字体来源
Hook	104–140px	800	hookFontFamily ?? fontFamily
标题	44px	800 uppercase	fontFamily
正文	48–88px	600	fontFamily
要点（优点／缺点）	44–62px	600	fontFamily
徽章	26px	800 uppercase	fontFamily
统计数值	140–170px	900	fontFamily
统计标签	32px	500 uppercase	fontFamily
引语	62px	600	fontFamily
列表项	46px	600	fontFamily（数字为 48px）
检查清单项	44px	600	fontFamily
流程步骤标题	36px	700	fontFamily
账号	36px	500	fontFamily

常见错误

错误	修正方法
单张幻灯片上的文字过多	最多 40 个词，最多 5 行
一张幻灯片包含两个观点	拆分为两张幻灯片
所有幻灯片都使用 body 类型	混用 list、stats、quote、checklist，增加视觉变化
第一张幻灯片没有 Hook	第 1 张必须使用最吸引人的一句话
最后一张幻灯片没有 CTA	第 N 张必须以账号或行动号召结尾
高亮词太长	高亮内容控制在 1–2 个词，不要高亮整个短语
徽章字符过多	最多 2–4 个字符（01、TIP、NEW）

后续工作 / 待办事项

• Satori 服务端导出 — 使用 Satori + Resvg 替换基于浏览器的 html-to-image，用于 CLI 导出（bun run export → out/*.png）。支持无头运行。参考 Slashgear/linkedin-carousel-gen。
• 逐页背景覆盖 — 目前 DEFAULT_BG 是全局设置；可以接受逐页的 bg 字段，以便在同一套幻灯片中混用装饰效果。
• 针对西里尔文字优化的自适应尺寸 — 当前阈值针对拉丁文字进行了校准；在相同字号下，俄语文案往往会长 20–30%。
• Pencil MCP 模式 — 之前版本的技能支持通过 Pencil 手动设计；目前模板中尚未实现。