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
