メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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. |
The image that represents a link everywhere it's shared. Small, legible, on-brand.
image-generate for the background, then place text.contrast-guard hook) - add a scrim if needed.og:image.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.
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.
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.
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.
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.
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.