Back to Details

yyl-video-thumbnail

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

YYL 视频封面 Skill

YYL Video Thumbnail Skill

做一件事：给视频做高点击率的封面（缩略图）。主战场 B站、YouTube、抖音/视频号。
核心技法是 pop-out：
底层：人物的原始照片，压暗 + 降饱和（保留房间/桌面等环境 → 真实感）
中层：大标题（关键词=黄色实色块），压在暗化原图上
顶层：把人物从原图里抠出来，全亮、原位精确叠回去
      → 人物“从自己的场景里跳出来”，盖住一点文字但关键词照样可读
一套内容用 CSS 重排成 16:9 / 4:3 / 3:4（重排，不是裁切）。
和 
yuyile-social-card-skill
的分工：那个做小红书图文/信息图/杂志风，克制、编辑感。这个做视频缩略图，强对比、大主体、高冲击。两套美学，不要混。
Do one thing: create high-click-through covers (thumbnails) for videos. Primary platforms: Bilibili, YouTube, and Douyin/WeChat Channels.
The core technique is pop-out:
Bottom layer: the person’s original photo, darkened + desaturated (retain the room/desk and other environmental details → realism)
Middle layer: large headline (keyword = solid yellow block), placed over the darkened original photo
Top layer: the person cut out from the original photo, fully brightened and accurately aligned back in the original position
      → the person “jumps out of their own scene,” covering part of the text while the keyword remains readable
A single set of content is reflowed with CSS into 16:9 / 4:3 / 3:4 (reflowed, not cropped).
Division of labor with 
yuyile-social-card-skill
: that skill creates restrained, editorial Xiaohongshu posts, infographics, and magazine-style visuals. This skill creates video thumbnails with strong contrast, a large subject, and high impact. The two aesthetics should not be mixed.

何时用 / 不用

When to Use / Not Use

用：视频封面、缩略图、thumbnail、B站/YouTube/抖音封面、把"我"放封面上、AI/Codex/Agent/开源工具类视频封面。
不用：小红书图文/信息图/杂志风 → 
yuyile-social-card-skill
；翻页 PPT → PPT skill；纯 AI 绘图。
Use: video covers, thumbnails, Bilibili/YouTube/Douyin covers, placing “me” on the cover, and AI/Codex/Agent/open-source tool video covers.
Do not use: Xiaohongshu posts, infographics, or magazine-style visuals → 
yuyile-social-card-skill
; flip-through PPTs → PPT skill; pure AI image generation.

一次性 setup

One-Time Setup

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

工作流（Claude 做判断，代码做渲染）

Workflow (Claude Makes the Judgments; the Code Does the Rendering)

  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. 交付 + 简述取舍。
  1. Read the inputs: the user’s colloquial request + one photo of an actual person (an environmental portrait is better because the environment will be preserved in the thumbnail).
  2. Think it through (you decide; do not hard-code the rules; see 
    references/brand-system.md
    )    :
    • Cut the title down to 8–16 characters, break it into 2–3 lines, and decide which word should use the yellow block
    • Topic → kicker mini-label
    • Whether the person is on the left or right in the original photo → 
      person_side
  3. Cut out the person: 
    python3 src/cutout.py <photo> input/person-cut.png
    • ⚠️ Output the entire frame without cropping the outer bounds, so the top-layer person can be precisely aligned with the bottom-layer original.
  4. Write brief.json: see 
    examples/codex/brief.json
    . 
    photo
    = original image, 
    person_image
    = cutout; both must come from the same image.
  5. Render: 
    python3 src/render.py <brief.json> output/
    → 3 high-resolution PNG files.
  6. Visual QA: inspect the output and compare it with the “pass/fail” checklist in 
    references/brand-system.md
    . If the person obscures the keyword or the background is too dark/bright, adjust 
    focus
    or the font size and re-render.
  7. Deliver the result + briefly explain the trade-offs.

品牌铁律（写死）

Brand Rules (Non-Negotiable)

  • pop-out 三层不能破：暗化原图(留环境) → 文字 → 全亮抠图人物(原位对齐)。
  • 人物全亮跳出、第一主体；标题第二，关键词用黄色实色块(招牌记忆点)。
  • 人物可盖住部分文字，但关键词必须仍可读。
  • 字体：拉丁用 Archivo Black，中文用 PingFang(系统最重)；要更狠就放 Heavy 中文字体到 
    assets/fonts/
    接 
    @font-face
    。
  • 背景压暗适度，别压死——环境要看得见才有真实感。
  • 品牌签名：左下角只放「@鱼亦乐」文字，无 logo。
  • 三比例各自重排，不是裁切。禁止绿色大字。
  • 来源宽高比自动适配：横图(≥1.2)做 3:4 时自动切「上方标题带 + 下方照片带」，竖图全铺。建议 16:9 用横图、3:4 优先用竖图拍。
  • The three-layer pop-out structure must not be broken: darkened original image (retaining the environment) → text → fully brightened cutout person (precisely aligned in the original position).
  • The fully brightened person jumps out and becomes the primary subject; the title is secondary, and keywords use a solid yellow block as the signature visual cue.
  • The person may cover part of the text, but the keyword must remain readable.
  • Fonts: Archivo Black for Latin text and PingFang for Chinese text (the heaviest system weight); for a more aggressive look, place a Heavy Chinese font in 
    assets/fonts/
    and connect it with 
    @font-face
    .
  • Darken the background moderately—do not crush it. The environment must remain visible to preserve realism.
  • Brand signature: place only the text “@鱼亦乐” in the bottom-left corner, with no logo.
  • Reflow each of the three ratios independently; do not crop. Large green text is prohibited.
  • Source aspect ratio adapts automatically: when using a landscape image (≥1.2), the 3:4 layout automatically switches to a “top title band + bottom photo band” composition; portrait images fill the canvas. Use a landscape image for 16:9 and preferably a portrait image for 3:4.

