cover-design

Cover Design · Code-driven cover design

Write the cover in HTML/CSS, then capture it as a PNG with Chrome DevTools MCP.Precise font control, suitable for scenarios that are sensitive to text placement, such as video thumbnails, article hero images, and social share cards.

Division of labor with `cover-image` division of labor with

	`cover-image`	`cover-design` (this skill)
Rendering method	AI image generation (Replicate gpt-image-2)	HTML/CSS + browser screenshot
Visual style	Hand-drawn / illustration / editorial design	Typography-driven / typography hero
Text precision	AI-rendered text is often blurry / has typos	100% precise
Suitable for	Article hero images / abstract concepts / art-oriented	Video thumbnails / large headlines / brand consistency
Style extension	Adjust via prompt	Extend by adding new HTML templates

When you need a thumbnail whose large text is still legible at 160px - use this skill. When you need illustration aesthetics and atmosphere - use cover-image。

Use cases

Landscape video thumbnails (YouTube / Bilibili)
Portrait short-video covers (Douyin / WeChat Channels)
Article hero images / social share cards (X Card / Open Graph)
Series content (brand consistency)

Output ratios (4 core sets)

Covers need to account for both landscape long videos and portrait short videos; after deduplication, that leaves 4 core aspect ratios, generated in two template families. For full specifications, platform placement pixels, and safe areas, see references/platform-specs.md。

Ratio	Orientation	Design canvas	Template family	Main platforms
16:9	Landscape	1920×1080	`hero-typography`	YouTube, landscape short videos
16:10	Landscape	1920×1200	`hero-typography`	Bilibili (the cover slot is 16:10, not 16:9)
9:16	Portrait	1080×1920	`hero-typography-vertical`	Douyin, WeChat Channels
3:4	Portrait	1080×1440	`hero-typography-vertical`	WeChat Channels official cover, Douyin 9-grid

For one episode of a video, usually make 1 landscape design + 1 portrait design, exporting 2 ratios each, for a total of 4 images. For landscape 16:9↔16:10 and portrait 9:16↔3:4, the only difference is --cv-h, and the same HTML can switch by changing one variable.Portrait must follow the safe area(Douyin/WeChat Channels overlay UI or crop at the start and end), with the core text centered.

Core principles

0. Idea first (methodology mainline · highest priority)

This skill adopts onlyoneideation methodology: Paul Rand's "idea first." A cover is not about picking a template first and filling in a title, but ratherhaving an idea first - what exactly should people get from this episode - and then letting the visuals serve it. Four steps:Research (without presuppositions) → extract the core idea → subtract (simplicity is a byproduct of a good idea) → shrink to 160px to verify that the idea is still there。

Core ideaIt does not have to be the product name, and the form is open: a name / a logo / a metaphorical device / an atmosphere. All the principles below (single focus, communication, concision) are the execution layer of this methodology - idea first, then expression. See the complete methodology in references/design-conception.md, this is the overall design guideline for the entire skill; do not mix in other design schools.

1. Thumbnail ≠ Slide

Cover thumbnails in subscription lists / recommendation slots / search results may be as small as 160px wide.bento grids, 4 metric tiles, and information-dense layouts do not work. What is needed is:

single focus - one primary element occupies 40-60% of the frame
big text first - main title font size ≥ 200px (1920×1080 canvas)
3-second principle - the main title is still readable when scaled down to 160px
less is more - one visual hook + title + subtitle + author credit, done.

element budget (default ≤ 5; templates are always delivered in this simplified version, and anything extra is deleted first): ① one kicker (category / tool, optional) ② one core primary element (title or logo / metaphorical device - single focus) ③ one subtitle line (optional) ④ one author credit (only once) ⑤ at most one domain device (before/after, command bar, N→1, big number - only when it carries information).do not include by default: date, eyebrow small text,Ep· pill, fan-out nodes / purely decorative color blocks / geometric shapes, horizontal divider lines above and below, a second author credit, repeated subtitles. To add any of these back, first ask yourself "does it convey information?" - if not, delete it; this is the execution of Principle 0, "reduction".

