editorial-dot-cover

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Editorial Dot Cover

编辑点阵封面

Create a typographically accurate cover from vectors. Prefer the bundled renderer over image generation so Chinese text and punctuation remain exact.

从矢量图形创建排版准确的封面。优先使用随附的渲染器而非图像生成，以确保中文文本和标点完全准确。

Required inputs

必需输入

Resolve these values from the request or current project:

```
label
```
: short English/tool label, such as
```
Codex + Hyperframes:
```
```
title
```
: one concise Chinese headline
```
output
```
: destination SVG and PNG paths

Default to

3168 × 1267

(about

2.5:1

). If the user provides no label, derive a short tool/topic label. Ask only when the title itself cannot be inferred safely.

从用户请求或当前项目中确定以下内容：

```
label
```
：简短的英文或工具标签，例如
```
Codex + Hyperframes:
```
```
title
```
：一条简洁的中文标题
```
output
```
：SVG 和 PNG 的目标路径

默认尺寸为

3168 × 1267

（约

2.5:1

）。如果用户未提供 label，请根据内容推导一个简短的工具或主题标签。仅当无法安全推断 title 时才询问用户。

Render

渲染

Run:

bash

python3 <skill-dir>/scripts/render_cover.py \
  --label "Codex + Hyperframes:" \
  --title "拆解抖音爆款·吃上自媒体这碗饭!" \
  --output "/absolute/path/cover.svg" \
  --png "/absolute/path/cover.png"

Use

--width

and

--height

only when a different landscape ratio is requested. Use

--font-en

--font-cn

when the user specifies a font. Run

--help

for all parameters.

Use

--label-size

--title-size

for art-directed pixel sizes when mixed-language font metrics make the automatic fit inaccurate. Preserve the required text-to-icon gap after overriding either value.

Use

assets/style-reference.png

only as a visual comparison target when checking fidelity; generate new covers from the script instead of copying pixels from the sample.

The script keeps an editable SVG as the source of truth and uses an installed Chromium-family browser or

rsvg-convert

for PNG rendering. If neither renderer exists, deliver the SVG and report that PNG rendering remains pending.

运行：

bash

python3 <skill-dir>/scripts/render_cover.py \
  --label "Codex + Hyperframes:" \
  --title "拆解抖音爆款·吃上自媒体这碗饭!" \
  --output "/absolute/path/cover.svg" \
  --png "/absolute/path/cover.png"

仅当用户要求其他横向宽高比时，才使用

--width

和

--height

。当用户指定字体时，使用

--font-en

或

--font-cn

。运行

--help

查看所有参数。

当混合语言的字体度量导致自动适配不准确时，可使用

--label-size

或

--title-size

设置经过美术设计的像素尺寸。覆盖任一数值后，仍需保持文本与图标之间的规定间距。

仅在检查还原度时，将

assets/style-reference.png

作为视觉对比目标；应通过脚本生成新封面，而不是复制示例中的像素。

脚本会将可编辑的 SVG 作为源文件，并使用已安装的 Chromium 系浏览器或

rsvg-convert

渲染 PNG。如果两者均不可用，则交付 SVG，并说明 PNG 渲染仍待完成。

Style contract

风格规范

Preserve these traits:

Warm gray paper background near
```
#D6D0C5
```
, with subtle grain and a weak center glow/vignette.
Nearly black foreground near
```
#050505
```
; do not introduce accent colors unless requested.
Left-aligned text block occupying about 68–72% of the canvas.
Right-side dotted film-and-magnifier symbol occupying about 18–20%.
English line in a heavy slab serif. Prefer
```
Roboto Slab Black
```
; fall back to Rockwell or a heavy serif.
Chinese line in a very heavy display sans. Prefer a licensed installed display face; fall back to Source Han Sans SC Heavy or PingFang SC Heavy.
Tight tracking, compact line gap, and large empty top/bottom margins.
Use
```
·
```
or
```
：
```
to create an internal headline pause; preserve the user’s final punctuation.
Render the pictogram as vectors with round dotted strokes. Do not substitute a raster stock icon.

Do not add portraits, stickers, gradients with visible color shifts, badges, drop shadows, or decorative copy. The visual identity comes from typography, whitespace, paper texture, and the dotted pictogram.

需保留以下特征：

暖灰色纸张背景，接近
```
#D6D0C5
```
，带有轻微颗粒和较弱的中央光晕或暗角。
接近纯黑的前景色，约为
```
#050505
```
；除非用户另有要求，不要引入强调色。
左对齐的文本区域占据画布宽度的约 68–72%。
右侧点阵胶片与放大镜符号占据画布的约 18–20%。
英文行使用粗重 slab serif 字体。优先使用
```
Roboto Slab Black
```
，其次使用 Rockwell 或其他粗衬线字体。
中文行使用非常粗重的展示型无衬线字体。优先使用已安装且具有授权的展示字体，其次使用 Source Han Sans SC Heavy 或 PingFang SC Heavy。
紧凑的字间距、紧凑的行距，以及宽大的顶部和底部留白。
使用
```
·
```
或
```
：
```
在标题内部形成停顿；保留用户指定的结尾标点。
使用带圆点状描边的矢量图形渲染图标。不要替换为栅格素材图标。

不要添加人物肖像、贴纸、会产生明显色彩偏移的渐变、徽章、投影或装饰性文案。视觉识别力应来自字体排版、留白、纸张纹理和点阵图标。

Layout decisions

布局决策

Keep one Chinese headline line when it remains legible and fits before the icon.
For a long headline, first tighten phrasing. If wording must remain unchanged, insert one intentional line break and vertically recenter the full group.
Keep at least 4% canvas width between the text and pictogram.
Reduce the English label before reducing the Chinese headline when they compete.
For ratios narrower than
```
1.8:1
```
, preserve the style but allow the icon to move below/right of the text. Do not compress the title until its glyphs look unnaturally narrow.

当标题清晰可读且能在图标前完整容纳时，保持中文标题为一行。
对于较长标题，首先精简措辞。如果必须保留原文，则有意插入一次换行，并使整个文本组垂直居中。
文本与图标之间至少保留画布宽度的 4%。
当英文 label 与中文标题相互争夺空间时，优先缩小英文 label，而不是中文标题。
对于窄于
```
1.8:1
```
的宽高比，保留整体风格，但允许图标移动到文字下方或右下方。不要压缩标题，直至字形看起来异常狭窄。

Quality gate

质量检查

Before delivery:

Open the PNG at full size and at 25% scale.
Confirm every Chinese character and punctuation mark matches the requested text.
Confirm no glyph, dotted stroke, or magnifier handle is clipped.
Confirm the headline is the first focal point and the icon remains secondary.
Confirm background texture is visible only on inspection, not as obvious noise.
Confirm the SVG remains editable and the PNG dimensions match the contract.

If the dotted symbol collapses at thumbnail size, increase dot spacing or stroke width and rerender.

交付前：

以完整尺寸和 25% 缩放比例打开 PNG。
确认每个中文字符和标点符号均与用户请求的文本一致。
确认没有字形、点阵描边或放大镜手柄被裁切。
确认标题是第一视觉焦点，图标保持次要地位。
确认背景纹理仅在仔细观察时可见，不会表现为明显噪点。
确认 SVG 仍可编辑，且 PNG 尺寸符合规范。

如果点阵符号在缩略图中显得过于密集，请增加点间距或描边宽度，然后重新渲染。