A 1200×630 Open Graph image, the preview picture shown when a webpage is shared on services such as social networks or chat apps. It creates the image but does not add the webpage metadata that tells services to use it.

Use it to create a branded preview image for sharing a webpage on Facebook, X, LinkedIn, Discord, or similar services.

It removes the need to design a share preview at the expected size while keeping image creation separate from website code. It requires existing project and brand guidelines.

og-image — Skill for Claude Code by roslove44

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add roslove44/brand-artisan --skill og-image

Clone the repo

git clone --depth 1 https://github.com/roslove44/brand-artisan

Made for: Claude Code.

Or install brand-artisan, the plugin that ships this one along with the rest of its 15 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/roslove44/brand-artisan/og-image/github.svg)](https://agentmods.dev/skills/roslove44/brand-artisan/og-image)

Your own site

<a href="https://agentmods.dev/skills/roslove44/brand-artisan/og-image"><img src="https://agentmods.dev/badge/skills/roslove44/brand-artisan/og-image/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/roslove44/brand-artisan/og-image"><img src="https://agentmods.dev/badge/skills/roslove44/brand-artisan/og-image.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 91 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,215 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00091	$0.01215
Opus 5	$0.00046	$0.00607
Sonnet 5	$0.00018	$0.00243
Haiku 4.5	$0.00009	$0.00121

Measured 11d ago against content hash 79c7c010f233, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

og-image scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/og-image/SKILL.md · 110 lines

How it starts

The opening of the file, as written. The whole thing — 110 lines — stays where its author put it; the contents beside it link to each section on GitHub.

og-image: optimized Open Graph image

Goal: produce the PNG asset of a share image (1200×630), through the project's pipeline (Satori -> resvg), aligned with the guidelines. BrandArtisan generates the image only; the og:/twitter: tags live on the site that hosts it.

This is a specialization of new-template with the OG constraints hard-coded. Same conventions: the Template contract (from brand-artisan), assets through brand(), fonts discovered in fonts/, export default ... satisfies Template.

0. Prerequisites (blocking)

The chain project -> template folder -> guidelines must exist before you start. Do not begin until it does:

Resolve <project> (from the arguments, otherwise ask).
Check templates/<project>/ and brands/<project>/brand.md.
If the guidelines or the project are missing -> STOP: ask the user to run /new-project <project> first. No visual without guidelines (CLAUDE.md rule).

1. Frame it

<name> is a kebab-case slug, default og (or og-<page> if there are several previews). Check that templates/<project>/<name>.tsx does not exist.
Read brands/<project>/brand.md: palette (hex), type, which logo variant to use depending on the background, and the don'ts.
Read brands/<project>/project.md if it exists: set the tone and the claims (don't invent figures or promises). If absent -> ask for the tone and the message rather than guessing.
Ask for the message: short headline + tagline (1 sentence). No paragraph.

2. OG constraints (to respect in the template)

Exact size 1200×630 (1.91:1 ratio). The standard recognized by Facebook, LinkedIn, Slack, Discord and X. Do not deviate; absolute minimum 600×315.
Opaque background, never transparency: the platforms compose the image over varied backgrounds.
Safe area of roughly 80 px of margin: keep the logo and the text towards the center. The corners can be cropped or rounded (Discord, X), so nothing important goes in them.
Legible when small: the preview often displays about 400 px wide on mobile. Large headline (~60–90 px), short tagline, strong contrast. Mental test: still legible once shrunk to 400 px wide.
Light weight: aim for < 300 KB. Beyond that, some consumers (WhatsApp in particular) do not generate the preview. The engine's flat rendering is naturally light: favor the mark as an SVG data-URI (as og.tsx does), avoid embedding large raster PNGs, and don't inflate with scale: leaving scale out (= 1) is enough at 1200×630 for OG.
PNG: that is the engine's output, ideal for crisp text.

Read the full file on GitHub · 110 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

11d ago First seen · 110 lines · 91 tokens per session scan A 79c7c010f233

Subscribe to this mod's changes

og-image is a skill published in the GitHub repository roslove44/brand-artisan (4 stars, last pushed 13d ago), licensed MIT. It adds 91 tokens to every session and 1,215 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Creative and media Marketing and SEO agent-skills ai-agents brand-identity branding cli design-system

build-startup-brand

Turn a startup idea, product, URL, pitch, or existing visual identity into a distinctive startup brand system and a polished standalone HTML report. Use when Codex needs to create or refine startup positioning, a salient brand idea, brand promise, tagline, messaging, voice, creative territories, logo or symbol…

Kappaemme-git/build-startup-brand · 105 tokens

collateral-design

Apply a brand's defined visual system to any fixed-format piece that isn't a website — decks and presentations, one-pagers and sales sheets, social posts and graphics, blog/OG thumbnails, business cards, brochures, flyers, posters, banners, billboards, and paid ads. Use when the user mentions 'design a deck,' 'pitch…

zstvns/design-skills · 184 tokens

og-image