Qué incluye

Un SKILL.md (la guía paso a paso) + una plantilla inicial. Una vista previa:

Analytics App OG Image

When to use

• Your analytics product's shared links preview as a blank box, a cropped dashboard screenshot, or a generic logo
• You are launching or announcing an analytics tool and want the link preview to say "clarity from data" at a glance
• A blog post, changelog, or docs page about the analytics product gets shared, and the preview does not distinguish it from any other page
• Your product has many pages and you need one repeatable preview format that works for the product, its features, and its content
• A dashboard screenshot keeps failing as a preview because its tiny axes and labels turn to noise at thumbnail size

Workflow

1. Decide the one promise (input: the page → output: a one-line promise)
   An analytics preview carries one promise about what the data gives the reader: clarity, answers, proof, direction. Read the page, then write the sentence in eight words or fewer — "See exactly where your users drop off," not "A powerful analytics platform for modern teams." If the page is a feature announcement, the promise is the feature's outcome; if it is the homepage, it is the product's core promise. A dashboard screenshot is not a promise, and a list of features is not a promise — one sentence is.
2. Pick the chart motif (input: the promise → output: a single chart idea)
   Choose one chart gesture that embodies the promise: a line rising from noise to a clear trend, a funnel narrowing to the drop-off point, bars settling into a readable pattern. The chart is a motif, not a real chart — no axes, no gridlines, no tiny labels, no legend. 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 gesture reads as "this tool makes data clear."
3. Set the type (input: promise + motif → output: the type layout)
   Set the promise 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 product mark or name in one corner, never competing with the promise. 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 chart motif and the type compete for the same space, shrink the chart — 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 — a rising line in a bright accent 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 promise. If a stale preview persists, it is usually a cache — re-scrape the URL through the debugger rather than rebuilding the image.

Vista previa de la plantilla

Analytics App OG Image — Design Template

One image, one promise, one chart gesture. Readable at thumbnail size.

Page being previewed

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

Promise (≤8 words)

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

Why this line: {what clarity it promises the reader}

Chart motif (one gesture — a symbol of clarity, not a real chart)

Motif: {rising line from noise to trend / funnel narrowing to the drop-off / bars settling into a pattern}

Colors: {one or two flat colors — e.g. bright accent line on a dark field}

El paquete de la habilidad (SKILL.md + plantilla) está escrito en inglés.

Comprar el paquete completo de la habilidad — $4.99 Pro — las 511 habilidades