# Twitter Card Image Generator Agent Skill

> Generate optimized Twitter Card (X) link preview images with the correct 2:1 aspect ratio and platform-specific constraints. This skill ensures your tweet previews look perfect, helping you capture audience attention and boost engagement.

- Canonical: https://nanoskill.ai/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: en
- Source type: github
- Popularity signal: 244

## Sources

- https://github.com/kostja94/social-cards-skills

## Install

```shell
npx skills add https://github.com/kostja94/social-cards-skills/tree/main/twitter-card-image-generator
```

## About

This Twitter Card image generator skill empowers users to create perfectly optimized images for X (Twitter) link previews, ensuring their content makes a strong visual impact in the timeline. Unlike generic Open Graph images, this tool specifically adapts to Twitter's unique 2:1 aspect ratio (1200x675px) and platform-specific rendering quirks, helping content creators, marketers, and developers enhance their social media presence and drive engagement.

Leveraging six distinct generation approaches and 16 versatile visual styles, the skill provides comprehensive options for image creation. It incorporates advanced features like AI image generation for backgrounds, content-aware workflows, and Satori/resvg pipeline integration. Key design considerations such as dark mode compatibility, mobile timeline cropping, and edge masking are built-in, ensuring images are visually appealing and functional across all user experiences.

Beyond standard link previews, the generator also supports the creation of compelling poster images for Twitter Player Cards, ideal for video and audio content. With integrated YAML checks and guidance on common mistakes, users can confidently produce high-quality Twitter Card images that meet technical specifications and maximize click-through rates, making their shared links more effective and professional.

## Key features

- **Optimized for X (Twitter) Link Previews**: Generate images specifically designed for Twitter's 2:1 aspect ratio (1200x675px) and unique rendering behaviors, ensuring your content stands out in the timeline.
- **Six Generation Approaches & 16 Visual Styles**: Utilize six distinct generation methods, including AI image generation and content-aware workflows, across 16 visual styles to create diverse and engaging Twitter Card images.
- **Dark Mode & Mobile Cropping Adaptations**: Design images that perform well in Twitter's dark mode and survive mobile timeline cropping, placing critical content in safe zones for maximum visibility.
- **Player Card Poster Generation**: Create compelling poster images for Twitter Player Cards, complete with play button overlays and video titles, to entice users to engage with your multimedia content.
- **Comprehensive Validation Checks**: Benefit from built-in YAML checks that validate image dimensions, card type, URL format, and design considerations like timeline-safe zones and dark mode compatibility.

## Use cases

- **Generate Twitter Card Images for Blog Posts**: Automatically create visually appealing 1200x675px Twitter Card images for new blog posts, ensuring they look professional and engaging when shared on X.
- **Design Player Card Posters for Videos**: Produce optimized poster images for your video content shared on Twitter, encouraging higher click-through rates before the video even plays.
- **Ensure Dark Mode Compatibility for Social Shares**: Adapt existing Open Graph images or generate new ones with dark-mode-friendly designs, guaranteeing your Twitter Card images look great for all users, regardless of their display settings.

## Result preview

Explore a high-performing Twitter Card image powered by this Skill.

