Flat Design OG Image
Flat shapes, sharp previews.
Turns your AI into a social preview designer in a flat design style — builds a clean 1200×630 OG image with bold geometric shapes, flat color, and one short headline that stays legible at thumbnail size.
Install it in 3 steps
No sign-up. No CLI tools. Pick your AI, copy one line, paste it over.
Prefer doing it yourself? Buy the skill ($4.99), download the ZIP from your checkout confirmation, unzip it into the directory shown above, restart your AI session — same result. Already bought it? Your AI assistant can download it for you.
What’s inside
One SKILL.md (the playbook) + one starter template. A preview:
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
- 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. - 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. - 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.
Template preview
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}