三套模板（brief 里 
template
字段切换，互不混用）

Three Templates (Switch with the 
template
Field in brief.json; Do Not Mix Them)

模板风格标题处理适合
popout
（默认）		深色海报风大白字 + 黄色实色块关键词，人物全亮跳出大多数视频，强冲击
ui
深色命令面板风标题做成"在 AI 工具里输入的查询"
✦ … ⌘↵
+ 结果行		工具 / AI / 自动化类
paper
浅色胶片编辑风褪色(近黑白)照片 + 胶片颗粒 + 半调网点(中性不发黄)；关键词用 iOS 文本选中（黄底 + 蓝手柄）+ iOS 右键菜单紧贴选区上方观点 / 故事 / 高级感选题
popout
/
ui
是深色 pop-out（暗化原图 + 全亮人物）；
paper
是浅色（褪色照片 + 胶片颗粒/半调网点，人物褪色不跳出）。三套都带 @鱼亦乐 签名，但视觉语言不同，不要在一张图里混用。
  • ui
    ：用 
    results
    字段给结果行（缺省用 
    subtitle
    ）。
  • paper
    ：用 
    menu
    字段给 iOS 右键菜单浮层（字符串列表，可省）；关键词 
    [方括号]
    自动渲染成 iOS 选中高亮。
TemplateStyleTitle TreatmentBest For
popout
(default)		Dark poster styleLarge white text + solid yellow block for the keyword, with the person fully brightened and popping outMost videos; high impact
ui
Dark command-panel styleRender the title as “a query typed into an AI tool” with 
✦ … ⌘↵
and result rows		Tools / AI / automation
paper
Light film-editorial styleFaded, nearly monochrome photo + film grain + halftone dots (neutral, not yellow-tinted); the keyword uses iOS text selection (yellow background + blue handles), with the iOS context menu positioned directly above the selectionOpinions / storytelling / premium-looking topics
popout
and 
ui
use a dark pop-out treatment (darkened original image + fully brightened person); 
paper
uses a light treatment (faded photo + film grain/halftone dots, with the person faded rather than popping out). All three include the @鱼亦乐 signature, but each has a different visual language—do not mix them in one image.
  • ui
    : use the 
    results
    field for result rows (defaults to 
    subtitle
    ).
  • paper
    : use the 
    menu
    field for the iOS context-menu overlay (a list of strings; optional). Keywords in 
    [square brackets]
    are automatically rendered with iOS selection highlighting.

brief.json 字段

brief.json Fields

字段说明
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"]
FieldDescription
template
popout
(default) / 
ui
/ 
paper
name
Output filename prefix
kicker
Small label in the top-left corner, such as 
CODEX · SKILL
; optional
title
Title; use 
\n
for line breaks, and wrap the keyword in 
[square brackets]
for a solid yellow block
subtitle
Subtitle; optional
photo
Path to the original image (bottom-layer background, retaining the environment)
person_image
Path to the cutout image (top-layer person; must originate from the same image as 
photo
and include the entire frame)
person_side
right
(default) / 
left
focus
Framing focal point expressed as 
object-position
; optional (tuned for portrait images by default). Accepts either a single string or per-ratio values such as 
{"16x9":"50% 30%",...}
brand_name
Defaults to 
@鱼亦乐
(text only, no logo)
person_grade
mono
= black-and-white person; omit for full color
results
(
ui
only) Command-panel result rows as a list, where each item is 
{icon,label,sel}
; defaults to 
subtitle
menu
(
paper
only) iOS context-menu overlay as a list of strings; optional
component
(
popout
only) Optional hook component, such as a terminal or GitHub panel; see 
references/components.md
. Omit it for a cleaner default design
ratios
Defaults to 
["16x9","4x3","3x4"]

文件

Files

  • 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
    —— 输入示例。
  • references/brand-system.md
    — ★ Core: pop-out aesthetic rules, color palette, typography, and acceptance checklist. Read it before every task.
  • references/components.md
    — Specifications for optional hook components.
  • assets/template-popout.html
    — Dark poster-style template (default).
  • assets/template-ui.html
    — Dark command-panel-style template.
  • assets/template-paper.html
    — Light paper-editorial-style template with iOS selection highlighting.
  • src/cutout.py
    — rembg cutout that outputs the entire frame.
  • src/render.py
    — Three-layer compositing + precise Playwright capture of 3 images.
  • examples/codex/brief.json
    — Example input.