Video Clip Extractor
linzzzzzz/openclip
Processes videos to identify engaging moments, generate transcripts, and create highlight clips with artistic titles and custom cover images.
Designs typography-driven video covers and thumbnails in HTML/CSS and screenshots them with Chrome DevTools at 16:9, 16:10, 9:16 and 3:4.
SKILL.md written in Chinese; this summary is our English description.
Install Typography Cover Designer
$ npx skills add sugarforever/01coder-agent-skills --skill cover-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/cover-design .claude/skills/cover-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "cover-design" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-design into .claude/skills/cover-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/cover-design .agents/skills/cover-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "cover-design" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-design into .agents/skills/cover-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/cover-design .cursor/skills/cover-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "cover-design" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-design into .cursor/skills/cover-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/sugarforever/01coder-agent-skills.git --path skills/cover-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/cover-design .gemini/skills/cover-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "cover-design" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-design into .gemini/skills/cover-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install sugarforever/01coder-agent-skills cover-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add sugarforever/01coder-agent-skills --skill cover-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/cover-design .github/skills/cover-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "cover-design" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-design into .github/skills/cover-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sugarforever/01coder-agent-skills --skill cover-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install sugarforever/01coder-agent-skills cover-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/cover-design .opencode/skills/cover-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "cover-design" agent skill from https://github.com/sugarforever/01coder-agent-skills/tree/main/skills/cover-design into .opencode/skills/cover-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cover-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
cover-design- GitHub stars
- 137
- Token cost
- ~3.3k tokens
- SKILL.md length
- 1,049 words
- Files
- 44 (incl. scripts, references)
- Skills in repo
- 21
- Repo updated
- First seen
- Licence
- MIT
At a glance
Designs typography-driven video covers and thumbnails in HTML/CSS and screenshots them with Chrome DevTools at 16:9, 16:10, 9:16 and 3:4.
- Works in 12 steps: 想法先行(方法论主线 · 最高优先) → Thumbnail ≠ Slide → 模板驱动 + 参数化 → …
- Making a YouTube or Bilibili thumbnail with a large readable title
- SKILL.md covers 跟 cover-image 的分工, 适用场景, 输出比例（4 套核心） and 核心原则, plus 3 more sections
- Runs Shell scripts from its folder
What it does
Covers are written as HTML/CSS and rendered to PNG through Chrome DevTools MCP, so text size and position stay exact. The skill contrasts itself with a separate cover-image skill that uses AI image generation, where text often comes out blurry or misspelled. It suits video thumbnails, article header images and social cards, and a thumbnail has to stay readable at 160px wide.
Four core ratios come from two template families: hero-typography for 16:9 (1920x1080) and 16:10 (1920x1200, the Bilibili cover size), and hero-typography-vertical for 9:16 (1080x1920) and 3:4 (1080x1440) for Douyin and WeChat Channels. Vertical designs must respect the safe zones. Design starts from Paul Rand's idea-first method of researching, extracting the core idea, cutting and checking it at 160px, with a single focal element, a headline of at least 200px on the 1920x1080 canvas and an element budget of five.
Many style templates ship, such as aurora, bauhaus and blueprint, each with a vertical version, together with scripts for rendering covers, extracting a brand theme and fetching brand icons, and references on logos, platform specs and composition.
When your agent uses it
- Making a YouTube or Bilibili thumbnail with a large readable title
- Creating vertical covers for Douyin or WeChat Channels
- Producing a series of covers with consistent branding
- Exporting several aspect ratios from one design
Example prompts
- “做一个关于 Rust 异步编程的视频封面，横屏和竖屏各一版。”
- “Design a YouTube thumbnail titled Ship Faster in the aurora style and export 16:9 and 16:10.”
- “Make a 9:16 and 3:4 cover pair for my short video and keep the title inside the safe area.”
Requirements
- Chrome DevTools MCP, for screenshots
- Bash, to run the render scripts
Workflow steps
12 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit e51fb6e. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 3 files in scripts/ (Shell, from the files we listed), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
lobehub.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Typography Cover Designer loads about 3.3k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 110 tokens; SKILL.md has 1,049 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from sugarforever/01coder-agent-skills at commit e51fb6e, republished under its MIT licence (© sugarforever). 1,049 words, ~3,321 tokens.
Download SKILL.mdSave it as
.claude/skills/cover-design/SKILL.md (or your agent's skills folder). This skill also uses 43 other files; get the full folder from GitHub.- name
- cover-design
- description
- 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", "缩略图", "横屏/竖屏封面", "抖音封面", "视频号封面".
Cover Design · 代码驱动的封面设计
用 HTML/CSS 写封面,然后用 Chrome DevTools MCP 截图成 PNG。字体精确可控,适合视频缩略图、文章题图、社交分享卡这类对文字位置敏感的场景。
跟 cover-image 的分工
cover-image | cover-design (本 skill) | |
|---|---|---|
| 渲染方式 | AI 生图 (Replicate gpt-image-2) | HTML/CSS + 浏览器截图 |
| 视觉风格 | 手绘 / 插画 / 编辑设计 | 排版驱动 / typography hero |
| 文字精度 | AI 渲染的文字常常模糊 / 错字 | 100% 精确 |
| 适合 | 文章题图 / 抽象概念 / 美术导向 | 视频缩略图 / 大标题 / 品牌一致性 |
| 风格扩展 | 通过 prompt 调整 | 通过新增 HTML 模板扩展 |
需要 thumbnail 在 160px 缩略图也读得出大字 - 用本 skill。
需要插画美感和氛围 - 用 cover-image。
适用场景
- 横屏视频缩略图 (YouTube / Bilibili)
- 竖屏短视频封面 (抖音 / 视频号)
- 文章 hero 题图 / 社交分享卡 (X Card / Open Graph)
- 系列内容 (品牌一致性)
输出比例（4 套核心）
封面要覆盖横屏长视频和竖屏短视频，去重后是 4 种核心长宽比，分两个模板族生成。完整规格、平台落点像素、安全区见 references/platform-specs.md。
| 比例 | 朝向 | 设计画布 | 模板族 | 主要平台 |
|---|---|---|---|---|
| 16:9 | 横 | 1920×1080 | hero-typography | YouTube、横屏短视频 |
| 16:10 | 横 | 1920×1200 | hero-typography | Bilibili（封面位是 16:10，不是 16:9） |
| 9:16 | 竖 | 1080×1920 | hero-typography-vertical | 抖音、视频号 |
| 3:4 | 竖 | 1080×1440 | hero-typography-vertical | 视频号官方封面、抖音九宫格 |
一期视频通常做 1 个横屏设计 + 1 个竖屏设计，各导出 2 个比例，共 4 张图。横屏的 16:9↔16:10、竖屏的 9:16↔3:4 只差 --cv-h，同一 HTML 改一个变量就能切。竖屏务必遵守安全区（抖音/视频号首尾会叠 UI 或被裁），核心文字居中。
核心原则
0. 想法先行(方法论主线 · 最高优先)
这个 skill 只采用一套构思方法论:Paul Rand 的「想法先行」。封面不是先选模板填标题,而是先有一个想法(idea) - 这期到底要让人 get 到什么 - 再让画面为它服务。四步:研究(不预设)→ 抽取核心想法 → 删减(simplicity 是好想法的副产品)→ 缩到 160px 验证那个想法还在。
核心想法不一定是产品名,形态开放:一个名字 / 一个 logo / 一个隐喻装置 / 一种氛围。下面的所有原则(单焦点、传达、精简)都是这套方法论的执行层 - 先有想法,再谈表达。完整方法论见 references/design-conception.md,这是全 skill 的构思总纲,不要混入别的设计流派。
1. Thumbnail ≠ Slide
封面缩略图在订阅列表 / 推荐位 / 搜索结果里最小可能只有 160px 宽。bento 网格、4 个 metric tiles、信息密集的布局都不工作。要的是:
- 单焦点 - 一个主元素占据 40-60% 画面
- 大字优先 - 主标题字号 ≥ 200px (1920×1080 画布)
- 3 秒原则 - 缩到 160px 仍能读出主标题
- 少即是多 - 一个视觉钩子 + 标题 + 副标 + 作者署名,完。
元素预算(默认 ≤ 5,模板一律按此交付精简版,多出来的先删再说):① 一个 kicker(品类 / 工具,可选)② 一个核心主元素(标题 或 logo / 隐喻装置 - 单焦点)③ 一句副标(可选)④ 一处署名(只一次)⑤ 至多一个领域装置(before/after、命令条、N→1、大数字 - 仅当承载信息时)。默认不放:日期、eyebrow 小字、Ep· 胶囊、扇出节点 / 纯装饰色块 / 几何形、上下分隔横线、第二处署名、重复副标。要加回任何一项,先自问「它传达了信息吗」 - 不传达就删,这是原则 0「删减」的执行。
关键区分(精简时别误伤):风格本身的视觉语言 - swiss 的网格细线、bauhaus 的几何色块、terminal 的扫描线 + 光标、aurora / glass 的光晕渐变、blueprint 的网格线稿 - 是这个风格的身份,不是 chrome,不在精简之列。要删的是被过度填充的内容槽(eyebrow / 日期 / episode 胶囊 / 第二署名)和不承载信息的装饰(扇出节点、纯平衡用的抽象色块)。
详见 references/thumbnail-vs-slide.md 与 references/cover-composition.md(默认元素集)。
2. 模板驱动 + 参数化
每种风格落地为一个 HTML 模板,所有可变内容(主标题、副标、accent 色、作者署名等)通过 CSS 变量或文本占位符暴露。新增风格 = 新增一个模板,不动 skill 主流程。
可用模板见 templates/ 目录，每个风格一对（横屏 + 竖屏）。当前有 15 个风格（见 Step 2 列表），风格目录与扩展规格见 references/design-styles.md。
3. 固定像素画布 + 浏览器陷阱
.cover 元素必须用固定像素（通过 --cv-w / --cv-h 变量 - 横屏 1920 宽、竖屏 1080 宽，高度按比例取值），不要用 vw / vh / %。原因见 references/render-pipeline.md 里的浏览器视口陷阱章节 - 简单说,resize_page 设的高度不等于实际视口高度,Chrome 工具栏 / 标签栏会吃掉 200-400px。固定像素 + fullPage 截图才稳。
4. 传达 > 好看(让核心想法落到画面)
封面读得清还不够,要在三秒内说清核心想法是什么(及它的形态)/ 什么品类 / 什么领域:核心想法做最显眼的主元素(它可能是名字、logo、隐喻装置或氛围 - 见原则 0),品类给信号(agent skill→斜杠命令条、模型→logo),领域给锚(设计→before/after、安全→告警)。品牌署名只出现一次,精简次要 chrome(simplicity 是好想法的副产品)。这是封面质量能超过纯模板套用的关键一环 - 详见 references/cover-composition.md。
工作流
Step 1 · 收集信息
问用户(已给的跳过):
- 目标平台 / 比例 - 要哪些?默认全 4 套(16:9 YouTube / 16:10 Bilibili / 9:16 抖音·视频号 / 3:4 视频号·抖音九宫格)。这决定做横屏、竖屏、还是都做 (见上方「输出比例」表)
- 主标题 - 大字部分,通常 1-3 个英文词或 4-8 个中文字 (必填)
- 副标题 - 一句话点题,中文 / 英文都行 (必填)
- 品牌信息 - 频道名 / 作者名 / 日期 (可读 auto memory 的
video-promo.md) - 强调色 - 默认 lime
#7bff9f,可换 (可选) - 背景 - 默认纯黑
#000,可换 (可选) - 品牌 logo - 要不要带某个模型/产品/厂商的官方 logo (Claude / OpenAI / Gemini / DeepSeek / Ollama……)?来源是
@lobehub/icons,取图标和放置见references/brand-logos.md(可选) - 额外元素 - 比如版本号、tagline、装饰图形 (可选)
- 输出路径 - 默认输出到视频目录,文件名带比例后缀 (
cover-16x9.html/.png等) - 是不是讲某个具体产品 / 工具? - 是的话拿到官网 URL,进入品牌匹配模式(见下),用产品自己的色 + 字 + logo,比频道默认 lime 更贴合产品
如果用户给了文章 / 脚本路径,先 Read 抽取主标题和副标题,再确认。
品牌匹配模式(选题是某个具体产品 / 工具 / 开源项目时)
封面采用产品官网的品牌色和字体,封面气质和被介绍的产品一致。运行:
scripts/extract-brand-theme.sh https://产品官网它输出可直接写入模板 :root 的 Google Fonts + 颜色 token(含 oklch 原值,Chrome 原生支持,原样写入即可)。用提取值覆盖模板默认的 --accent/--bg/--ink/--font-display/--font-mono,风格按官网调性从 design-styles.md 选最接近的。方法、字体中文搭配、取不到时的处理见 references/brand-theme.md。这和 brand-logos.md(取 logo)互补,配齐「色 + 字 + logo」一整套。
Step 1.5 · 构思:抽取核心想法（动手前必做 · 见原则 0）
收集完信息,先别选模板。按 references/design-conception.md 走一遍「想法先行」,抽出这期的核心想法写下来,再定层级(核心想法做最大主元素 ＞ 角度 / 卖点做 accent 副线 ＞ 能力 / 细节做灰字),带着它进 Step 2。
两条提醒:核心想法不一定是产品名(也可能是 logo / 隐喻装置 / 氛围);别把「角度 / 卖点」误当核心想法。这一步不可跳过 - 是封面超过「模板套标题」的关键。
Step 2 · 选模板（按朝向选模板族）
根据 Step 1 要的比例选模板族:
先按朝向选模板族，再按风格选具体模板（每个风格都有横屏 + 竖屏两版）:
- 要横屏 (16:9 / 16:10) →
{style}.html - 要竖屏 (9:16 / 3:4) →
{style}-vertical.html - 两个都要 → 两版各做一份,共享同一套标题 / 副标 / 品牌信息
当前可用风格（每个都有横屏 {style}.html + 竖屏 {style}-vertical.html）:
hero-typography- 黑底霓虹大字 + fan-out 节点。技术解读 / 新功能发布，强视觉钩子。swiss- 瑞士国际主义：暖纸底 + 网格 + 极轻大字 + 单一强调色 + 1px 细线。冷静专业，技术拆解 / 评测 / 数据。neo-brutalism- 新粗野：高饱和撞色 + 粗黑描边 + 硬阴影 + 圆角块。玩味醒目，产品发布 / 工具类。bauhaus- 包豪斯：米白底 + 红黄蓝几何色块 + 粗网格。经典感，设计 / 理论 / 艺术类。editorial- 杂志风：暖纸底 + 衬线大标题 + 氛围背景 + 细线引文。有质感，观点 / 深度长文 / 人物。brutalism- 粗野：白底 + 系统/等宽字体 + 硬黑边框 + 刻意朴素。黑客 / 独立开发 / 逆向工程气质。aurora- 极光渐变：深底 + 多彩光晕 + 通透细字。AI / SaaS / 现代科技，当下感最强。glass-dark- 深色玻璃拟态：深底 + 背后柔光 + 磨砂玻璃面板。AI / 产品 / 现代科技，通透高级。terminal- 终端黑：纯黑 + 等宽荧光 + 扫描线 + 光标。CLI / 开发 / 黑客 / 逆向。noir-editorial- 暗调杂志：近黑 + 衬线大标题 + 暖金强调 + 颗粒。观点 / 深度 / 人物。spotlight- 聚光戏剧光：全黑 + 单束聚光 + 强暗角 + 高对比。发布 / 悬念 / 重磅。blueprint- 深蓝图：深藏青 + 白色网格线稿 + 等宽标注。架构 / 原理 / 技术拆解。holographic- 暗调全息：深底 + 油膜虹彩大字 + 全息箔 + 噪点。前沿 / 概念 / 潮流科技。quiet-dark- 极简黑：近黑底 + 左锚定大留白 + 纯白重字大标题 + 单一强调色只做标点（kicker + 短横杠）+ 极淡网格 + 1px 内框，零发光。冷静克制高级，发布解读 / 观点 / 系列封面。editorial-index- 编辑目录：暖纸底 + 大 wordmark 报头 + 编号目录（ruled contents）+ 单一强调色 + hairline 分隔。组合式版式而非单大标题，把整期 lineup 一眼摆出。AI 早读 / 日报周报 / 榜单 Top N / 合集目录（multi-item，缩略图会糊，宜大图 / 文章 hero）。
每个风格的视觉锚点、identity test、适用场景见 references/design-styles.md。
选风格的方法（智能选,不套默认皮）
风格 / 配色和「核心想法」一样要主动推导,不是拿模板的默认皮直接用。上面那张「风格 → 适用」清单是起点不是答案,照着题材类别机械对号最容易落进套路默认。方法:
- 从核心想法 + 题材的「调性 / 情绪」出发,而不是题材类别机械映射。 先问:这期是什么调性 - 冷静严谨?发布的兴奋?悬念压迫?粗粝的黑客气?温和人文?调性决定风格,题材类别只是线索之一。
- 列 2-3 个候选,逐个问「它的视觉语言服务这个想法和调性吗」,选最贴的(
design-styles.md有每个风格的 identity test)。拿不准就走「多方向预览」(Step 5),一次出 3-4 版让用户选。 - 配色要主动定,别继承模板默认皮。 每个模板
:root自带一套默认配色(terminal 黑绿、aurora 紫渐变、bauhaus 红黄蓝……)—— 那是起点不是终点。讲具体产品优先走品牌匹配(Step 1 的extract-brand-theme.sh),否则按调性主动调--bg/--accent。 - 品类信号独立于皮肤。 「agent skill → 命令条、模型 → logo」给的是元素,不绑定某个风格 - 命令条可以放进白底编辑风,logo 可以放进任何风格。别因为「要给命令条」就反射性套 terminal 黑绿皮。
套路默认皮:合适就用,别反射性套。 CLI / skill 题材用 terminal 黑绿、AI 题材用 aurora 紫渐变 - 这些常规组合本身没问题,前提是你真判断过它贴这期的想法和调性。要避免的是「没思考、顺手抓题材最套路那张皮」,不是「避免常规选择」。 判据:你能说出「为什么这个风格服务这个核心想法」,就用;只能说出「因为这题材一般都长这样」,就再想想。
Show full SKILL.md (429 more words)Show less
Step 3 · 定制内容
读取选定模板的 HTML,把占位符替换成用户的实际内容:
| 占位符位置 | 替换内容 |
|---|---|
<title> | 文档标题 + 频道名 |
.tag / .brand-mark | 顶部品牌行 |
.hero-eyebrow | 主标题上方小字 (类似 kicker) |
.hero-title | 主标题大字 (英文小写效果最好) |
.hero-sub | 中文副标题 |
.foot .author | 作者署名 |
.foot .episode | 底部右侧 chip |
--accent (CSS var) | 强调色 |
--bg (CSS var) | 背景色 |
| 品牌 logo (可选) | 顶部品牌行 / 标题前 lockup / 角标，来源 @lobehub/icons，做法见下「品牌 Logo」节 |
两个模板族共享上面这套占位符（竖屏族没有侧边 .nodes 和 .episode，其余一致）。竖屏族：所有文字已在 .safe 列里垂直居中，落在安全带内，不要把文字往画布上下边缘挪。
用 Write 工具把定制后的 HTML 写到输出路径（与最终 PNG 同目录）。横屏一版、竖屏一版分别写。
品牌 Logo（@lobehub/icons）
讲模型/产品/厂商时（Claude、OpenAI、Gemini、DeepSeek、Ollama……），从 @lobehub/icons 取官方 logo 融进模板。取图标、选变体、放置(品牌行/lockup/角标)、对比类双 logo、深底避坑、identity test 全见 references/brand-logos.md。
一条判断要点留在这:@lobehub/icons 只覆盖 AI / LLM 厂商。 讲非 AI 产品（开发工具、运行时、框架、SaaS，如 Bun、Vite、Zed）时它多半没有对应图标，fetch-brand-icon.sh 会报 FAIL。这时别硬拼 logo、别用网络图片（Rule 8） - 改走无 logo 的排版 / 品牌色识别：产品名做大字主元素 + 品牌色 + 命令条 / 领域装置（Bun 封面就是这么做的，见 references/cover-composition.md）。
Step 4 · 渲染成 PNG（每个比例一张）
默认用脚本 scripts/render-cover.sh - 它把多比例、2x retina、降采样预览、以及 headless Chrome 的所有坑（输出别用 /tmp、截图落盘时序、--headless=new 不自退要主动收进程、独立 profile）都封好了。一条命令搞定一期的横屏或竖屏全比例：
scripts/render-cover.sh cover.html ~/covers/<slug> # 横屏 HTML → 自动出 16x9 + 16x10
scripts/render-cover.sh cover-v.html ~/covers/<slug> 9x16 3x4 # 竖屏显式指定比例产物：cover-<比例>.png（2x retina，如 16:9 → 3840×2160）+ cover-<比例>.preview.png（≤1400px，给 Read / 验收看）。运行 scripts/render-cover.sh 无参看完整用法；坑的来由见 references/render-pipeline.md。
交互式微调时可改用 chrome-devtools MCP 逐张截（适合一边看一边调 CSS）：new_page 打开 file:// → resize_page 到 画布宽 ×（画布高 + 20） → navigate_page reload → take_screenshot fullPage: true。但批量出图、最终交付一律走脚本（见 Critical Rule 10）。
Step 5 · 验收 + 迭代
open 在 macOS 默认查看器里打开所有 PNG 给用户看。
先过想法验证(见 references/design-conception.md):
- 核心想法 test at scale - 缩到 160px,问的不是「标题读得出吗」,而是那个核心想法还在吗(名字认得出 / 氛围透得出 / 隐喻读得懂)?读不出 → 回 Step 1.5 换更强的表达,或做得更大、删更多。
- 主元素是不是核心想法本身,而不是被「角度 / 卖点」抢了位?
再过内容传达自检（见 references/cover-composition.md）:
- 三信号都到位?逐条指认画面里哪个元素负责:是什么(核心想法当主角,是不是最显眼)/ 什么品类(agent skill→命令条、模型→logo)/ 什么领域(设计→before/after、安全→告警…)
- 品牌署名只出现一次?(注意区分:产品名=选题主角要显眼,频道署名=低调一次。两者不算重复)
- 有没有可删的次要 chrome(日期 /
Ep·胶囊 / 分隔横线 / 装饰标签)?空白处是有信息量的视觉还是纯空? - 空白处放了领域装置没有?(转变类→before/after,整合类→N 个 ✕ → 一个 ✓,对比类→vs,数据类→大数字;partial 见
templates/partials/before-after.html)
再问视觉反馈:
- 文字位置 / 字号合不合适?
- 缩略图测试 - 缩到 ~320px / 160px 宽,主标题还读得出吗?(3 秒原则)
- 竖屏安全区 + 居中 - 9:16 / 3:4 核心文字是否在中央安全带、没贴边?短主视觉(标题/产品名)是否水平居中?(规则与例外见
references/platform-specs.md竖屏安全区) - accent / 背景色调要不要换?是否换模板?
多方向预览:定稿前不确定方向时,一次给出 3-4 个不同方向供用户选择(不同风格 / 配色),比单版反复改收敛更快。存档命名
cover-styles/{字母}-{风格}.html/.png。
迭代时优先改 CSS 变量和占位符文本,不要重新写整个 HTML(节省 token,改动可见)。竖屏调试若用了 body.show-guide 看安全带,最终渲染前去掉这个 class。
Step 6 · 完成
简短清单:
封面已生成（按你选的平台 / 比例）:
├── cover-16x9.png - 16:9 YouTube / 横屏短视频
├── cover-16x10.png - 16:10 Bilibili
├── cover-9x16.png - 9:16 抖音 / 视频号
└── cover-3x4.png - 3:4 视频号官方封面 / 抖音九宫格
（对应 .html 源文件同目录）
已用系统默认查看器打开。如需调整告诉我哪里改。只选了部分平台就只出对应比例。
写新模板的约定
未来加新模板时遵守以下约定(以便 skill 主流程不动也能识别):
- 文件名 kebab-case,横屏族用基名(如
split-hero.html),竖屏族加-vertical后缀 .cover元素必须:- 用
--cv-w/--cv-h变量定宽高(固定像素,不要vw/vh/%);横屏族 1920 宽、竖屏族 1080 宽 position: relative; overflow: hidden;- 直接作为
<body>第一个 child(或 flex 容器居中其内容)
- 用
- CSS 变量在
:root暴露,至少包含:--cv-w、--cv-h、--bg、--ink、--accent、--font-display、--font-mono - 字体用 Google Fonts 加载,优先
Manrope(display) +Noto Sans SC(中文) +JetBrains Mono(mono) - 文件顶部 HTML 注释里写明:支持的比例和怎么切(改
--cv-h)、适配平台、以及"何时用这个模板"(让 Step 2 能正确推荐) - 竖屏模板把文字收在垂直居中的安全带里,别贴上下边缘(见
references/platform-specs.md安全区)
新模板写好后不需要改 SKILL.md 主流程,只要 Step 2 时把它列入候选即可。
Critical Rules
- 固定像素画布 -
.cover用--cv-w/--cv-h固定像素(横屏 1920 宽 / 竖屏 1080 宽),不要 viewport 单位 - fullPage 截图 - 截图时
fullPage: true,避免视口陷阱 - 3 秒原则 - 主标题字号 ≥ 200px,缩到 160px 也能读
- 按目标平台出全比例 - 默认 4 套(16:9/16:10/9:16/3:4);竖屏核心文字放安全带,首尾会叠 UI/被裁(见
references/platform-specs.md) - 不替 cover-image 做事 - 用户要插画 / AI 生图,转
cover-imageskill,本 skill 只做代码驱动的排版型封面 - 不自动发布 - 只产 PNG,不动用户的发布渠道
- 品牌信息从 auto memory - 频道名 / 作者名优先读
video-promo.md,首次没有再问用户 - 品牌 logo 用官方来源 - 需要模型/产品/厂商 logo 时从
@lobehub/icons取(见references/brand-logos.md+scripts/fetch-brand-icon.sh),不要自行制作或随意使用网络图片;深色底别用 mono<img>(会变黑),用 color 变体或内联着色;对比类选题(X vs Y)双 logo 放大成标题上方 lockup,别缩成 kicker 小图标 - 中文标题行高 - 中文大标题 line-height ≈1.05–1.10,别用拉丁 display 的 0.9(会撞行);见
references/design-styles.md - 渲染输出别用
/tmp- headless 渲染输出到持久目录(/tmp会被清);优先用scripts/render-cover.sh,坑见references/render-pipeline.md - 想法先行(方法论主线,最重要) - 选模板前先按
references/design-conception.md抽出核心想法(可能是名字/logo/隐喻/氛围,别把「角度/卖点」误当想法);全 skill 只用这一套方法论,别混入别的流派。落到画面的传达自检(三信号/署名只一次/精简 chrome)见references/cover-composition.md - 讲具体产品时做品牌匹配 - 用产品官网真实色 + 字(
scripts/extract-brand-theme.sh+references/brand-theme.md),不要一律采用默认 lime;封面气质和被介绍的产品一致更专业 - 风格/配色要主动选,别套题材默认皮 - 按核心想法 + 题材调性推导风格(列 2-3 候选),模板自带配色是起点不是终点,品类信号(命令条/logo)不绑定某皮肤;常规选择合适就用,但要能说出「为什么这风格服务这个核心想法」(见 Step 2「选风格的方法」)
- 配色服务可读性(color-for-legibility) - 字清不清取决于亮度对比,不只是配色好不好看。① 主标题的「体量」留给最高对比的中性色(白压暗 ≈21:1 / 墨压浅),目标对比 ≥7:1;② 强调色当**「标点」用 - kicker / 短横杠 / 单个高亮词 / 图标 / 数字,小而实,绝不给整段大标题上饱和色(中等亮度 + 任何 glow 会软化字缘,160px 必糊);③ 主标题别加
text-shadow/ glow**;④ 不在同明度半透明色块上压同色文字(彩字发虚的常见来源)。霓虹风(hero-typography)的发光是有意识的风格选择,不是默认;范本见quiet-dark。详见references/thumbnail-vs-slide.md§4 +references/cover-composition.md
© sugarforever, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 43 other files (scripts, references) in skills/cover-design of sugarforever/01coder-agent-skills.
- SKILL.md
- references/brand-logos.md
- references/brand-theme.md
- references/cover-composition.md
- references/design-conception.md
- references/design-styles.md
- references/platform-specs.md
- references/render-pipeline.md
- references/thumbnail-vs-slide.md
- scripts/extract-brand-theme.sh
- scripts/fetch-brand-icon.sh
- scripts/render-cover.sh
- templates/aurora-vertical.html
- templates/aurora.html
- templates/bauhaus-vertical.html
- templates/bauhaus.html
- templates/blueprint-vertical.html
- templates/blueprint.html
- … and 26 more
Open the folder on GitHubat commit e51fb6e
Compare with similar skills
Typography Cover Designer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Typography Cover Designer this skillsugarforever/01coder-agent-skills | 137 | — | ~3.3k | Automated safety check: Pass | MIT | |
| Video Clip Extractorlinzzzzzz/openclip | 569 | — | ~2.8k | Automated safety check: Warn | MIT | |
| Video Thumbnail Generator0xsline/OpenChatCut | 2.2k | — | ~713 | Automated safety check: Pass | AGPL-3.0 | |
| Text to PNG Card Casterlijigang/ljg-skills | 7.5k | — | ~1.9k | Automated safety check: Pass | MIT | |
| Yt Dlp DownloaderMapleShaw/yt-dlp-downloader-skill | 209 | 1 repos | ~1.5k | Automated safety check: Pass | None | |
| Smart Illustratoraxtonliu/smart-illustrator | 564 | — | ~1.8k | Automated safety check: Pass | MIT |
Similar skills
Video Thumbnail Generator
0xsline/OpenChatCut
Create platform-ready thumbnails from real video frames. An agent skill from 0xsline/OpenChatCut.
Text to PNG Card Caster
lijigang/ljg-skills
Turns text, URLs or local files into tall PNG cards through HTML typography, with four modes: long reading card, full-text layout, comic and whiteboard.
Yt Dlp Downloader
MapleShaw/yt-dlp-downloader-skill
Download videos from YouTube, Bilibili, Twitter, and thousands of other sites using yt-dlp.
Smart Illustrator
axtonliu/smart-illustrator
Generates article illustrations, batch slide infographics and cover images from your text, using Gemini, Mermaid or Excalidraw engines and a prompt-only mode.
Fantasy Movie Poster
dacnay816y62-hub/fantasy-movie-poster-skill
Design original 9:16 Chinese-language cinematic movie posters from story briefs, genre keywords, or visual references, including layered cover workflows with separate image-designed background and…
More from sugarforever/01coder-agent-skills
All 21 skills in this repoMining Session Skills
sugarforever/01coder-agent-skills
Reviews one finished Claude Code session from its exported markdown and decides whether a skill is worth creating, updating or reusing for similar work.
Subtitle Correction
sugarforever/01coder-agent-skills
Fixes speech-recognition mistakes in .srt subtitle files, in Chinese or English, using terms you supply and leaving every timestamp untouched.
Claude Session Exporter
sugarforever/01coder-agent-skills
Lists Claude Code session transcripts and exports them to organized Markdown with a digest, a clean conversation and linked tool-call details.
Codex Session Manager
sugarforever/01coder-agent-skills
Lists, filters and exports local Codex session transcripts to organized Markdown with a digest, timeline and tool-call details, in full or pick-one mode.
Diagram to Image Converter
sugarforever/01coder-agent-skills
Converts Mermaid diagrams and markdown tables into PNG images through a hosted rendering API, for platforms without rich formatting.
Audio and SRT to Narrated Video
sugarforever/01coder-agent-skills
Builds a narration-synced MP4 from a voiceover audio file and its SRT subtitles using HyperFrames, with scenes timed to the subtitle cues; instructions are in Chinese.
Related
Works with
Categories
Questions about Typography Cover Designer
What does Typography Cover Designer do?
Designs typography-driven video covers and thumbnails in HTML/CSS and screenshots them with Chrome DevTools at 16:9, 16:10, 9:16 and 3:4. Covers are written as HTML/CSS and rendered to PNG through Chrome DevTools MCP, so text size and position stay exact. The skill contrasts itself with a separate cover-image skill that uses AI image generation, where text often comes out blurry or misspelled.
When should I use Typography Cover Designer?
Typography Cover Designer fits situations like: making a YouTube or Bilibili thumbnail with a large readable title; creating vertical covers for Douyin or WeChat Channels; producing a series of covers with consistent branding; exporting several aspect ratios from one design.
How do I install Typography Cover Designer in Claude Code?
Run `npx skills add sugarforever/01coder-agent-skills --skill cover-design -a claude-code`. Or copy the skill folder (skills/cover-design in sugarforever/01coder-agent-skills) into .claude/skills/cover-design in your project. Claude Code loads it when a task matches its description.
How do I install Typography Cover Designer in Codex?
Run `npx skills add sugarforever/01coder-agent-skills --skill cover-design -a codex`. Or copy the skill folder (skills/cover-design in sugarforever/01coder-agent-skills) into .agents/skills/cover-design in your project. Codex loads it when a task matches its description.
Can I use Typography Cover Designer in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sugarforever/01coder-agent-skills --skill cover-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cover-design, .gemini/skills/cover-design, .github/skills/cover-design and .opencode/skills/cover-design in your project.
What does Typography Cover Designer need to run?
Going by SKILL.md and its folder, Typography Cover Designer needs a shell for the scripts in its folder. Our summary lists: Chrome DevTools MCP, for screenshots; Bash, to run the render scripts.
Does Typography Cover Designer access the network?
SKILL.md names 1 domain. As links in the text: lobehub.com. This is read from the text; nothing was executed.
Is Typography Cover Designer safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Typography Cover Designer use?
Typography Cover Designer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Typography Cover Designer use?
About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.
What are the alternatives to Typography Cover Designer?
Skills that share tags, products or a category with Typography Cover Designer: Video Clip Extractor (linzzzzzz/openclip, 569 stars), Video Thumbnail Generator (0xsline/OpenChatCut, 2.2k stars), Text to PNG Card Caster (lijigang/ljg-skills, 7.5k stars) and Yt Dlp Downloader (MapleShaw/yt-dlp-downloader-skill, 209 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Typography Cover Designer?
sugarforever (a GitHub user) maintains it in sugarforever/01coder-agent-skills, which has 137 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on June 19, 2026.
Source: sugarforever/01coder-agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.