OG Cards

Six designed 1200×630 share-card systems for AI agents — built as HTML, not generated as pixels.

Your agent can write. Its pages all look the same. That's not a model problem — it's that nobody wrote down the 40 lines of art direction that separate a card from a screenshot with a logo on it.

This repo is those 40 lines, packaged as an Agent Skill plus two finished card templates you can use right now.

---

Quick start

git clone https://github.com/xinpengfei520/og-cards && cd og-cards
npm run setup          # playwright + chromium, once
node shot.mjs cards/editorial.html
# → out/editorial.png at 2400×1260

To use it inside an agent, put skills/og-cards/SKILL.md where your agent looks for skills:

mkdir -p ~/.claude/skills/og-cards && cp skills/og-cards/SKILL.md ~/.claude/skills/og-cards/

Then ask:

Read SKILL.md and build me a share card for this post: <url>

Works with Claude Code, Codex, Cursor, or anything that reads SKILL.md.

---

What's in the box

Path	What it is
skills/og-cards/SKILL.md	The instruction set — the whole method, all six styles specified
cards/editorial.html	Free template — cream, serif, editorial
cards/terminal.html	Free template — dark, mono, developer
shot.mjs	Renders any card to a 2400×1260 PNG
assets/	The images in this README

---

The full set

Six systems: editorial, terminal, mesh, swiss, papercut, data. Two are in this repo. The other four — plus the finished, tested HTML for all six — are the paid set at cards.vance.xin ($29, one-time).

Being honest about that: SKILL.md specifies all six styles in detail, so a capable agent can build the missing four from the spec. What you're paying for is the finished files with the geometry already dialled in — the parts that take several passes to get right (see Failure modes below). If you'd rather spend the afternoon than the $29, the spec is genuinely enough.

---

Why HTML and not an image model

Because type is what breaks.

A diffusion model still can't set a headline at the right optical size, hyphenate correctly, or keep a 4.5:1 contrast ratio. It also costs about $0.04 per card and gives you a different result every time.

This approach:

• writes HTML at exactly 1200×630
• screenshots it at deviceScaleFactor: 2 → a 2400×1260 PNG
• costs $0 per card
• stays editable forever — change a word and re-shoot

Every style is four CSS custom properties. That's the whole theming system:

:root{
  --bg:   #F2EEE3;   /* background */
  --ink:  #14140F;   /* text       */
  --accent: #FF4D2E; /* one accent */
  --font: "Iowan Old Style", Georgia, serif;
}

---

How it works

1. READ    point the agent at a URL or a headline → headline, kicker, domain, read time
2. WRITE   40 lines of HTML at exactly 1200×630, from the style's token set
3. SHOOT   Playwright renders at 2×, then the agent reads the PNG back and checks clipping

Step 3 is the part people skip. The agent looks at its own output and fixes what it broke — that's why the result is consistent rather than lucky.

---

Failure modes this repo already handles

Symptom	Cause	Fix baked into the skill
Headline wraps to 4+ lines	too many words	≤ 9 words, never shrink below 3.2cqw
Looks "AI-generated"	two accents, everything centred	one accent, left-aligned
Serif looks cheap	fallback font won	pin the stack
Blurry on X	exported at 1×	deviceScaleFactor: 2

---

Licence

MIT for the code (shot.mjs, SKILL.md). The two templates are free to use in personal and commercial work, including client work — but not to resell as templates. See LICENSE.

---

Links

• Site: cards.vance.xin
• Paid set (all six, finished files): xinpengfei.gumroad.com/l/og-cards
• Issues and PRs welcome — new styles especially.