agency-socials

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

AGENCY Community Social Assets Generator

AGENCY社区社交视觉素材生成规范

Generate covers and visual assets for AGENCY Community events using the established design system.

使用既定设计系统为AGENCY社区活动生成封面及视觉素材。

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)
```

背景色：
```
#0f0f0f
```
边框/框架：
```
#2a2a2a
```
强调色（橙色）：
```
#e85d04
```
主文本色：
```
#f0f0f0
```
次要文本色：
```
#999
```
弱化文本色：
```
#555
```
/
```
#444
```
网格线：
```
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

标题/页眉：Geist Bold（字重700）——大尺寸、高冲击力标题
元数据（顶部栏、底部栏）：JetBrains Mono——等宽字体、大写、字符间距加宽
演讲者/人物姓名：EB Garamond——优雅衬线字体
账号名/技术标签：JetBrains Mono——等宽字体、橙色强调色

Font loading

字体加载

html

<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>

css

@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;
}

html

<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>

css

@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

框架：1px实线
```
#2a2a2a
```
边框，距离边缘内缩12px
顶部栏：使用JetBrains Mono字体，左侧为标签，右侧为日期/时间（橙色）
底部栏：使用JetBrains Mono字体，左右两侧放置元数据，全部大写
背景网格：细微的40px间距网格线
强调线：标题下方3px橙色线条
图片：偏离网格布局，边缘（左、下、上）渐隐至背景，轻微扫描线效果，完全去色
```
grayscale(1) contrast(1.1) brightness(0.95)
```
文本：左对齐，可轻微覆盖图片，在缩略图尺寸下仍清晰可读

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)

顶部/底部栏：13-15px
演讲者姓名：28px及以上
账号名：20px及以上
标题：方形尺寸62px及以上，YouTube 16:9尺寸76px及以上

Asset Sizes

素材尺寸

lu.ma Event Cover (square)

lu.ma活动封面（方形）

Dimensions: 800×800px
Viewport:
```
--viewport-size="800,800"
```

尺寸：800×800px
视口参数：
```
--viewport-size="800,800"
```

YouTube Thumbnail (16:9)

YouTube缩略图（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

尺寸：1280×720px
视口参数：
```
--viewport-size="1280,720"
```
样式参考：与youtube-uploader中的
```
lab-meeting.html
```
模板一致
使用相同设计变量，但布局更宽

Telegram Post Image

Telegram帖子图片

Dimensions: 1080×1080px or 1280×720px

尺寸：1080×1080px 或 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

在
```
~/Desktop/agency-{type}-cover.html
```
路径创建HTML文件
将演讲者图片放置在HTML文件同一目录下

如果演讲者图片在剪贴板中，使用以下命令保存：

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'

使用Node.js脚本以2倍比例渲染，确保文本清晰：

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();
})();

检查输出结果，调整布局直至满意

Template Structure

模板结构

html

<!-- 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>

html

<!-- 所有素材类型的标准结构 -->
<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"><!-- 带效果的演讲者图片 --></div>
  <div class="content">
    <div class="title">{包含.highlight标签的标题}</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)

左侧边缘渐隐：

linear-gradient(to right, #0f0f0f, transparent)

，宽度200px

底部边缘渐隐：

linear-gradient(to top, #0f0f0f, transparent)

，高度250px

顶部边缘渐隐：

linear-gradient(to bottom, #0f0f0f, transparent)

，高度80px

扫描线：

repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px)

左侧边缘橙色强调边框：

linear-gradient(transparent, #e85d04, transparent)

，透明度0.4

图片滤镜：

grayscale(1) contrast(1.1) brightness(0.95)

（完全黑白）

图片偏离网格布局（部分超出右侧边缘）

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"

"为AGENCY线下聚会制作一张关于浏览器自动化的封面，演讲者是Vlad"
"为今晚的聚会录制内容生成YouTube缩略图"
"为下一场社区活动制作Telegram公告图片"