Contenu du pack

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

Chat App OG Image

When to use

• Your chat app's link previews show a blank page, a logo floating in empty space, or a screenshot nobody can read
• You are launching a messaging feature and want the announcement link to look deliberate in every chat and feed
• Your current OG image was designed for a desktop banner and turns into mush at thumbnail size
• You need one preview image that works across chat apps, social feeds, and messaging embeds without redesign
• You want a repeatable template so every future announcement preview looks like it came from the same app

Workflow

1. Decide the one message (input: app facts → output: message line)
   Pick the single thing the image must say: the app name plus what kind of chatting it is for (team chat, community chat, private messaging, customer chat). One message only — a preview image is seen for under a second. If the message needs a paragraph to explain, it is two messages; pick the stronger one.
2. Sketch the composition (input: message line → output: layout sketch)
   Lay out the 1200×630 canvas in three zones: a large app mark or wordmark on the left, one short headline in the middle, and one visual cue on the right (a chat bubble, a phone frame, or a group of avatars). Keep the headline to 6 words or fewer and leave generous margins — anything near the edges gets cropped by some platforms. The whole composition must read when shrunk to the width of a thumb.
3. Build the visual cue (input: layout sketch → output: finished artwork)
   Draw the cue from simple shapes, not screenshots: one or two rounded chat bubbles, a small phone frame with a simplified chat thread, or three avatar circles in a row. Use your app's real brand colors and one accent at most. Text inside bubbles stays at 3 words or fewer ("Hey!", "On it", "See you there") and must stay legible at thumbnail size — if you have to squint, delete it.
4. Set the type (input: artwork → output: typeset image)
   Set the app name in your brand font at a size that stays readable at 240 pixels wide, and the headline one step smaller. Use high contrast: dark text on a light field or light text on a dark field, never mid-tone on mid-tone. Left-align the text; centered blocks look tidy at full size and wobbly at thumbnail size. Check contrast by squinting at the image from arm's length.
5. Export and test the preview (input: typeset image → output: verified OG image)
   Export as a 1200×630 JPEG or PNG under 1 MB, then paste your link into at least two chat apps and one social feed and look at the actual preview. Check: is the app name readable, is the headline intact, is nothing cropped, does the image still look like your app. Fix what you find and re-test — preview caches are sticky, so append a version query (like ?v=2) to the image URL when you replace it.

Aperçu du modèle

Chat App OG Image — Design Template

One image, one message, readable at thumbnail size. Canvas: 1200×630.

Message

App name: {app name} Chat type: {team chat / community chat / private messaging / customer chat} Message line (one message only): {app name} — {what kind of chatting it is for}

Layout (three zones, 1200×630)

• Left — mark: {wordmark / app mark file}
• Middle — headline (6 words max): {headline}
• Right — visual cue: {chat bubbles / phone frame with simplified thread / avatar row}

Margins: keep 40 px clear at every edge. Nothing essential near the border.

Visual cue

Cue type: {bubbles / phone frame / avatars}

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