Contenu du pack

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

Team Chat OG Image

When to use

• You're launching a team chat or collaboration tool and every link share currently shows a blank gray box
• Your product's link previews on X, Slack, LinkedIn, and iMessage all look different — and none of them look good
• You need a preview image for a Product Hunt launch, a blog post, or a changelog announcement
• Your existing OG image is a stretched screenshot with text too small to read at thumbnail size
• You're rebranding a workspace tool and the old preview still shows the old name and colors

Workflow

1. Lock the message (input: product name + one-line promise → output: headline + subhead)
   An OG image gets about one second of attention at thumbnail size. Pick one headline of 2–6 words — the product name plus what it does ("Acme Chat — fewer meetings, faster decisions") — and one supporting line of under 10 words. If you can't say it in that space, the message isn't ready; the image can't fix a muddy pitch. Write the headline first, design second.
2. Choose the composition (input: headline + brand assets → output: layout decision)
   Pick one of three proven layouts: left-aligned text with a chat-window mock on the right; centered headline over a subtle background of blurred message bubbles; or a full-bleed product screenshot with a solid banner strip for the headline. Left-text-plus-mock is the safest default — it reads at every size and leaves room for a logo. Whatever you choose, keep all critical text inside the center 90% of the canvas so platform crops never clip it.
3. Build the chat mock (input: layout decision → output: believable chat window)
   The mock sells the product. Build a small chat window with 3–4 short messages: a question, a reply, a reaction or thread, and a resolved outcome. Use realistic names and short sentences — nobody reads a wall of lorem ipsum in a preview. Show one distinctive feature (threads, huddles, pinned decisions) rather than cramming in five. Avatars are simple colored circles with initials; keep message text at 2–3 lines max per bubble.
4. Style for legibility (input: mock + headline → output: styled 1200×630 image)
   Set the headline at a size that stays readable at 240px wide — roughly 90–110px on the 1200px canvas, bold weight, high contrast against its background. Body/subhead text no smaller than 40px. Use at most two typefaces and two accent colors plus neutrals. Dark text on light background or light text on dark background — never mid-tone on mid-tone. Test the export at 240px wide before calling it done: if you can't read the headline, it's not done.
5. Export and verify everywhere (input: styled image → output: verified og:image)
   Export as JPEG or PNG at exactly 1200×630, under 1MB. Set og:image, og:image:width, og:image:height, and twitter:card (summary_large_image) in your page head, and point the image at an absolute URL. Then check it in at least two validators — X's card validator and LinkedIn's post inspector — plus a real paste into a chat app. Fix caching surprises with a versioned filename (og-v2.jpg) rather than waiting for caches to expire.

Aperçu du modèle

Team Chat OG Image — Template

Fill in the blanks, then hand the brief to the skill. One message, one mock, one image.

Product

Product name: {name} Short name for headline (if long): {abbreviation or wordmark} One-line promise: {what it does, in plain words} Brand colors: Primary {hex} · Accent {hex} · Background {light / dark} Logo file: {path or "text wordmark"}

Headline (2–6 words)

Headline: {e.g. Fewer meetings. Faster decisions.} Subhead (under 10 words): {e.g. Team chat with threads that end in decisions.}

Layout (pick one)

[ ] Left text + chat mock on right *(safest default)* [ ] Centered headline over blurred message bubbles

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