11 KiB
11 KiB
Social Photos Design Guide
Design social media images via HTML/CSS rendering + screenshot export. Orchestrates ui-ux-pro-max, brand, design-system, and chrome-devtools skills.
Platform Sizes
| Platform | Type | Size (px) | Aspect |
|---|---|---|---|
| Post | 1080 x 1080 | 1:1 | |
| Story/Reel | 1080 x 1920 | 9:16 | |
| Carousel | 1080 x 1350 | 4:5 | |
| Post | 1200 x 630 | ~1.9:1 | |
| Story | 1080 x 1920 | 9:16 | |
| Twitter/X | Post | 1200 x 675 | 16:9 |
| Twitter/X | Card | 800 x 418 | ~1.91:1 |
| Post | 1200 x 627 | ~1.91:1 | |
| Article | 1200 x 644 | ~1.86:1 | |
| Pin | 1000 x 1500 | 2:3 | |
| YouTube | Thumbnail | 1280 x 720 | 16:9 |
| TikTok | Cover | 1080 x 1920 | 9:16 |
| Threads | Post | 1080 x 1080 | 1:1 |
Workflow
Step 1: Activate Project Management
Invoke project-management skill to create persistent TODO tasks via Claude's native task orchestration. Break down into:
- Requirement analysis task
- Idea generation task(s)
- HTML design task(s) — can parallelize per size/variant
- Screenshot export task(s) — can parallelize per file
- Report generation task
Spawn parallel subagents for independent tasks (e.g., multiple HTML files for different sizes).
Step 2: Analyze Requirements
Parse user input for:
- Subject/topic — what the social photo represents
- Target platforms — which sizes needed (default: Instagram Post 1:1 + Story 9:16)
- Visual style — minimalist, bold, gradient, photo-based, etc.
- Brand context — read from
docs/brand-guidelines.mdif exists - Content elements — headline, subtext, CTA, images, icons
- Quantity — how many variations (default: 3)
Step 3: Generate Ideas
Create 3-5 concept ideas that:
- Match the input prompt/requirements
- Consider platform-specific best practices
- Vary in composition, color, typography approach
- Align with brand guidelines if available
Present ideas to user via AskUserQuestion for approval before designing.
Step 4: Design HTML Files
Activate these skills in sequence:
/ckm:brand— Extract brand colors, fonts, voice from user's project/ckm:design-system— Get design tokens (spacing, typography scale, color palette)- Randomly invoke ONE of:
/ck:ui-ux-pro-maxOR/ck:frontend-design— for layout, hierarchy, visual balance. Pick one at random each run for design variety.
For each approved idea + each target size, create an HTML file:
output/social-photos/
├── idea-1-instagram-post-1080x1080.html
├── idea-1-instagram-story-1080x1920.html
├── idea-2-instagram-post-1080x1080.html
├── idea-2-instagram-story-1080x1920.html
└── ...
HTML Design Rules
- Viewport — Set exact pixel dimensions matching target size
- Self-contained — Inline all CSS, embed fonts via Google Fonts CDN
- No scrolling — Everything fits in one viewport
- High contrast — Text readable at thumbnail size
- Brand-aligned — Use extracted brand colors/fonts
- Safe zones — Critical content within central 80% area
- Typography — Min 24px for headlines, min 16px for body at 1080px width
- Visual hierarchy — One focal point, clear reading flow
HTML Template Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width={WIDTH}, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family={FONT}&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: {WIDTH}px;
height: {HEIGHT}px;
overflow: hidden;
font-family: '{FONT}', sans-serif;
}
.canvas {
width: {WIDTH}px;
height: {HEIGHT}px;
position: relative;
/* Background: gradient, solid, or image */
}
/* Design tokens from brand/design-system */
</style>
</head>
<body>
<div class="canvas">
<!-- Content layers -->
</div>
</body>
</html>
Step 5: Screenshot Export
Use Chrome headless, chrome-devtools skill, or Playwright/Puppeteer to capture exact-size screenshots.
IMPORTANT: Always add a delay (3-5s) after page load for fonts/images to fully render before capture.
Option A: Chrome Headless CLI (Recommended — zero dependencies)
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
DELAY=5 # seconds for fonts/images to load
"$CHROME" \
--headless \
--disable-gpu \
--no-sandbox \
--hide-scrollbars \
--window-size="${WIDTH},${HEIGHT}" \
--virtual-time-budget=$((DELAY * 1000)) \
--screenshot="output.png" \
"file:///path/to/file.html"
Key flags:
--virtual-time-budget=5000— waits 5s virtual time for assets (Google Fonts, images) to load--hide-scrollbars— prevents scrollbar artifacts in screenshots--window-size=WxH— sets exact pixel dimensions
Option B: chrome-devtools skill
Invoke /chrome-devtools with instructions to:
- Open each HTML file in browser
- Set viewport to exact target dimensions
- Wait 3-5s for fonts/images to fully load
- Screenshot full page to PNG
- Save to
output/social-photos/exports/
Option C: Playwright script
const { chromium } = require('playwright');
async function captureScreenshots(htmlFiles) {
const browser = await chromium.launch();
for (const file of htmlFiles) {
const [width, height] = file.match(/(\d+)x(\d+)/).slice(1).map(Number);
const page = await browser.newPage();
await page.setViewportSize({ width, height });
await page.goto(`file://${file}`, { waitUntil: 'networkidle' });
// Wait for fonts/images to fully render
await page.waitForTimeout(3000);
const outputPath = file.replace('.html', '.png').replace('social-photos/', 'social-photos/exports/');
await page.screenshot({ path: outputPath, type: 'png' });
await page.close();
}
await browser.close();
}
Option D: Puppeteer script
const puppeteer = require('puppeteer');
async function captureScreenshots(htmlFiles) {
const browser = await puppeteer.launch();
for (const file of htmlFiles) {
const [width, height] = file.match(/(\d+)x(\d+)/).slice(1).map(Number);
const page = await browser.newPage();
await page.setViewport({ width, height, deviceScaleFactor: 2 }); // 2x for retina
await page.goto(`file://${file}`, { waitUntil: 'networkidle0' });
// Wait for fonts/images to fully render
await new Promise(r => setTimeout(r, 3000));
const outputPath = file.replace('.html', '.png').replace('social-photos/', 'social-photos/exports/');
await page.screenshot({ path: outputPath, type: 'png' });
await page.close();
}
await browser.close();
}
IMPORTANT: Use deviceScaleFactor: 2 for retina-quality output (Puppeteer only).
Step 6: Verify & Fix Designs
Use Chrome MCP or chrome-devtools skill to visually inspect each exported PNG:
- Open exported screenshots and check for layout/styling issues
- Verify: fonts rendered correctly, colors match brand, text readable at thumbnail size
- Check: no overflow, no cut-off content, safe zones respected, visual hierarchy clear
- If issues found → fix HTML source → re-export screenshot → verify again
- Repeat until all designs pass visual QA
Common issues to check:
- Fonts not loaded (fallback to system fonts)
- Text overflow or clipping
- Elements outside safe zone (central 80%)
- Low contrast text (below WCAG AA 4.5:1)
- Misaligned elements or broken layouts
Step 7: Generate Summary Report
Save report to plans/reports/ with naming pattern from session hooks.
Report structure:
# Social Photos Design Report
## Overview
- Prompt/requirements: {original input}
- Platforms: {target platforms}
- Variations: {count}
- Style: {chosen style}
## Ideas Generated
1. **{Idea name}** — {brief description, rationale}
2. ...
## Design Decisions
- Color palette: {colors used, why}
- Typography: {fonts, sizes, why}
- Layout: {composition approach, why}
- Brand alignment: {how brand guidelines influenced design}
## Output Files
| File | Size | Platform | Preview |
|------|------|----------|---------|
| exports/{filename}.png | {WxH} | {platform} | {description} |
## Why This Works
- {Platform-specific reasoning}
- {Brand alignment reasoning}
- {Visual hierarchy reasoning}
- {Engagement potential reasoning}
## Recommendations
- {A/B test suggestions}
- {Platform-specific tips}
- {Iteration opportunities}
Step 8: Organize Output
Invoke assets-organizing skill to organize all output files and reports:
- Move/copy exported PNGs to proper asset directories
- Ensure reports are in
plans/reports/with correct naming - Clean up intermediate HTML files if requested
- Tag outputs with metadata (platform, size, concept name)
Design Best Practices
Platform-Specific Tips
- Instagram — Visual-first, minimal text (<20%), strong colors, lifestyle feel
- Facebook — Informative, can have more text, eye-catching in feed
- Twitter/X — Bold headlines, contrast for dark/light mode, clear message
- LinkedIn — Professional, clean, data-driven visuals, thought leadership
- Pinterest — Vertical format, text overlay on images, how-to style
- YouTube — Face close-ups perform best, bright colors, readable at small size
- TikTok — Trendy, energetic, bold typography, youth-oriented
Art Direction Styles (Reuse from Banner)
| Style | Best For | Key Elements |
|---|---|---|
| Minimalist | SaaS, tech, luxury | Whitespace, single accent color, clean type |
| Bold Typography | Announcements, quotes | Large type, high contrast, minimal imagery |
| Gradient Mesh | Modern brands, apps | Fluid color transitions, floating elements |
| Photo-Based | Lifestyle, e-commerce | Hero image, subtle overlay, text on image |
| Geometric | Tech, fintech | Shapes, patterns, structured layouts |
| Glassmorphism | SaaS, modern apps | Frosted glass, blur effects, transparency |
| Flat Illustration | Education, health | Custom illustrations, friendly, approachable |
| Duotone | Creative, editorial | Two-color treatment on photos |
| Collage | Fashion, culture | Mixed media, overlapping elements |
| 3D/Isometric | Tech, product | Depth, shadows, modern perspective |
Color & Contrast
- Ensure WCAG AA contrast ratio (4.5:1 min) for all text
- Test designs at 50% size to verify readability
- Consider platform dark/light mode compatibility
- Use brand primary color as dominant, secondary as accent
Typography Hierarchy
| Element | Min Size (at 1080px) | Weight |
|---|---|---|
| Headline | 48px | Bold/Black |
| Subheadline | 32px | Semibold |
| Body | 24px | Regular |
| Caption | 18px | Regular/Light |
| CTA | 28px | Bold |
Security & Scope
This sub-skill handles social media image design only. Does NOT handle:
- Video content creation
- Animation/motion graphics
- Print production files (CMYK, bleed)
- Direct social media posting/scheduling
- AI image generation (use
ai-artistskill for that)