---
name: marketing-design
description: "Marketing asset design for developers: Open Graph / social media card specs and HTML generation, email template HTML/CSS patterns (table-based layout, Outlook compatibility, dark mode), banner and ad creative dimensions, print-safe PDF generation, and brand consistency across marketing touchpoints. From OG image code to email that renders in Outlook."
---
# Marketing Design Skill
## When to Activate
- Generating Open Graph / Twitter card meta tags and preview images
- Building HTML email templates
- Creating social media asset specifications
- Defining ad creative dimensions for a campaign
- Ensuring marketing materials match brand guidelines
- Generating print-safe PDFs or documents that must render correctly in Outlook and other restrictive email clients
- Auditing an existing marketing page or email for missing OG tags, brand token violations, or platform dimension mismatches
---
## Open Graph & Social Cards
### Required meta tags
```html
```
### OG image specs
| Platform | Recommended size | Safe zone | Format |
|----------|-----------------|-----------|--------|
| Facebook | 1200×630px | 1000×524px centered | PNG/JPG |
| Twitter/X | 1200×628px | 1000×524px centered | PNG/JPG |
| LinkedIn | 1200×627px | 1000×522px centered | PNG/JPG |
| Discord | 1200×630px | full bleed OK | PNG |
| WhatsApp | 1200×630px | full bleed OK | JPG |
**Universal safe size: 1200×628px** — works across all platforms.
### Generating OG images with Satori (Next.js)
```tsx
// app/og/route.tsx
import { ImageResponse } from 'next/og';
export const runtime = 'edge';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title') ?? 'Default Title';
return new ImageResponse(
(
{/* Logo area */}
ProductName
{/* Title */}
{title}
{/* Footer */}
example.com
),
{ width: 1200, height: 630 }
);
}
```
---
## HTML Email Templates
### The core rules
1. **Table-based layout** — CSS Grid/Flexbox break in Outlook
2. **Inline styles only** — `