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 的優點是彈性高，但內容經營到一定規模後，最常卡住的地方不是文章本身，而是「圖片素材」。

常見情境包含：

1. WooCommerce 商品需要主圖、情境圖、橫幅圖
2. 部落格文章需要 SEO 封面圖
3. 產品教學需要流程圖或資訊圖表
4. 社群貼文需要小紅書、Instagram、Facebook 圖卡
5. 多語系網站需要同一張圖的不同語言版本
6. 技術產品需要規格圖、爆炸圖、比較圖或視覺說明

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 媒體庫。

建議流程如下：

1. 在 Claude Code、Codex 或其他支援 Skills 的 Agent 中安裝 baoyu-skills
2. 準備商品描述、文章 Markdown 或產品規格
3. 使用對應指令產生圖片
4. 檢查圖片比例、文字、品牌色與可讀性
5. 將圖片輸出為 WebP、PNG 或 JPG
6. 上傳到 WordPress 媒體庫
7. 套用到文章特色圖片、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 圖片中的文字有時會出現亂碼，因此若是商品圖、封面圖或廣告圖，建議分成兩階段：

1. 先產生無文字圖片
2. 再用 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 可以讓你的視覺內容生產流程更標準化。