Source: business/marketing/skills/social-image-builder-skill.md

Social Image Builder — Skill

Purpose: Generate standalone, screenshot-ready HTML image files for social media posts When to use: Creating images for LinkedIn, Facebook, or Instagram posts across AOS or CYP brands Output: 1 HTML file per image, ready for Chrome DevTools screenshot

Inputs

Brand: AOS or CYP
Platform: linkedin, facebook, instagram
Content: What goes on the image — headline, subtext, output rows, CTA, logo, etc.

Platform Dimensions

Platform	Size	Ratio	Body CSS
LinkedIn	1080 x 1350	4:5 portrait	`width: 1080px; height: 1350px;`
Facebook (square)	1080 x 1080	1:1	`width: 1080px; height: 1080px;`
Facebook (feed)	1200 x 630	1.91:1 landscape	`width: 1200px; height: 630px;`
Instagram	1080 x 1350	4:5 portrait	`width: 1080px; height: 1350px;`
Meta ad (square)	1080 x 1080	1:1	`width: 1080px; height: 1080px;`
Meta ad (vertical)	1080 x 1920	9:16	`width: 1080px; height: 1920px;`

Brand Systems

AOS (Advisory OS)

Background:     #0a0a0a (or #1a1a1a for cards/rows)
Text primary:   #f8f7f4
Text secondary:  #bbb or #ccc
Text muted:     #999 or #666
Accent/gold:    #b79d64
Row background: #1a1a1a
Row border-left: #b79d64
Borders:        #444

Fonts:
  Headlines:    'Cormorant Garamond', serif (400-500 weight)
  Body:         'Inter', sans-serif (300-500 weight)

Google Fonts:
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">

Logo text:      "Advisory OS" in Cormorant Garamond, #666

CYP (Creating Your Plan / Practice Builders)

Background:     #0f2d3e (or gradient #0f2d3e → #1a3f52 or #3e666e)
Text primary:   #f1ede6
Text secondary:  rgba(241,237,230,0.7) or rgba(241,237,230,0.55)
Text muted:     rgba(241,237,230,0.5)
Accent/gold:    #b79d64
Row background: rgba(241,237,230,0.06)
Row border:     rgba(183,157,100,0.25)
Light bg:       #f1ede6 (cream) or #f7f5f0 (off-white)
Dark text on light: #0f2d3e or #334155

Fonts:
  Headlines:    'Fraunces', serif (700-900 weight)
  Body:         'Montserrat', sans-serif (300-700 weight)

Google Fonts:
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700;800;900&family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Logo text:      "Practice Builders" in Fraunces, #b79d64

HTML Template

Every output file follows this exact structure:

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<link href="[GOOGLE_FONTS_URL]" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: [WIDTH]px; height: [HEIGHT]px; overflow: hidden; }
/* All other styles go here — no external CSS, no var() */
</style>
</head>
<body>
<div class="card">
    <!-- Image content — fills entire body -->
</div>
</body></html>

Rules:

body has ONLY width, height, overflow: hidden
Zero margin, zero padding on body
No background color on body — the .card div covers the full area
.card has same width/height as body
All styles are in