yyl-video-thumbnail

Original：🇨🇳 Chinese

Translated

2 scriptsChecked / no sensitive code detected

Generate high-click-through video covers and thumbnails for Bilibili, YouTube, and Douyin using the pop-out technique: place a fully brightened cutout of the person over their own darkened original photo, with text layered in between, and reflow a single set of content into 16:9, 4:3, and 3:4 using HTML/CSS. Use this when the user wants a video cover, thumbnail, Bilibili cover, YouTube thumbnail, vertical Douyin/WeChat Channels cover, a thumbnail featuring the person, or a Codex/Agent/AI video cover. Note: this skill is exclusively for video thumbnails and follows the high-design YouTube aesthetic; for Xiaohongshu posts, infographics, or PPT-style visuals, use yuyile-social-card-skill.

6installs

Sourcettfake92-lab/skills

Added on2026-08-13

NPX Install

npx skill4agent add ttfake92-lab/skills yyl-video-thumbnail

SKILL.md Content (Chinese)

View Translation Comparison →

YYL Video Thumbnail 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

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.

One-Time Setup

bash

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

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

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).
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
```
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.
Write brief.json: see
```
examples/codex/brief.json
```
.
```
photo
```
= original image,
```
person_image
```
= cutout; both must come from the same image.

Render:

python3 src/render.py <brief.json> output/

→ 3 high-resolution PNG files.

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.
Deliver the result + briefly explain the trade-offs.

Brand Rules (Non-Negotiable)

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.

Three Templates (Switch with the

template

Field in brief.json; Do Not Mix Them)

Template	Style	Title Treatment	Best For
`popout` (default)	Dark poster style	Large white text + solid yellow block for the keyword, with the person fully brightened and popping out	Most videos; high impact
`ui`	Dark command-panel style	Render the title as “a query typed into an AI tool” with `✦ … ⌘↵` and result rows	Tools / AI / automation
`paper`	Light film-editorial style	Faded, 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 selection	Opinions / 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 Fields

Field	Description
`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
```
— ★ 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.