Communitygithub.com

SinghChinmayy/agent-skills

使用無頭 Chrome 為 Catalyst Bridge 產生 Open Graph 圖片的技能。

agent-skills 是什麼?

此技能封裝了完整的 OG 圖片生成管線,先前儲存在 `scripts/og/` 目錄下。它提供一個可重複使用的命令,可從 Antigravity CLI 或其他自動化工具呼叫。該技能包含兩種版面模板(`template-a.html` 與 `template-b.html`)以及一個 Shell 腳本(`generate-og.sh`),它會使用無頭 Chrome 渲染模板,產生 1200×630 像素的 PNG 以及 300 像素的預覽圖,並驗證尺寸。它遵循 `DESIGN.md` 中的設計規範,包括使用 Sora 字型、標誌寬度 240 像素、標題 84 像素與網域 28 像素,並確保色彩對比度(象牙白對 Harbour Navy,14.73:1)符合要求。產生的圖片會放置在 `scripts/tmp/og/` 目錄,並可選擇性地將選定的變體複製到 `public/og-image.png`。此技能可透過環境變數 `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 – 標誌位於左上角的版面。
  • template-b.html – 標誌置中的版面。
  • generate-og.sh – Shell 腳本,使用無頭 Chrome 渲染兩個模板,建立 1200 × 630 px 的 PNG 與 300 px 的預覽圖,並驗證尺寸。

使用方式

agy run og-generator generate

此技能會將產生的 PNG 放置於 scripts/tmp/og/(與先前相同),並可選擇性地將選定的變體複製到 public/og-image.png。

設計符合性

  • 使用 Sora 字型,透過 @font-face 參考唯讀資源資料夾。
  • 標誌寬度 240 px,符合 DESIGN.md 中的空白區域規則。
  • 標題 84 px,網域 28 px – 符合視覺突出需求。
  • 顏色與對比度已根據 DESIGN.md 驗證(象牙白對 Harbour Navy,14.73:1)。

可擴展性

使用 VARIANT=A 或 VARIANT=B 執行腳本以產生特定版面,或修改此技能內的模板以因應未來品牌更新。

相關技能