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.

referencesdesign-conception.md

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

Design Conception · 构思:想法先行(本 skill 唯一的方法论主线)

这是 cover-design 唯一的构思方法论,贯穿全流程。其余 reference(三信号、领域装置、缩略图、风格)都是它的执行层 - 先有想法,再谈怎么表达、怎么排版、怎么验证。不要混入别的设计流派,单线走到底。

出处:Paul Rand。

  • "Don't try to be original, just try to be good."
  • "The designer does not begin with a preconceived idea. The idea is the result of careful study and observation."
  • "Simplicity is not the goal. It is the by-product of a good idea and modest expectations."

为什么要先有这一步

模板能套出一张「读得清」的封面,但读得清 ≠ 传达到位。一张好封面背后,先有一个想法(idea) - 这期到底要让人 get 到什么。跳过想法、直接拿标题填模板,是这个 skill 最常见的失败:封面好看,却没有重量。

抽取核心想法,是构思的第一步,也是封面质量能超过「模板套用」的地方。 这一步在 SKILL.md 工作流里是 Step 1.5,排在「收集信息」之后、「选模板」之前。

四步

1. 研究(不预设)

读完上下文(文章 / 脚本 / 选题)后,别急着想「放什么大字」。先弄清这期真正讲的是什么、对观众意味着什么。想法是研究出来的,不是拍脑袋拍的。如果用户只给了标题,主动追问或读源文,把上下文吃透再往下走。

2. 抽取核心想法 —— 形态是开放的

问自己一句:这期封面如果只能让人记住一件事,是什么? 那就是核心想法。它不一定是产品名,形态可以是:

形态 何时是它 例
一个名字 选题就是某个具名产品 / 模型 / 概念 MiniMax M3、Claude Code
一个 logo / 标志 品牌识别本身是重点(对决、站队、生态归属) 两家 logo 正面对撞
一个隐喻 / 装置 核心是「一个转变」或「一种关系」 before→after、N→1、X vs Y
一种氛围 / 环境 选题传达的是一种感受 / 状态,而非某个物件 「深夜调试」的孤灯感、「失控」的混乱感

判断方法:把几个候选各自缩到 160px,哪个还能让人 get 到这期? 那个就是核心想法。

别把「角度 / 卖点」误当成核心想法。 角度再好,也只是想法的一种说法,不能盖过想法本身(MiniMax M3 完整实战见文末 Worked example)。

3. 删减(simplicity 是副产品,不是目标)

想法定了,画面上任何不为这个想法服务的元素都删掉 - 多余的日期、Ep · 胶囊、分隔横线、纯装饰色块 / 几何形、第二个署名。不是为了「看起来简洁」而删,而是因为它们不为想法服务。简洁是好想法的结果,不是你追求的目标。

纯装饰的色块 / 几何形若不承载信息(反例:某封面右侧放一个抽象珊瑚方块纯做平衡,用户反问「这么抽象吗」),删掉,或换成承载想法的装置(before/after、命令条、大数字)。用「有意义的内容」做平衡,不用「无意义的形状」。

4. 验证(test at scale)

缩到 160px,问的不是「标题读得出吗」,而是:那个核心想法还在吗? - 名字还认得出 / 氛围还透得出 / 隐喻还读得懂,才算成立。读不出,回到第 2 步:要么换一个更强的表达形式,要么把它做得更大、更狠地删掉别的。

Worked example · MiniMax M3 发布解读(思路复盘)

一次真实的构思,重点看「抽取」那一步怎么从错到对。

选题:MiniMax 在 2026-06-01 发布开源模型 M3,做一期发布解读视频。这期的角度(hook)定为「开放权重 · 三合一」 - 前沿 coding + 1M 上下文 + 原生多模态。

1. 研究:读官方博客 + 文档,确认这期讲的是 M3 这款新模型,卖点是「权重开放 + 三件能力一次到位」。

2. 抽取核心想法 —— 这里抽错过一次。

  • ❌ 初版直觉:既然这期的 hook 是「开放权重 · 三合一」,就把这句话做成最大主元素,产品名 MiniMax M3 缩小。
  • 用户反馈:「话题的核心应该是 MiniMax M3 这款新模型,开放权重三合一相对没那么重要。」
  • ✅ 修正:这期的核心想法是 MiniMax M3 这款模型本身(形态 = 一个名字)。「开放权重 · 三合一」是它的卖点注脚,不是想法本身。教训:hook / 角度很容易被误当成核心想法 —— 它再吸引人,也只是想法的一种说法。

3. 删减:定了「M3 当主角」后,把不为它服务的删掉 —— 右侧一个纯装饰的抽象珊瑚方块(用户反问「这么抽象吗」,它不传达任何信息)删掉;重复的署名删到只剩一处;多余 chrome 精简。保留的:厂商 logo(品类信号 = 这是个模型)、MiniMax 珊瑚色(品牌匹配)。

4. 验证(test at scale):缩到 160px,问的不是「字读得出吗」,而是「MiniMax M3 这个想法还在吗」 - 在。竖版另外把左对齐大字改成水平居中,避免窄高画幅失衡(见 platform-specs.md)。

最终层级:MiniMax M3(最大,主角)> 开放权重 · 三合一(珊瑚 accent 副线)> 前沿 coding + 1M 上下文 + 原生多模态(灰字细节)> logo + 日期 + 署名(低调,各一次)。

一句话带走:先分清「这期的核心想法」和「这期的卖点角度」,让想法当主角,角度退成副线。 抽对了想法,层级、删减、模板都顺势而定。

和其他 reference 的关系(都为「表达已抽取的想法」服务)

  • 想法怎么表达成画面元素 → cover-composition.md(三信号 / 领域装置 / 层级 / 精简)
  • 想法用什么视觉语言 → design-styles.md(13 风格)、brand-theme.md(品牌色 + 字)、brand-logos.md(logo)
  • 想法读不读得出 → thumbnail-vs-slide.md(缩略图 / 3 秒原则)

顺序永远是:先有想法,再谈这些。 这些 reference 解决的都是「把想法表达清楚」,不是「替你想出想法」。

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