AGENCY Community Social Assets Generator
Generate covers and visual assets for AGENCY Community events using the established design system.
Design System
Colors
- Background:
#0f0f0f
- Frame/borders:
#2a2a2a
- Accent (orange):
#e85d04
- Primary text:
#f0f0f0
- Secondary text:
#999
- Muted text:
#555 / #444
- Grid lines:
rgba(42,42,42,0.12)
Typography
- Title/Header: Geist Bold (700) — large, high-impact headlines
- Metadata (top bar, bottom bar): JetBrains Mono — monospace, uppercase, letter-spaced
- Speaker/people names: EB Garamond — elegant serif
- Handles/technical labels: JetBrains Mono — monospace, orange accent
Font loading
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@300;400;500&display=swap&subset=cyrillic" rel="stylesheet">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2" as="font" type="font/woff2" crossorigin>
@font-face {
font-family: 'Geist';
src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
font-weight: 700;
}
Layout Principles
- Frame: 1px solid
#2a2a2a border, inset 12px from edges
- Top bar: JetBrains Mono, label left, date/time right (orange)
- Bottom bar: JetBrains Mono, metadata left and right, uppercase
- Background grid: subtle 40px grid lines
- Accent line: 3px orange bar below titles
- Photos: off-grid placement, fade to background on edges (left, bottom, top), slight scanline effect, fully desaturated
grayscale(1) contrast(1.1) brightness(0.95)
- Text: left-aligned, can overlap photo slightly, large and readable at thumbnail size
Minimum font sizes (must be readable at thumbnail)
- Top/bottom bar: 13-15px
- Speaker names: 28px+
- Handles: 20px+
- Titles: 62px+ (square), 76px+ (YouTube 16:9)
Asset Sizes
lu.ma Event Cover (square)
- Dimensions: 800×800px
- Viewport:
--viewport-size="800,800"
YouTube Thumbnail (16:9)
- Dimensions: 1280×720px
- Viewport:
--viewport-size="1280,720"
- Style reference: matches
lab-meeting.html template in youtube-uploader
- Uses same design tokens but wider layout
Telegram Post Image
- Dimensions: 1080×1080px or 1280×720px
Generation Process
- Create HTML file at
~/Desktop/agency-{type}-cover.html
- Place speaker photo next to the HTML (same directory)
- If speaker photo is in clipboard, save with:
osascript -e 'set theFile to POSIX file "/path/to/photo.png"' -e 'set theImage to the clipboard as «class PNGf»' -e 'set fileRef to open for access theFile with write permission' -e 'write theImage to fileRef' -e 'close access fileRef'
- Render at 2x scale for crisp text using Node.js script:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: W, height: H },
deviceScaleFactor: 2
});
const page = await context.newPage();
await page.goto('file:///path/to/html');
await page.waitForTimeout(3000);
await page.screenshot({ path: '/output/path.png', fullPage: true });
await browser.close();
})();
- Review output, iterate on layout
Template Structure
<!-- Standard structure for all asset types -->
<body>
<div class="bg-grid"></div>
<div class="frame"></div>
<div class="top-bar">
<span class="top-left">{event type}</span>
<span class="top-right">{date · time}</span>
</div>
<div class="photo-area"><!-- speaker photo with effects --></div>
<div class="content">
<div class="title">{headline with .highlight spans}</div>
<div class="accent-line"></div>
<div class="speaker"><strong>{name}</strong> <span class="handle">@{handle}</span></div>
</div>
<div class="bottom-bar">
<span>{format · price}</span>
<span>agency · community</span>
</div>
</body>
Photo Effects
- Fade from left edge:
linear-gradient(to right, #0f0f0f, transparent) width 200px
- Fade from bottom:
linear-gradient(to top, #0f0f0f, transparent) height 250px
- Fade from top:
linear-gradient(to bottom, #0f0f0f, transparent) height 80px
- Scanlines:
repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px)
- Orange accent border on left edge:
linear-gradient(transparent, #e85d04, transparent) opacity 0.4
- Photo filters:
grayscale(1) contrast(1.1) brightness(0.95) (fully B&W)
- Photo positioned off-grid (partially bleeding off right edge)
Example Invocations
- "Create a cover for the AGENCY meetup with Vlad about browser automation"
- "Generate a YouTube thumbnail for tonight's meetup recording"
- "Make a Telegram announcement image for the next community event"
1---2name: agency-socials3description: Generate social media covers and assets for AGENCY Community events, meetups, and YouTube recordings. Use when creating event covers, YouTube thumbnails, or social posts for the AGENCY Community.4---5
6# AGENCY Community Social Assets Generator
7
8Generate covers and visual assets for AGENCY Community events using the established design system.
9
10## Design System
11
12### Colors
13- **Background**: `#0f0f0f`
14- **Frame/borders**: `#2a2a2a`
15- **Accent (orange)**: `#e85d04`
16- **Primary text**: `#f0f0f0`
17- **Secondary text**: `#999`
18- **Muted text**: `#555` / `#444`
19- **Grid lines**: `rgba(42,42,42,0.12)`
20
21### Typography
22- **Title/Header**: Geist Bold (700) — large, high-impact headlines
23- **Metadata (top bar, bottom bar)**: JetBrains Mono — monospace, uppercase, letter-spaced
24- **Speaker/people names**: EB Garamond — elegant serif
25- **Handles/technical labels**: JetBrains Mono — monospace, orange accent
26
27### Font loading
28```html
29<link rel="preconnect" href="https://fonts.googleapis.com">
30<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
31<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@300;400;500&display=swap&subset=cyrillic" rel="stylesheet">
32<link rel="preload" href="https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2" as="font" type="font/woff2" crossorigin>
33```
34```css
35@font-face {
36 font-family: 'Geist';
37 src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
38 font-weight: 700;
39}
40```
41
42### Layout Principles
43- **Frame**: 1px solid `#2a2a2a` border, inset 12px from edges
44- **Top bar**: JetBrains Mono, label left, date/time right (orange)
45- **Bottom bar**: JetBrains Mono, metadata left and right, uppercase
46- **Background grid**: subtle 40px grid lines
47- **Accent line**: 3px orange bar below titles
48- **Photos**: off-grid placement, fade to background on edges (left, bottom, top), slight scanline effect, fully desaturated `grayscale(1) contrast(1.1) brightness(0.95)`
49- **Text**: left-aligned, can overlap photo slightly, large and readable at thumbnail size
50
51### Minimum font sizes (must be readable at thumbnail)
52- Top/bottom bar: 13-15px
53- Speaker names: 28px+
54- Handles: 20px+
55- Titles: 62px+ (square), 76px+ (YouTube 16:9)
56
57## Asset Sizes
58
59### lu.ma Event Cover (square)
60- **Dimensions**: 800×800px
61- **Viewport**: `--viewport-size="800,800"`
62
63### YouTube Thumbnail (16:9)
64- **Dimensions**: 1280×720px
65- **Viewport**: `--viewport-size="1280,720"`
66- **Style reference**: matches `lab-meeting.html` template in youtube-uploader
67- Uses same design tokens but wider layout
68
69### Telegram Post Image
70- **Dimensions**: 1080×1080px or 1280×720px
71
72## Generation Process
73
741. Create HTML file at `~/Desktop/agency-{type}-cover.html`
752. Place speaker photo next to the HTML (same directory)
763. If speaker photo is in clipboard, save with: `osascript -e 'set theFile to POSIX file "/path/to/photo.png"' -e 'set theImage to the clipboard as «class PNGf»' -e 'set fileRef to open for access theFile with write permission' -e 'write theImage to fileRef' -e 'close access fileRef'`
774. Render at 2x scale for crisp text using Node.js script:
78```js
79const { chromium } = require('playwright');
80(async () => {
81 const browser = await chromium.launch();
82 const context = await browser.newContext({
83 viewport: { width: W, height: H },
84 deviceScaleFactor: 2
85 });
86 const page = await context.newPage();
87 await page.goto('file:///path/to/html');
88 await page.waitForTimeout(3000);
89 await page.screenshot({ path: '/output/path.png', fullPage: true });
90 await browser.close();
91})();
92```
935. Review output, iterate on layout
94
95## Template Structure
96
97```html
98<!-- Standard structure for all asset types -->
99<body>
100 <div class="bg-grid"></div>
101 <div class="frame"></div>
102 <div class="top-bar">
103 <span class="top-left">{event type}</span>
104 <span class="top-right">{date · time}</span>
105 </div>
106 <div class="photo-area"><!-- speaker photo with effects --></div>
107 <div class="content">
108 <div class="title">{headline with .highlight spans}</div>
109 <div class="accent-line"></div>
110 <div class="speaker"><strong>{name}</strong> <span class="handle">@{handle}</span></div>
111 </div>
112 <div class="bottom-bar">
113 <span>{format · price}</span>
114 <span>agency · community</span>
115 </div>
116</body>
117```
118
119## Photo Effects
120- Fade from left edge: `linear-gradient(to right, #0f0f0f, transparent)` width 200px
121- Fade from bottom: `linear-gradient(to top, #0f0f0f, transparent)` height 250px
122- Fade from top: `linear-gradient(to bottom, #0f0f0f, transparent)` height 80px
123- Scanlines: `repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px)`
124- Orange accent border on left edge: `linear-gradient(transparent, #e85d04, transparent)` opacity 0.4
125- Photo filters: `grayscale(1) contrast(1.1) brightness(0.95)` (fully B&W)
126- Photo positioned off-grid (partially bleeding off right edge)
127
128## Example Invocations
129- "Create a cover for the AGENCY meetup with Vlad about browser automation"
130- "Generate a YouTube thumbnail for tonight's meetup recording"
131- "Make a Telegram announcement image for the next community event"
glebis