Community图像github.com

图片轮播

生成 Fringe Lines 风格图片轮播(Instagram/LinkedIn 格式,1080×1350 PNG 幻灯片 + PDF),包含照片幻灯片、大字标题文本幻灯片、图表/截图幻灯片、说明性图形幻灯片和行动号召幻灯片。适用于用户要求制作轮播、滑动帖子或“滑动”帖子时。

图片轮播 是什么?

此技能用于创建可发布到 Instagram 和 LinkedIn 的 Fringe Lines 品牌图片轮播。它基于 Remotion 框架,使用 TypeScript 构建幻灯片,并通过 Python 脚本批量渲染为 PNG 和 PDF 文件。每个轮播都存储在独立的文件夹中,包含 JSON 配置文件、图片资源子文件夹和输出目录。技能严格遵循无人物照片的原则,仅使用文本、自定义图形和授权图片。支持多种幻灯片类型:封面(带品牌标识和悬念标题)、照片(全出血图片配大字标题)、纯文本幻灯片(大字体层次结构)、图形(统计数据、折线图、柱状图等)、图表/截图幻灯片以及行动号召幻灯片。用户需提供故事大纲(7-10 张幻灯片)、图片素材和统计数据,技能会自动生成带有页码和品牌色彩的最终输出。渲染完成后,技能会生成联系表供 QA 检查,确保没有人物出现、文字不超出行数、图表可读性良好。该技能适用于 Claude Code、Cursor 等支持 Remotion 和 Python 脚本的 AI 代理平台。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/qdevery/fringe-lines-video/tree/main/.agents/skills/carousel

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

图片轮播 是做什么的?

风格来源于参考轮播:

  • 无发言者: 轮播从不使用主持人或嘉宾的影像或照片。它们仅使用文本、我们构建的图形以及非人物图片(如图表和截图)。
  • 照片幻灯片: 全出血图片底部变暗,配以粗体紧凑的大写标题。关键词使用强调色。
  • 封面: 细横线搭配品牌标识。
  • 纯文本幻灯片: 深色渐变背景,强调色标题,粗体白色副标题,常规正文。字体大小有意大于参考版本(在 1080 宽度下标题 92px,副标题 60px,正文 52px)。

组成部分:

  • 模板:pipeline/remotion/src/Carousel.tsx,Remotion Carousel 组合,渲染为静态帧。
  • 构建脚本:pipeline/build_carousel.py。
  • 每个轮播位于其自己的文件夹 carousels/<slug>/ 中,包含 carousel.json 和 images/ 子文件夹。
  • 输出:out/carousels/<slug>/01.png … 以及 <slug>.pdf,可直接上传为 LinkedIn 文档帖子。

1. 规划故事(7-10 张幻灯片)

  1. 封面: 一个承诺或好奇心缺口,例如“本周大多数团队忽略的 5 个 AI 信号”或“世界各地无人谈论的好消息”。字数控制在 8-14 字。
  2. 每张幻灯片一个想法: 一个事实、一个要点或一个步骤。标题必须在不加说明的情况下意义明确。
  3. 混合幻灯片类型。 不要连续使用三张照片或三张文本幻灯片。典型模式:封面 → 照片 → 照片/图表 → 图形 → 文本 → 照片 → 文本 → 行动号召。
  4. 最后一张为行动号召:“关注 Fringe Lines”、“保存以备下次规划会议使用”。

强调词:在每个标题中用 *…* 包裹 1-4 个词,通常是主题或数字。每张幻灯片最多使用两组强调词。

2. 视觉元素:永远没有发言者

轮播从不显示主持人或嘉宾。这意味着没有摄像头画面、没有头像照片,也没有“说话人的照片”,即使模糊处理也不行。 每张幻灯片仅由文本、我们创建的图形和非人物图片构建。

图片放在 carousels/<slug>/images/ 中。来源优先级如下:

  • 我们构建的图形:
    • graphic 幻灯片(统计数据/人物/折线图/引用/标题/列表,来自 Graphics.tsx);
    • 排版风格的 cover,无需图片;
    • 带 graphic 卡片的 cover;
    • 完成的信息图表 PNG 直接作为 image 幻灯片放入(参见信息图表技能)。
  • 剧集屏幕共享: 图表、幻灯片和产品屏幕,绝不包含摄像头画面。
    • 使用 ffmpeg -ss <sec> -i "<raw>/Quinn's screen-3.mp4" -frames:v 1 -vf "crop=iw:ih*0.895:0:ih*0.105" images/chart.png 截取;裁剪可移除浏览器边框。
    • 裁剪到相关部分,使用 fit: "contain" 显示,并标注图表原始发布者。
    • 对于商业帖子,考虑将第三方图表重新绘制为我们自己的 lines 或 stat 图形(基于原始数据)。
  • 用户自己的非人物图片: 用户提供的产品截图、标志、地点或物体照片。
  • AI 生成或库存图片: 仅在用户要求时使用。
    • 无真实人物(包括主持人)和无真实事件的虚假“照片”。
    • 注明库存图片来源,仅使用已授权的图片。

引用可以作为文本(quote 图形,附带姓名归属)。只是不要与发言者的图片配对。

3. 编写 carousels/<slug>/carousel.json

