SuperAPI AI Directory
Partner中文AI newsFavorites
Skillscover-design

cover-design

Design & creation

View repository

Updated 10-16 08:39

About this skill

cover-design · theme → a whole set of covers

This skill owns covers. blockframe-video and finance-stock-video cover steps are all delegated here.

Three things:

  1. One art style: hand-drawn editorial ink lines (warm white paper background #F7F3EA + ink blue + restrained teal-blue + a very small amount of amber/signal red). The source of series consistency,do not change。
  2. One generation pipeline：codex-cli → gpt-image → locate the real file → verify dimensions/ratio → save to disk.
  3. Three visible checks: bottom-right duration badge safe area, vertical 1:1 grid cropping, 120px thumbnail readability.

Iron rule one: a cover is "a set", not "one image". A video cover needs all five ratios (16:9 / 16:10 / 4:3 / 3:4 / 9:16); an article cover only produces 3:2. Iron rule two: after generating the image, you must verify the title character by character. The generation model will write Chinese characters and numbers wrong. Blurry or wrong characters → change the prompt and regenerate, never overlay or fix text on the image. Iron rule three: codex will lie about paths. It reports "saved to ./x.png", but it is actually written in $CODEX_HOME/generated_images/<thread>/. Always go through scripts/gen-cover.sh, don't trust what it says, and don't make up paths.

Dependency check

codex --version                  # ≥ 0.143 稳；缺了就停下告诉用户
command -v sips                  # 尺寸校验（macOS 自带）

Workflow

Step 1 · Define the title and hook

  • Main title: ≤6 Chinese characters, or a short product name (全志科技 / GPT-5.6 / AIGC财经频道）。
  • Subtitle: ≤12 characters. Putstock code / series name / one-line positioning，Don't put dates（0709 will be read as daily updates).
  • The more characters, the easier it is to render wrong. Leave the details you want to say to the body text and video, don't pile them on the cover.

Step 2 · Choose a composition recipe (by theme)

Go to references/prompt-templates.md 's "theme → composition recipe" table and pick a row (chips / model release / financial growth / tools & frameworks / security governance / channel collection), and get the motif for this theme. For new themes,add a rowto the table, don't improvise every time.

Step 3 · Generate images by ratio

Same theme, same art style,changing the ratio only changes composition / layout. Copy the layout instructions for each ratio from references/ratios.md。

# 提示词写进文件，逐个比例出（比例那行由脚本自动加在最前）
scripts/gen-cover.sh covers/cover-16x9.png  16:9  /tmp/p-h.txt   1600
scripts/gen-cover.sh covers/cover-16x10.png 16:10 /tmp/p-h.txt   1600
scripts/gen-cover.sh covers/cover-4x3.png   4:3   /tmp/p-43.txt  1200
scripts/gen-cover.sh covers/cover-3x4.png   3:4   /tmp/p-v.txt   1000
scripts/gen-cover.sh covers/cover-9x16.png  9:16  /tmp/p-916.txt 1000
# 文章封面只要一张
scripts/gen-cover.sh blog-images/cover.png  3:2   /tmp/p-art.txt 1500

gen-cover.sh Will: run codex → locate the real generated file(don't trust the path it reports) → sips read dimensions → warn when ratio deviation >3% or width is insufficient → copy to the target path.

gpt-image gives the closest integer dimensions, not mathematically exact ratios (measured 3:2 → 1536×1024，16:9 → 1672×941). If the deviation is small, use it; if it deviates a lot, regenerate orcenter-crop(don't stretch).

Step 4 · Verify

Video cover (five ratios) — three automated checks + one manual:

scripts/check-covers.sh covers/     # 比例齐全 + 右下徽标安全区 + 1:1 宫格裁切 + 120px 可读

Article cover (single 3:2) —— Do not run check-covers.sh: it verifies by the five video ratios (3x4 9x16 16x9 16x10 4x3) acceptance; for article covers that only output 3:2, all five ratios will be reported as MISSING and it will inevitably fail. Article covers only need:120px thumbnail readable + the manual check below. (The duration pill in the bottom-right and the vertical grid cropping are the video platform's concern.)

The last check can only be done by a human, and it is also the last line of defense：Read For each image,verify the title and subtitle word by wordto see whether they are clear and free of typos. Generated images easily trip over two things — the model does not know the platform will stamp a duration pill in the bottom-right corner, nor that the vertical version will be center-cropped into a square,key text must fall within the safe area。

Once gen-cover.sh reports "no thread_id read",stop and troubleshoot; do not trust any output(see references/codex-imagegen.md）。

Whennotto use generated images

A fallback rule, not the default path:

  • When precise numbers or real trademarks are needed(financial data covers, percentages that must be accurate, company logos), do not hand that part to the image model — use scripts/render-cover.sh <html> <out.png> <W> <H> 2 go through HTML → headless Chrome → 2× PNG for precise typesetting; or simply move the numbers into the video and body text.
  • scripts/render-cover.sh is also a general-purpose HTML→PNG screenshotter; for blogprecise data charts(donut charts, bar charts, ranking bars), use it.
  • When taking the HTML route and wantingtextured hero titles(giant characters filled with metal/stone/fabric, or a golden light band sweeping across), use producing-video/references/visual-effects.md 's "⑤ Material-filled large text / ⑥ Light-band text sweep" — pure CSS background-clip:text; a static cover can simply be screenshotted, no animation needed.

Reference

  • references/prompt-templates.md — prompt skeletons, fixed style paragraphs, theme→composition recipe table, verified examples, text rules
  • references/ratios.md — layout instructions for each ratio, platform safe areas, sizes and validation
  • references/platforms.md — cover slots and safe-area details for each platform
  • references/codex-imagegen.md — the contract and boundaries of codex image generation (why the wrapper is mandatory)
  • legacy/ — the old HTML cover templates and batch rendering scripts (retired, kept for reference)

Delivery checklist

  • Video: all five ratios present (16:9 / 16:10 / 4:3 / 3:4 / 9:16); article: one 3:2
  • Each one has been sips size-verified, with ratio deviation within an acceptable range
  • Title/subtitle verified word by word, no blur and no typos
  • Video cover:check-covers.sh all three checks passed (article covers skip it and only verify 120px readability)
  • Key text avoids the bottom-right badge area; vertical titles fall within the central 1:1 square
  • Cover PNGs are stored in the project's covers/(article covers go into blog-images/), not outside the project