og-image

OG 圖片

本技能使用的所有檔案都位於 SKILL.md 同層的資料夾中，路徑均以該資料夾為基準。除了自身資料夾的內容，不需依賴其他技能或資料夾，無需四處查找。除非使用者指定其他位置，所有產出檔案一律儲存在當前專案的 out/og-image/ 目錄下。

一張分享卡片，要在使用者滑過連結的半秒內成功推銷產品。核心公式：品牌標誌、一行短標題、以及真實產品畫面，底部裁切。除此之外，無需其他元素。

參考風格（請見 references/ 資料夾）：

• control-panel.png — 品牌標誌置中於頂部，一行極大標題，應用程式視窗（側邊欄、頁首、列表）約從畫面三分之一高度開始，底部超出畫面，右側浮動一個細節面板。
• pulse.png — 使用 Pulse 真實佈局構成的相同結構：側邊欄包含專案圖示、搜尋頁首、專案頁面含分頁標籤、Feed 列以及活動側欄。

規則

1. 必須是真實產品，絕不虛構。 畫面必須呈現應用程式當前發佈的模樣。只能使用程式碼中確實存在的畫面、分頁、標籤、狀態與功能。即使登錄頁面的文案提到了某些功能，但應用程式尚未實作，也絕不能使用。如果網站上的行銷展示包含了應用程式沒有的功能，請勿複製該展示。
2. 訊息來源於當前網站。 除非使用者提供了標題，否則應從即時的首頁（Hero 區域、Demo 資料）中取得產品訴求與範例內容。若使用者提供了標題，請逐字使用（若是陳述性標題，結尾的句點是可以接受的；如有疑問請先詢問）。
3. 畫面需看起來像真實運作中的應用，而非生成的樣板。 示範資料必須看起來像真實團隊的一週：
   • 使用看起來真實的人物，若專案本身附有頭像照片（例如 public/landing/people ），則優先使用；使用使用者指定的名稱。
   • 實體需有圖示或圖片，而非純文字（例如專案頭像應使用帶有產品主題色調的彩色圖示區塊）。
   • 活動圖表、圖表與計數需符合真實節奏：週一至週五忙碌且有變化，週末大多空白但有零星活動，當週只顯示到今日，月份標籤在月份實際開始的地方出現。絕不能出現均勻或明顯重複的模式。
   • 使用應用程式自身的格式來顯示相對時間、ID、分支與狀態。
4. 文案主導。 標題必須是卡片上最大、最暗的元素，且在縮圖尺寸（1200px 卡片上約 60–72px）時仍清晰可讀。單行顯示，字距緊湊，使用產品的顯示字型。產品畫面位於標題下方，且絕不與標題重疊。
5. 僅使用產品自身的樣式。 背景、字型、顏色、圓角、陰影均來自專案的設計 Token。標題後方可以使用非常淡的、帶有強調色調的發光效果；禁止使用新的色板、漸層或素材圖片。

步驟

1. 探索

• 閱讀首頁 / 登錄頁元件和 README，了解產品訴求、產品名稱與範例內容。
• 找出真正的應用程式外殼（佈局、側邊欄、頁首）與主要畫面（路由 + 元件）。記錄確切的類別名稱、文字大小、分頁標籤、狀態徽章的色調、必須避免的空狀態 / 載入狀態。
• 尋找設計 Token（全域 CSS / 主題）、字型、圖示庫、品牌標誌元件、頭像素材。
• 檢查是否已存在相關內容：現有的 OG 路由 / 圖片、根目錄或頁面 head 中的 og:image Meta 標籤、WEB_URL / 網站 URL 設定。

2. 建立渲染路由

將卡片作為專案技術棧中的一個真實頁面來構建，以便使用實際的字型、Token 和元件（非手繪 SVG，也非含有私人資料的正式環境截圖）：

