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 6 月 18, 2026 | AI , skills
在網站製作的世界裡，最痛苦的往往不是「會不會架 WordPress」，而是「怎麼把網站做得像專業品牌」。
很多人可以安裝主題、套版、放圖片、改文字，但真正卡住的地方通常是：
版面不夠高級、配色不協調、按鈕不知道放哪裡、手機版跑版、Landing Page 沒有轉換力、Dashboard 看起來不像專業產品。
這時候，UIUX Pro Max Skill 就像是一位專門站在你旁邊的前端與 UI/UX 顧問。你不需要一開始就懂設計系統、字體比例、色彩心理學、Tailwind、React、Next.js 或 shadcn/ui，只要用自然語言描述你想要的網站，它就能協助 AI Coding Assistant 產生更像專業前端設計師規劃出來的介面。
官方網站：https://ui-ux-pro-max-skill.nextlevelbuilder.io/
GitHub 專案：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
下載與安裝：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases
UIUX Pro Max 是什麼？
UIUX Pro Max，全名通常會看到 ui-ux-pro-max-skill ，是一個提供 AI 助手使用的 UI/UX 設計技能包。它的核心概念很簡單：
讓 AI 不只是「會寫前端程式」，而是更懂「什麼樣的前端才像專業產品」。
一般 AI 寫前端時，很容易產生一種常見問題：功能有了，但畫面普通；元件有了，但缺乏層次；版面能跑，但沒有品牌感。
UIUX Pro Max 則補上這塊空白。它把 UI 風格、色票、字體搭配、圖表類型、UX 規則、設計系統與不同技術框架的實作建議整理成一套可被 AI 助手調用的知識庫。
你可以把它想像成：
給 Claude Code、Cursor、Codex CLI、Windsurf 等工具使用的 UI/UX 專家包
給前端開發者使用的設計系統產生器
給不懂設計的創業者、站長、行銷人員使用的網站美感加速器
給 WordPress 專案使用的外觀與互動規劃參考工具
它不是單純的 WordPress 外掛，而是可以協助你在製作 WordPress 網站、Landing Page、SaaS 後台、會員系統、形象網站或行銷頁時，快速產生更專業的前端設計方向。
特色
1. 用自然語言產生 UI/UX 設計方向
你不需要一開始就寫完整規格，只要描述你的需求，例如：
「幫我設計一個牙醫診所形象網站，要乾淨、可信任、有預約按鈕。」
「我要一個 WordPress 課程銷售頁，風格要像高級教育平台。」
「幫我做一個 SaaS 後台 Dashboard，要有現代感、卡片式資料區塊、RWD。」
AI 搭配 UIUX Pro Max 後，就能更有方向地產生版面、色彩、字體、元件與視覺層次。
2. 自動生成設計系統
UIUX Pro Max 的重點之一，是能依據專案需求產生設計系統。
這對 WordPress 網站很重要，因為很多網站最後看起來不專業，不是因為圖片不夠漂亮，而是缺乏一致性。
設計系統可以包含：
主色與輔色
字體搭配
標題大小
內文行距
按鈕樣式
卡片樣式
表單樣式
間距規則
RWD 斷點
常用元件規範
如果你是用 WordPress + Elementor、Bricks、Block Editor、GeneratePress、Astra 或自製主題，這些設計系統都可以成為你調整網站外觀時的重要依據。
3. 適合 WordPress 外掛與主題開發
雖然 UIUX Pro Max 不是傳統意義上的 WordPress 外掛，但它非常適合拿來輔助 WordPress 開發。
例如你正在開發：
WordPress 企業形象網站
WooCommerce 商品頁
線上課程銷售頁
會員中心
後台管理介面
預約系統
AI 工具網站
部落格首頁
Landing Page
WordPress 外掛設定頁
你可以請 AI 搭配 UIUX Pro Max 先產生 UI 規劃，再把設計轉換成 HTML、Tailwind、React、Next.js、PHP Blade、甚至 WordPress 區塊設計邏輯。
4. 支援多種前端技術棧
UIUX Pro Max 不只適合單一框架，它的 GitHub README 中列出多種支援方向，包括 HTML + Tailwind、React、Next.js、shadcn/ui、Vue、Nuxt、Angular、Svelte、Astro、SwiftUI、Jetpack Compose、React Native、Flutter 等。
對 WordPress 使用者來說，最實用的組合通常會是：
HTML + Tailwind
React
Next.js
shadcn/ui
PHP / Laravel Blade 概念
WordPress 區塊與前端樣式規劃
如果你的 WordPress 網站有自製外掛、客製後台、Headless WordPress 或 Next.js 前台，UIUX Pro Max 會更有幫助。
5. 做出不「凡」的網站
多數人不是專業設計師，也不是全職前端工程師。
你可能是創業者、老師、站長、接案者、行銷人、公司內部資訊人員，甚至只是想把自己的 WordPress 網站改得更好看。
UIUX Pro Max 的價值在於：它把許多專業設計師腦中的判斷，變成 AI 可以引用的規則與資料庫。你不必從零開始學完 UI/UX，也能讓 AI 提供更接近專業前端顧問的建議。
關鍵指令
以下是常用指令，可以依照你的 AI 工具環境選擇。
Claude Code Marketplace 安裝方式
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill CLI 安裝方式
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude 安裝到其他 AI 助手
uipro init --ai cursor
uipro init --ai windsurf
uipro init --ai copilot
uipro init --ai codex
uipro init --ai gemini
uipro init --ai opencode
uipro init --ai all 全域安裝
uipro init --ai claude --global
uipro init --ai cursor --global 更新與移除
uipro versions
uipro update
uipro uninstall 使用範例
Build a landing page for my SaaS product Create a dashboard for healthcare analytics Design a portfolio website with dark mode Make a mobile app UI for e-commerce Build a fintech banking app with dark theme 直接呼叫 Skill
/ui-ux-pro-max Build a landing page for my SaaS product 使用流程圖
WordPress 使用情境範例
情境一：幫企業形象網站重新設計首頁
你可以這樣下指令：
請幫我重新設計一個 WordPress 企業形象網站首頁。
產業是 B2B 軟體服務，目標客戶是中小企業老闆。
風格要專業、可信任、不要太科技黑。
請提供首頁區塊架構、主色、字體、CTA 按鈕、RWD 注意事項。 AI 搭配 UIUX Pro Max 後，會比較容易產生完整的首頁架構，例如 Hero、痛點、服務特色、案例、流程、FAQ、CTA 等，而不是只給你一個普通的套版。
情境二：幫 WooCommerce 商品頁提高轉換率
請幫我優化 WooCommerce 商品頁 UI/UX。
商品是高單價健康設備。
目標是增加詢問與預約體驗。
請設計商品頁資訊層級、信任元素、CTA 區塊與手機版版面。 這類任務不只是美化，而是結合轉換率、資訊層級與使用者行為。UIUX Pro Max 很適合用在這種「不只要好看，也要有效」的頁面。
情境三：設計 WordPress 外掛設定頁
請幫我設計一個 WordPress 外掛設定頁。
外掛功能是 AI 自動批改作業。
需要包含 API Key 設定、模型選擇、批改規則、通知設定與儲存按鈕。
請提供乾淨、專業、適合老師使用的 UI。 如果你正在開發 WordPress 外掛，後台設定頁常常會被忽略，但它其實非常影響使用體驗。UIUX Pro Max 可以協助你把設定頁做得更清楚、有層次，也更接近 SaaS 產品的質感。
為什麼推薦 UIUX Pro Max？
1. 降低設計門檻
不是每個人都請得起專業 UI 設計師，也不是每個專案都有時間走完整設計流程。UIUX Pro Max 可以讓 AI 幫你補上第一版設計判斷。
2. 節省溝通成本
過去做網站常常要反覆跟設計師或前端工程師溝通：「再高級一點」、「不要那麼像模板」、「手機版怪怪的」。現在你可以直接把品牌、情境、目標客戶、色調偏好告訴 AI，讓它先產出一版更接近方向的方案。
3. 適合快速做 MVP
如果你正在做新產品、SaaS、AI 工具、課程平台、會員網站或接案展示頁，UIUX Pro Max 很適合用來快速產生第一版專業視覺。
4. 可延伸到實際程式碼
它不是只能給概念，也能配合 AI Coding Assistant 產生前端程式碼、元件設計與樣式規則。對工程師來說，這比單純看設計靈感網站更直接。
使用時要注意什麼？
1. 它不是魔法，仍然需要你提供明確需求
你給的需求越清楚，產出的設計越準。
建議至少提供：
產業類型
目標客戶
網站目的
喜歡或不喜歡的風格
是否要深色模式
是否需要手機優先
使用的技術棧
是否要套用到 WordPress
是否偏向銷售、品牌、教學或後台管理
2. 不要只說「幫我做漂亮一點」
比較好的說法是：
請幫我把這個 WordPress 首頁改成更像 B2B SaaS 的專業風格。
目標客戶是企業主管。
請避免卡通感與過度漸層。
主色希望是深藍與白色，CTA 使用亮色。
請提供 Hero、功能、案例、價格與 FAQ 區塊。 這樣 AI 才會知道「漂亮」的方向是什麼。
3. 最後仍要人工檢查
AI 產出的設計很適合當第一版，但正式上線前仍然建議檢查：
手機版是否正常
文字是否符合品牌語氣
色彩對比是否足夠
按鈕是否明顯
表單是否容易填寫
SEO 標題是否正確
WordPress 主題是否相容
外掛是否造成樣式衝突
by Rain Chu 6 月 18, 2026 | AI , skills
你可以把 find-skills 想成是 Agent 專用的「Skill App Store」。
當你未來想問：
「有沒有適合做 React 優化的 Skill？」
「有沒有可以幫我寫 changelog 的 Skill？」
「有沒有支援 PR Review、測試、自動化部署的 Skill？」
安裝 find-skills 之後，Agent 就可以根據你的需求，去搜尋相關 Skills，並提供安裝建議。
為什麼第一個要裝 find-skills？
一般人在剛開始使用 Agent Skills 時，最常遇到的問題不是「不會安裝」，而是「不知道有哪些 Skills 可以用」。
以前要找 Skills，可能要靠別人分享、GitHub 搜尋、社群文章，或自己慢慢翻各種資源庫。這種方式有幾個缺點：
很容易找不到真正適合的 Skill
搜尋過程會打斷目前工作流程
不知道哪些 Skill 比較可信
不知道該用什麼關鍵字搜尋
找到之後還要自己判斷怎麼安裝
find-skills 解決的就是這個問題。
它讓 Agent 可以根據目前任務，協助你搜尋、比較、推薦甚至安裝其他 Skills。換句話說，安裝它之後，你的 Agent 就不只是被動執行任務，而是能開始主動幫你擴充能力。
find-skills 是什麼？
find-skills 是 Vercel Labs Skills 專案中的一個官方 Skill。
官方頁面說明：https://github.com/vercel-labs/skills/blob/main/skills/find-skills/SKILL.md
它的主要功能是協助使用者從 open agent skills 生態系中發現與安裝 Skills。當你問 Agent「我要怎麼做某件事？」、「有沒有某種 Skill？」、「能不能幫我找某類工具？」時，find-skills 就可以派上用場。
它適合用在這些情境：
你想找某個特定用途的 Skill
你想知道某個任務是否已經有人做成 Skill
你想擴充 Agent 的能力
你想搜尋工具、範本或工作流程
你想讓 Agent 幫你推薦適合目前任務的 Skill
安裝 find-skills
建議直接使用 Vercel Labs 官方 Skills CLI 安裝。
npx skills add https://github.com/vercel-labs/skills --skill find-skills 這是我建議所有 Agent Skills 使用者第一個安裝的指令。
官方頁面：https://github.com/vercel-labs/skills/blob/main/skills/find-skills/SKILL.md
下載 / 安裝來源：https://github.com/vercel-labs/skills
SKILL.md 原始檔下載：https://raw.githubusercontent.com/vercel-labs/skills/main/skills/find-skills/SKILL.md
關鍵指令整理
安裝完成後，最常用的指令有以下幾個。
1. 搜尋 Skills
npx skills find "find skills" 也可以換成更具體的搜尋字，例如：
npx skills find "react performance"
npx skills find "seo meta"
npx skills find "pr review"
npx skills find "changelog"
npx skills find "wordpress" 搜尋關鍵字越具體，結果通常越準。
例如你要找 SEO 相關 Skills，不建議只搜尋：
可以改成：
npx skills find "seo meta"
npx skills find "seo tags"
npx skills find "wordpress seo" 這樣比較容易找到符合任務的 Skill。
2. 安裝 Skill
如果你已經知道要安裝哪個 Skill，可以使用：
例如：
npx skills add https://github.com/vercel-labs/skills --skill find-skills 3. 列出已安裝 Skills
這個指令可以查看目前已安裝的 Skills。
不過要注意，如果某些 Skills 不是透過 npx skills add 安裝的，可能不一定會被完整列出。
4. 檢查更新
這個指令可以檢查已安裝的 Skills 是否有更新。
5. 更新 Skills
這個指令會更新已安裝的 Skills。
建議不要盲目更新所有 Skills。更新前最好先確認來源是否可信、更新內容是否合理，尤其是在正式專案或公司環境中使用時，更應該謹慎。
使用 find-skills 的推薦流程
我會建議用這樣的流程：
Step 1：先描述你的需求
不要只丟一個太籠統的詞。
例如不要只說：
可以改成：
npx skills find "ui design system"
npx skills find "accessibility review"
npx skills find "figma to react" Step 2：查看搜尋結果
搜尋結果出現後，不要只看名稱。
建議至少確認：
Skill 名稱
來源作者或組織
安裝數
GitHub repo
是否有文件
是否近期仍有人維護
是否符合你的實際任務
Step 3：優先選可信來源
如果是正式專案使用，我會優先選擇這幾類來源：
官方組織
大型開源專案
GitHub 星數較高的專案
安裝數較多的 Skill
有清楚文件與範例的 Skill
不要只因為搜尋結果排在前面就直接安裝。
Step 4：安裝後再測試
安裝完成後，建議先用小任務測試。
例如你安裝了 SEO 相關 Skill，可以先讓 Agent 幫你產生一篇文章的：
SEO 標題
Meta description
WordPress 標籤
文章摘要
內部連結建議
確認結果符合預期後，再放進正式工作流程。
find-skills 適合哪些人？
我認為 find-skills 特別適合這幾種使用者。
1. 剛開始使用 Agent Skills 的人
你不需要一開始就知道所有 Skills。先裝 find-skills，讓 Agent 幫你找。
2. 經常做不同任務的開發者
如果你平常會做：
React
Next.js
WordPress
Docker
GitHub Actions
測試
部署
文件產生
Code Review
那 find-skills 很適合當成你的 Skill 搜尋入口。
3. 想打造個人 Agent 工作流的人
如果你希望 Agent 不只是聊天，而是變成真正的工作助理，Skills 會是很重要的擴充方式。
find-skills 則是幫你管理這個擴充入口的第一個工具。
4. 想建立團隊標準工具集的人
公司或團隊也可以先用 find-skills 找出常用 Skills，再建立自己的標準清單。
例如：
前端開發 Skills
測試 Skills
文件 Skills
DevOps Skills
SEO Skills
WordPress Skills
安全檢查 Skills
這樣可以讓團隊的 Agent 能力更一致。
使用 find-skills 的注意事項
find-skills 很方便，但不是所有搜尋結果都應該直接安裝。
使用時建議注意以下幾點。
1. 不要盲目相信搜尋結果
搜尋到 Skill，只代表它可能相關，不代表它一定適合你的任務。
正式使用前，仍然要確認來源、文件與內容。
2. 安裝前先看來源
尤其是來自不熟悉作者的 Skill，要更謹慎。
如果 Skill 會執行命令、讀寫檔案、存取專案內容，就更應該先檢查內容。
3. 搜尋關鍵字要具體
find-skills 的搜尋品質，很大程度取決於你的關鍵字。
比起搜尋：
更建議搜尋：
npx skills find "wordpress seo meta" 比起搜尋：
更建議搜尋：
npx skills find "playwright e2e test" 4. 更新 Skills 要小心
npx skills update 雖然方便，但在正式專案中不要隨便全部更新。
建議先檢查：
確認更新內容後，再決定是否更新。
我的建議：find-skills 是 Agent Skills 的第一個必裝工具
如果你只打算先安裝一個 Skill，我會選 find-skills。
因為它能讓 Agent 具備「找工具」的能力。
這跟一般單一功能 Skill 不一樣。一般 Skill 是讓 Agent 多一項能力，而 find-skills 是讓 Agent 開始知道「還有哪些能力可以被安裝」。
這也是為什麼我會把它稱為 Agent 的 Skill App Store。
先安裝它，之後要找 SEO、WordPress、React、測試、部署、文件、設計、Code Review 等 Skills，都會更有效率。
by Rain Chu 6 月 14, 2026 | Agent , AI , Hermes , OpenClaw , Prompt
當我們開始用 AI 寫網站、做 Landing Page、產生前端介面時，常常會遇到一個問題
畫面看起來很快就完成了，但總覺得「哪裡怪怪的」。
按鈕很像、卡片很多、漸層很浮誇、字級沒有層次、留白不夠精準，甚至每個 AI 產生的網站都像是同一套模板改出來的。這種「可以用，但不高級」的設計感，就是許多 AI 前端作品容易落入的平庸陷阱。
而 Impeccable 官方網站 想解決的，正是這個問題。
什麼是 Impeccable？
Impeccable 是一套專為 AI Coding Agent 設計的前端設計輔助工具，它不是單純幫你產生漂亮畫面的 AI 設計工具，而是提供一套「設計語彙」與「設計指令」，讓你可以更精準地指揮 AI 改善網站畫面。
簡單說，Impeccable 讓 AI 不只是會寫程式，也更懂設計。
它可以協助 AI 理解網站中的層級、對比、留白、色彩、字體、動畫、產品脈絡與品牌調性，讓 AI 產生的前端畫面不再只是堆滿卡片、套上漸層、加一點陰影，而是更接近真正設計師會思考的介面。
你可以把 Impeccable 想像成：
一套給 AI 前端工程師使用的設計總監指令集。
為什麼 AI 做出來的網站常常很平庸？
現在很多人會用 AI 幫忙做網站，例如請 Claude Code、Cursor、Codex CLI 或 Gemini CLI 產生頁面。AI 很擅長快速完成版型，但如果沒有足夠清楚的設計方向，它很容易產生幾種常見問題：
每個區塊都用卡片包起來，看起來很模板化
喜歡使用過度常見的紫色漸層、玻璃擬態、發光陰影
字體大小與層級不夠精準，主標、副標、內文沒有明確節奏
留白太平均，缺乏視覺重點
按鈕、表單、導覽列看起來功能正確，但沒有品牌感
Landing Page 和後台 Dashboard 使用同一種設計邏輯
作品看起來像 AI 產物，而不是成熟產品
Impeccable 的價值就在於，它不是只叫 AI「設計得漂亮一點」，而是提供更具體的設計方向，例如讓畫面更有層次、更安靜、更大膽、更精煉、更符合產品情境。
Impeccable 的核心特色
1. 提供 AI 可理解的設計語言
Impeccable 的官方介紹中提到，它補上了 AI Agent 缺少的設計語彙，這代表你可以用更接近設計師的方式指揮 AI，例如改善排版、調整顏色、強化視覺層次、降低過度設計、整理產品脈絡。
這對不熟設計術語的人很有幫助，因為你不需要長篇大論解釋「我要更高級、更有質感、更像品牌網站」，而是可以透過 Impeccable 的指令，把設計意圖轉成 AI 比較能執行的動作。
2. 支援多種 AI Coding 工具
Impeccable 可以搭配多種主流 AI Coding 工具使用，例如 Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI 等。
這代表它不是只服務單一平台，而是比較像一套可以帶進不同開發流程的設計輔助層。對於已經習慣用 AI 寫前端的開發者來說，Impeccable 可以直接加入現有工作流程，不需要重新學一套完整設計軟體。
3. 透過指令改善網站設計
Impeccable 提供多個設計指令，讓你可以針對不同設計任務下達命令。例如：
/impeccable init
/impeccable shape
/impeccable critique
/impeccable audit
/impeccable polish
/impeccable bolder
/impeccable quieter
/impeccable distill
這些指令的好處是，你可以更像在跟設計師溝通，而不是一直對 AI 說：「再漂亮一點」、「再高級一點」、「不要這麼普通」。
4. 幫你減少 AI 生成網站的套路感
很多 AI 產生的網站會有明顯套路，例如紫色漸層、大量圓角卡片、發光邊框、過度一致的版面節奏。Impeccable 內建反套路的設計檢查，可以幫助你找出這些容易讓網站看起來廉價、模板化或過度 AI 感的元素。
這對品牌網站、形象頁、SaaS Landing Page、產品頁、作品集網站尤其重要。因為這些頁面的重點不只是功能完成，而是要讓使用者在第一眼感覺到專業、信任與差異化。
5. 保留你的設計系統，不是硬套新風格
Impeccable 的另一個優點是，它不是粗暴地把你的網站改成另一種風格，而是會盡量尊重既有的設計系統，例如顏色、字體、元件、間距、按鈕樣式與品牌規則。
這對已經有產品雛形或既有網站的人很重要。你不一定想要整個重做，而是希望 AI 幫你把現有介面整理得更成熟、更一致、更像一個真正的產品。
Impeccable 適合誰使用？
Impeccable 特別適合以下幾種人：
1. 用 AI 寫前端的開發者
如果你常用 Cursor、Claude Code、Codex CLI、GitHub Copilot 來產生 React、Next.js、Astro、Tailwind CSS 或其他前端頁面，Impeccable 可以幫你補上 AI 在設計判斷上的不足。
2. 想快速做出高質感 Landing Page 的創業者
很多創業者會用 AI 快速做 MVP，但 Landing Page 如果太普通，會影響使用者信任感，Impeccable 可以幫助你把「能用的頁面」推進到「比較有品牌感的頁面」。
3. 會寫程式但不擅長設計的人
你可能知道功能怎麼做，但不知道為什麼畫面不夠好看。Impeccable 可以用指令化的方式協助你檢查排版、層級、色彩與互動細節。
4. 想降低 AI 生成感的網站製作者
如果你的網站看起來太像 AI 產物，Impeccable 可以幫你找出常見的 AI 設計套路，讓畫面更有辨識度。
如何安裝 Impeccable？
你可以到 GitHub 下載與查看 Impeccable 專案：
Impeccable GitHub 下載頁
官方建議可以在專案根目錄執行：
npx impeccable skills install
接著在你的 AI Coding 工具中執行：
如果之後要更新，可以執行：
npx impeccable skills update
官方網站也提供更多說明與範例：
Impeccable 官方網站
使用 Impeccable 的工作流程建議
如果你正在做一個網站或前端產品，可以用以下流程開始：
第一步，先用 AI 產生基本頁面結構。
第二步，執行 /impeccable init。
第三步，用 /impeccable shape 先整理畫面架構。
第四步，用 /impeccable critique 檢查設計問題。
第五步，用 /impeccable polish 做上線前修飾。
第六步，必要時使用 /impeccable audit。
對 WordPress 網站製作者有什麼幫助？
雖然 Impeccable 本身比較偏向 AI Coding Agent 與前端開發流程，但對 WordPress 網站製作者也很有參考價值。
如果你使用 WordPress 搭配自訂佈景主題、區塊編輯器、Elementor、Bricks、Breakdance 或自製前端元件，你可以先在本機或開發環境中，用 AI 建立前端區塊，再透過 Impeccable 改善設計品質。
例如：
首頁 Hero 區塊不夠有記憶點
服務介紹區塊太像模板
價格表太普通
Call to Action 不夠明確
部落格列表頁缺乏層次
後台管理介面太陽春
品牌網站缺乏高級感
這些都可以透過 Impeccable 的設計指令進行調整，再整合回 WordPress 佈景主題或頁面模板中。
結論：Impeccable 讓 AI 網站設計從「能用」走向「有質感」
AI 讓網站製作變快，但速度不代表品質。真正影響使用者感受的，往往是那些細節：字體層級、留白、對比、色彩、互動節奏、品牌一致性，以及畫面是否有明確的設計意圖。
Impeccable 的重點不是取代設計師，而是讓 AI 更容易理解設計師的語言，也讓開發者可以用更精準的方式指揮 AI 做出不平庸的網站。
如果你正在用 AI 製作網站，卻覺得畫面總是差一點質感，那麼 Impeccable 很值得加入你的前端工作流程。
官方網站：https://impeccable.style/
GitHub 下載：https://github.com/pbakaus/impeccable
近期留言