Yyl Video Thumbnail logo

Yyl Video Thumbnail

Community
ttfake92-lab
yyl-video-thumbnail

生成 B站 / YouTube / 抖音 的高点击「视频封面 / 缩略图」——pop-out 技法:抠图人物全亮叠在自己那张被压暗的原图上、文字压在中间,一套内容用 HTML/CSS 重排成 16:9 / 4:3 / 3:4 三种比例。当用户要视频封面、缩略图、thumbnail、B站封面、YouTube 封面、抖音/视频号竖封面、把人物放封面上、Codex/Agent/AI 视频封面时使用。注意:这是「视频封面」专用,走 YouTube 高设计感美学;要小红书图文/信息图/PPT 风请用 yuyile-social-card-skill。

Overview

Publisherttfake92-lab
Repositoryskills
Skill nameyyl-video-thumbnail
Stars
308
Forks
45
Bundled files
12
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 12 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by ttfake92-lab on GitHub. Read the source before you install it.

Installation

Install the Yyl Video Thumbnail AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/ttfake92-lab/skills/tree/main/skills/yyl-video-thumbnail
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/ttfake92-lab/skills.git /tmp/skills
mkdir -p .claude/skills
cp -r /tmp/skills/skills/yyl-video-thumbnail .claude/skills/yyl-video-thumbnail
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Yyl Video Thumbnail in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Yyl Video Thumbnail on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Yyl Video Thumbnail is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

YYL 视频封面 Skill

做一件事:给视频做高点击率的封面(缩略图)。主战场 B站、YouTube、抖音/视频号。

核心技法是 pop-out:

底层:人物的原始照片,压暗 + 降饱和(保留房间/桌面等环境 → 真实感)
中层:大标题(关键词=黄色实色块),压在暗化原图上
顶层:把人物从原图里抠出来,全亮、原位精确叠回去
      → 人物“从自己的场景里跳出来”,盖住一点文字但关键词照样可读

一套内容用 CSS 重排成 16:9 / 4:3 / 3:4(重排,不是裁切)。

和 yuyile-social-card-skill 的分工:那个做小红书图文/信息图/杂志风,克制、编辑感。这个做视频缩略图,强对比、大主体、高冲击。两套美学,不要混。

何时用 / 不用

用:视频封面、缩略图、thumbnail、B站/YouTube/抖音封面、把"我"放封面上、AI/Codex/Agent/开源工具类视频封面。

不用:小红书图文/信息图/杂志风 → yuyile-social-card-skill;翻页 PPT → PPT skill;纯 AI 绘图。

一次性 setup

bash
pip install "rembg[cpu]" onnxruntime
python3 -m playwright install chromium

工作流(Claude 做判断,代码做渲染)

  1. 读输入:用户口语需求 + 一张真人照片(要有环境感更好,环境会保留进封面)。
  2. 想清楚(你判断,别写死规则,见 references/brand-system.md):
    • 标题砍到 8–16 字、断 2–3 行、哪个词做黄色块
    • 主题 → kicker 小标签
    • 人物在原图的左还是右 → person_side
  3. 抠图:python3 src/cutout.py <照片> input/person-cut.png
    • ⚠️ 输出整幅(不裁外框),这样顶层人物能和底层原图精确对齐。
  4. 写 brief.json:见 examples/codex/brief.json。photo=原图,person_image=抠图,两者必须是同一张。
  5. 渲染:python3 src/render.py <brief.json> output/ → 3 张高清 PNG。
  6. 视觉自检:看输出图,对照 references/brand-system.md 的「合格/不合格」清单。关键词被人物挡到读不出、背景压太暗/太亮,就调 focus 或字号重渲。
  7. 交付 + 简述取舍。

品牌铁律(写死)

  • pop-out 三层不能破:暗化原图(留环境) → 文字 → 全亮抠图人物(原位对齐)。
  • 人物全亮跳出、第一主体;标题第二,关键词用黄色实色块(招牌记忆点)。
  • 人物可盖住部分文字,但关键词必须仍可读。
  • 字体:拉丁用 Archivo Black,中文用 PingFang(系统最重);要更狠就放 Heavy 中文字体到 assets/fonts/ 接 @font-face。
  • 背景压暗适度,别压死——环境要看得见才有真实感。
  • 品牌签名:左下角只放「@鱼亦乐」文字,无 logo。
  • 三比例各自重排,不是裁切。禁止绿色大字。
  • 来源宽高比自动适配:横图(≥1.2)做 3:4 时自动切「上方标题带 + 下方照片带」,竖图全铺。建议 16:9 用横图、3:4 优先用竖图拍。

