部落格封面圖片生成技能
此技能賦予 AI 代理人使用 blog-cover-image-cli 產生美觀、極簡、技術風格的部落格封面圖片的能力。此 CLI 工具整合 Gemini 3.1 Flash Image Preview，能自動抓取指定網域的官方品牌 Logo，使用本地端美學參考圖片，並啟用 Google Search Grounding 來注入即時上下文。
設定與配置
代理人事前準備：
在使用此工具前，請確認已安裝。如果 blog-cover-cli --help 執行失敗，請透過以下指令進行全域安裝：
npm install -g blog-cover-image-cli
如果使用者要求你產生圖片但你尚未設定 API Key，你必須先使用 Gemini API Key 來配置 CLI。此 CLI 會透過 conf 套件安全儲存這些資訊。
# 1. 設定你的 Gemini API Key（圖片生成必備）
npx -p blog-cover-image-cli blog-cover-cli config set-key <YOUR_GEMINI_API_KEY>
# 2. 設定你的 Brandfetch Client ID（用於取得高解析度 Logo）
npx -p blog-cover-image-cli blog-cover-cli config set-brandfetch-id <YOUR_BRANDFETCH_CLIENT_ID>
# 檢查你的金鑰（會被遮蔽處理）
npx -p blog-cover-image-cli blog-cover-cli config get-key
npx -p blog-cover-image-cli blog-cover-cli config get-brandfetch-id
使用方法：產生圖片
當使用者要求產生封面圖片（例如：「為我關於 Vercel v0 的部落格建立一張封面圖」）時，你應使用 generate 指令。
npx -p blog-cover-image-cli blog-cover-cli generate -t "部落格文章標題" -l "example.com"
參數
-t, --title <文字>：(必填) 要在封面圖片上顯示的標題文字。避免使用過長的標題（視覺上保持在三行文字以內）。-l, --logo <網域>：(選擇性但建議填寫) 要抓取品牌 Logo 的網域（例如vercel.com、google.com、cursor.com）。CLI 會自動將 WebP/SVG/AVIF 格式轉換為相容的 PNG。-o, --output <路徑>：(選擇性) 產生的圖片要儲存到的檔案路徑。如果省略，CLI 會自動將圖片儲存到目前工作目錄下的output/資料夾（例如./output/vercel-cover.png）。
範例
範例 1：Cursor
npx -p blog-cover-image-cli blog-cover-cli generate -t "為什麼 Cursor 是終極 AI 程式碼編輯器" -l "cursor.com"
範例 2：Lovable
npx -p blog-cover-image-cli blog-cover-cli generate -t "用 Lovable 在幾分鐘內打造應用程式" -l "lovable.dev"
範例 3：自訂輸出路徑
npx -p blog-cover-image-cli blog-cover-cli generate -t "掌握 React 2026" -l "reactjs.org" -o "./assets/react-cover.png"
底層運作方式
身為代理人，你應該清楚 CLI 在背後做了哪些事，以便向使用者說明：
- Logo 取得：從 Brandfetch 取得 Logo，並透過 sharp 進行處理。
- 參考圖片：從其
examples/目錄載入策展後的參考圖片，確保輸出結果始終保持簡潔、白色背景搭配粗體字型的風格。 - 即時查詢：啟用
googleSearch工具，因此如果標題與近期事件相關，Gemini 可在產生圖片前即時查詢資料。 - 文字強制：使用印刷排版規則，強制 Gemini 輸出確切的標題字串。
邊際案例 / 問題排除
- 缺少 API Key 錯誤：如果看到 API Key 的錯誤訊息，請執行
config set-key指令。 - Logo 取得警告：如果 CLI 顯示
Warning: Could not fetch logo，仍會繼續產生圖片，只是不會帶有 Logo。你不需要中斷或停止。 - 嚴格模態限制：由於此工具使用 Gemini 的實驗性圖片模型，有時可能會因嚴格的安全過濾器導致生成失敗。若發生此情況，請通知使用者。