Contenu du pack

Un fichier SKILL.md (le guide pratique) + un modèle de départ. Aperçu :

Social Platform OG Image

When to use

• A page's link preview on social platforms currently shows a blank box, a cropped screenshot, or an auto-generated thumbnail
• You are launching a product, article, or event and want the shared link to look deliberate instead of accidental
• A homepage, pricing page, or docs page gets shared often and the preview does not say what the page is
• Your site has many pages and you need one repeatable preview format that works across all of them
• You are redesigning a brand and the social previews still show the old look

Workflow

1. Decide the one message (input: the page → output: a one-line message)
   A preview image gets a fraction of a second at thumbnail size, so it carries exactly one message: the page's core promise in eight words or fewer. Read the page, then write the sentence a friend would use to describe it: "A waitlist app for launch teams," not "Welcome to our homepage." If the page has no single promise — a sprawling dashboard, a sitemap — the preview should carry the brand promise instead. One message, eight words, no exceptions.
2. Pick the motif (input: the one-line message → output: a single visual motif)
   Choose one visual idea that carries the message without words: a single product mark, one oversized icon, one abstract shape, one cropped product shot. The motif occupies roughly a third to a half of the canvas and sits on a flat, high-contrast background. Resist the collage instinct — three screenshots, four icons, and a photo do not compress into a thumbnail; they compress into noise. The test is simple: at the size of a postage stamp, can a stranger still tell what the image is about?
3. Set the type (input: message + motif → output: the type layout)
   Set the message in one large, bold typeface at a size that stays legible when the image is shown 240 pixels wide — in practice, that means very few words at very large sizes, with generous line spacing. Put a small brand mark or site name in one corner, small enough to read but never competing with the message. Keep all text inside a safe margin (at least 60 pixels from every edge at 1200×630) because platforms crop previews differently. Never put essential text in the bottom strip — several platforms overlay play buttons or domain labels there.
4. Build to spec (input: type layout + motif → output: a finished 1200×630 image)
   Produce the image at exactly 1200×630 pixels, exported as a JPEG or PNG under 1 MB so it loads fast in crawlers. Use flat colors and crisp vector shapes rather than photographic detail — fine textures and thin lines turn to mush at thumbnail size. Check contrast between text and background: dark text on a light field or light text on a dark field, never mid-tone on mid-tone. Export once at full size and once at 240 pixels wide to verify the thumbnail read.
5. Verify the preview (input: finished image → output: a confirmed working preview)
   Wire the image into the page's social meta tags (the Open Graph image tag and its width/height companions) and check it with the platform's own link debugger or by pasting the link into a fresh post draft. Confirm three things: the image actually appears (not a cached old one), it is not cropped into unreadability, and the title and description beside it match the image's message. If a stale preview persists, it is usually a cache — re-scrape the URL through the debugger rather than rebuilding the image.

Aperçu du modèle

Social Platform OG Image — Design Template

One image, one message, readable at thumbnail size.

Page being previewed

URL: {page URL} Page's core promise (in one sentence): {what the page offers}

Message (≤8 words)

Preview message: {the one line that appears on the image}

Why this line: {what it promises the reader}

Motif (one visual idea)

Motif: {single mark / icon / shape / cropped product shot}

Background: {flat color — high contrast with the type}

Composition: {motif placement: e.g. "mark on the right third, type on the left two-thirds"}

Type

Typeface: {one bold typeface}

Message size: {large — legible at 240 px wide}

Le pack de compétence lui-même (SKILL.md + modèle) est rédigé en anglais.

Acheter le pack complet — $4.99 Pro — les 511 compétences