如何用 baoyu-skills 在 WordPress 批次產生高質感產品圖
baoyu-skills 產生產品圖：用 AI 快速製作 WordPress 商品視覺素材
在經營 WordPress 網站、WooCommerce 商店或內容型部落格時，產品圖往往是最花時間、也最影響轉換率的素材之一，過去要做一張產品主視覺，可能需要攝影、修圖、排版、設計師協作，甚至還要為不同平台另外裁切尺寸。
如果你的網站需要大量商品圖、文章封面圖、社群圖卡、資訊圖表，baoyu-skills 會是一個很適合導入的 AI 圖像工作流工具。
baoyu-skills 是由 Jim Liu 寶玉分享的 AI Agent 技能集，可用於 Claude Code、Codex 等 Agent 環境，協助內容創作者與網站經營者更有效率地產生圖片、文章、圖卡、簡報、資訊圖與多種發布素材。
官方 GitHub：
https://github.com/jimliu/baoyu-skills
下載與更新：
https://github.com/JimLiu/baoyu-skills/releases
為什麼 WordPress 網站需要 baoyu-skills？
WordPress 的優點是彈性高，但內容經營到一定規模後，最常卡住的地方不是文章本身，而是「圖片素材」。
常見情境包含：
- WooCommerce 商品需要主圖、情境圖、橫幅圖
- 部落格文章需要 SEO 封面圖
- 產品教學需要流程圖或資訊圖表
- 社群貼文需要小紅書、Instagram、Facebook 圖卡
- 多語系網站需要同一張圖的不同語言版本
- 技術產品需要規格圖、爆炸圖、比較圖或視覺說明
baoyu-skills 的價值在於，它不是單純「叫 AI 畫一張圖」，而是把常見內容工作拆成多個 Skill，讓你可以針對不同用途選擇合適的圖片生成方式。
baoyu-skills 的主要特色
1. 可產生多種產品視覺素材
baoyu-skills 不是只有單一圖片生成指令，而是包含多種與內容、圖片、圖表相關的技能。
適合用在：
- 產品封面圖
- 商品情境圖
- 文章插圖
- 資訊圖表
- 社群圖卡
- 教學流程圖
- 知識漫畫
- 簡報圖片
- 商品介紹圖
對 WordPress 經營者來說，這代表同一份產品資料可以延伸成不同的行銷素材。
2. 適合產品圖與文章封面圖
如果你正在寫一篇產品介紹文章，可以使用 baoyu-cover-image 產生文章封面，也可以使用 baoyu-image-gen 或 baoyu-imagine 產生更自由的商品情境圖。
例如：
- 科技產品：可產生冷色系、金屬感、未來感的產品主視覺
- 美妝商品：可產生柔光、乾淨背景、生活情境的商品照
- 食品商品：可產生木質桌面、自然光、手作感的商品圖
- 教育服務：可產生圖解式封面與資訊圖
- SaaS 產品：可產生 UI mockup、介面展示與功能圖解
3. 支援圖表與流程類型內容
遇到流程、比較、架構、教學步驟時，建議不要只用文字說明，可以改用「創作圖像」的方式產生視覺圖。
例如這篇文章中的工作流程可視覺化如下：
這類流程非常適合做成資訊圖，放在 WordPress 文章中，不但可以增加停留時間，也能讓讀者更快理解工具的實際用途。
4. 可與 WordPress 內容流程整合
baoyu-skills 本身不是 WordPress 外掛，而是 AI Agent 的技能集。實際用法通常是先在本機或開發環境產生圖片，再把圖片上傳到 WordPress 媒體庫。
建議流程如下：
- 在 Claude Code、Codex 或其他支援 Skills 的 Agent 中安裝 baoyu-skills
- 準備商品描述、文章 Markdown 或產品規格
- 使用對應指令產生圖片
- 檢查圖片比例、文字、品牌色與可讀性
- 將圖片輸出為 WebP、PNG 或 JPG
- 上傳到 WordPress 媒體庫
- 套用到文章特色圖片、WooCommerce 商品圖、Elementor 區塊或首頁 Banner
如果你的網站使用 Elementor，也可以直接把產出的圖片放進 Elementor 的 Image、Hero、CTA、Gallery 或 Loop Grid 區塊中。
安裝與下載
官方建議安裝方式如下：
npx skills add jimliu/baoyu-skills
官方 GitHub：
https://github.com/jimliu/baoyu-skills
下載與版本更新：
https://github.com/JimLiu/baoyu-skills/releases
如果你使用 Claude Code，也可以在 Agent 中加入 marketplace：
/plugin marketplace add JimLiu/baoyu-skills
接著安裝：
/plugin install baoyu-skills@baoyu-skills
官方文件提醒，baoyu-skills 內含多個 Skill，實務上建議按需安裝，不一定要一次載入所有技能，避免佔用過多 Agent 上下文。
關鍵指令整理
以下是用於產品圖與 WordPress 內容製作時最常用的指令方向。
1. 產生文章封面圖
/baoyu-cover-image path/to/article.md
指定風格：
/baoyu-cover-image path/to/article.md --style blueprint
指定比例：
/baoyu-cover-image path/to/article.md --aspect 16:9
不要加標題文字：
/baoyu-cover-image path/to/article.md --no-title
適合用途：
- WordPress 文章特色圖片
- 部落格封面
- 首頁文章列表縮圖
- SEO 文章主視覺
2. 產生產品情境圖
/baoyu-image-gen "黑色無線耳機，霧面金屬質感，放在白色桌面上，自然柔光，商業產品攝影風格"
適合用途：
- WooCommerce 商品主圖
- 商品詳情頁情境圖
- 首頁商品橫幅
- 廣告素材
3. 產生自由風格產品圖
/baoyu-imagine "一款高階 AI 筆電放在現代辦公桌上，背景有柔和光影，科技感，高級商業攝影"
適合用途：
- 品牌形象圖
- 活動視覺
- 產品概念圖
- Landing Page 主視覺
4. 產生資訊圖表
/baoyu-infographic path/to/content.md
指定版型與風格：
/baoyu-infographic path/to/content.md --layout flow --style technical-schematic
適合用途：
- 產品規格比較
- 教學步驟
- 服務流程
- 軟體架構圖
- WordPress 教學文章配圖
5. 產生社群圖卡
/baoyu-xhs-images posts/product-intro.md
指定風格：
/baoyu-xhs-images posts/product-intro.md --style notion
指定流程版型：
/baoyu-xhs-images posts/product-intro.md --layout flow
適合用途：
- 小紅書圖卡
- Instagram 輪播圖
- Facebook 貼文圖
- WordPress 文章延伸社群素材
6. 圖片壓縮與最佳化
/baoyu-compress-image product-image.png
適合用途：
- 將圖片轉為 WebP
- 壓縮 WordPress 圖片
- 降低網頁載入時間
- 改善 Core Web Vitals
WordPress 使用場景範例
場景一：WooCommerce 商品頁
你可以先準備商品描述：
產品名稱：黑色真無線藍牙耳機 特色：降噪、長續航、霧面金屬外殼、適合通勤與辦公 圖片風格：高級商業攝影、白色背景、柔和陰影、乾淨構圖
接著用 baoyu-skills 產生：
- 商品主圖
- 生活情境圖
- 功能賣點圖
- 規格比較圖
- 社群推廣圖
最後將圖片上傳到 WordPress 媒體庫，套用到 WooCommerce 商品圖集。
場景二：WordPress 部落格文章
如果你要寫一篇「如何挑選無線網卡」的文章，可以使用：
/baoyu-cover-image article.md --style blueprint --aspect 16:9
再使用：
/baoyu-infographic article.md --layout comparison --style technical-schematic
這樣可以同時產生文章封面與比較型資訊圖，讓文章更適合 SEO 排名與社群分享。
場景三：Elementor 首頁橫幅
如果你使用 Elementor 製作首頁，可以先用 baoyu-skills 產生 16:9 或 21:9 的 Hero Banner。
提示詞範例：
請產生一張 WordPress 首頁 Hero Banner： 主題是 AI 產品圖自動生成， 畫面包含商品攝影棚、AI 工作流、WordPress 網站介面， 風格為現代、乾淨、科技感、商業級視覺， 不要過多文字，保留右側放標題的空間。
產出後可放進 Elementor 的 Hero Section，搭配標題、按鈕與 CTA。
baoyu-skills 產品圖工作流程
這樣做的好處是，每次製作商品頁時，不必重新思考整套流程，只要替換產品資料與風格設定，就能快速產出一致的視覺素材。
產品圖提示詞範例
科技產品
黑色 USB WiFi 網路卡，雙天線，放在乾淨白色桌面上，背景有筆電與柔和光影，科技感，高級商業攝影，清晰產品細節，適合電商商品頁
美妝產品
玻璃精華液瓶，琥珀色瓶身，放在大理石平台上，旁邊有綠色植物與柔和自然光，乾淨高級，美妝產品攝影風格
食品產品
手工餅乾禮盒，木質桌面，自然光，溫暖色調，旁邊有咖啡杯與包裝紙，適合品牌形象與電商頁面
軟體服務
AI 批改系統的產品主視覺，畫面包含老師桌面、筆電介面、文件上傳、AI 分析圖示，明亮乾淨，專業 SaaS 風格
使用 baoyu-skills 時要注意什麼？
1. 不要只寫「幫我產生產品圖」
好的提示詞應該包含：
- 產品名稱
- 產品材質
- 使用場景
- 光線
- 背景
- 圖片比例
- 風格
- 不要出現的元素
例如：
請產生一張 16:9 商品橫幅圖： 產品是一台銀色 AI 筆電， 放在乾淨的辦公桌上， 背景有柔和藍色光影與抽象 AI 線條， 風格為高級科技產品攝影， 不要出現人物、浮水印、亂碼文字。
2. 產品圖要保留 WordPress 版面空間
如果圖片要放在文章封面或首頁 Banner，建議在提示詞中加上：
左側保留標題文字空間
或：
右側保留 CTA 按鈕空間
這樣後續在 WordPress、Elementor 或區塊編輯器中排版會更方便。
3. 圖片要檢查文字
AI 圖片中的文字有時會出現亂碼，因此若是商品圖、封面圖或廣告圖，建議分成兩階段：
- 先產生無文字圖片
- 再用 WordPress、Canva、Photoshop 或 Elementor 加上正式文字
這樣可以避免圖片中文字錯誤影響品牌專業度。
4. 圖片上傳 WordPress 前要壓縮
建議輸出後轉成 WebP，並控制圖片尺寸。
常用建議：
- 文章封面：1200 × 675
- 商品圖：1200 × 1200
- 首頁 Banner：1920 × 800
- 社群圖卡：1080 × 1350
- 小紅書圖卡：1080 × 1440
圖片壓縮後再上傳，可改善網站速度與 SEO 表現。
適合誰使用？
baoyu-skills 特別適合以下使用者：
- WordPress 網站經營者
- WooCommerce 電商賣家
- 部落格作者
- SEO 內容團隊
- AI 工具玩家
- 小型品牌主
- 產品行銷人員
- 技術產品代理商
- 需要大量多語系素材的網站團隊
如果你經常需要為不同文章、商品或社群平台製作圖片，baoyu-skills 可以讓你的視覺內容生產流程更標準化。
近期留言