All skills
sugarforever avatar

/cover-design

@4304e82

Design typography-driven video cover images using HTML/CSS + Chrome DevTools screenshot. Generates covers in all needed aspect ratios - 16:9 (YouTube), 16:10 (Bilibili), 9:16 and 3:4 (抖音/视频号 竖屏短视频) - with big readable text. Different from `cover-image` (AI hand-drawn aesthetic) - this is precise typography control via code. Use when user asks for "视频封面", "thumbnail", "做封面", "cover design", "缩略图", "横屏/竖屏封面", "抖音封面", "视频号封面".

Use this Skill: https://skilld.dev/gh/sugarforever/01coder-agent-skills/cover-design

This session only. Nothing lands on disk.

referencesplatform-specs.md

≈961 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Platform Specs · 各平台封面规格与长宽比

封面要覆盖横屏长视频(YouTube / Bilibili)和竖屏短视频(抖音 / 视频号)。去重后有 4 种核心长宽比,分两个模板族生成。规格来自各平台 2026 年公开建议(见 SKILL.md 末尾来源)。

4 种核心长宽比

比例 朝向 设计画布(--cv-w × --cv-h) 模板族 主要平台
16:9 横 1920 × 1080 hero-typography YouTube、横屏短视频
16:10 横 1920 × 1200 hero-typography Bilibili
9:16 竖 1080 × 1920 hero-typography-vertical 抖音、视频号(竖屏视频)
3:4 竖 1080 × 1440 hero-typography-vertical 视频号(官方封面外围)、抖音九宫格裁切

同一个横屏设计可同时导出 16:9 和 16:10(只改 --cv-h);同一个竖屏设计可同时导出 9:16 和 3:4。所以一期视频通常做 1 个横屏 + 1 个竖屏设计,导出 4 张图。

各平台落点像素与导出

平台 用哪个比例 平台展示像素 导出建议
YouTube 缩略图 16:9 1280×720(最小宽 640,≤2MB) 设计 1920×1080 → 下采样 1280×720
Bilibili 封面 16:10 推荐 1146×717,高清 1920×1200 封面位是 16:10,不是 16:9;16:9 图会被裁/留边
抖音 竖屏 9:16 视频 1080×1920,封面实际显示带 ~1080×1464,九宫格裁 3:4 设计 1080×1920,核心放中央安全带
抖音 横屏 16:9 1080×608 用横屏设计下采样
视频号 竖屏 3:4(外围)+ 9:16 安全区 视频满屏 6:7(1080×1260),官方封面建议外围 3:4、中间留 9:16 安全区 用竖屏设计,核心居中
视频号 横屏 16:9 1080×608 用横屏设计下采样

竖屏安全区(必须遵守)

抖音首尾会叠 UI(顶部进度/账号、底部字幕和按钮),视频号首尾可能被裁、九宫格还会裁成 3:4。所以:

  • 所有文字放在垂直居中的安全带里,上下各留足余量(≥15-18% 画布高度)。
  • 主视觉(大标题 / 产品名)默认水平居中。 窄高画幅里,左对齐的大字会把重量压向一侧、显得不平衡 - 横版能成立的左对齐编辑感,到竖版要改成居中。编辑 / 瑞士这类横版走左对齐的风格,做竖版时务必把核心大字块居中(实战反馈:竖版左对齐「核心大字体都在左对齐,显得很不平衡」)。顶/底的细线 chrome(kicker 行、页脚)可保留 full-width,不必跟着居中。
  • 竖屏模板 hero-typography-vertical.html 用 flex 居中,天然把内容收在中央;不要把品牌行/署名贴到上下边缘。
  • 设计时给 <body> 加 class="show-guide" 可显示 ~1080×1464 的抖音显示带辅助线,最终渲染前去掉。

命名约定

一期视频导出多张图时,文件名带比例后缀,便于区分和上传:

cover-16x9.png    # YouTube / 横屏短视频
cover-16x10.png   # Bilibili
cover-9x16.png    # 抖音 / 视频号 竖屏
cover-3x4.png     # 视频号官方封面 / 抖音九宫格

对应的 HTML 源文件同名:cover-16x9.html 等(或一个横屏 HTML + 一个竖屏 HTML,渲染时改 --cv-h)。

规格来源

各平台尺寸为 2026 年公开建议,会变动,发布前以平台当时的创作者后台为准。

  • YouTube 缩略图 1280×720 / 16:9:YouTube 帮助中心及多家 2026 尺寸指南
  • Bilibili 封面 16:10(1146×717 / 1920×1200):B 站创作中心封面建议
  • 抖音竖屏 1080×1920、显示带 ~1080×1464、九宫格 3:4:抖音创作者尺寸说明
  • 视频号竖屏满屏 6:7(1080×1260)、封面外围 3:4 + 中间 9:16 安全区、横屏 16:9(1080×608):微信视频号官方建议

Source: SKILL.md on GitHub

No alerts3mo3 checks · Risk SAFE
  • Gen Agent Trust Hub3mo

    The skill is a professional design tool for generating video covers using HTML, CSS, and headless Chrome. It automates the rendering process, fetches brand logos from trusted CDNs, and extracts design themes from URLs to ensure brand consistency. No security vulnerabilities or malicious patterns were identified.

  • Socket3mo

    No alerts

  • Snyk3mo

    Risk: LOW · No issues

Signed by skilld at 4304e82. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Steadyupdated 4 months ago

README badge

README badge for sugarforever/01coder-agent-skills/cover-design