Communitygithub.com

muhdaliyan/zeer

使用 Google Imagen 模型為網站、應用程式和創意專案生成高品質圖片。當建構網站、登陸頁面或任何需要自訂圖片、標誌、插圖或視覺素材的專案時，可使用此技能。

zeer 是什麼？

此技能「muhdaliyan/zeer」利用 Google Imagen 4 模型，讓 AI 代理能直接生成專業級圖片，並無縫整合到網頁專案中。它能根據文字描述生成照片般真實的圖片、標誌、插圖等，並自動儲存到專案目錄。此技能支援多種長寬比（1:1、4:3、16:9 等），且可一次生成多達 4 張圖片。它會主動詢問使用者是否需要自訂圖片，並根據專案脈絡建立詳細提示詞，遵循 Imagen 的最佳實踐。此技能也包含提示詞指南、範例和最佳實踐，幫助使用者產出高品質、符合情境的視覺素材。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/muhdaliyan/zeer/tree/HEAD/skills/image-generation
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

預覽

來自技能 README

zeer preview

說明文件

目標

使用 Google Imagen 4 模型生成專業、高品質的圖片，並將它們無縫整合到網頁專案、應用程式或創意工作流程中。自動將生成的圖片儲存到適當的專案目錄。

能力

圖片生成

  • 根據文字描述生成照片般真實的圖片
  • 為網站建立標誌、插圖和圖形
  • 生成主視覺圖片、背景和視覺素材
  • 支援多種長寬比（1:1、4:3、16:9、9:16）
  • 每次請求可生成 1-4 張圖片
  • 高解析度輸出，附帶 SynthID 浮水印

整合

  • 自動將圖片儲存到專案目錄
  • 根據內容生成適當的檔案名稱
  • 為網頁專案（HTML、React 等）建立圖片素材
  • 將圖片組織到邏輯資料夾結構中

支援的風格

  • 攝影（肖像、風景、產品照）
  • 插圖（數位藝術、素描、繪畫）
  • 標誌與品牌素材
  • UI 元素與背景
  • 歷史藝術風格（印象派、裝飾藝術等）

流程

當使用者要求網站/專案包含圖片時

  1. 確認圖片需求

    • 分析專案需求
    • 決定需要哪些圖片（主視覺、標誌、圖示、背景）
    • 詢問使用者是否希望使用 Imagen 生成 AI 圖片

  2. 確認圖片生成

    • 提供選項：「您希望我使用 Google 的 Imagen AI 模型生成自訂圖片嗎？」
    • 如果使用者同意，則繼續生成
    • 如果使用者拒絕，則使用佔位圖片或略過

  3. 生成圖片

    • 根據專案脈絡建立詳細、具體的提示詞
    • 為每個使用場景選擇適當的長寬比
    • 使用 generate_image 工具生成圖片

  4. 儲存與整合

    • 將圖片儲存到專案目錄（例如 website-name/images/）
    • 使用描述性的檔案名稱（例如 hero-background.png、logo.png）
    • 更新 HTML/CSS/React 程式碼以引用生成的圖片
    • 在程式碼中提供圖片路徑

直接圖片生成請求

當使用者直接要求生成圖片時：

  1. 了解需求

    • 從使用者請求中提取主體、風格和脈絡
    • 決定適當的長寬比
    • 釐清任何不明確的細節

  2. 建立詳細提示詞

    • 遵循 Imagen 最佳實踐建立全面的提示詞
    • 包含主體、脈絡、風格和品質修飾詞
    • 保持提示詞清晰且具描述性

  3. 生成與儲存

    • 使用 generate_image 工具和精心設計的提示詞
    • 儲存到適當的目錄
    • 向使用者顯示儲存的圖片路徑

Imagen 提示詞指南

提示詞結構

[風格] 的 [主體] [脈絡/背景] [其他細節]

攝影提示詞

  • 以「一張照片…」或「一張攝影作品…」開頭
  • 添加相機細節：「35mm 肖像」、「廣角 10mm」、「微距鏡頭 60mm」
  • 包含光線說明：「黃金時刻」、「戲劇性光線」、「自然光」
  • 添加底片類型：「黑白底片」、「黑色電影風格」、「拍立得」

插圖提示詞

  • 指定藝術風格：「數位藝術」、「水彩畫」、「鉛筆素描」
  • 參考藝術運動：「印象派風格」、「裝飾藝術」、「極簡主義」
  • 添加品質修飾詞：「高度細節」、「專業」、「獲獎等級」

標誌提示詞

  • 使用格式：「一個 [風格] 的標誌，給 [行業] 公司，置於純色背景上。包含文字 [名稱]。」
  • 風格：極簡、現代、傳統、幾何、抽象
  • 文字限制在 25 個字元以內

