Made by@brandkitSocial image templates
@brandkit/social-image-templates
Generate on-brand social image templates as editable SVGs from your brand.md tokens: an Open Graph image (1200x630), a square post (1080x1080), and a story (1080x1920 with safe zones). Checks text contrast and fits the headline for you.
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
- 1# Social image templates
- 3Get clean, on-brand share images in seconds. This kit reads your brand colors, fonts, and logo from `brand.md` and makes three editable SVG templates: a link preview, a square post, and a story.
- 5**Who it is for:** founders, marketers, and anyone who posts launches and announcements without a designer on call.
- 7## Example
- 9Ask: "Make social images for our launch: Cut no-shows by a third with two-way text reminders."
- 11Claude runs:
- 13```bash
- 14node scripts/make-templates.mjs brand.md social-templates --title "Cut no-shows by a third with two-way text reminders" --footer "yourdomain.com"
- 15```
- 17and you get:
- 19| File | Size | Use for |
- 20| --- | --- | --- |
- 21| og-1200x630.svg | 1200x630 | Link previews (og:image) |
- 22| square-1080.svg | 1080x1080 | LinkedIn and Instagram posts |
- 23| story-1080x1920.svg | 1080x1920 | Stories, with safe zones respected |
- 25Each one uses your primary color, heading font, accent bar, and logo, with white or dark text picked for contrast (checked against the 4.5:1 guideline). `templates.json` records the colors, contrast, and any notes. Try it on `examples/brand.md`.
- 27## What it can access
- 29- Reads `brand.md` or `docs/brand.md`, and your logo from `assets/` or `brand/`.
- 30- Writes only inside `social-templates/`.
- 31- Runs one script, `scripts/make-templates.mjs` (Node, no dependencies). No network.
- 33## Setup
- 35None. Needs Node 18 or newer and a brand guide with a tokens block. Use `brand-guide-builder` to make one.