![A dark-themed Twitter Card preview for FlowMind AI featuring the headline 'The Future of AI Agents' in large white and indigo typography. The design uses a futuristic navy-blue gradient background with subtle grid lines and connected-node graphics representing AI networks. A 'Read More' button appears below the headline alongside an estimated reading time, creating a clean, modern SaaS-style layout optimized for social media engagement.](https://file.nanoskill.ai/Twitter-card-outcome-1.png)

![A brand style guide page showcasing the FlowMind AI color palette and visual language. Large color swatches display indigo, cyan, emerald green, deep black, dark surface blue, and semi-transparent gray text colors, each labeled with HEX values and usage descriptions. Below, a section outlines design principles focused on dark-mode optimization, color hierarchy, typography consistency, and visual balance for Twitter-native experiences.](https://file.nanoskill.ai/Twitter-card-outcome-3.png)

![A strategic design briefing page divided into four dark-themed cards titled Objective, Target Audience, Visual Identity, and Format. The page summarizes campaign goals, audience segments including tech professionals and startup founders, brand colors and style direction, and technical specifications such as Twitter’s 1200×675 pixel format, mobile-safe composition, and dark-mode compatibility.](https://file.nanoskill.ai/Twitter-card-outcome-5.png)

![A realistic Twitter feed mockup displaying a post from FlowMind AI about the future of AI agents. The tweet includes descriptive promotional copy and an embedded Twitter Card preview featuring a futuristic AI-themed visual. Engagement metrics such as comments, reposts, likes, and shares appear beneath the post, while a note at the bottom highlights projected improvements in click-through rate and user engagement from using optimized visual cards.](https://file.nanoskill.ai/Twitter-card-outcome-6.png)

## Result walkthrough

### Install

Add the Twitter Card Image Generator Skill to your AI agent.

![A terminal-style screenshot showing the installation of the Twitter Card Image Generator skill. The console output displays the command 'npx skills add https://github.com/kostja94/social-cards-skills', followed by interactive prompts and confirmation messages indicating successful installation, universal agent setup, and symlinking for Hermes Agent access.](https://file.nanoskill.ai/Twitter-card-install.png)

### Describe Content

Share your content details, brand identity, and preferred visual direction.

![A screenshot of a terminal or interface asking the user to provide content details for generating a Twitter Card image. The prompt requests title/topic, key message, brand/account name, visual assets (logo, color palette, style), and call-to-action, showing how the skill gathers information before designing the card.](https://file.nanoskill.ai/describe-content.png)

### Generate Outcome

Create a platform-optimized Twitter Card image with strong visual hierarchy and engagement-focused design improvements.

![A screenshot of a terminal or interface showing the generation step for the Twitter Card image. It highlights the user confirming inputs and the system preparing the final platform-optimized image, ready for export as a high-resolution, social-media-ready graphic. The screen emphasizes that the card will follow 1200×675px format, mobile-safe layout, dark-mode compatibility, and engagement-focused design principles.](https://file.nanoskill.ai/Generation.png)

## Skill definition

# Twitter Card Image Generator

Generate images optimized for X (Twitter) link previews — the cards that appear in the timeline when someone shares a link. Twitter Cards have distinct image dimensions and rendering behavior that differ from standard Open Graph. This skill covers the complete generation pipeline adapted for Twitter's 2:1 aspect ratio and platform-specific quirks.

All six generation approaches and all six visual styles from **og-image-generator** apply here. The only differences are: output dimensions (1200x675 instead of 1200x630), X-specific design adaptations, timeline-safe zoning, and player card support.

## When to Use

- User needs **1200×675px (2:1)** images for X/Twitter link previews, `summary_large_image`, or player card posters
- User mentions `twitter:image`, Twitter Card, X preview image, tweet preview, or timeline card design
- User needs dark-mode-safe layouts, upper-60% content zones, or 20px edge masks for X's rounded-corner crop
- User already uses **og-image-generator** and wants the Twitter-adapted variant of the same styles and pipeline

## When NOT to Use

- **Generic OG images (1200×630, 1.91:1)** for Facebook, LinkedIn, Slack, etc. — use **og-image-generator** instead
- **Only setting HTML meta tags** (not creating the image file) — use **twitter-cards** from marketing-skills
- **SVG output** — Twitter does not support SVG for card images; use PNG or JPG
- **No-code visual editor or hosted API** — use [Oginify](https://oginify.com) instead of running an agent pipeline

**When invoking**: On **first use**, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## 1. How Twitter Consumes Images

Twitter reads images in this priority order:

1. `twitter:image` — if explicitly set, used directly
2. `og:image` — falls back to OG image if no Twitter Card tags exist
3. No image — plain text link preview

**Key insight**: Facebook and LinkedIn do NOT read `twitter:image`. Twitter is the only platform that reads Twitter Card tags. This means you need BOTH image paths in your metadata, even though the actual rendering pipeline can be shared.

## 2. Twitter Image Specifications

| Property | Specification |
|----------|--------------|
| **Aspect ratio** | 2:1 (official); Twitter renders at ~1.91:1 in practice |
| **Recommended** | 1200x675px (2:1); 1200x628px (cross-platform with OG) |
| **Minimum** | 300x157px |
| **Maximum** | 4096x4096px |
| **File size** | Under 5MB |
| **Formats** | JPG, PNG, WebP, GIF (first frame only); SVG not supported |

**Card type determines image display:**

| Card type | Image behavior |
|-----------|---------------|
| `summary_large_image` | Full-width prominent image (recommended for most pages) |
| `summary` | Small thumbnail (100x100px square) |
| `player` | Video/audio embed; image is the poster frame before play |
| `app` | App icon; image is the app icon + promotional image |

For most use cases, target `summary_large_image` at 1200x675px.

## 3. Six Generation Approaches (Twitter-adapted)

All six approaches from **og-image-generator** §1 work for Twitter images. The only difference is the output dimensions. This section covers Twitter-specific adaptations — see **og-image-generator** §1 for the full rendering pipeline documentation.

### 3.1 AI Image Generation (Core #1)

Same three-part prompt strategy as OG, but with Twitter-specific framing:

```
Part 1 — Visual description: background, composition, mood
Part 2 — Text specification: EXACT text, in quotes, with size hints
Part 3 — Twitter constraints: "1200x675px, 2:1 aspect ratio, key text in
         upper 60%, dark background preferred for dark mode"
```

**Hybrid approach (recommended)**: AI generates the background/atmosphere; Satori overlays text. Critical for Chinese text where AI models still struggle — and Twitter's ~40% dark mode usage makes text accuracy even more visible.

See **og-image-generator** §1.1 for the full AI tools comparison table (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

### 3.2 Agent-Native Content-Aware Workflow (Core #2)

Same 6-step workflow as OG (§1.2): Read Content → Match Style → Extract Visual Elements → Select Generation → Generate → Validate. Twitter-specific additions at each step:

**Step 2 (Match Style)** — Twitter dark mode consideration: prefer dark-background styles (Terminal/CLI, Midnight Ink Magazine, Brutalist dark mode) or styles with dark variants for X.

**Step 3 (Extract Visual Elements)** — Twitter's timeline crop to ~1:1 on mobile means the most important visual element must work inside a square. A horizontal data ribbon that works at 1200x675 may be invisible in the square crop. Extract at least one element that reads well at 1:1.

**Step 4 (Select Generation)** — Same decision tree. For AI generation, add: "Will the text survive Twitter's ~260px mobile render width?"

**Step 6 (Validate)** — Run both OG checks AND Twitter-specific checks (§8).

### 3.3 Satori + resvg (Code-based)

Same pipeline as OG. Change height from 630 to 675. See **og-image-generator** §1.3 for full implementation.

```tsx
// Shared endpoint serves both OG and Twitter:
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'

  const width = 1200;
  const height = platform === 'twitter' ? 675 : 630;

  return new ImageResponse(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}
```

**Then in page metadata:**

```tsx
const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: ogUrl, width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    images: [twitterUrl],  // Twitter-specific 1200x675
  },
};
```

### 3.4 Puppeteer, Managed Services, JSON Config

Same as OG — set viewport/height to 675 instead of 630. See **og-image-generator** §1.4–1.6. For the v3 page priority system (S/A/B/C) and pipeline selection, see [content-strategy.md](../og-image-generator/references/content-strategy.md) and [pipeline-guide.md](../og-image-generator/references/pipeline-guide.md).

## 4. X-Specific Design Considerations

Twitter renders images differently from Facebook/LinkedIn. Design with these in mind:

**Dark mode (~40% of users)**: Images appear inline in the feed, surrounded by tweets. Dark backgrounds blend naturally; light backgrounds stand out but can look jarring in dark mode. Every template should have a dark variant or a dark-friendly default. Among the 6 styles, Terminal/CLI, Midnight Ink Magazine, and Brutalist (black bg) are naturally dark-mode-friendly. Swiss Minimal and Newspaper should ship with a dark mode alternate.

**Timeline cropping (mobile)**: On mobile, `summary_large_image` images are cropped to ~1:1 in the timeline until the tweet is expanded. The full 2:1 image is visible only when tapped. Place the most important content (title, primary visual) in the top 60% of the image — the center square that survives cropping. Never put critical text in the bottom 20%.

**Text legibility at small sizes**: Timeline images display at ~260px wide on mobile feeds. Test your template at 1/4 scale (~300px wide) to ensure text remains readable. This is more stringent than OG's ~500px desktop feed size.

**Edge mask**: Twitter applies a subtle rounded corner mask to card images. Logos and critical elements placed within 20px of any edge risk being partially clipped.

**Recommended template adaptations for Twitter (per style):**

| OG template | Twitter adaptation |
|-------------|-------------------|
| Terminal/CLI | Move window chrome lower (Twitter's rounded corners clip top-left dots); use the accent color for dark mode contrast |
| Magazine Editorial | Use Midnight Ink preset (dark variant designed for X); move photo well higher (top 50% instead of lower) |
| Swiss Minimal | Add dark mode variant: `#0a0a0a` background with accent intact, white text; data rows survive the 1:1 crop well |
| Pixel Retro | Naturally dark backgrounds — NES/Arcade/CGA presets are already X-ready; shrink HUD elements 10% to clear edge mask |
| Brutalist | Black bg variant is already dark-mode-native; the asymmetric title block stays in upper 60% zone by default |
| Newspaper | Add `#1a1a1a` background dark variant; the multi-section layout should stack vertically for the square crop zone |

## 5. Player Card Posters

For video/audio content, the `player` card type requires a poster image:

```html
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/player.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" content="https://example.com/poster.jpg">
```

The poster image is shown before the user taps play. Design it as a compelling thumbnail — include a play button overlay (centered triangle in a circle), the video title, and a frame from the content. Same 2:1 ratio recommendation applies. The play button should be the largest element in the center square zone.

For AI-generated posters: prompt for "video thumbnail with centered play button, title text in upper third, dark background, 1200x675px."

## 6. Style System (shared with OG — 16 styles)

Twitter images use the same 16 visual styles from **og-image-generator** §3 and [references/style-system-v3.md](../og-image-generator/references/style-system-v3.md). All templates work for Twitter — just change the canvas height to 675px.

| # | Style | Dark Mode | X CTR Potential | Template |
|---|-------|-----------|----------------|----------|
| 1 | Terminal / CLI | Always dark | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) |
| 2 | Magazine Editorial | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) |
| 3 | Swiss Minimal | Needs variant | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) |
| 4 | Pixel Retro | All dark | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) |
| 5 | Brutalist | Black bg | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) |
| 6 | Newspaper | Needs variant | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) |
| 7 | Neo-Brutalism | Yes | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) |
| 8 | Bento Grid | Dark base | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) |
| 9 | Neo-Swiss Gradient | Light | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) |
| 10 | Dark Gradient+Texture | Always dark | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) |
| 11 | Text Overlay | Depends on bg | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) |
| 12 | Cinematic | Dark-friendly | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) |
| 13 | Collage | Varies | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) |
| 14 | Risograph | Paper base | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) |
| 15 | Vaporwave | Dark neon | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) |
| 16 | Grunge | Faded dark | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) |

