Generate flat vector editorial cover illustrations in a warm editorial style: near-black canvas, cream organic blob, serif display type, one terracotta accent, and thin line-art concept motifs (grids, node charts, dashed "unknown" paths, mountains, question marks). Output is code (HTML + inline SVG) rendered to a crisp 2400x960 PNG via headless Chrome. Use when you want a blog, article or X-article cover image, a "hero graphic", or "make a cover for <title>".
Start a fresh conversation. Replace the highlighted placeholders.
Use vector-cover to create an HTML/SVG editorial cover for [article title and one-sentence idea] in [project folder]. Start from the supplied template, adapt the title and concept motif, and keep the flat near-black/cream design, serif type and exactly one accent colour. Use local Chrome or Chromium to render a 2400×960 PNG, inspect the image for clipping and collisions, and correct the geometry. Deliver the final PNG with editable working files and any unresolved rendering issue; do not publish.
Required inputs
[article title and one-sentence idea]
[project folder]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: vector-coverdescription: > Generate flat vector editorial cover illustrations in a warm editorial style: near-black canvas, cream organic blob, serif display type, one terracotta accent, and thin line-art concept motifs (grids, node charts, dashed "unknown" paths, mountains, question marks). Output is code (HTML + inline SVG) rendered to a crisp 2400x960 PNG via headless Chrome. Use when you want a blog, article or X-article cover image, a "hero graphic", or "make a cover for <title>".
Vector cover
Configuration
The palette below is a default. Swap the hex values in template.html for your own brand, and keep the rule of exactly one accent color. Cover copy (eyebrow, title) comes from your article, not from this skill.
Requirements
Google Chrome or Chromium. render.sh finds it in the standard macOS locations or on PATH. Set CHROME to override.
No other dependencies, and no browser automation setup.
What this is
A designed vector graphic built as code: flat SVG on a small set of color tokens, rendered and screenshotted. It is not a diffusion image.
No: photorealism, gradients, glow, drop shadows, 3D, texture. If a request needs a photo, this is the wrong tool.
Design system (default palette, configurable)
Token
Hex
Use
ink
#141413
background canvas
ivory
#FAF9F5
the organic blob and primary headline text
clay
#D97757
accent: eyebrow, rule, the "unknown" motif
grid
rgba(20,20,19,.09)
faint grid drawn inside the blob
undercurve
#E7D9C4
faint warm curves near the blob's base
Rules:
Exactly one accent color (clay by default). Never add a second hue.
Serif for the eyebrow (italic) and the headline (bold). Sans only for tiny annotations.
Keep the dark field mostly empty. 3-5 decorative marks at most, low opacity.
Everything on the cream is clipped to the blob. Nothing floats half off it except the intentional motif that escapes (for example the dashed unknown path).
Canvas
1200 x 480 logical (2.5:1), rendered at 2x → 2400x960 PNG (X-article cover
size). For a square social card use 1200x1200; for a 16:9 slide use 1280x720
and pass those to render.sh.
Layout skeleton (every cover)
+--------------------------------------------------------------+
| ? (clay, top-right) |
| A Field Guide: (eyebrow, italic clay) .-''''-. |
| / BLOB \|
| Finding Your (headline, bold ivory)| + grid |
| Unknowns | + MOTIF |
| ___ (clay rule) \ / |
| '-....-' |
+--------------------------------------------------------------+
left ~40% = type right ~60% = blob + concept motif
The concept motif is the whole point
Every cover encodes the article's idea as a small line-art diagram inside the
blob. Pick / adapt from this library (or invent one in the same visual grammar):
Article theme
Motif
journey, growth, unknowns, "map vs territory"
rising curve, solid→dashed, node dots, a ? and mountains at the frontier (the shipped template.html)
agents, systems, networks
5-7 nodes joined by thin lines; one node filled clay = the active one
architecture, layers, stack
3-4 stacked rounded rects, offset, one outlined clay
search, exploration, discovery
scattered dots + a dashed search path weaving between them + one magnifier ring
tradeoff, comparison, A vs B
two curves crossing; the winner solid, the other dashed
pipeline, process, workflow
left→right stages (small circles) joined by arrows; last one clay
iteration, loops, refinement
a spiral / concentric arcs tightening toward a center dot
Motif drawing rules: strokes #141413 at 2–2.6px, stroke-linecap="round";
hollow nodes = fill=ivory stroke=ink; filled nodes = fill=ink; anything
"uncertain / future / unknown" is dashed and clay.
Workflow
Get inputs from the user, or infer them from the article:
eyebrow (italic kicker, e.g. "A Field Guide:") - optional.
title (1–2 short lines; break it yourself for balance).
theme → pick a motif from the table above.
size (default 1200x480).
Copy the template: start from template.html in this folder. It already
has the tokens, blob, grid, type block, and the journey motif wired up.
Edit three regions only:
the <text> nodes (eyebrow / two headline lines / rule width),
the CONCEPT MOTIF group (swap for the theme's motif),
the 3–5 decorative marks on the dark field.
Leave the blob path, grid, and token colors alone unless deliberately restyling.
render.sh launches its own headless Chrome. It needs no remote-debugging port and no browser automation setup.
Verify visually: Read the PNG. Check nothing is clipped off-canvas
(the escaping motif must land on the dark field, not get cut), text fits the
left ~40%, and the blob doesn't collide with the headline. Iterate on coords.
Deliver the single PNG. Keep working files in your project folder.
Font note
The template uses a system serif stack (Charter/Iowan Old Style/Georgia).
For a pixel-exact editorial look, drop a @font-face (e.g. a Tiempos/Copernicus-
like serif) as a base64 data: URI at the top of the HTML - headless Chrome
renders embedded fonts fine. Do not link remote fonts (offline render).
Gotchas
Off-canvas clipping: <text> anchored past x=1200 (or the escaping motif)
gets cut. Keep the "unknown" cluster inside the canvas on the dark strip right
of the blob (~x 1120–1195).
Headline overflow: at 72px the serif eats ~11 chars/line. Longer titles →
drop to 60px or add a third line; re-check against the blob's left edge (~x498).
Blob edge vs grid: the grid is clipped to the blob, so extend grid lines
well past the blob bounds - clipping handles the rest.
Never add gradients, shadows, blur, or a second accent color. One clay.