key distinction (do not accidentally cut when simplifying): the visual language of the style itself - swiss grid hairlines, bauhaus geometric color blocks, terminal scanlines + cursor, aurora / glass glow gradients, blueprint grid line art - is this style'sidentity, not chrome,and not subject to simplification. What should be deleted is overfilledcontent slots(eyebrow / date / episode pill / second author credit) anddecorations that carry no information(fan-out nodes, abstract color blocks used purely for balance).

See references/thumbnail-vs-slide.md and references/cover-composition.md(default element set).

2. Template-driven + parameterized

Each style is implemented as an HTML template, and all variable content (main title, subtitle, accent color, author credit, etc.) is exposed through CSS variables or text placeholders. Adding a style = adding a template, without touching the skill's main flow.

Available templates are in templates/ directory, one pair per style (landscape + portrait). Currently there are 15 styles (see the Step 2 list); for the style catalog and extension specs, see references/design-styles.md。

3. Fixed-pixel canvas + browser trap

.cover elementmust use fixed pixels(through --cv-w / --cv-h variables - 1920 wide for landscape, 1080 wide for portrait, with height taken proportionally),do not use vw / vh / %. For the reason, see the browser viewport trap section in references/render-pipeline.md - simply put, the height set by resize_page is not equal to the actual viewport height; the Chrome toolbar / tab bar consumes 200-400px. Only fixed pixels + fullPage screenshots are stable.

4. Convey > look good (make the core idea land on the image)

It is not enough for the cover to be legible; it must make clear within three secondswhat the core idea is (and its form) / what category / what domain: The core idea should be the most prominent main element (it may be a name, logo, metaphorical device, or atmosphere - see Principle 0), the category gives a signal (agent skill → slash command bar, model → logo), and the domain gives an anchor (design → before/after, security → alert). Brand attribution appears only once; streamline secondary chrome (simplicity is a byproduct of a good idea). This is a key part of whether cover quality can exceed pure template application - see references/cover-composition.md。

Workflow

Step 1 · Gather information

Ask the user (skip what has already been provided):

Target platform / aspect ratio - Which ones do you want? Default is all 4 sets (16:9 YouTube / 16:10 Bilibili / 9:16 Douyin·WeChat Channels / 3:4 WeChat Channels·Douyin nine-grid). This determines whether to make landscape, portrait, or both (see the Output Aspect Ratio table above)
Main title - The large text part, usually 1-3 English words or 4-8 Chinese characters (required)
Subtitle - One sentence that states the point; Chinese / English are both fine (required)
Brand information - Channel name / author name / date (can read the auto memory video-promo.md)
Accent color - Default lime #7bff9f, changeable (optional)
Background - Default pure black #000, changeable (optional)
Brand logo - Do you want to include the official logo of a model/product/vendor (Claude / OpenAI / Gemini / DeepSeek / Ollama……)? The source is @lobehub/icons, for icon retrieval and placement see references/brand-logos.md (optional)
Extra elements - For example version number, tagline, decorative graphics (optional)
Output path - By default, output to the video directory, with the aspect ratio suffix in the filename (cover-16x9.html/.png , etc.)
Is it about a specific product / tool? - If yes, get the official website URL and enterBrand matching mode(see below); using the product's own colors + fonts + logo is a better fit for the product than the channel default lime

If the user provided an article / script path, Read it first to extract the main title and subtitle, then confirm.

Brand matching mode (when the topic is a specific product / tool / open source project)

The cover usesthe brand colors and fonts from the product's official website, so the cover's feel matches the product being introduced. Run:

scripts/extract-brand-theme.sh https://产品官网

It outputs Google Fonts + color tokens that can be written directly into the template :root (including the original oklch values, natively supported by Chrome; write them in as-is). Use the extracted values to override the template defaults --accent/--bg/--ink/--font-display/--font-mono, and choose the closest style from design-styles.md according to the official website's tone.For the method, Chinese font pairing, and handling when values cannot be obtained, see references/brand-theme.md. This complements brand-logos.md(retrieving the logo), completing the full set of "color + font + logo".

