Contenu du pack

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

Flat Design OG Image

When to use

• You are publishing a page — product, blog post, docs, or landing page — and want a social preview image in a clean flat design style: bold shapes, solid colors, no shadows or textures
• An existing OG image uses gradients, drop shadows, or a photo background that turns muddy at thumbnail size and clashes with a flat-styled brand
• A design tool, UI kit, or front-end product needs preview images that look like the product itself: flat, geometric, systematic
• You need a repeatable OG template so every page on the site gets a consistent flat preview with a different headline, accent color, or shape
• A blog or changelog ships new posts weekly and each post needs a distinct flat OG image generated from the same template without a designer bottleneck

Workflow

1. Lock the one message (input: page purpose + audience → output: single headline of ≤6 words)
   Pick the single thing a stranger should understand from the preview: what the page is about and why it matters. "Ship UIs twice as fast." beats "A comprehensive component library and design system for modern product teams." Six words or fewer. Flat design has nowhere to hide weak copy — the headline is the image — so if it needs two clauses, cut it to the stronger one.
2. Choose the flat composition (input: headline → output: shape system for the image)
   Build the image from flat building blocks: one large geometric shape (a circle, diagonal band, arch, or grid of squares), one simple icon or illustration drawn from basic shapes, and generous solid-color background. Rules: no gradients, no shadows, no textures, no photos, no bevels. The shape should echo the subject — a bar-chart shape for an analytics post, a play triangle for a video page, a speech bubble for a community announcement — and it must read as a silhouette at thumbnail size.
3. Set the layout grid (input: headline + shape system → output: 1200×630 composition plan)
   Lay out on a 1200×630 canvas with a safe zone: keep headline, logo, and the key shape detail inside the central ~1000×500 area. The reliable default is headline on a solid field on one side, one large flat shape or icon on the other — the shape gives the eye somewhere to land and the text stays on unbroken color. Center-stacked layouts work only with very short headlines (≤3 words) and one shape. Never place text across a shape boundary — the letterforms will fight the edge.
4. Apply the palette and type (input: composition plan + brand colors → output: finished visual spec)
   Use at most three flat colors: background, ink, and one accent. Every color is a solid flat fill — check that no gradient, transparency fade, or shadow has crept in. Set the headline in one bold geometric or grotesque sans at a size legible at 240 pixels wide. The accent color does exactly one job: highlight the shape or one word in the headline, not both. If the palette comes from an existing brand system, use its documented tokens rather than inventing near-matches.
5. Export and verify (input: finished visual → output: 1200×630 JPG/PNG + preview check + template)
   Export at exactly 1200×630, under ~300 KB if JPG. Check three ways: shrunk to thumbnail size in a mock feed, pasted into a link-preview debugger, and viewed on a phone. Then save the layout as a reusable template with named slots (headline, accent color, shape/icon, page tag) so the next page's image is a 5-minute fill-in, not a redesign. If any word is unreadable or the shape is unrecognizable at thumbnail size, simplify — bigger type, fewer shapes, more solid color — rather than adding detail.

Aperçu du modèle

Flat Design OG Image — Brief Template

Fill this in before designing. Flat is a discipline: every element must justify itself as a solid shape or it gets cut.

Page

Page URL / title: {url} — {page title} Audience: {who will see this preview} Page's one job: {what should the visitor do after clicking}

Message

Headline (≤6 words): {headline} Why this headline: {what a stranger learns from it} Page title alignment: {same as / aligned with / deliberately different from} page title — reason: {…}

Flat composition (one shape, one icon)

Large geometric shape: [ ] circle / [ ] diagonal band / [ ] arch / [ ] grid of squares / [ ] {other}

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