三套模板(brief 里 template 字段切换,互不混用)

模板风格标题处理适合
popout(默认)深色海报风大白字 + 黄色实色块关键词,人物全亮跳出大多数视频,强冲击
ui深色命令面板风标题做成"在 AI 工具里输入的查询"✦ … ⌘↵ + 结果行工具 / AI / 自动化类
paper浅色胶片编辑风褪色(近黑白)照片 + 胶片颗粒 + 半调网点(中性不发黄);关键词用 iOS 文本选中(黄底 + 蓝手柄)+ iOS 右键菜单紧贴选区上方观点 / 故事 / 高级感选题

popout/ui 是深色 pop-out(暗化原图 + 全亮人物);paper 是浅色(褪色照片 + 胶片颗粒/半调网点,人物褪色不跳出)。三套都带 @鱼亦乐 签名,但视觉语言不同,不要在一张图里混用。

  • ui:用 results 字段给结果行(缺省用 subtitle)。
  • paper:用 menu 字段给 iOS 右键菜单浮层(字符串列表,可省);关键词 [方括号] 自动渲染成 iOS 选中高亮。

brief.json 字段

字段说明
templatepopout(默认) / ui / paper
name输出文件名前缀
kicker左上小标签(如 CODEX · SKILL),可省
title标题;\n 换行,[方括号] 包关键词=黄色实色块
subtitle副标题,可省
photo原图路径(底层背景,保留环境)
person_image抠图路径(顶层人物,须与 photo 同源、整幅)
person_sideright(默认) / left
focus取景焦点 object-position,可省(默认按竖图调好);可传字符串统一或按比例 {"16x9":"50% 30%",...}
brand_name默认 @鱼亦乐(纯文字,无 logo)
person_grademono=黑白人物;省略=全彩
results(仅 ui)命令面板结果行,列表,每项 {icon,label,sel};缺省用 subtitle
menu(仅 paper)iOS 右键菜单浮层,字符串列表,可省
component(仅 popout)可选钩子组件(终端/GitHub),见 references/components.md;默认不放更干净
ratios默认 ["16x9","4x3","3x4"]

文件

  • references/brand-system.md —— ★核心:pop-out 美学规则、配色、标题、验收清单。每次开工前读。
  • references/components.md —— 可选钩子组件规格。
  • assets/template-popout.html —— 深色海报风模板(默认)。
  • assets/template-ui.html —— 深色命令面板风模板。
  • assets/template-paper.html —— 浅色纸质编辑风模板(iOS 选中高亮)。
  • src/cutout.py —— rembg 抠图(整幅输出)。
  • src/render.py —— 三层合成 + Playwright 精确截 3 张。
  • examples/codex/brief.json —— 输入示例。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Yyl Video Thumbnail AI skill do?

生成 B站 / YouTube / 抖音 的高点击「视频封面 / 缩略图」——pop-out 技法:抠图人物全亮叠在自己那张被压暗的原图上、文字压在中间,一套内容用 HTML/CSS 重排成 16:9 / 4:3 / 3:4 三种比例。当用户要视频封面、缩略图、thumbnail、B站封面、YouTube 封面、抖音/视频号竖封面、把人物放封面上、Codex/Agent/AI 视频封面时使用。注意:这是「视频封面」专用,走 YouTube 高设计感美学;要小红书图文/信息图/PPT 风请用 yuyile-social-card-skill。

Why use Yyl Video Thumbnail on TypingMind?

Because you install it once and use it with any model. Yyl Video Thumbnail is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Yyl Video Thumbnail in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/ttfake92-lab/skills/tree/main/skills/yyl-video-thumbnail. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Yyl Video Thumbnail?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Yyl Video Thumbnail?

As many as you like. As long as a model supports skills, you can use Yyl Video Thumbnail with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Yyl Video Thumbnail AI skill free?

It is published on GitHub by ttfake92-lab. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