agency-socials

Name: agency-socials
Author: glebis

github.com/glebis设计与 UI40185 次安装1 天前更新

代码仓库

关于 agency-socials

用于为 AGENCY Community 制作活动封面和社交媒体视觉素材的设计技能。它采用既定视觉规范，并提供适用于活动平台、YouTube 和 Telegram 的版式与尺寸。

主要功能

01AGENCY Community 设计规范
02方形活动封面版式
0316:9 YouTube 缩略图版式
04Telegram 帖子图片尺寸
05照片效果与布局指引

适用场景

01制作 lu.ma 活动封面
02设计聚会录制视频缩略图
03制作 Telegram 活动预告图片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/glebis/claude-skills --skill agency-socials

安装后在 Claude Code 中输入/agency-socials确认已加载。

详细介绍

AGENCY 社区社交媒体素材生成器

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

设计系统

颜色

背景：#0f0f0f
边框：#2a2a2a
强调色（橙色）：#e85d04
主要文本：#f0f0f0
次要文本：#999
弱化文本：#555 / #444
网格线：rgba(42,42,42,0.12)

字体排版

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

字体加载

<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/[email protected]/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/[email protected]/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
}

布局原则

边框：1px 实线 #2a2a2a，距离边缘内缩 12px
顶部栏：JetBrains Mono，左侧为标签，右侧为日期/时间（橙色）
底部栏：JetBrains Mono，左右两侧为元数据，均使用大写
背景网格：低调的 40px 网格线
强调线：标题下方的 3px 橙色条
照片：错开网格放置，边缘（左侧、底部、顶部）淡出至背景，略带扫描线效果，完全去色 grayscale(1) contrast(1.1) brightness(0.95)
文本：左对齐，可与照片略微重叠，在缩略图尺寸下也要清晰易读

最小字号（在缩略图尺寸下必须清晰可读）

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

素材尺寸

lu.ma 活动封面（正方形）

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

YouTube 缩略图（16:9）

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

Telegram 帖子图片

尺寸：1080×1080px 或 1280×720px

生成流程

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

检查输出结果，并迭代调整布局

模板结构


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

照片效果

左侧边缘渐隐：宽度为 200px 的 linear-gradient(to right, #0f0f0f, transparent)
底部渐隐：高度为 250px 的 linear-gradient(to top, #0f0f0f, transparent)
顶部渐隐：高度为 80px 的 linear-gradient(to bottom, #0f0f0f, transparent)
扫描线：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)（完全黑白）
照片错开网格放置（右侧部分溢出边缘）

示例请求

“为 AGENCY 聚会制作一张关于 Vlad 和浏览器自动化的封面”
“为今晚的聚会录像生成一张 YouTube 缩略图”
“为下一场社区活动制作一张 Telegram 宣传图片”

支持 Markdown

登录后评论