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.shfinds it in the standard macOS locations or onPATH. SetCHROMEto 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.
- Yes: flat vector, geometric line-art, precise serif type, one accent color.
- 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.htmlin 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.
- the
- Render:
bash
.claude/skills/vector-cover/render.sh <in.html> <out.png> [W] [H] # e.g. render.sh cover.html cover.png -> 2400x960 # render.sh cover.html card.png 1200 1200 -> 2400x2400render.shlaunches 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.