**X top performers**: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — high contrast + dark background are optimal for X timeline. **X avoid**: overly corporate on-brand styles without dark variant; pure-white backgrounds in dark mode timeline.

## 7. Font & Typography

Same rules as OG. See **og-image-generator** [references/typography.md](../og-image-generator/references/typography.md).

Twitter-specific addition: because timeline images render at ~260px wide (vs OG's ~500px desktop feed), bump minimum font size by 4px — use 28px minimum instead of 24px.

## 8. Agent YAML Checks

```yaml
checks:
  # P0 — must pass
  - id: dimensions-twitter
    description: twitter:image is 1200x675px (2:1) or 1200x628px (cross-platform)
  - id: card-type-match
    description: twitter:card is summary_large_image when using a large image
  - id: absolute-url
    description: twitter:image URL is absolute (https://) and publicly accessible
  - id: format
    description: Image format is PNG, JPG, or WebP (not SVG)

  # P1 — should pass
  - id: og-fallback
    description: og:image is also set (as fallback for platforms that don't read twitter:image)
  - id: timeline-safe-zone
    description: Critical text and primary visual anchor are in the top 60%; nothing critical in bottom 20%
  - id: square-crop-survival
    description: The most important visual element reads correctly in a 1:1 center crop (mobile timeline)
  - id: dark-mode
    description: Template includes a dark-background variant or uses a dark-friendly default style
  - id: edge-mask-clearance
    description: Logos and critical elements are ≥20px from all edges (Twitter rounded corner mask)

  # P2 — nice to have
  - id: cross-platform-compatible
    description: Same image at 1200x628px works for both OG and Twitter without separate generation
  - id: ai-text-validated
    description: If AI-generated, all text was validated against source — no hallucinated or misspelled text
  - id: player-poster
    description: Player card pages have a dedicated poster image with play button
  - id: content-aware-twitter
    description: Image reflects page-specific content, not just a title in a Twitter-sized template
```

## 9. Common Mistakes

1. **Wrong aspect ratio**: Using OG's 1200x630 (1.91:1) without adjustment. While Twitter tolerates it, 1200x675 (2:1) fills the card better and avoids letterboxing.
2. **Missing `twitter:image` tag**: Relying solely on OG fallback — without explicit `twitter:image`, you lose control over which image Twitter picks.
3. **Text in the bottom 20%**: Twitter crops images to ~1:1 on mobile. Critical text near the bottom gets cut off in the timeline.
4. **No dark mode consideration**: Light-background images look harsh in Twitter's dark mode timeline, which ~40% of users have enabled.
5. **Using SVG**: Twitter does not support SVG for card images. Always output PNG or JPG.
6. **GIF without static first frame**: Twitter only shows the first frame of GIFs. Ensure frame 1 is a meaningful still image.
7. **AI text hallucination in the 260px view**: AI-generated text that looks correct at full size may show garbled characters when rendered small. Validate at 1/4 scale.
8. **Logos touching edges**: Twitter's rounded corner mask clips ~10px from edges. Keep logos ≥20px from edges.

## 10. Testing

- **Card Validator**: https://cards-dev.twitter.com/validator — shows exactly how the card will render. Paste any URL to preview.
- **Manual test**: Tweet a link from a test account, then check timeline + expanded views.
- **Dark mode test**: Check the card in both light and dark mode Twitter clients.
- **Cache bust**: Twitter caches card data aggressively (up to 7 days). After changes, use the Card Validator to force a re-scrape.
- **Mobile crop test**: Screenshot the card at 1:1 aspect ratio (crop to 675x675 center) to verify the square crop still communicates the page's content.

## 11. Related Skills

These skills are optional — this skill works standalone. Install them if you need additional capabilities:

**Same repo** (always installed together):
- **og-image-generator**: OG image generation (1200x630, 1.91:1) — the full rendering pipeline, all 6 styles, seed templates, typography guide, Satori constraints. This Twitter Card generator reuses its entire infrastructure.

**Separate repos** (may or may not be installed):
- **twitter-cards** (marketing-skills): HTML meta tag configuration for `twitter:card`, `twitter:site`, `twitter:creator`, validation. Handles how to SET the tag; this skill handles how to CREATE the image.
- **open-graph** (marketing-skills): HTML meta tag configuration for `og:title`, `og:image`, `og:url`, platform testing tools
- **social-share-generator** (marketing-skills): Share button UI that consumes Twitter Card data when users share links to X

## FAQ

### What is a Twitter Card image generator?

A Twitter Card image generator is a tool or skill that creates images specifically optimized for X (Twitter) link previews. These images adhere to Twitter's unique aspect ratio (2:1, 1200x675px) and design considerations, ensuring they display correctly and attractively when a link is shared on the platform.

### How does this generator differ from a generic Open Graph (OG) image generator?

While it shares infrastructure with OG image generators, this skill specifically adapts output dimensions to Twitter's 1200x675px (2:1) aspect ratio, incorporates X-specific design adaptations, considers timeline-safe zoning, and supports player card requirements. Generic OG images are typically 1200x630px (1.91:1).

### What are the recommended dimensions for a Twitter Card image?

The recommended dimensions for a Twitter Card image are 1200x675 pixels, which provides a 2:1 aspect ratio. This ensures the image fills the card effectively and avoids letterboxing.

### Can I use SVG images for Twitter Cards?

No, Twitter does not support SVG for card images. You should use PNG, JPG, or WebP formats. If you use a GIF, only the first frame will be displayed.

### How does this generator handle dark mode for Twitter Card images?

The generator considers Twitter's dark mode usage by preferring dark-background styles or providing dark-mode variants for templates. This ensures images blend naturally into the dark mode timeline and maintain visual appeal for approximately 40% of Twitter users.

### What is the 'timeline-safe zone' and why is it important for Twitter Card images?

The 'timeline-safe zone' refers to the top 60% of the image where critical content (title, primary visual) should be placed. This is crucial because Twitter crops images to approximately 1:1 on mobile timelines until the tweet is expanded, meaning content in the bottom 20% might be cut off.