Linkedin Article Thumbnail

Generate clean, editorial-style SVG graphics for articles, LinkedIn, and in-text diagrams. Supports four output modes: article thumbnail, LinkedIn background banner, LinkedIn post graphic, and in-text diagram. Output raw SVG wrapped in a fenced code block — no prose inside the SVG. After rendering, ask the user if they want to adjust the tagline, layout, or accent color.

User input: $ARGUMENTS

Flags (all optional):

• --type thumbnail|linkedin-bg|linkedin-post|diagram — output mode (default: auto-detect from content)
• --accent — override accent color (default: #FFE033)
• --pattern A|B|C|D — force a layout pattern (default: auto-pick)

Auto-detect rules (when --type is omitted):

• Mentions "background", "banner", "tło", "banner LinkedIn" → linkedin-bg
• Mentions "post", "grafika do posta", "square", "post graphic" → linkedin-post
• Mentions "diagram", "flow", "schemat", "process", "steps", arrows → diagram
• Everything else → thumbnail

The aesthetic is: editorial magazine meets developer tooling. Think Bloomberg Businessweek covers, not stock photo libraries.

Core rules:

• White background always (#ffffff)
• Black (#111) for all type and line elements
• One accent color only — default yellow #FFE033 unless overridden
• Flat, zero gradients, zero shadows
• Two typefaces max: Georgia, serif for display/hero text; sans-serif for labels and UI; monospace for code/terminal
• Generous whitespace — never crowded
• Bottom tagline in small caps / letter-spacing — short and punchy (≤5 words, ALL CAPS)
• No rotated text, no emoji
• Every SVG: role="img" with ` and ` on root element
• All text stays within the safe area — never overflows the canvas
• SVG `` never wraps — keep all labels short enough for one line

Thumbnail (article cover)

viewBox: 0 0 680 400
Safe area: x=60–620, y=40–385
Bottom rule: 
Tagline: font-size="10", y=396, letter-spacing="1"

LinkedIn Background Banner

viewBox: 0 0 1584 396
Safe area: x=80–1504, y=30–370
Bottom rule: 
Note: left ~300px may be obscured by profile photo on desktop — keep primary content x>340
Tagline: font-size="11", y=389, letter-spacing="2"

LinkedIn Post Graphic

viewBox: 0 0 1200 628
Safe area: x=80–1120, y=50–580
Bottom rule: 
Tagline: font-size="12", y=612, letter-spacing="2"

In-text Diagram

viewBox: 0 0 720 auto  (height varies — set to fit content, minimum 200)
Safe area: x=40–680
No bottom tagline unless user requests one
Use clean flow arrows, boxes, and labels only

Use these patterns for Thumbnail and LinkedIn Post. LinkedIn Background uses a dedicated layout. Diagrams use their own rules.

Pattern A — Split Column (default for contrast / before-vs-after / two concepts)

• Left column: concept A with label + icon/UI mockup
• Right column: concept B with label + icon/UI mockup
• Vertical dashed divider in center
• Hero text + subtitle top-left
• Yellow accent bar left of hero text (14px wide rect)
• Bottom rule + tagline

Pattern B — Hero Statement (opinion pieces / single strong idea)

• Giant serif text filling 60–70% of canvas (core idea or acronym)
• Supporting subtitle in small tracked sans
• Yellow used as underline, highlight rect, or left bar accent
• Minimal supporting element bottom-right (small diagram, number, or icon)
• Bottom rule + tagline

Pattern C — Data / Stat Callout (research-backed / numbers-heavy)

• Large number or stat as hero (serif, very large)
• Yellow highlight rect behind or under the number
• Brief context label
• Supporting secondary stat or visual bottom half
• Bottom rule + tagline

Pattern D — Terminal / Code (technical / API / developer articles)

• Dark terminal block (#111 bg) as dominant element
• Yellow monospace text for key lines
• Gray (#888) for secondary lines
• White background surrounding terminal
• Hero label above or beside terminal

LinkedIn Background Layout

• Full-width horizontal composition
• Left ~340px: simple geometric accent element (large yellow rect, circle, or minimal mark)
• Center x=380–900: name / role / tagline in large serif + tracked sans
• Right x=960–1480: 2–3 short bullet points or key phrases (sans-serif, small, tracked)
• Bottom rule at y=375 + tagline
• Keep it airy — this is a banner, not a poster

Yellow accent bar (left of hero text)

Hero text (large serif)

WORD

Section label (small tracked caps)

LABEL

Horizontal rule

Browser window mockup (human/UI side)

Terminal mockup (agent/code side)

→ key line here
secondary line

Status icon — success

Status icon — failure

Content placeholder lines (inside mockups)

Vertical dashed divider

Flow arrow (for diagrams)

Process box (for diagrams)

Step label

Decision diamond (for diagrams)

Yes/No?

Highlight rect (accent behind text)

Key phrase

LinkedIn banner name block (center zone)

Full Name
ROLE · COMPANY

LinkedIn banner bullet list (right zone)

→ Bullet one
→ Bullet two
→ Bullet three

In-text diagrams follow the same style DNA but focus on clarity over aesthetics:

Allowed diagram types:

• Linear flow (A → B → C → D)
• Branching flow / decision tree
• Before/after comparison (two parallel columns)
• Layered stack (boxes stacked vertically showing system layers)
• Loop / cycle (circular or semi-circular with arrows)
• Matrix / 2x2 grid (quadrant chart)

Rules:

• All boxes same height (44px), width varies by label length (minimum 100px)
• Consistent row spacing: 80px between rows of boxes
• Arrows: stroke="#111", stroke-width="1.5", arrowhead marker
• Labels inside boxes: font-size="12", text-anchor="middle", centered vertically
• Section headers above groups: font-size="11", letter-spacing="2", fill="#888"
• Yellow accent: use it on one key box, one arrow, or one label — not everywhere
• Fit content: calculate viewBox height dynamically based on number of rows
• No decorative elements — every element must convey information
• Add a short title at top: font-size="14", font-weight="700", fill="#111"

Height formula:

height = 60 (top padding) + (rows * 80) + 60 (bottom padding)
Minimum: 200

Step 1: Parse Arguments and Detect Mode

Extract from $ARGUMENTS:

• Type: from --type flag, or auto-detect (thumbnail / linkedin-bg / linkedin-post / diagram)
• Accent: from --accent flag (default: #FFE033)
• Pattern: from --pattern flag (default: auto-pick in Step 3)
• Content: everything that isn't a flag — the article/post text or concept description

Step 2: Read the Content

If the user provided article or post text, read it. Identify:

• The core tension or single idea (usually in first 2–3 paragraphs or the headline)
• Key terms (2–5 words max) for the hero text
• Tagline candidate (≤5 words, punchy, captures the thesis)
• Any stats or numbers that are central to the argument
• Whether it is technical (code/API/developer) or conceptual/strategic

For diagrams: identify the steps, nodes, or relationships the user wants visualized.

Step 3: Pick Layout Pattern (skip for linkedin-bg and diagram)

| Content type | Pattern | |---|---| | Contrast / before-vs-after / two concepts | A — Split Column | | Single bold opinion / manifesto | B — Hero Statement | | Stats or research-led | C — Data Callout | | Technical / developer / API | D — Terminal |

For linkedin-bg: use the LinkedIn Background Layout from layoutpatterns. For diagram: use diagramrules.

Step 4: Compose the SVG

Use the correct canvas from canvasspecs. Build the SVG using reusableelements as building blocks. Follow these constraints:

• Keep all text short — no SVG text element should be wider than the safe area
• Use only the accent color in 1–2 places
• Whitespace is intentional — resist the urge to fill empty space
• Bottom rule + tagline on all types except plain diagrams
• Include ` and ` for accessibility

Step 5: Output SVG in chat

Output the SVG inside a fenced code block so the user can preview it:

  ...

One short line before the block (e.g., "Pattern A thumbnail — accent #FFE033").

Step 6: Export PNG to Obsidian vault

Save the SVG to a temp file and convert it to PNG, then move the PNG to the Obsidian blog-assets folder.

Output path resolution (in order of precedence):

1. --output flag (if provided)
2. $OBSIDIAN_VAULT/blog-assets/ environment variable
3. ./blog-assets/ (current directory fallback)

Filename convention: --.png

• slug = first 4 words of the title/tagline, lowercased, hyphens (e.g., ai-breaks-ux-flows)
• type = thumbnail | linkedin-bg | linkedin-post | diagram
• YYYY-MM-DD = today's date

Export steps:

# 1. Resolve and ensure output dir exists
if [[ -n "${OUTPUT_FLAG}" ]]; then
  BLOG_ASSETS="${OUTPUT_FLAG}"
elif [[ -n "${OBSIDIAN_VAULT}" ]]; then
  BLOG_ASSETS="${OBSIDIAN_VAULT}/blog-assets"
else
  BLOG_ASSETS="$(pwd)/blog-assets"
fi
mkdir -p "${BLOG_ASSETS}"

# 2. Write SVG to temp file
TMPSVG=$(mktemp /tmp/editorial-XXXXXX.svg)
cat > "${TMPSVG}" 
SVGEOF

# 3. Convert SVG → PNG
# Try rsvg-convert first (best quality), fall back to qlmanage (macOS built-in)
OUTPUT_PNG="${BLOG_ASSETS}/.png"

if command -v rsvg-convert &>/dev/null; then
  rsvg-convert -w 1360 "${TMPSVG}" -o "${OUTPUT_PNG}"
elif command -v inkscape &>/dev/null; then
  inkscape --export-type=png --export-width=1360 --export-filename="${OUTPUT_PNG}" "${TMPSVG}"
else
  echo "Installing rsvg-convert via brew..."
  brew install librsvg
  rsvg-convert -w 1360 "${TMPSVG}" -o "${OUTPUT_PNG}"
fi

rm -f "${TMPSVG}"

Export widths by type: | Type | PNG width | |---|---| | thumbnail | 1360px | | linkedin-bg | 3168px (2x for retina) | | linkedin-post | 1200px | | diagram | 1440px |

Use the Write tool to write the SVG to the temp file (more reliable than heredoc for complex SVGs).

After export, confirm to user:

Saved: 

Step 7: Follow-up

After the export confirmation, ask one short question: > Want to adjust the tagline, swap to a different pattern, or change the accent color?

• Don't put too much text inside the SVG — sparse is better
• Don't use more than one accent color
• Don't use gradients or shadows
• Don't make the tagline more than 5 words
• Don't crowd elements — whitespace is the design
• SVG `` never wraps — keep all text short enough for one line
• Always verify x + textLength stays within the safe area right boundary
• For LinkedIn Background: don't put important content in x=0–340 (hidden by profile photo)
• For diagrams: don't mix diagram types in one graphic — pick one layout and commit to it
• Don't add decorative elements that carry no meaning

Example invocations

/editorial-thumbnail Here's my article about how AI agents break traditional UX flows...
/editorial-thumbnail --type linkedin-bg Jane Smith · Product Lead · AI Builder
/editorial-thumbnail --type linkedin-post --accent #0077B5 Key insight from my latest article on agentic UX
/editorial-thumbnail --type diagram Show a flow: User Input → Agent Router → Tool Call → Result → User
/editorial-thumbnail --pattern C --accent #FF4040 73% of AI demos fail in production

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: lmiadowicz
• Source: lmiadowicz/claude-skills
• License: MIT

Install and usage instructions live in the source repository linked above.