Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

og-image

Étoiles3

Forks1

Mis à jour14 juin 2026 à 13:42

Design Open Graph / social share images (1200x630) that render well in link previews - on-brand, legible, correctly exported. Use when a page or post needs a share/preview image.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

m-binimran

m-binimran/design-pack

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

GraphistesArts, design, divertissement, sports et médias·SOC 27-1024

SKILL.md

readonly

name	og-image
description	Design Open Graph / social share images (1200x630) that render well in link previews - on-brand, legible, correctly exported. Use when a page or post needs a share/preview image.

og-image

The image that represents a link everywhere it's shared. Small, legible, on-brand.

Process

Canvas 1200x630 (1.91:1). Keep key content centered - platforms crop edges differently.
Hierarchy: a short headline (large, legible), optional supporting line, logo, a simple background or hero. Don't cram - it renders small.
Build via Canva (branded) or image-generate for the background, then place text.
Contrast: text must pass over the background (the contrast-guard hook) - add a scrim if needed.
Export optimized PNG/JPG (< ~1MB), absolute-URL ready; name kebab-case.

Output

The OG image (confirmed from the connector) + the exact dimensions and the optimized file, ready to wire to og:image.

Guardrails

Legible at small size; safe margins; on-brand. Optimized weight.
Verify it actually renders in a preview tester before claiming done; confirm connector output is real.

Plus depuis ce dépôt

même dépôt

accessibility-contrast

m-binimran/design-pack

Audit a palette or design for WCAG color contrast and legibility, and suggest compliant adjustments. Use when finalizing a palette, design tokens, or any text-over-color/imagery.

2026-06-143

asset-export

m-binimran/design-pack

Produce a clean export/delivery spec - right formats, sizes, densities, naming, color profile, optimization - for a set of assets. Use when delivering assets to a client or developer.

2026-06-143

brand-kit

m-binimran/design-pack

Assemble or audit a brand kit - logo, colors, typography, spacing, usage rules - and pull real brand data via Brand.dev. Use when starting brand work, onboarding a client, or standardizing a brand.

2026-06-143

canva-design

m-binimran/design-pack

Create or edit a branded layout in Canva via the connector - from a brand template, then export. Use for social posts, flyers, decks, and marketing collateral that should stay on-brand and fast.

2026-06-143

design-review

m-binimran/design-pack

Critique a design against craft principles - hierarchy, layout, type, color, spacing, accessibility, brand fit. Use when reviewing a draft, a generated image, or a layout before delivery.

2026-06-143

design-tokens

m-binimran/design-pack

Define or extract a design token system (color, type, spacing, radius, shadow) and output it as JSON/CSS variables. Use when setting up a design system or converting a Figma/brand palette to tokens.

2026-06-143

name	og-image
description	Design Open Graph / social share images (1200x630) that render well in link previews - on-brand, legible, correctly exported. Use when a page or post needs a share/preview image.

og-image

The image that represents a link everywhere it's shared. Small, legible, on-brand.

Process

Canvas 1200x630 (1.91:1). Keep key content centered - platforms crop edges differently.
Hierarchy: a short headline (large, legible), optional supporting line, logo, a simple background or hero. Don't cram - it renders small.
Build via Canva (branded) or image-generate for the background, then place text.
Contrast: text must pass over the background (the contrast-guard hook) - add a scrim if needed.
Export optimized PNG/JPG (< ~1MB), absolute-URL ready; name kebab-case.

Output

The OG image (confirmed from the connector) + the exact dimensions and the optimized file, ready to wire to og:image.

Guardrails

Legible at small size; safe margins; on-brand. Optimized weight.
Verify it actually renders in a preview tester before claiming done; confirm connector output is real.