Step 1.5 · Conception: extract the core idea (must do before starting · see Principle 0)

After gathering information,do not choose a template first. Follow references/design-conception.md to go through "idea first" once, extract this episode'score ideawrite it down, then determine the hierarchy (core idea as the largest main element > angle / selling point as accent secondary line > capability / detail as gray text), and carry it into Step 2.

Two reminders: the core ideais not necessarily the product name(it may also be a logo / metaphorical device / atmosphere);do not mistake the "angle / selling point" for the core idea。This step cannot be skipped - it is the key to making the cover go beyond "template with a title slapped on."

Step 2 · Choose a template (choose a template family by orientation)

Based on the ratio you want from Step 1, choose a template family:

First choose a template family by orientation, then choose a specific template by style (each style has both landscape + portrait versions):

Want landscape (16:9 / 16:10) → {style}.html
Want portrait (9:16 / 3:4) → {style}-vertical.html
Want both → make one of each version, sharing the same set of title / subtitle / brand info

Currently available styles (each has landscape {style}.html + portrait {style}-vertical.html）:

hero-typography - Black background neon large text + fan-out nodes. Technical explainers / new feature launches, strong visual hook.
swiss - Swiss International Style: warm paper background + grid + ultra-light large text + a single accent color + 1px hairlines. Calm and professional, technical breakdowns / reviews / data.
neo-brutalism - Neo-brutalism: high-saturation clashing colors + thick black outlines + hard shadows + rounded blocks. Playful and eye-catching, product launches / tools.
bauhaus - Bauhaus: off-white background + red-yellow-blue geometric color blocks + thick grid. Classic feel, design / theory / art.
editorial - Magazine style: warm paper background + large serif headline + atmospheric background + hairline pull quotes. Textured, opinions / in-depth long reads / profiles.
brutalism - Brutalist: white background + system/monospace fonts + hard black borders + deliberately plain. Hacker / indie developer / reverse engineering vibe.
aurora - Aurora gradient: dark background + multicolor glow + translucent thin text. AI / SaaS / modern tech, the strongest sense of the present.
glass-dark - Dark glassmorphism: dark background + soft glow behind + frosted glass panels. AI / product / modern tech, translucent and premium.
terminal - Terminal black: pure black + monospace phosphor + scanlines + cursor. CLI / development / hacker / reverse engineering.
noir-editorial - Dark magazine: near-black + large serif headline + warm gold accent + grain. Opinions / in-depth / profiles.
spotlight - Spotlight dramatic lighting: all black + a single spotlight beam + strong vignette + high contrast. Launches / suspense / big announcements.
blueprint - Blueprint: deep navy + white grid line art + monospace annotations. Architecture / principles / technical breakdowns.
holographic - Dark holographic: dark background + oil-slick iridescent large text + holographic foil + noise. Cutting-edge / concept / trend tech.
quiet-dark - Minimal black: near-black background + left-anchored large whitespace + pure white heavy large headline + a single accent color used only for punctuation (kicker + short dash) + very faint grid + 1px inner frame, zero glow. Calm, restrained, premium, launch explainers / opinions / series covers.
editorial-index - Editorial contents: warm paper background + large wordmark masthead + numbered contents (ruled contents) + a single accent color + hairline dividers.Compositional layout rather than a single large headline, laying out the entire issue's lineup at a glance. AI morning reads / daily and weekly digests / Top N rankings / collection contents (multi-item, thumbnails will blur, better for large images / article heroes).

See each style's visual anchor, identity test, and use cases in references/design-styles.md。

How to choose a style (choose intelligently, don't apply the default skin)

Style / color scheme, like the "core idea," must beactively derived, not by directly using a template's default skin. The "style → use case" list above is astarting point, not the answer, and mechanically matching by topic category is the easiest way to fall into formulaic defaults. Method:

Start from the core idea + the topic's "tone / emotion," rather than mechanically mapping by topic category. Ask first: what's the tone of this episode - calm and rigorous? Launch excitement? Suspenseful pressure? Gritty gangster? Gentle and humanistic?Tone determines style; subject category is only one clue.
List 2-3 candidates, and ask each one "does its visual language serve this idea and tone?", pick the closest (design-styles.md there's an identity test for each style). If unsure, go with "multi-direction preview" (Step 5), produce 3-4 versions at once and let the user choose.
Set the color scheme actively; don't inherit the template's default skin. Each template :root comes with a set of default colors (terminal black-green, aurora purple gradient, bauhaus red-yellow-blue...) - that's astarting point, not the destination. For specific products, prioritize brand matching (Step 1's extract-brand-theme.sh), otherwise actively tune by tone --bg / --accent。
Category signals are independent of skin. What "agent skill → command bar, model → logo" gives you areelements, not bound to any particular style - a command bar can go into a white-background editorial style, a logo can go into any style. Don't reflexively apply the terminal black-green skin just because you "need to include a command bar."

Clichéd default skins: use them if they fit, don't apply them reflexively. CLI / skill subjects use terminal black-green, AI subjects use aurora purple gradient - these conventional combinationsare fine in themselves, provided youhave genuinely judged that they fit this episode's idea and tone. What to avoid is "grabbing the most clichéd skin for the subject without thinking," not "avoiding conventional choices." Criterion: if you can say "why this style serves this core idea", use it; if you can only say "because this subject usually looks like this," think again.

Step 3 · Customize Content

Read the selected template's HTML and replace the placeholders with the user's actual content:

Placeholder location	Replacement content
`<title>`	Document title + channel name
`.tag` / `.brand-mark`	Top brand row
`.hero-eyebrow`	Small text above the main title (like a kicker)
`.hero-title`	Large main title text (lowercase English works best)
`.hero-sub`	Chinese subtitle
`.foot .author`	Author credit
`.foot .episode`	Bottom-right chip
`--accent` (CSS var)	Accent color
`--bg` (CSS var)	Background color
Brand logo (optional)	Top brand row / lockup before the title / corner mark, source `@lobehub/icons`, see the "Brand Logo" section below for how to do it

The two template families share the placeholder set above (the vertical family has no side .nodes and .episode, the rest is the same).Vertical family: all text is already in the .safe column vertically centered, within the safe zone; don't move the text toward the top or bottom edges of the canvas.

Use the Write tool to write the customized HTML to the output path (in the same directory as the final PNG). Write one version for landscape and one for portrait.

Brand Logo (@lobehub/icons)

When talking about models/products/vendors (Claude, OpenAI, Gemini, DeepSeek, Ollama...), get the official logo from @lobehub/icons and integrate it into the template.Getting icons, choosing variants, placement (brand row/lockup/corner mark), dual logos for comparisons, pitfalls to avoid on dark backgrounds, and the identity test are all covered in references/brand-logos.md。

One judgment point to keep here:@lobehub/icons Only covers AI / LLM vendors. When talking about non-AI products (dev tools, runtimes, frameworks, SaaS, such as Bun, Vite, Zed), it mostly has no corresponding icon,fetch-brand-icon.sh and will report FAIL.In this case, don't force a logo together and don't use web images (Rule 8) - instead go withlogo-free layout / brand color recognition: make the product name the big primary element + brand color + command bar / domain device (the Bun cover is done exactly this way, see references/cover-composition.md）。

Step 4 · Render to PNG (one per aspect ratio)

By default use the script scripts/render-cover.sh - it has sealed up all the pitfalls of multiple aspect ratios, 2x retina, downsampled previews, and headless Chrome (don't output to /tmp, screenshot-to-disk timing,--headless=new not self-exiting so you must actively collect the process, separate profile). One command handles a full set of landscape or portrait aspect ratios for one issue:

scripts/render-cover.sh cover.html ~/covers/<slug>            # 横屏 HTML → 自动出 16x9 + 16x10
scripts/render-cover.sh cover-v.html ~/covers/<slug> 9x16 3x4 # 竖屏显式指定比例

Outputs:cover-<比例>.png(2x retina, e.g. 16:9 → 3840×2160) + cover-<比例>.preview.png(≤1400px, for Read / acceptance viewing). Run scripts/render-cover.sh with no args to see full usage; for the origin of the pitfalls see references/render-pipeline.md。

When doing interactive fine-tuningyou can switch to chrome-devtools MCP to screenshot one by one (suitable for adjusting CSS while watching):new_page open file:// → resize_page to 画布宽 ×（画布高 + 20） → navigate_page reload → take_screenshot fullPage: true. But batch image output and final delivery always go through the script (see Critical Rule 10).

Step 5 · Acceptance + iteration

open Open all PNGs in the macOS default viewer for the user to see.

First pass the idea validation (see references/design-conception.md):

core idea test at scale - shrink to 160px, the question is not "can the title be read", butis that core idea still there(is the name recognizable / is the atmosphere conveyed / is the metaphor understandable)? If it can't be read → go back to Step 1.5 and switch to a stronger expression, or make it bigger and delete more.
Is the primary elementthe core idea itself, rather than being upstaged by the "angle / selling point"?

Then go through the content communication self-check (see references/cover-composition.md）:

three signalsall in place? Point out one by one which element in the picture is responsible:what it is(the core idea as the protagonist, is it the most eye-catching)/ what category(agent skill→command bar, model→logo)/ what domain(design→before/after, security→alert…)
The brand signature appears only once? (Note the distinction: product name = the subject's protagonist and should be eye-catching, channel signature = low-key once. The two don't count as duplication)
Is there anything deletablesecondary chrome(date / Ep·pill / divider line / decorative label)? Is the blank space informative visual or purely empty?
Is there adomain devicein the blank space? (transformation type→before/after, integration type→N ✕ → one ✓, comparison type→vs, data type→big number; for partial see templates/partials/before-after.html)

Then ask about visual feedback:

Are the text position / font size appropriate?
Thumbnail test - shrink to ~320px / 160px wide, can the main title still be read? (3-second rule)
Portrait safe area + centered - for 9:16 / 3:4 is the core text within the central safe zone and not touching the edges? Is the short main visual (title/product name) horizontally centered? (for rules and exceptions see references/platform-specs.md portrait safe area)
Should the accent / background tone be changed? Should the template be changed?

Multi-direction preview:When unsure of the direction before finalizing,provide 3-4 different directions at once for the user to choose from(different styles / color schemes), which converges faster than iterating on a single version. Archive naming cover-styles/{字母}-{风格}.html/.png。

When iterating, prioritize changing CSS variables and placeholder text; do not rewrite the entire HTML (saves tokens, changes are visible). For portrait debugging, if you used body.show-guide to check the safe zone,remove this class before final rendering。

Step 6 · Done

Short checklist:

封面已生成（按你选的平台 / 比例）:
├── cover-16x9.png   - 16:9  YouTube / 横屏短视频
├── cover-16x10.png  - 16:10 Bilibili
├── cover-9x16.png   - 9:16  抖音 / 视频号
└── cover-3x4.png    - 3:4   视频号官方封面 / 抖音九宫格
（对应 .html 源文件同目录）

已用系统默认查看器打开。如需调整告诉我哪里改。

If only some platforms are selected, only output the corresponding ratios.

Conventions for writing new templates

When adding new templates in the future, follow these conventions (so the main skill flow can recognize them without changes):

File name in kebab-case; landscape family uses the base name (e.g. split-hero.html); portrait family adds the -vertical suffix
.cover elementmust:
- use the --cv-w / --cv-h variables to set width and height (fixed pixels,do not vw/vh/%); landscape family 1920 wide, portrait family 1080 wide
- position: relative; overflow: hidden;
- directly as the <body> first child (or a flex container centering its content)
CSS variables are exposed in :root ,at leastinclude:--cv-w、--cv-h、--bg、--ink、--accent、--font-display、--font-mono
Load fonts with Google Fonts, prefer Manrope (display) + Noto Sans SC (Chinese) + JetBrains Mono (mono)
State at the top of the file in an HTML comment: the supportedratiosand how to switch them (change --cv-h), adaptedplatforms, and "when to use this template" (so Step 2 can recommend it correctly)
For portrait templates, keep text within the vertically centered safe zone; do not stick it to the top or bottom edges (see references/platform-specs.md safe zone)

After the new template is written,no need tomodify the SKILL.md main flow; just list it as a candidate during Step 2.

Critical Rules

Fixed-pixel canvas - .cover use --cv-w/--cv-h fixed pixels (landscape 1920 wide / portrait 1080 wide), do not use viewport units
fullPage screenshot - when screenshotting, fullPage: true, avoid viewport traps
3-second rule - main title font size ≥ 200px, still readable when scaled down to 160px
Output all ratios for the target platforms - 4 sets by default (16:9/16:10/9:16/3:4); keep core text in the safe zone for portrait, as the top and bottom will overlap UI / be cropped (see references/platform-specs.md)
Do not do cover-image's job - if the user wants illustrations / AI-generated images, redirect to the cover-image skill; this skill only makes code-driven typographic covers
No automatic publishing - only produces PNGs, does not touch the user's publishing channels
Brand information from auto memory - channel name / author name are read preferentially from video-promo.md, ask the user only if not found the first time
Use official sources for brand logos - when a model/product/vendor logo is needed, get it from @lobehub/icons (see references/brand-logos.md + scripts/fetch-brand-icon.sh), do not create your own or use random images from the web; on dark backgrounds do not use mono <img>(it turns black), use the color variant or inline coloring; for comparison topics (X vs Y), enlarge the two logos into a lockup above the title, do not shrink them into small kicker icons
Chinese title line height - Chinese large headings: line-height ≈1.05–1.10, don't use 0.9 as in Latin display type (lines will collide); see references/design-styles.md
Don't use for render output /tmp - headless render output to a persistent directory (/tmp will be cleared); prefer scripts/render-cover.sh, for pitfalls see references/render-pipeline.md
Idea first (the main thread of the methodology, most important) - Before choosing a template, first follow references/design-conception.md to extractcore idea(it may be a name/logo/metaphor/atmosphere; don't mistake "angle/selling point" for the idea); the whole skill uses only this one methodology, don't mix in other schools. For the on-canvas communication self-check (three signals / signature only once / minimal chrome) see references/cover-composition.md
do brand matching when talking about a specific product - use the product's official site real colors + fonts (scripts/extract-brand-theme.sh + references/brand-theme.md), don't uniformly adopt the default lime; a cover whose vibe matches the product being presented is more professional
Style/color scheme must be chosen actively, don't just apply a topic's default skin - derive the style from the core idea + the subject's tonality (list 2-3 candidates); the template's built-in color scheme is a starting point, not the end point; category signals (command bar/logo) are not bound to a certain skin; if a conventional choice fits, use it, but you must be able to say "why this style serves this core idea" (see Step 2 "How to choose a style")
Color serves legibility (color-for-legibility) - Whether text is clear depends onbrightness contrast, not just whether the colors look good. ① Leave the main title's "mass" tothe highest-contrast neutral color(white on dark ≈21:1 / ink on light), target contrast ≥7:1; ② Use accent colors as **"punctuation"- kicker / short dash / a single highlighted word / icon / number, small and solid,neverput a saturated color on an entire large heading (medium brightness + any glow will soften the letter edges, and at 160px it will definitely be blurry); ③ Main headingdon't add text-shadow / glow**;④ don't press same-colored text onto a semi-transparent block of the same lightness(a common source of washed-out colored text). The glow in neon style (hero-typography) is a conscious style choice, not the default; for an example see quiet-dark. See details in references/thumbnail-vs-slide.md §4 + references/cover-composition.md