Editorial Dot Cover
Create deterministic editorial-style cover images with a warm paper-gray background...
Install
npx skills add Pluviobyte/rnskill --skill editorial-dot-cover -g -a claude-code -y- Repository
- Pluviobyte/rnskill1.7k
- Category
- Design
- Updated
- 2mo ago
- License
- See repository
- Context cost
- Lightabout 956 tokens
- Runs scripts
- Yes, review before use
What it does
Create deterministic editorial-style cover images with a warm paper-gray background, oversized black slab-serif/Chinese display typography, generous whitespace, and a dotted vector analysis icon. Use when the user asks for a “点阵编辑风封面”, “暖灰杂志风封面”, “Codex + Hyperframes 同款封面”, or wants to reproduce/adapt the specific minimal left-text/right-icon banner style. Produce editable SVG and a rendered PNG; do not use this skill for generic covers without this visual direction.
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 asCodex + Hyperframes:title: one concise Chinese headlineoutput: 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.
Render
Run:
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 or --font-cn when the user specifies a font. Run --help for all parameters.
Use --label-size or --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.
Style contract
Preserve these traits:
