Agent Skill · v1.0 · 6 styles

Your post deserves a better face.

Most 1200×630 share cards are a screenshot and a logo. This Skill gives your agent six designed systems — so the card looks art-directed before anyone clicks.

› npx skills add signalnoise/og-cards
POST 012SIGNAL & NOISE

We shipped 47 features.
Nobody noticed.

signalnoise.dev2026 · 8 MIN
↑ ACTUAL OUTPUT — 1200 × 630, NO MOCKUP STYLE 01 · EDITORIAL

How the agent does it

Three steps · no design tool

01 / READ

Point it at the post

Give the agent a URL or a title. It pulls the headline, the kicker, the domain and the reading time — the four things every card needs.

02 / WRITE

It writes HTML, not pixels

Each style is a token set: type scale, tracking, one accent, fixed grid. The agent writes 40 lines of HTML at exactly 1200×630.

03 / SHOOT

Screenshot at 2×

Playwright renders the page at deviceScaleFactor 2 and saves a 2400×1260 PNG. Then it reads the PNG back and checks nothing clipped.

Why HTML and not an image model? Because type is the thing that breaks. A diffusion model still can't set a headline at the right optical size, and it costs $0.04 a card. This approach costs zero per card and is re-editable forever.

Pricing

One-time · no subscription

Free
$0
  • 2 of 6 styles (Editorial, Terminal)
  • SKILL.md + install command
  • Works with Claude Code, Codex, Cursor
Download the free skill
Founding · price rises with the library
$29ONE TIME
  • All 6 styles + every new style
  • Receipts: the exact HTML of each card
  • Lifetime updates, no renewal
Reserve at $29 — early access

Checkout opens with v1.0. Until then this reserves your founding price.

Why one-time and not $9.99/mo? Because a card style doesn't need hosting, compute or a server. Charging a subscription for static files is the reason people cancel. Buy-out converts better and matches what this actually is.

Straight answers

3 questions

Q1

Does it need an API key?

No. Everything is HTML + a local screenshot. Zero model cost per card.

Q2

Will it match my brand?

Each style exposes 4 tokens — background, ink, accent, typeface. Change four lines and it's yours.

Q3

What if I don't like the result?

Re-run it. The agent reads the PNG back and fixes clipping before it hands you the file.

How this page got its launch film. The 40-second film above was built by Plush Crew Launch Video, an Agent Skill that turns any product link into a launch film. (affiliate link — I earn 40% if you subscribe)