@ttfake92-lab/yyl-video-thumbnail

@ttfake92-lab/yyl-video-thumbnail — AI coding skill

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

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

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.jsonphoto=原图,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 字段

字段 说明
template popout(默认) / ui / paper
name 输出文件名前缀
kicker 左上小标签(如 CODEX · SKILL),可省
title 标题;\n 换行,[方括号] 包关键词=黄色实色块
subtitle 副标题,可省
photo 原图路径(底层背景,保留环境)
person_image 抠图路径(顶层人物,须与 photo 同源、整幅)
person_side right(默认) / left
focus 取景焦点 object-position,可省(默认按竖图调好);可传字符串统一或按比例 {"16x9":"50% 30%",...}
brand_name 默认 @鱼亦乐(纯文字,无 logo)
person_grade mono=黑白人物;省略=全彩
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 —— 输入示例。

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@ttfake92-lab/yyl-video-thumbnail/verified)](https://skillsafe.ai/skill/@ttfake92-lab/yyl-video-thumbnail/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@ttfake92-lab/yyl-video-thumbnail/installs)](https://skillsafe.ai/skill/@ttfake92-lab/yyl-video-thumbnail/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@ttfake92-lab/yyl-video-thumbnail/scan)](https://skillsafe.ai/skill/@ttfake92-lab/yyl-video-thumbnail/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@ttfake92-lab/yyl-video-thumbnail/eval)](https://skillsafe.ai/skill/@ttfake92-lab/yyl-video-thumbnail/)