メニュー
Use when designing Open Graph / Twitter Card preview images. Covers sizing, the typography that works at preview size, brand consistency across multiple URLs, and dynamic OG image generation.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills-fleetsafety --skill og-image-designコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use when designing 404 pages and the broader empty-state pattern library. Covers tone, illustration, search recovery, and the difference between 'no data yet' and 'this URL doesn't exist'.
Use when designing A/B tests. Covers hypothesis-driven testing, sample-size calculation, the test-design template, and the cultural rituals that make testing productive.
Use when shipping any user-facing UI. Covers the non-negotiable accessibility baseline: contrast, focus states, semantic HTML, keyboard navigation, screen-reader support, motion preferences. The minimum to avoid embarrassment and ADA risk.
| name | og-image-design |
| description | Use when designing Open Graph / Twitter Card preview images. Covers sizing, the typography that works at preview size, brand consistency across multiple URLs, and dynamic OG image generation. |
OG images are the preview cards on social. Designed poorly, they hurt. Designed well, they pull clicks.
Standard: 1200×630 (1.91:1). Twitter Cards: 1200×600 or 1500×500 for large card. Same image works for most platforms.
Body 11-13px in real life shows as TINY in OG image. Use 48px+ for headlines. Bold weight. High contrast.
Same template for every OG image. Logo + headline + accent color. User shouldn't have to guess who you are.
For blog / per-page: generate OG images dynamically (Vercel OG, Cloudinary, similar). Pull title + author + date into a template. Saves hours of manual work.
Use Twitter Card Validator, Facebook Sharing Debugger. Image must load (cached aggressively). Test on a phone — most opens are mobile.
Tiny text. No logo (no brand recognition). Same OG image for every page. Forgotten when site redesigns. Image too large (slow load on social).
Applied across the X3 Compass design system.