Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add sugarforever/01coder-agent-skills --skill cover-designgit clone --depth 1 https://github.com/sugarforever/01coder-agent-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sugarforever/01coder-agent-skills/cover-design)<a href="https://agentmods.dev/skills/sugarforever/01coder-agent-skills/cover-design"><img src="https://agentmods.dev/badge/skills/sugarforever/01coder-agent-skills/cover-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/sugarforever/01coder-agent-skills/cover-design"><img src="https://agentmods.dev/badge/skills/sugarforever/01coder-agent-skills/cover-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00145 | $0.07507 |
| Opus 5 | $0.00072 | $0.03753 |
| Sonnet 5 | $0.00029 | $0.01501 |
| Haiku 4.5 | $0.00015 | $0.00751 |
Grade A, and why
cover-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 269 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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「删减」的执行。
What ships with it
42 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/brand-logos.md 7.5 KB
- references/brand-theme.md 5.6 KB
- references/cover-composition.md 10 KB
- references/design-conception.md 6.0 KB
- references/design-styles.md 11 KB
- references/platform-specs.md 3.8 KB
- references/render-pipeline.md 8.5 KB
- references/thumbnail-vs-slide.md 6.4 KB
- scripts/extract-brand-theme.sh 4.1 KB runs code
- scripts/fetch-brand-icon.sh 3.2 KB runs code
- scripts/render-cover.sh 5.3 KB runs code
- templates/aurora-vertical.html 5.2 KB
- templates/aurora.html 5.3 KB
- templates/bauhaus-vertical.html 4.4 KB
- templates/bauhaus.html 4.7 KB
- templates/blueprint-vertical.html 5.4 KB
- templates/blueprint.html 5.6 KB
- templates/brutalism-vertical.html 4.0 KB
- templates/brutalism.html 4.1 KB
- templates/editorial-index-vertical.html 4.9 KB
- templates/editorial-index.html 6.4 KB
- templates/editorial-vertical.html 5.0 KB
- templates/editorial.html 5.2 KB
- templates/glass-dark-vertical.html 4.8 KB
- templates/glass-dark.html 4.9 KB
- templates/hero-typography-vertical.html 5.7 KB
- templates/hero-typography.html 6.4 KB
- templates/holographic-vertical.html 4.7 KB
- templates/holographic.html 4.9 KB
- templates/neo-brutalism-vertical.html 4.3 KB
- templates/neo-brutalism.html 4.6 KB
- templates/noir-editorial-vertical.html 4.9 KB
- templates/noir-editorial.html 4.9 KB
- templates/partials/before-after.html 4.5 KB
- templates/quiet-dark-vertical.html 5.3 KB
- templates/quiet-dark.html 7.7 KB
- templates/spotlight-vertical.html 4.3 KB
- templates/spotlight.html 4.5 KB
- templates/swiss-vertical.html 5.4 KB
- templates/swiss.html 5.9 KB
- templates/terminal-vertical.html 4.7 KB
- templates/terminal.html 4.7 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 269 lines · 145 tokens per session scan A 57fe3d4fcbea
cover-design is a skill published in the GitHub repository sugarforever/01coder-agent-skills (134 stars, last pushed 2mo ago), licensed MIT. It adds 145 tokens to every session and 7,507 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
html-ppt-zhangzara-retro-zine
A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close. Built as a decision-grade story deck for community, local readers.
html-ppt-zhangzara-studio
A photography studio's portfolio-and-rate deck — the signature work, the process, and the packages that win the brief. Built as a decision-grade design craft deck for prospective clients.
motion-frames
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video…
webgl-halftone-drift
A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
motion-graphics
A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…