Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@brandkit

Social 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.

SkillContentv1.0.1 (latest)Tested
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: social-image-templates
  3. 3description: Make on-brand social image templates as editable SVG files from the tokens in brand.md, sized for Open Graph link previews (1200x630), square posts (1080x1080), and stories (1080x1920). Use when the user asks for "social images", "an OG image", "a LinkedIn or Instagram graphic", "a story template", "a link preview image", or wants a headline turned into a branded card.
  4. 4license: MIT
  5. 5---
  6. 6
  7. 7# Social image templates
  8. 8
  9. 9Turns the brand's colors, fonts, and logo into three ready-to-edit SVG templates. The script handles the fiddly parts: exact sizes, story safe zones, text contrast, and fitting the headline.
  10. 10
  11. 11## When to use
  12. 12
  13. 13- A launch, blog post, event, or announcement needs a share image.
  14. 14- The site has no Open Graph image, or each page needs its own.
  15. 15- "Make me a LinkedIn graphic for this post", "OG image for the new landing page", "story version of this announcement".
  16. 16- Not for photo editing or illustration. These are clean type-led cards.
  17. 17
  18. 18## Inputs
  19. 19
  20. 201. **Brand guide** with a tokens block (`brand.md` or `docs/brand.md`). Needs at least `color.primary`. Also uses `color.accent`, `color.ink`, `color.paper`, `font.heading`, `font.body`, `name`, and `logo.primary`. No guide: offer `brand-guide-builder` first.
  21. 212. **Headline**, 4 to 10 words. If the user gives a whole post, write three headline options, pick the strongest, and say which you chose.
  22. 223. **Subtitle**, one line on what the reader gets. Optional.
  23. 234. **Footer**, usually the domain. Defaults to the brand name.
  24. 245. **Style:** `brand` (primary color background, the default), `light`, or `dark`.
  25. 25
  26. 26## Steps
  27. 27
  28. 281. **Check the tokens.** Read the guide's tokens block. If `color.primary` is missing or not a hex color, stop and ask for it.
  29. 292. **Run the generator.**
  30. 30
  31. 31 ```bash
  32. 32 node scripts/make-templates.mjs brand.md social-templates --title "Cut no-shows by a third" --subtitle "Two-way text reminders, live today" --footer "yourdomain.com"
  33. 33 ```
  34. 34
  35. 35 - The logo from `logo.primary` is embedded so the SVG works anywhere. Add `--link-logo` to reference the file instead (smaller, but the logo must travel with the SVG).
  36. 36 - Use `--logo path/to/logo.svg` if the guide has no logo path.
  37. 373. **Read `social-templates/templates.json`.** Check `text_contrast` (must be 4.5 or more) and `warnings`. If contrast is low, rerun with `--style light` or `--style dark` and say why. If the title shrank or runs long, offer a shorter headline.
  38. 384. **Show the result.** Open or describe each file and the size it is for. If the user wants several posts, run once per headline into subfolders like `social-templates/launch/`.
  39. 395. **Explain export.** SVG is the editable master. For PNG: open in a browser and screenshot at 100%, or open in Figma and export at 1x. Fonts must be installed (or loaded) where the SVG is rendered.
  40. 40
  41. 41## Output format
  42. 42
  43. 43```markdown
  44. 44Made 3 templates in social-templates/ (brand style, text contrast 5.3:1)
  45. 45
  46. 46| File | Size | Use for |
  47. 47| --- | --- | --- |
  48. 48| og-1200x630.svg | 1200x630 | Link previews: set as og:image |
  49. 49| square-1080.svg | 1080x1080 | LinkedIn and Instagram posts |
  50. 50| story-1080x1920.svg | 1080x1920 | Stories and Reels |
  51. 51
  52. 52Headline used: "<title>"
  53. 53Notes: <logo embedded, or wordmark used because no logo was found>
  54. 54To change the text later: edit the #title and #subtitle elements, or rerun with a new --title.
  55. 55```
  56. 56
  57. 57## Guardrails
  58. 58
  59. 59- Use only colors and fonts from the tokens. Never add stock photos, gradients, or effects the guide does not allow.
  60. 60- Never ship a template with text contrast below 4.5:1. Switch style or ask.
  61. 61- Do not recolor or redraw the logo. If there is no logo file, use the wordmark and say so.
  62. 62- Keep text inside the story safe zone (top 250 px and bottom 340 px are covered by app UI). The script does this; do not move text there by hand.
  63. 63- Headlines are claims. Do not invent numbers or results for them; use only what the user said.
Sign in to comment on a line