OG Image Generator

A 1200x630 share image in your brand colours and fonts, rendered to PNG, with the meta tags set.

INSTALL

One command, any agent

mkdir -p ~/.claude/skills && curl -fsSL https://tailkits.com/skills/tailkits-og-image.tar.gz | tar -xz -C ~/.claude/skills

Installs into ~/.claude/skills. For one project only, use .claude/skills instead. Then start a new Claude Code session and ask. Claude Code skills docs

Prefer to read it first? Download tailkits-og-image.tar.gz and open it.

THEN ASK

Example requests

  • Make a share image for the home page
  • Our links look blank on X, fix it
  • Add OG images for the docs pages
SKILL.MD

What the agent reads

tailkits-og-image/SKILL.mdMIT license
name
tailkits-og-image
description
Generates a 1200x630 Open Graph and Twitter share image in the project's brand, from the colours and fonts in its DESIGN.md, renders it to PNG, and sets the og:image and twitter:card meta tags. Use when the user asks for an OG image, social preview, share image, link preview card, or says their link looks blank when shared on X, LinkedIn, Slack or iMessage.
compatibility
Needs Node 18 or later. PNG output uses Playwright, Puppeteer or sharp if the project has one, else rsvg-convert; otherwise it writes SVG and HTML and explains how to get a PNG. No MCP needed; with the free Tailkits MCP (https://tailkits.com/mcp) it can verify the result with launch_audit_page.

Tailkits OG image

A share card that matches the product, made from its design tokens instead of a stock template.

The MCP (optional, free, no account)

Only step 5 uses it: launch_audit_page checks that the deployed og:image is reachable, a PNG or JPEG, and 1200x630. Install with:

claude mcp add --transport http tailkits https://tailkits.com/mcp

(Other agents: https://tailkits.com/mcp.) Without it, check the tags by hand with references/platforms.md.

Workflow

<skill-dir> is the folder that contains this SKILL.md.

1. Find the tokens

Use DESIGN.md at the repository root. If there is none, run the tailkits-design-md skill first if it is installed, or pass the brand colours by writing a minimal DESIGN.md (colors.background, foreground, primary, muted-foreground, and a typography.headline-lg.fontFamily).

2. Write the words

  • Title: the page’s promise in 3 to 9 words. For the home page that is the H1, not the product name.
  • Subtitle (optional): who it is for or the main proof, under 70 characters.
  • Brand and domain: the product name and the bare domain.
  • Eyebrow (optional): a short label such as “Docs”, “Changelog” or “Launch week”.

3. Generate

node <skill-dir>/scripts/og-image.mjs \
  --title "Ship your landing page this week" \
  --subtitle "Tailwind sections restyled by your DESIGN.md" \
  --brand "Acme" --domain acme.com \
  --design DESIGN.md --out public/og --name home

It writes home.svg, home.html and, when a renderer is available, home.png. Playwright and Puppeteer render the HTML with the real web fonts; sharp and rsvg-convert render the SVG with system fonts. If no PNG was written, tell the user the one command the script printed; do not ship the SVG as og:image.

Look at the PNG (open it or read it as an image). Shorten the title if a line ends in “…”.

For several pages, run it once per page with a different --name and --title.

4. Set the meta tags

Add the tags the script printed to the page’s <head>, through the framework’s own API where there is one (Next.js metadata.openGraph, Astro layout props, Nuxt useSeoMeta). The URL must be absolute (https://acme.com/og/home.png). Keep og:title and og:description in sync with the page.

5. Verify

After deploy, call launch_audit_page with the page URL, or check against references/platforms.md. Social networks cache previews: use each platform’s debugger to refresh.

Report

The PNG path, the renderer used, the tags added and where, and anything the user still has to do (deploy, refresh caches).

MORE SKILLS

Pair it with

All skills and the one-line install for all five