品質修飾詞

添加以下詞彙以獲得更好效果：

  • 「高度細節」
  • 「專業」
  • 「獲獎等級」
  • 「高解析度」
  • 「照片般真實」
  • 「4K 品質」

長寬比

根據使用場景選擇：

  • 1:1（正方形） - 社群媒體、個人資料圖片、圖示
  • 4:3（全螢幕） - 一般攝影、產品照
  • 3:4（直式） - 垂直佈局、行動裝置螢幕
  • 16:9（寬螢幕） - 主視覺圖片、橫幅、風景照
  • 9:16（直式） - 行動優先設計、限時動態

工具：generate_image

重要：這是一個示範用的模擬工具。實際實作需要：

  1. 具備 Imagen 存取權限的 Google Cloud API 金鑰
  2. 整合 google.genai Python 函式庫
  3. 正確的 API 設定

使用方式

generate_image(
    prompt="一個科技新創公司的現代極簡標誌，置於純藍色背景上",
    aspect_ratio="1:1",
    number_of_images=1,
    output_dir="website/images",
    filename="logo.png"
)

參數

  • prompt（必填）：圖片的詳細文字描述
  • aspect_ratio（選填）："1:1"、"4:3"、"3:4"、"16:9"、"9:16"（預設："1:1"）
  • number_of_images（選填）：1-4（預設：1）
  • output_dir（選填）：圖片儲存目錄（預設："generated_images"）
  • filename（選填）：自訂檔案名稱（預設：自動生成）

範例

範例 1：網站主視覺圖片

使用者：「為一家咖啡店建立登陸頁面」

AI：「我將為您的咖啡店建立一個登陸頁面。您希望我使用 Google 的 Imagen AI 生成自訂主視覺圖片嗎？」

使用者：「好，請生成」

AI：[使用以下提示詞生成圖片]
"一張專業攝影作品，舒適的咖啡店內部，溫暖光線，木質桌子，背景有濃縮咖啡機，誘人氣氛，16:9 長寬比"

[儲存至 coffee-shop/images/hero-background.jpg]
[更新 HTML 以使用該圖片]

範例 2：標誌生成

使用者：「為我的健身應用程式 FitTrack 生成一個標誌」

AI：[使用以下提示詞生成]
"一個健身公司的現代極簡標誌，置於純色背景上。包含文字 FitTrack。幾何形狀，充滿活力，專業"

[儲存至 generated_images/fittrack-logo.png]

範例 3：多個素材

使用者：「建立一個作品集網站並為其生成圖片」

AI：「我將為您建立作品集網站。您希望我使用 Imagen AI 生成自訂圖片（主視覺背景、個人資料照片佔位圖、專案縮圖）嗎？」

使用者：「好，請生成」

AI：[生成多張圖片]
1. 主視覺背景：「抽象幾何圖案，現代，專業，柔和色彩，16:9」
2. 專案縮圖 1：「極簡科技插圖，乾淨線條，藍色和白色，4:3」
3. 專案縮圖 2：「創意設計模型，現代介面，專業，4:3」

[全部儲存至 portfolio/images/]
[更新 HTML/CSS 以包含圖片參照]

最佳實踐

  1. 務必徵求許可 - 在生成圖片前，詢問使用者是否需要 AI 生成的圖片
  2. 脈絡感知提示詞 - 調整提示詞以符合專案的風格和目的
  3. 選擇適當長寬比 - 選擇符合使用場景的長寬比
  4. 使用描述性檔案名稱 - 使用清晰、具語意的檔案名稱（如 hero-bg.png，而非 image1.png）
  5. 組織化結構 - 將圖片儲存在邏輯目錄中（如 images/、assets/ 等）
  6. 品質優先 - 使用品質修飾詞以獲得專業成果
  7. 必要時疊代 - 如果使用者不滿意，調整提示詞並重新生成

與前端專案的整合

使用此技能建構網站時：

  1. 首先建立圖片目錄
  2. 在編寫 HTML/CSS 之前生成圖片
  3. 在程式碼中使用相對路徑：<img src="images/hero.jpg">
  4. 添加描述生成圖片的替代文字
  5. 考量響應式圖片，使用多種尺寸

限制

  • Imagen 僅支援英文提示詞
  • 圖片中的文字限制在 25 個字元以內
  • 生成的圖片包含 SynthID 浮水印
  • 需要 Google Cloud API 存取權限
  • 根據 API 方案有速率限制

備註

此技能最適合與以下技能搭配使用：

  • frontend-design 技能以建立完整網站
  • code-helper 技能以設定專案
  • file-operations 技能以組織素材

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community