Blueprint Social Images

One product brief, eight images on drafting paper.

ImageSocial imagesTechnical drawingEight formats

Available to try

The complete beta package supports your brand, content and action link. Formal quality acceptance is still in progress.

The image companion to the Blueprint page, film and deck, using the same content.json. Cream paper, cobalt rules, sheet numbers, dimension lines and your approval stamp carry the product into link previews, wide and square feed posts, stories, GitHub and a three-image Product Hunt gallery. Add real screenshots with alt text and a focal point, or let the supplied content become a drawing. The local build measures every text box, exports eight PNGs and gives you a contact sheet to review.

Preview format: PNG · HTML
Palette: #f1eee5#2a44c9#1e1e1e

How it works

Extract the blueprint-social.zip I provide and read blueprint-social/SKILL.md. Install the complete folder in the current agent's project-level Skill directory, keeping scripts, references, examples, fonts and their licences. Use my content.json, shared with Blueprint page, film and deck. Add local screenshots through social.screens with alt text and focal coordinates, then run node scripts/build.mjs <input.json> <outdir>. It needs Node.js 22+ and installed Chrome or Chromium; no npm dependencies or network assets. Deliver all eight PNGs and contact.html, fix fit failures, and list every placeholder. This is a beta package.

Motion details

Eight PNGs, editable HTML and a contact sheet
Real screenshots with alt text and focal crops
Measured text, safe areas and offline local export

A good fit for

A coordinated product launch across feeds and link previews
The social companion to your Blueprint page, film and deck

Example creative prompt

Download and extract the skill, let your agent read SKILL.md, then provide your product brief. The prompt below can help you start.

Use the blueprint-social Skill with my existing Blueprint content.json to create all eight social images. Use my approved copy and real numbers, include my screenshots with alt text and a focal crop, measure every text box and export PNGs plus contact.html. List any placeholders and review the OG image at 600 px wide.