by Rain Chu 6 月 18, 2026 | AI , skills
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，建議在提示詞中加上：
或：
這樣後續在 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 可以讓你的視覺內容生產流程更標準化。
by Rain Chu 6 月 18, 2026 | AI , skills
要用在 WordPress 的細節是這樣：
UIUX Pro Max 不是在 WordPress 後台裡用，也不是在 Elementor 裡直接用語音說話。
官方 README 也寫得很清楚：CLI 安裝方式是先 npm install -g uipro-cli，再 cd /path/to/your/project，然後執行 uipro init --ai claude、uipro init --ai cursor、uipro init --ai codex 等指令。使用時則是「自然聊天」提出 UI/UX 任務，或用 /ui-ux-pro-max slash command 觸發。
1. 要放在 WordPress 根目錄下嗎？
如果你是要它幫你「改 WordPress 主題、外掛、樣式檔、PHP template」，那建議放在 WordPress 專案根目錄。
例如你的 WordPress 專案是：
/var/www/html/my-wordpress-site 或 Windows 本機：
C:\Users\Rain\Projects\my-wordpress-site 那你就進到這個資料夾：
cd /var/www/html/my-wordpress-site 或：
cd C:\Users\Rain\Projects\my-wordpress-site 然後執行：
或：
這樣 AI 工具比較容易讀到你的 WordPress 結構，例如：
wp-content/themes/plugins/uploads/ 2. 如果只是用 Elementor？
如果你只是想讓它幫你規劃 Elementor 頁面，例如：
首頁區塊怎麼排
Hero 文案怎麼寫
CTA 怎麼放
色彩與字體怎麼設定
手機版怎麼調
WooCommerce 商品頁怎麼規劃
可以在任何 AI 工具裡直接問：
請使用 UIUX Pro Max 的思維，幫我規劃一個 WordPress + Elementor 首頁。網站類型：顧問公司目標客戶：中小企業老闆風格：專業、可信任、不要太花請輸出：1. Elementor 區塊架構2. 每個 Section 的標題與文案3. Container / Column 建議4. Global Colors5. Global Fonts6. 手機版設定 然後你再手動把結果做到 Elementor 裡。
這種方式不需要碰 WordPress 根目錄，因為它只是給你「設計規劃」。
3. 什麼情況一定建議在 WordPress 根目錄下？
當你要 AI 直接幫你看檔案、改檔案、產生程式碼時，就建議在 WordPress 根目錄。
例如你要它做這些事：
請幫我檢查目前 WordPress 主題的首頁 template，並重新設計 Hero 區塊。 請幫我修改 wp-content/themes/my-theme/front-page.php，讓首頁更像專業 SaaS Landing Page。 請幫我建立一個 WordPress 外掛設定頁，風格要乾淨、專業、適合老師使用。 請幫我新增一個 Elementor 可以貼上的 HTML 區塊，並附 CSS。 這種情況 AI 需要讀你的專案檔案，所以最好在 WordPress 專案根目錄執行。
4. 在哪裡「用說的」？
不是在 WordPress 後台說。
是在這些地方用文字說：
A. Claude Code
如果你用 Claude Code，可以在專案目錄下開啟 Claude Code，然後直接輸入：
請使用 UIUX Pro Max，幫我優化這個 WordPress 網站首頁的 UI/UX。請先讀取目前主題結構，不要直接改檔案，先提出規劃。 如果是 slash command 模式，則可以用：
/ui-ux-pro-max 請幫我設計 WordPress + Elementor 首頁架構 官方文件也提到，Skill Mode 可以自然語言觸發，Workflow Mode 則可以使用 /ui-ux-pro-max 指令。
B. Cursor
如果你用 Cursor：
用 Cursor 開啟 WordPress 專案資料夾
安裝 UIUX Pro Max：
npm install -g uipro-cliuipro init --ai cursor
在 Cursor Chat 裡輸入：
請使用 UIUX Pro Max 的 UI/UX 規則，幫我分析這個 WordPress 網站。目標是把首頁改成專業的 B2B SaaS Landing Page。請先不要修改檔案，先列出設計系統、區塊架構與需要改的檔案。 C. Codex CLI / Gemini CLI / Windsurf
邏輯一樣，先在專案資料夾安裝：
或：
然後在該工具的聊天或 CLI 裡下指令。
5. WordPress + Elementor 最實際流程
如果你是一般 WordPress 使用者，我會建議你不要一開始就讓 AI 改檔案，而是先用這個流程：
UIUX Pro Max 產生設計規劃↓你在 Elementor 設定 Global Colors / Fonts↓依照 Section 一段一段建立頁面↓再請 AI 幫你檢查手機版、轉換率、可讀性 實際操作如下。
第一步：先問它設計系統
請使用 UIUX Pro Max，幫我建立 WordPress + Elementor 網站的設計系統。網站類型：AI 批改工具目標使用者：國中小老師品牌感覺：乾淨、專業、低壓力、不要像兒童玩具主色：白色、深灰，主要 CTA 使用 Shane Red請輸出：1. Global Colors2. Global Fonts3. H1/H2/H3/Body 字級4. Button 樣式5. Card 樣式6. Section 上下間距7. 手機版斷點建議 第二步：請它產生 Elementor 區塊
請依照剛剛的設計系統，幫我規劃 Elementor 首頁。請輸出：1. Section 名稱2. 每個 Section 的目的3. Container / Column 結構4. 標題文案5. 按鈕文案6. 圖片或 Icon 建議7. 手機版排列方式 第三步：手動做到 Elementor
到 WordPress 後台：
WordPress 後台→ 頁面→ 新增頁面 / 編輯首頁→ 使用 Elementor 編輯 然後照 AI 給你的 Section 一段一段做。
第四步：請它檢查 Elementor 設計
你可以截圖，或把頁面區塊描述貼回去問：
請用 UIUX Pro Max 的角度，檢查這個 Elementor 首頁。請特別看：1. 首屏是否清楚2. CTA 是否明顯3. 文字是否太多4. 手機版是否容易讀5. 有沒有不一致的間距或字級6. 如何提高轉換率 6. 如果要改 WordPress 主題，流程是另一種
假設你有一個自製主題：
wp-content/themes/my-theme/ 你可以在 WordPress 根目錄下開 AI 工具，然後問：
請使用 UIUX Pro Max 分析這個 WordPress 主題。目標：把首頁 front-page.php 改成專業 Landing Page。限制：1. 不要改後台功能2. 不要破壞現有 header.php 和 footer.php3. 優先修改 front-page.php 和 style.css4. 請先列出修改計畫，不要直接改檔案 等它列出計畫後，再說：
可以，請開始修改 front-page.php 和 style.css。 這種才是「在 WordPress 根目錄下用」。
7. Elementor 使用者的重點結論
你可以這樣理解：
只做 Elementor 頁面規劃：不用一定在 WordPress 根目錄。在 Claude / Cursor / ChatGPT 裡問都可以。要 AI 讀取或修改 WordPress 檔案：建議在 WordPress 根目錄。要做外掛、主題、template、CSS：一定建議在 WordPress 專案根目錄。要做文章、頁面文案、區塊設計：不需要根目錄，直接用文字問即可。 8. 最推薦的用法
要寫 WordPress 文章、又想說明 Elementor 使用場景，我建議寫成這樣：
UIUX Pro Max 並不是直接在 WordPress 後台安裝後就會自動產生頁面的外掛，而是搭配 Claude Code、Cursor、Codex CLI、Windsurf 等 AI 工具使用的 UI/UX Skill。
最簡單一句話：Elementor 規劃不用放根目錄；要改 WordPress 程式碼，就放在 WordPress 根目錄。
by Rain Chu 2 月 19, 2024 | woocommerce , wordpress
在預設的情況下，wordpress 中的 woocommerce 的商品頁面，會出現相關商品，如果需要移除，不需要安裝外掛，只要在佈景主題中的 function.php 加入一行程式碼即可
例如以下畫面，打算移除相關商品的區塊
我們找到使用中的佈景主題下的 function.php 並且加入以下程式碼即可
// 移除相關商品
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
by Rain Chu 3 月 28, 2023 | PHP , woocommerce , wordpress , 程式
許多擁有會員的 wordpress 用戶都希望在用戶登出後能將他們重新定位到特定的頁面，此功能在提供用戶的體驗流程時候非常好用，在登入的時候，以下將提供方法，方便大家可以使用此功能
在 functions.php 撰寫程式碼
可以直接在佈景主題下的 functions.php 中把登出後的導向頁面程式碼加入，加入方法如下
1.找到 wp-content 然後 themes 和你現在在使用的主題文件夾
2. 編輯 functions.php
3.加入以下代碼
3.1 登出後直接導引到首頁
add_action('wp_logout','auto_redirect_after_logout');
function auto_redirect_after_logout(){
wp_safe_redirect( home_url() );
exit();
} 3.2 登出後導引到特定頁面
add_action('wp_logout','auto_redirect_external_after_logout');
function auto_redirect_external_after_logout(){
wp_redirect( 'https://www.yourwebsite.com' );
exit();
} 3.3 採用 add_filter 來實作導引到特定頁面
function custom_logout_redirect($logout_url) {
$redirect_page = 'https://yourwebsite.com/your-redirect-page/';
return add_query_arg('redirect_to', urlencode($redirect_page), $logout_url);
}
add_filter('logout_url', 'custom_logout_redirect');
其中 yourwebsite.com 要置換成你自己想要導引過去的頁面
4.將 functions.php 存檔並且關閉
之後就可以自定義客戶登出的行為了
參考資料
by Rain Chu 3 月 21, 2023 | PHP , wordpress , 程式
想要客製化會員登入 WordPress 後的行為，例如說要跳到某一個指定的網頁，其實有很多個外掛可以使用，例如：https://www.paidmembershipspro.com/ ，但麻煩的就是常常會跟其他的會員外掛衝突，而且為了一個小功能，要一個龐大的會員系統來支撐，不太划算，建議可以自行寫寫看。
佈景主題 Functions.php
其實只要找到佈景主題下的 functions.php 然後加入以下程式碼即可
function my_login_redirect( $redirect_to, $request, $user ) {
//檢查是否有建置會員制度
if (isset($user->roles) && is_array($user->roles)) {
// 檢查是否為管理者
if(in_array('administrator', $user->roles)){
// 每次當入都到 woocommerce 的管理頁面中
$redirect_to = home_url('wp-admin/edit.php?post_type=shop_order');
}
//確認是不是訂閱會員
else if (in_array('subscriber', $user->roles)) {
// 導向指定頁面，程式範例是導向會員專屬頁面。
$redirect_to = home_url();
}
}
return $redirect_to;
}
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 ); 區分權限
管理員登入 WordPress 後，預設會到 /wp-admin 中，一般的使用者登入後通常是引導到首頁，或是他自己的介紹頁，要區分管理員或是一般使用者則可以使用 in_array(‘administrator’, $user->roles) 做判斷
// 判斷是否為管理員
in_array('administrator', $user->roles) 自己寫就是有一個好處，可以完全客制使用者行為，也比較輕量，真的有問題就問 ChatGPT 4 大神吧
參考資料
近期留言