Select Page

要用在 WordPress 的細節是這樣:

UIUX Pro Max 不是在 WordPress 後台裡用,也不是在 Elementor 裡直接用語音說話。
它是在你的「開發專案資料夾」裡,讓 Claude Code、Cursor、Codex CLI、Windsurf 這類 AI 工具讀到這個 Skill,然後你在 AI 工具的聊天框或 CLI 裡用文字下指令。

官方 README 也寫得很清楚:CLI 安裝方式是先 npm install -g uipro-cli,再 cd /path/to/your/project,然後執行 uipro init --ai claudeuipro init --ai cursoruipro 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

然後執行:

uipro init --ai cursor

或:

uipro init --ai claude

這樣 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:

  1. 用 Cursor 開啟 WordPress 專案資料夾
  2. 安裝 UIUX Pro Max:
npm install -g uipro-cliuipro init --ai cursor
  1. 在 Cursor Chat 裡輸入:
請使用 UIUX Pro Max 的 UI/UX 規則,幫我分析這個 WordPress 網站。目標是把首頁改成專業的 B2B SaaS Landing Page。請先不要修改檔案,先列出設計系統、區塊架構與需要改的檔案。

C. Codex CLI / Gemini CLI / Windsurf

邏輯一樣,先在專案資料夾安裝:

uipro init --ai codex

或:

uipro init --ai 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 頁面,可以直接在 AI 工具中用自然語言描述需求;如果要讓 AI 讀取或修改 WordPress 主題、外掛、template 或 CSS,則建議在 WordPress 專案根目錄下安裝與使用,讓 AI 能理解目前的檔案結構與實際程式碼。

最簡單一句話:Elementor 規劃不用放根目錄;要改 WordPress 程式碼,就放在 WordPress 根目錄。