Og image
Connector-first Claude Code pack for graphic designers: Figma, Canva, Adobe Firefly, Nano Banana, Higgsfield, Unsplash, Brand.dev + skills, design guardrails (contrast/licensing/asset hygiene), loops & review agents.
npx -y skills add m-binimran/design-pack --skill og-imageAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Design Open Graph / social share images (1200x630) that render well in link previews - on-brand, legible, correctly exported. Use when a page or post needs a share/preview image.
SKILL.md
1.1 KB, as published. Nobody here has run it
og-image
The image that represents a link everywhere it's shared. Small, legible, on-brand.
Process
- Canvas 1200x630 (1.91:1). Keep key content centered - platforms crop edges differently.
- Hierarchy: a short headline (large, legible), optional supporting line, logo, a simple background or hero. Don't cram - it renders small.
- Build via Canva (branded) or
image-generatefor the background, then place text. - Contrast: text must pass over the background (the
contrast-guardhook) - add a scrim if needed. - Export optimized PNG/JPG (< ~1MB), absolute-URL ready; name kebab-case.
Output
- The OG image (confirmed from the connector) + the exact dimensions and the optimized file, ready to wire to
og:image.
Guardrails
- Legible at small size; safe margins; on-brand. Optimized weight.
- Verify it actually renders in a preview tester before claiming done; confirm connector output is real.