{
  "brand": "Fringe Lines",
  "accent": "#FF5A1F",
  "slides": [
    {"type": "cover", "kicker": "Fringe Lines · Oct 30",
     "headline": "*5 AI signals* from this week that most teams are missing"},
    {"type": "cover", "kicker": "Fringe Lines", "headline": "Revenue up. *Headcount flat.*",
     "graphic": {"type": "lines", "series": [{"label": "Revenue", "shape": "up"}, {"label": "Headcount", "shape": "flat"}]}},
    {"type": "photo", "image": "images/horses.jpg", "focus": [0.4, 0.4], "credit": "Photo: …",
     "headline": "*Przewalski's horses* have returned to the wild after decades of *conservation*"},
    {"type": "photo", "image": "images/chart.png", "fit": "contain", "credit": "Chart: …",
     "headline": "Microsoft's *revenue kept climbing* while headcount stayed flat"},
    {"type": "graphic", "headline": "Anthropic's S-1, *in one number*",
     "graphic": {"type": "stat", "kicker": "Net revenue retention", "value": 900, "suffix": "%", "label": "…"}},
    {"type": "text", "number": "04", "title": "Run an After-Action Review",
     "subtitle": "The US Army ends every exercise with four questions:",
     "body": "What was supposed to happen, what actually happened, why, and what to change next time."},
    {"type": "cta", "headline": "Follow *Fringe Lines*", "sub": "New episodes every week"}
  ]
}
类型字段说明
coverheadline, kicker?, graphic?, image?, focus?标识位于两条横线之间;右下角显示“SWIPE →”。无 image 时:深色强调色渐变背景,纯文本(标题更大)或在标题上方放置 graphic 卡片。image 仅用于非人物照片
photoimage, focus?, fit?, headline, credit?无人物。focus = [x, y] 0–1,表示图片中要保留的区域。fit: "contain" 用于图表和截图(整张图片叠加在模糊的自身副本上)
texttitle, subtitle?, body?, number?大号字体。正文应控制在 20-45 字;更长的文字会略微缩小,因此应将其拆分到多张幻灯片中
graphicgraphic, headline?, credit?任意 Graphics.tsx 类型,完全动效进入;衬线标题。对于真实数字使用 bars:{"type":"bars","kicker","signed":true,"suffix":"%","rows":[{"label","value","from?","note?","hi?"}]}(负值向左用蓝色增长;hi 行用强调色)。优先使用 bars 重新绘制第三方图表而非截图
ctaheadline, sub?墨水背景,品牌标志
imageimage完成的 4:5 图片(例如信息图表 PNG)原样显示
  • 强调色: accent 默认使用 Fringe Lines 橙色。"#E2A85A" 可呈现参考版本的金色外观。
  • 幻灯片编号: 照片和文本幻灯片会在右上角自动显示 第 n 张/共 total 张。

诚实性:

  • 事实和数字必须来源于剧集或你能指明的来源。将来源写在 credit 中。
  • 当主持人未指明来源时,写明“如节目中引用”。
  • 不要虚构统计数据。如果某个数字需要核实,请告知用户。

4. 渲染

~/.shorts-skill/bin/python pipeline/build_carousel.py carousels/<slug>

此过程大约需要 30-60 秒来渲染 8-10 张幻灯片,并将 PNG 和 PDF 写入 out/carousels/<slug>/。

YouTube 帖子: 添加 --youtube 参数可渲染 1080×1080 的正方形图片到 out/carousels/<slug>-youtube/ 中。YouTube 帖子图片显示为正方形,因此 4:5 的幻灯片会被裁剪。相同的 carousel.json 适用;v1 模板会为正方形布局收紧设计。暂不支持 "template": "v2"。

5. 质量检查

生成联系表并查看:

ffmpeg -v error -y -pattern_type glob -i "out/carousels/<slug>/*.png" -vf "scale=360:-1,tile=4x3" -frames:v 1 /tmp/sheet.png

检查:

  • 没有幻灯片显示主持人、嘉宾或任何真实人物。
  • 没有标题超过 5 行或与致谢信息重叠。
  • 人脸和主题没有被裁剪。如有,请调整 focus。
  • 图表清晰可读。使用 fit: "contain",必要时更精确地裁剪截图。
  • 强调词显示为颜色,而非字面上的 *。
  • 文本幻灯片的最后一行没有孤字。如有,请调整措辞或拆分。

向用户报告:

  • 幻灯片列表;
  • 每张图片的来源(屏幕共享、用户提供或由我们构建);
  • 任何需要核实的数字。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

editorial-short

Make a Fringe Lines vertical short in the "editorial" style (paper background, speaker that morphs between full-bleed / card / round PiP, explainer graphics, word-by-word serif captions, hook + end card, SFX). Use when asked to make, restyle or fix a short from an episode.

engaging-monologue

Make a 16:9 FringeLines "engaging monologue" video from a solo talking-head take — jump cuts with punch-ins, the speaker shrinking into a portrait picture-in-picture while serif kinetic text, diagrams (pyramid stack, compare, roadmap, steps, big stat) and b-roll cards build on a paper canvas, plus callout cards, lower thirds, chips, a CTA pill and a green end card, all synced word by word to the speech. Use for YouTube explainers, solo commentary, newsletter-to-video and "one idea, told well" pieces.

infographic

Make a single-image editorial infographic (1080x1350) that explains one idea at a glance — two-tone headline, one-sentence dek, a hero visual with 2–4 numbered callouts and leader lines, an optional side note, a three-column "why it matters" row with icons, byline and sources. Use for "explain X in one graphic" posts about a company move, a framework, an architecture or a trend; the PNG can also be a carousel slide.

podcast-intro

Build the cold open for a long-form Fringe Lines episode — a 35–60 s highlight reel of the episode's best lines with explainer-graphic cutaways, keyword captions, whip transitions + SFX, ending on a title card with the topic list. Use when making or revising the intro of a full episode.

相关技能