Skill

marketing-design

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.

From clarc

Install

Run in your terminal

npx claudepluginhub marvinrichter/clarc --plugin clarc

Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Similar Skills

agent-harness-construction

Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.

everything-claude-code

139.9k

agent-payment-x402

Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.

everything-claude-code

139.9k

agent-eval

Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.

everything-claude-code

139.9k

Stats

Stars7

Forks0

Last CommitMar 10, 2026

Actions

View Source View Plugin View on GitHub View README

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

<!-- Basic OG (works for Facebook, LinkedIn, Slack, Discord, etc.) -->
<meta property="og:title"       content="[Page Title — max 60 chars]" />
<meta property="og:description" content="[Page description — max 155 chars]" />
<meta property="og:image"       content="https://example.com/og/[page-slug].png" />
<meta property="og:image:width"  content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url"         content="https://example.com/[path]" />
<meta property="og:type"        content="website" />

<!-- Twitter / X specific -->
<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="[Same as og:title]" />
<meta name="twitter:description" content="[Same as og:description]" />
<meta name="twitter:image"       content="https://example.com/og/[page-slug].png" />
<meta name="twitter:site"        content="@handle" />

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)

// 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(
    (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          height: '100%',
          backgroundColor: '#0f1117',
          padding: '60px',
          fontFamily: 'Inter, sans-serif',
        }}
      >
        {/* Logo area */}
        <div style={{ display: 'flex', marginBottom: 'auto' }}>
          <span style={{ color: '#818CF8', fontSize: 24, fontWeight: 600 }}>
            ProductName
          </span>
        </div>

        {/* Title */}
        <h1
          style={{
            color: '#F1F5F9',
            fontSize: 64,
            fontWeight: 700,
            lineHeight: 1.1,
            maxWidth: '80%',
            margin: 0,
          }}
        >
          {title}
        </h1>

        {/* Footer */}
        <div style={{ display: 'flex', marginTop: 40 }}>
          <span style={{ color: '#64748B', fontSize: 20 }}>
            example.com
          </span>
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

HTML Email Templates

The core rules

Table-based layout — CSS Grid/Flexbox break in Outlook
Inline styles only — <style> blocks ignored by some clients
Max width: 600px — wider breaks on mobile
No external fonts — fallback to web-safe fonts
Images must have alt text — many clients block images by default
Test in Litmus or Email on Acid before sending

Minimal responsive email template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Email Subject</title>
  <!--[if mso]>
  <noscript>
    <xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
  </noscript>
  <![endif]-->
  <style>
    /* Only put media queries here — inline everything else */
    @media only screen and (max-width: 600px) {
      .container { width: 100% !important; }
      .stack     { display: block !important; width: 100% !important; }
      .hide-mobile { display: none !important; }
    }
    /* Dark mode */
    @media (prefers-color-scheme: dark) {
      .email-body  { background-color: #1a1a2e !important; }
      .email-card  { background-color: #16213e !important; }
      .email-text  { color: #e2e8f0 !important; }
    }
  </style>
</head>
<body style="margin:0; padding:0; background-color:#f1f5f9;" class="email-body">

  <!-- Wrapper -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" style="padding: 40px 16px;">

        <!-- Card -->
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"
               class="container"
               style="background-color:#ffffff; border-radius:8px; overflow:hidden;">

          <!-- Header -->
          <tr>
            <td style="background-color:#4F46E5; padding:32px 40px;">
              <h1 style="margin:0; color:#ffffff; font-family:Arial,sans-serif;
                         font-size:28px; font-weight:700; line-height:1.2;">
                Product Name
              </h1>
            </td>
          </tr>

          <!-- Body -->
          <tr>
            <td style="padding:40px;" class="email-card">
              <p style="margin:0 0 16px; color:#1e293b; font-family:Arial,sans-serif;
                        font-size:16px; line-height:1.6;" class="email-text">
                Hello [First Name],
              </p>
              <p style="margin:0 0 32px; color:#475569; font-family:Arial,sans-serif;
                        font-size:16px; line-height:1.6;" class="email-text">
                [Main message goes here]
              </p>

              <!-- CTA Button -->
              <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td style="background-color:#4F46E5; border-radius:6px;">
                    <a href="[URL]"
                       style="display:inline-block; padding:14px 28px; color:#ffffff;
                              font-family:Arial,sans-serif; font-size:16px; font-weight:600;
                              text-decoration:none;">
                      Call to Action
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="padding:24px 40px; background-color:#f8fafc; border-top:1px solid #e2e8f0;">
              <p style="margin:0; color:#94a3b8; font-family:Arial,sans-serif;
                        font-size:12px; line-height:1.5; text-align:center;">
                © 2026 Company Name · 123 Street · City<br>
                <a href="[unsubscribe-url]" style="color:#94a3b8;">Unsubscribe</a>
              </p>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>

</body>
</html>

Email compatibility checklist

All styles are inline (except media queries)
No CSS Grid, Flexbox, or CSS variables
All images have alt text and explicit width/height
CTA button uses table cell + <a> (not <button>)
Unsubscribe link present
Physical address in footer (CAN-SPAM / GDPR)
Tested at 600px and 375px widths
Tested in Outlook 2019 (most problematic client)

Social Media Asset Dimensions

Organic content specs

Platform	Format	Recommended size	Max file size
Instagram	Post	1080×1080px (square) or 1080×1350px (portrait)	30MB
Instagram	Story / Reel cover	1080×1920px	30MB
Twitter/X	Post with image	1200×675px (16:9)	5MB
LinkedIn	Post	1200×628px	5MB
LinkedIn	Company banner	1536×768px	8MB
Facebook	Post	1200×630px	30MB
YouTube	Thumbnail	1280×720px	2MB
YouTube	Channel banner	2560×1440px	6MB

Product Hunt launch assets

Logo:         240×240px (no text, icon only)
Gallery:      1270×760px (max 5 images)
Thumbnail:    630×420px
OG image:     1200×630px

Open Source / GitHub assets

Social preview: 1280×640px (Settings → Social preview)

Asset naming convention

Format: [product]-[type]-[variant]-[YYYY-MM].ext

Examples:
clarc-og-homepage-2026-03.png
clarc-instagram-launch-square-2026-03.png
clarc-email-welcome-header-2026-03.png

Print-Safe PDF Generation

For documents that may be printed (invoices, reports, certificates).

CSS for print

@media print {
  /* Remove interactive elements */
  nav, .sidebar, button, .cta { display: none; }

  /* Prevent page breaks inside elements */
  .no-break { page-break-inside: avoid; }

  /* Force page break before sections */
  .page-break { page-break-before: always; }

  /* Print-safe colors (no screen-only colors) */
  body { color: #000; background: #fff; }
  a    { color: #000; text-decoration: underline; }

  /* Show URL next to links */
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; }

  /* Page margins */
  @page { margin: 20mm; }
}

PDF generation with Puppeteer

const puppeteer = require('puppeteer');

async function generatePDF(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto(url, { waitUntil: 'networkidle0' });

  await page.pdf({
    path: outputPath,
    format: 'A4',
    printBackground: true,
    margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' },
  });

  await browser.close();
}

CMYK consideration

Screen colors (RGB/sRGB) do not print accurately in commercial print.

RGB        → Screen display
sRGB       → Web (same as RGB, standardized)
CMYK       → Commercial print (offset, digital press)
Pantone    → Brand colors in print (exact color matching)

Rule: If materials go to professional print (business cards, posters),
provide CMYK values in brand guidelines alongside hex/RGB.

Brand Consistency Checklist (Marketing)

Before publishing any marketing asset: