Contenu du pack

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

Deployment Platform OG Image

When to use

• Your deployment platform's shared links preview as a blank box, a cropped dashboard screenshot, or a generic logo that says nothing about shipping code
• You are announcing a feature, a launch, a performance improvement, or a pricing change and want the link preview to carry the news, not just the platform's name
• A docs page, changelog entry, or blog post about deploying gets shared, and the preview does not distinguish it from any other page
• Your platform publishes often and needs one repeatable preview format that works for launches, changelogs, docs, and posts alike
• A screenshot of the deploy dashboard keeps failing as a preview because its tiny log lines and dense panels turn to noise at thumbnail size

Workflow

1. Decide the one shipping line (input: the page → output: a one-line shipping message)
   A deployment preview carries one line about getting code live, in eight words or fewer — "Ship it. Live in seconds," not "Our next-generation cloud deployment platform empowers developers to build, deploy, and scale applications with confidence." Read the page and find the sentence a developer would repeat to a teammate; that is the preview line. If the page is a general platform homepage, the line is the platform's core shipping promise; if it is a feature or changelog page, the line is that change's payoff. A list of features is not a shipping line, and a mission statement is not a shipping line — one concrete line is.
2. Pick the deploy-pipeline motif (input: the shipping line → output: a single pipeline motif idea)
   Choose one deploy gesture that embodies shipping without pretending to be a screenshot: a code commit flowing through three pipeline stages into a live globe, a single branch line resolving into a green checkmark on a globe, a row of small stage dots lighting up in sequence toward a live marker. The motif is a symbol, not a dashboard — no log lines, no terminal text, no real build output, no tiny status labels, no real URLs. Draw it big and flat, in one or two colors, occupying roughly a third to a half of the canvas. A real dashboard crammed into 1200×630 reads as static at thumbnail size; one clean pipeline gesture reads as "code goes in, live site comes out."
3. Set the type (input: shipping line + motif → output: the type layout)
   Set the shipping line in one large, bold typeface at a size that stays legible when the image is shown 240 pixels wide — few words, large size, generous line spacing. Put a small platform mark or name in one corner, never competing with the shipping line. Keep all text inside a safe margin (at least 60 pixels from every edge at 1200×630) because platforms crop previews differently, and keep essential text out of the bottom strip, where platforms overlay labels or play buttons. If the motif and the type compete for the same space, shrink the motif — the words carry the click.
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 bold shapes — silver pipeline stages and one bright checkmark on a dark field, for example — rather than photographic detail or fine lines, which turn to mush at thumbnail size. Check contrast between text and background: light text on a dark field or dark text on a light 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 shipping line. 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

Deployment Platform OG Image — Brief Template

One page = one preview. Fill this in before building the image.

Page: {page title + URL}

Page type: {platform homepage / feature / launch / changelog / docs / blog post}

One shipping line (≤8 words)

> {the sentence a developer would repeat to a teammate}

Why this line: {what the page actually announces}

Deploy-pipeline motif

Gesture: {commit flowing through stages into a live globe / branch resolving into a checkmark / stage dots lighting toward a live marker} What it symbolizes: {the shipping line, abstractly} Colors: {field color} + {motif color} (one or two flat colors)

Type layout

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