Communitygithub.com

SinghChinmayy/agent-skills

使用无头 Chrome 为 Catalyst Bridge 生成 Open Graph 图片的技能。

agent-skills 是什么?

此技能封装了完整的 OG 图片生成管线,这些管线之前存储在 `scripts/og/` 中。它提供了一个可复用的命令,可以从 Antigravity CLI 或其他自动化工具中调用。该技能使用无头 Chrome 渲染两种布局模板(`template-a.html` 和 `template-b.html`),生成 1200×630 像素的 PNG 文件和 300 像素的预览图,并验证图片尺寸。生成的 PNG 文件会放置在 `scripts/tmp/og/` 目录下,并可选地将选中的变体复制到 `public/og-image.png`。该技能遵循设计规范,包括使用 Sora 字体、Logo 宽度为 240 像素、标题字号为 84 像素、域名字号为 28 像素,并确保颜色对比度达到 14.73:1。通过设置 `VARIANT=A` 或 `VARIANT=B` 环境变量,可以生成特定布局,便于未来品牌更新时修改模板。

兼容平台~Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add https://github.com/SinghChinmayy/agent-skills/tree/HEAD/skills/frontend/og-generator

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

概述

此技能封装了之前存储在 scripts/og/ 中的整个 OG 图片生成管线。它提供了一个可复用的命令,可以从 Antigravity CLI 或其他自动化工具中调用。

文件

  • template-a.html – 左上角带有 Logo 的布局。
  • template-b.html – 居中带有 Logo 的布局。
  • generate-og.sh – Shell 脚本,使用无头 Chrome 渲染两个模板,创建 1200×630 像素的 PNG 文件和 300 像素的预览图,并验证图片尺寸。

用法

agy run og-generator generate

该技能生成的 PNG 文件将放置在 scripts/tmp/og/ 目录下(与之前相同),并可选地将选中的变体复制到 public/og-image.png。

设计合规性

  • 通过 @font-face 引用只读资源文件夹中的 Sora 字体。
  • Logo 宽度为 240 像素,遵循 DESIGN.md 中的留白规则。
  • 标题字号为 84 像素,域名字号为 28 像素,符合视觉突出要求。
  • 颜色和对比度已根据 DESIGN.md 进行验证(象牙白配 Harbour Navy,对比度为 14.73:1)。

可扩展性

运行脚本时设置 VARIANT=A 或 VARIANT=B 可生成特定布局,或者修改此技能中的模板以进行未来品牌更新。

相关技能