vector-cover

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.

• 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

1. 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).
2. 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.
3. 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.
4. Render:

   .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    -> 2400x2400
   

   render.sh launches its own headless Chrome. It needs no remote-debugging port and no browser automation setup.
5. 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.
6. 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.