Source from repo
Design

Comprehensive AI design skill providing design intelligence across platforms with 161 reasoning rules.
nextlevelbuilderGitHub nextlevelbuilderSource repo Original GitHub link Publisher page
Files
Skill
n/a
Size
235.9 KB
Entrypoint
SKILL.md
Format
git-repo
Open file
references/social-photos-design.md

Syntax-highlighted preview of this file as included in the skill package.
Rendered Source
markdown330 linesFree
references/social-photos-design.md
1# Social Photos Design Guide
2 
3Design social media images via HTML/CSS rendering + screenshot export. Orchestrates `ui-ux-pro-max`, `brand`, `design-system`, and `chrome-devtools` skills.
4 
5## Platform Sizes
6 
7| Platform | Type | Size (px) | Aspect |
8|----------|------|-----------|--------|
9| Instagram | Post | 1080 x 1080 | 1:1 |
10| Instagram | Story/Reel | 1080 x 1920 | 9:16 |
11| Instagram | Carousel | 1080 x 1350 | 4:5 |
12| Facebook | Post | 1200 x 630 | ~1.9:1 |
13| Facebook | Story | 1080 x 1920 | 9:16 |
14| Twitter/X | Post | 1200 x 675 | 16:9 |
15| Twitter/X | Card | 800 x 418 | ~1.91:1 |
16| LinkedIn | Post | 1200 x 627 | ~1.91:1 |
17| LinkedIn | Article | 1200 x 644 | ~1.86:1 |
18| Pinterest | Pin | 1000 x 1500 | 2:3 |
19| YouTube | Thumbnail | 1280 x 720 | 16:9 |
20| TikTok | Cover | 1080 x 1920 | 9:16 |
21| Threads | Post | 1080 x 1080 | 1:1 |
22 
23## Workflow
24 
25### Step 1: Activate Project Management
26 
27Invoke `project-management` skill to create persistent TODO tasks via Claude's native task orchestration. Break down into:
28- Requirement analysis task
29- Idea generation task(s)
30- HTML design task(s) — can parallelize per size/variant
31- Screenshot export task(s) — can parallelize per file
32- Report generation task
33 
34Spawn parallel subagents for independent tasks (e.g., multiple HTML files for different sizes).
35 
36### Step 2: Analyze Requirements
37 
38Parse user input for:
39- **Subject/topic** — what the social photo represents
40- **Target platforms** — which sizes needed (default: Instagram Post 1:1 + Story 9:16)
41- **Visual style** — minimalist, bold, gradient, photo-based, etc.
42- **Brand context** — read from `docs/brand-guidelines.md` if exists
43- **Content elements** — headline, subtext, CTA, images, icons
44- **Quantity** — how many variations (default: 3)
45 
46### Step 3: Generate Ideas
47 
48Create 3-5 concept ideas that:
49- Match the input prompt/requirements
50- Consider platform-specific best practices
51- Vary in composition, color, typography approach
52- Align with brand guidelines if available
53 
54Present ideas to user via `AskUserQuestion` for approval before designing.
55 
56### Step 4: Design HTML Files
57 
58Activate these skills in sequence:
59 
601. **`/ckm:brand`** — Extract brand colors, fonts, voice from user's project
612. **`/ckm:design-system`** — Get design tokens (spacing, typography scale, color palette)
623. **Randomly invoke ONE of:** `/ck:ui-ux-pro-max` OR `/ck:frontend-design` — for layout, hierarchy, visual balance. Pick one at random each run for design variety.
63 
64For each approved idea + each target size, create an HTML file:
65 
66```
67output/social-photos/
68├── idea-1-instagram-post-1080x1080.html
69├── idea-1-instagram-story-1080x1920.html
70├── idea-2-instagram-post-1080x1080.html
71├── idea-2-instagram-story-1080x1920.html
72└── ...
73```
74 
75#### HTML Design Rules
76 
77- **Viewport** — Set exact pixel dimensions matching target size
78- **Self-contained** — Inline all CSS, embed fonts via Google Fonts CDN
79- **No scrolling** — Everything fits in one viewport
80- **High contrast** — Text readable at thumbnail size
81- **Brand-aligned** — Use extracted brand colors/fonts
82- **Safe zones** — Critical content within central 80% area
83- **Typography** — Min 24px for headlines, min 16px for body at 1080px width
84- **Visual hierarchy** — One focal point, clear reading flow
85 
86#### HTML Template Structure
87 
88```html
89<!DOCTYPE html>
90<html>
91<head>
92  <meta charset="UTF-8">
93  <meta name="viewport" content="width={WIDTH}, initial-scale=1.0">
94  <link href="https://fonts.googleapis.com/css2?family={FONT}&display=swap" rel="stylesheet">
95  <style>
96    * { margin: 0; padding: 0; box-sizing: border-box; }
97    html, body {
98      width: {WIDTH}px;
99      height: {HEIGHT}px;
100      overflow: hidden;
101      font-family: '{FONT}', sans-serif;
102    }
103    .canvas {
104      width: {WIDTH}px;
105      height: {HEIGHT}px;
106      position: relative;
107      /* Background: gradient, solid, or image */
108    }
109    /* Design tokens from brand/design-system */
110  </style>
111</head>
112<body>
113  <div class="canvas">
114    <!-- Content layers -->
115  </div>
116</body>
117</html>
118```
119 
120### Step 5: Screenshot Export
121 
122Use Chrome headless, `chrome-devtools` skill, or Playwright/Puppeteer to capture exact-size screenshots.
123 
124**IMPORTANT:** Always add a delay (3-5s) after page load for fonts/images to fully render before capture.
125 
126#### Option A: Chrome Headless CLI (Recommended — zero dependencies)
127 
128```bash
129CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
130DELAY=5  # seconds for fonts/images to load
131 
132"$CHROME" \
133  --headless \
134  --disable-gpu \
135  --no-sandbox \
136  --hide-scrollbars \
137  --window-size="${WIDTH},${HEIGHT}" \
138  --virtual-time-budget=$((DELAY * 1000)) \
139  --screenshot="output.png" \
140  "file:///path/to/file.html"
141```
142 
143Key flags:
144- `--virtual-time-budget=5000` — waits 5s virtual time for assets (Google Fonts, images) to load
145- `--hide-scrollbars` — prevents scrollbar artifacts in screenshots
146- `--window-size=WxH` — sets exact pixel dimensions
147 
148#### Option B: chrome-devtools skill
149 
150Invoke `/chrome-devtools` with instructions to:
1511. Open each HTML file in browser
1522. Set viewport to exact target dimensions
1533. Wait 3-5s for fonts/images to fully load
1544. Screenshot full page to PNG
1555. Save to `output/social-photos/exports/`
156 
157#### Option C: Playwright script
158 
159```javascript
160const { chromium } = require('playwright');
161 
162async function captureScreenshots(htmlFiles) {
163  const browser = await chromium.launch();
164 
165  for (const file of htmlFiles) {
166    const [width, height] = file.match(/(\d+)x(\d+)/).slice(1).map(Number);
167 
168    const page = await browser.newPage();
169    await page.setViewportSize({ width, height });
170    await page.goto(`file://${file}`, { waitUntil: 'networkidle' });
171    // Wait for fonts/images to fully render
172    await page.waitForTimeout(3000);
173 
174    const outputPath = file.replace('.html', '.png').replace('social-photos/', 'social-photos/exports/');
175    await page.screenshot({ path: outputPath, type: 'png' });
176    await page.close();
177  }
178 
179  await browser.close();
180}
181```
182 
183#### Option D: Puppeteer script
184 
185```javascript
186const puppeteer = require('puppeteer');
187 
188async function captureScreenshots(htmlFiles) {
189  const browser = await puppeteer.launch();
190 
191  for (const file of htmlFiles) {
192    const [width, height] = file.match(/(\d+)x(\d+)/).slice(1).map(Number);
193 
194    const page = await browser.newPage();
195    await page.setViewport({ width, height, deviceScaleFactor: 2 }); // 2x for retina
196    await page.goto(`file://${file}`, { waitUntil: 'networkidle0' });
197    // Wait for fonts/images to fully render
198    await new Promise(r => setTimeout(r, 3000));
199 
200    const outputPath = file.replace('.html', '.png').replace('social-photos/', 'social-photos/exports/');
201    await page.screenshot({ path: outputPath, type: 'png' });
202    await page.close();
203  }
204 
205  await browser.close();
206}
207```
208 
209**IMPORTANT:** Use `deviceScaleFactor: 2` for retina-quality output (Puppeteer only).
210 
211### Step 6: Verify & Fix Designs
212 
213Use Chrome MCP or `chrome-devtools` skill to visually inspect each exported PNG:
214 
2151. Open exported screenshots and check for layout/styling issues
2162. Verify: fonts rendered correctly, colors match brand, text readable at thumbnail size
2173. Check: no overflow, no cut-off content, safe zones respected, visual hierarchy clear
2184. If issues found → fix HTML source → re-export screenshot → verify again
2195. Repeat until all designs pass visual QA
220 
221**Common issues to check:**
222- Fonts not loaded (fallback to system fonts)
223- Text overflow or clipping
224- Elements outside safe zone (central 80%)
225- Low contrast text (below WCAG AA 4.5:1)
226- Misaligned elements or broken layouts
227 
228### Step 7: Generate Summary Report
229 
230Save report to `plans/reports/` with naming pattern from session hooks.
231 
232Report structure:
233 
234```markdown
235# Social Photos Design Report
236 
237## Overview
238- Prompt/requirements: {original input}
239- Platforms: {target platforms}
240- Variations: {count}
241- Style: {chosen style}
242 
243## Ideas Generated
2441. **{Idea name}** — {brief description, rationale}
2452. ...
246 
247## Design Decisions
248- Color palette: {colors used, why}
249- Typography: {fonts, sizes, why}
250- Layout: {composition approach, why}
251- Brand alignment: {how brand guidelines influenced design}
252 
253## Output Files
254| File | Size | Platform | Preview |
255|------|------|----------|---------|
256| exports/{filename}.png | {WxH} | {platform} | {description} |
257 
258## Why This Works
259- {Platform-specific reasoning}
260- {Brand alignment reasoning}
261- {Visual hierarchy reasoning}
262- {Engagement potential reasoning}
263 
264## Recommendations
265- {A/B test suggestions}
266- {Platform-specific tips}
267- {Iteration opportunities}
268```
269 
270### Step 8: Organize Output
271 
272Invoke `assets-organizing` skill to organize all output files and reports:
273- Move/copy exported PNGs to proper asset directories
274- Ensure reports are in `plans/reports/` with correct naming
275- Clean up intermediate HTML files if requested
276- Tag outputs with metadata (platform, size, concept name)
277 
278## Design Best Practices
279 
280### Platform-Specific Tips
281 
282- **Instagram** — Visual-first, minimal text (<20%), strong colors, lifestyle feel
283- **Facebook** — Informative, can have more text, eye-catching in feed
284- **Twitter/X** — Bold headlines, contrast for dark/light mode, clear message
285- **LinkedIn** — Professional, clean, data-driven visuals, thought leadership
286- **Pinterest** — Vertical format, text overlay on images, how-to style
287- **YouTube** — Face close-ups perform best, bright colors, readable at small size
288- **TikTok** — Trendy, energetic, bold typography, youth-oriented
289 
290### Art Direction Styles (Reuse from Banner)
291 
292| Style | Best For | Key Elements |
293|-------|----------|--------------|
294| Minimalist | SaaS, tech, luxury | Whitespace, single accent color, clean type |
295| Bold Typography | Announcements, quotes | Large type, high contrast, minimal imagery |
296| Gradient Mesh | Modern brands, apps | Fluid color transitions, floating elements |
297| Photo-Based | Lifestyle, e-commerce | Hero image, subtle overlay, text on image |
298| Geometric | Tech, fintech | Shapes, patterns, structured layouts |
299| Glassmorphism | SaaS, modern apps | Frosted glass, blur effects, transparency |
300| Flat Illustration | Education, health | Custom illustrations, friendly, approachable |
301| Duotone | Creative, editorial | Two-color treatment on photos |
302| Collage | Fashion, culture | Mixed media, overlapping elements |
303| 3D/Isometric | Tech, product | Depth, shadows, modern perspective |
304 
305### Color & Contrast
306 
307- Ensure WCAG AA contrast ratio (4.5:1 min) for all text
308- Test designs at 50% size to verify readability
309- Consider platform dark/light mode compatibility
310- Use brand primary color as dominant, secondary as accent
311 
312### Typography Hierarchy
313 
314| Element | Min Size (at 1080px) | Weight |
315|---------|---------------------|--------|
316| Headline | 48px | Bold/Black |
317| Subheadline | 32px | Semibold |
318| Body | 24px | Regular |
319| Caption | 18px | Regular/Light |
320| CTA | 28px | Bold |
321 
322## Security & Scope
323 
324This sub-skill handles social media image design only. Does NOT handle:
325- Video content creation
326- Animation/motion graphics
327- Print production files (CMYK, bleed)
328- Direct social media posting/scheduling
329- AI image generation (use `ai-artist` skill for that)
330
Preparing the source view

Design

references/social-photos-design.md