• 一個路由，例如 /og/<page> （TanStack: routes/og.<page>.tsx，Next: app/og/<page>/page.tsx 等），加上 noindex，且不包含應用程式的外殼。
• 一個元件（例如，放在它所屬的登錄頁旁邊的 og-image.tsx），用於渲染一個固定的 1200×630 框架，根元素上帶有 data-og-frame 屬性，並設定 overflow-hidden。
• 佈局：
  • 品牌標誌置中，距頂部約 48px。
  • 標題在其下方居中。
  • 應用程式視窗從距頂部約 200–240px、距左側約 60px 處開始，寬度大於剩餘空間，以便從右側或底部邊緣超出。上邊角為圓角，帶有細邊框，以及產品的陰影。
• 在視窗內部，以靜態複本的方式重建真實畫面：外殼（側邊欄 + 頁首）加上主要畫面。從真實元件複製標記和類別；在標頭註解中註明原始檔案來源。僅使用靜態屬性，不得有任何查詢或計時器。
• 要將完整尺寸的佈局放入卡片，請以自然寬度（例如 1200px）佈局視窗，然後使用 zoom（0.85–0.95）縮小。zoom 也會縮放同一元素上的 top / left 屬性，因此請將目標偏移量除以縮放倍數。
• 當登錄頁的現有示範元件（頭像、來源徽章、熱度顏色）與真實應用相符時，請加以重用。

3. 擷取

啟動開發伺服器（或重用現有的），然後執行：

node <此技能資料夾>/scripts/capture.mjs \
  --url http://localhost:<port>/og/<page> \
  --out out/og-image/og-<page>.png

上述指令會開啟一個 1200×630 的視口（2x 解析度 → 2400×1260），啟用減少動畫模式，隱藏開發者工具疊加層（TanStack/Next/Vite/Astro 開發者工具、提示訊息），等待字型載入完成，並對 [data-og-frame] 元素進行截圖。對於其他疊加層可使用 --hide 參數，若圖片載入緩慢則可使用 --wait 參數。

注意事項：

• 埠號衝突： 檢查該埠號是否確實服務於此應用程式（使用 lsof -iTCP:<port> -sTCP:LISTEN 指令，並查看頁面標題）。同一個埠號上的 [::1] 主機可能會有另一個本機應用程式靜默回應。如有需要，請選擇一個空閒的埠號。
• 從代理會話啟動的背景開發伺服器會隨著會話結束而終止。如果使用者需要持續預覽，請使用分離模式啟動（nohup … & disown）。
• 不要使用寬泛的 :has() / body > div 規則來隱藏疊加層；這可能會意外隱藏應用程式的根元素，並導致截圖超時。

4. 檢視結果

開啟 PNG 檔案，像設計師一樣進行檢查：以全尺寸檢視，並想像它在 500px 寬度下的樣子：

• 標題一行顯示，無任何元素與其重疊，視窗上方留有足夠空間。
• 無開發者工具徽章、游標、提示訊息、載入骨架或未完成的動畫。
• 無尷尬的裁切（例如某個標籤在側邊緣被切掉一半，或某個徽章只顯示一半）。底部 / 右側的超出是預期的；視窗的左邊和上邊緣必須完整可見。
• 資料看起來真實（規則 3）。反覆調整直到符合要求，然後將最終的 PNG 複製到 public/ 目錄中。

5. 嵌入 Meta 標籤

在該圖片所屬的頁面上（或全站卡片則在根目錄）：

• og:type、og:title、og:description
• og:image — 絕對 URL，從網站 URL 設定構建（例如 ${WEB_URL}/og-<page>.png）
• og:image:width 2400、og:image:height 1260、og:image:alt （描述標題以及產品截圖所顯示的內容）
• twitter:card = summary_large_image、twitter:title、twitter:description、twitter:image

驗證這些標籤確實出現在伺服器回應的 HTML 中（使用 curl -s <page> | grep og:image），並且 PNG 的 URL 返回 200 image/png。

輸出

告知使用者：

• PNG 檔案以及渲染路由 / 元件的存放位置
• 如何重新生成：上述的擷取指令
• 圖片顯示了什麼內容，以及它複製了哪些真實畫面 / 元件
• 哪些部分並非來自真實資料（例如範例名稱、專案），以及網站 URL 環境變數必須指向正式環境域名，爬蟲才能正確解析該圖片