AI 建站 5 種方式實測：SSH／Elementor MCP／CrocoBuilder／Oxygen／GreenShift 誰最輕、SEO 最好

本文含聯盟連結：透過連結購買，我們會收到佣金，你付的價格不變。推薦只根據我們維護網站的實際使用經驗。

一句話結論：同一個落地頁用 5 種方式各做一次，畫面幾乎分不出高下；但要比「頁面重量與 SEO」，SSH 手刻最輕（14 KB、1 個請求），四個 AI 工具裡 CrocoBuilder 最輕、Elementor（EMCP）最重。真正的選擇關鍵不在畫面，而在「事後好不好編輯、跟你現有網站合不合、頁面多重」。

我們維護 100 多個 WordPress 網站，一直在找一個問題的答案：能不能讓設計師出版面（Figma／Google Stitch／一份 HTML），再讓 AI 自動排成一個可編輯的 WordPress 頁面？這次我們把同一個「網站維護服務落地頁」（深色主視覺＋儀表板、三個數字、三張功能卡、三方案定價、常見問題、行動呼籲），用 5 種方式各建一次，實測比較。

文章目錄

參與比較的 5 種方式

SSH 手刻：工程師直接寫 HTML／CSS，透過 SSH 部署。當作「重量與 SEO 的基準線」。
EMCP（Elementor MCP）：讓 AI 透過 MCP 產出原生 Elementor 元件。
CrocoBuilder MCP：獨立的頁面編輯器，AI 透過金鑰驅動。
Oxygen（6，Breakdance 引擎）：AI 把 HTML 轉成整頁，用它自己的視覺編輯器維護。
GreenShift：AI 把 HTML 轉成原生 Gutenberg 區塊。

畫面還原度：幾乎平手

先說最沒有懸念的部分：5 種方式的桌機成品都接近 1:1 還原設計稿，主視覺、儀表板、數字區、功能卡、定價、FAQ、CTA 全部到位。GreenShift 那版因為套在既有佈景裡，多帶了原本的頁首／頁尾，其餘四個都很乾淨。換句話說，「AI 能不能把版面做出來」已經不是問題——2026 年這幾套工具都做得到。差別在別的地方。

頁面重量實測（同一台主機、同一個頁面）

我們直接量了每一版線上頁面的實際大小：HTML、外部 CSS／JS 的檔數與位元組、總請求數，以及 DOM 標籤數（div 越多、通常越「肥」，也越難維護）。

方式	總大小	請求數	CSS 檔	DOM 標籤	div 數
SSH 手刻	約 14 KB	1	0（內嵌）	150	32
CrocoBuilder	約 244 KB	26	12	295	70
Oxygen	約 380 KB	56	34	311	84
GreenShift	約 395 KB	55	33	412	104
Elementor（EMCP）	約 681 KB	50	29	438	219

同一個落地頁、同一台主機實測。測試站裝了很多外掛，JS 基準被墊高，因此請看「相對差距」而非絕對值。

幾個重點：

SSH 手刻輕到不成比例：一個檔案、一個請求、32 個 div。這是任何 builder 都追不上的天花板——因為它沒有框架負擔。
四個 builder 裡，CrocoBuilder 最輕（244 KB、最少 CSS 檔、最精簡的 DOM），Oxygen 與 GreenShift 中間。
Elementor（EMCP）最重：光是 Elementor 的 CSS 就 400 KB，DOM 高達 438 個標籤、219 個 div——這是 Elementor 長年被詬病的「div 湯」。它不是不能用，但要靠快取與最佳化才追得上其他人。

對 SEO 比較好？看結構與速度

SEO 這件事，版面工具能影響的主要是兩塊：標題結構是否正確，以及頁面夠不夠輕、Core Web Vitals（載入速度、互動延遲）好不好。

標題層級方面，5 種方式都正確：都是 1 個 H1、合理的 H2／H3，沒有亂用標題，搜尋引擎都讀得懂。語意標籤（section／article／header 等）以 GreenShift 最多（原生 Gutenberg 區塊本來就語意化），其餘相近。

真正拉開差距的是重量。頁面越輕、阻塞渲染的 CSS 越少，LCP（最大內容繪製）越快，對 Google 的 Core Web Vitals 越有利：

阻塞渲染的 CSS：SSH 手刻 1 個、CrocoBuilder 12 個、Oxygen 34、GreenShift 33、Elementor 29。
也就是說：純以「輕量與速度」論 SEO，排序是 SSH ≫ CrocoBuilder ＞ Oxygen ≈ GreenShift ＞ Elementor。

但要提醒：重量只是 SEO 的其中一項。內容品質、標題與描述、網站整體結構、以及「能不能持續更新內容」同樣重要——而 Elementor 雖然最重，卻是最好編輯、生態最大的。用得對，加上快取與圖片最佳化，Elementor 站一樣能有好排名。

逐一優缺點

SSH 手刻

最輕、最快、SEO 天花板最高，完全掌控語意 HTML。缺點：要工程師、做得最慢、客戶／設計師無法自己用視覺介面改。適合「一次性、追求極致效能、之後很少動」的頁面。

EMCP（Elementor MCP）

產出是原生 Elementor 元件，客戶與設計師能在 Elementor 面板逐塊改——這是它最大的價值。最適合維護你現有的 Elementor 客戶站（尤其是拿不到主機 SSH 的情況）。缺點：頁面最重、綁 Elementor、逐站授權。想看 EMCP 與純 SSH 改站的逐項對照，可參考我們另一篇：SSH 還是 EMCP？讓 AI 改 Elementor 網站的 3 個實測。Elementor Pro 的方案與價格見 Elementor 官網。

CrocoBuilder MCP

四個 builder 裡輸出最輕，畫面還原也好。缺點：目前還在 beta、沒有文章篩選這類元件、和 Elementor 同站時樣式會打架。除非整站都採用它，否則先觀望。CrocoBuilder 與純 SSH 的實測對照見：SSH 還是 CrocoBuilder MCP？讓 AI 改 WordPress 的 3 個實測。CrocoBuilder 是 Crocoblock 的產品，方案與價格見他們官網。

Oxygen（Breakdance 引擎）

「HTML→整頁」的還原最直接漂亮，輸出相對乾淨，有自己的視覺編輯器。最適合「設計師出 HTML／Figma → AI 一鍵變成整頁」的新站流程。缺點：它會取代佈景，等於把網站綁進 Oxygen 生態。

GreenShift

把 HTML 轉成原生 Gutenberg 區塊，最不綁人、最保值（未來換工具，內容還是標準 WordPress 區塊），語意標籤也最完整。缺點：目前是套在既有佈景裡，頁首／頁尾要自己處理。

那到底要用哪一個？

沒有單一贏家，看場景：

從 Figma／Stitch／HTML 生成全新頁面：主力用 Oxygen（最漂亮、最好編）或 GreenShift（最不綁人、原生區塊、SEO 語意佳）。
維護現有的 Elementor 客戶站：用 EMCP，讓 AI 直接改、客戶還能自己編。
追求極致效能、一次性的高流量落地頁：SSH 手刻仍然無敵。
CrocoBuilder：等它更成熟再評估。

結論回到最前面那句：畫面大家都做得到，選擇關鍵是「事後好不好編輯、跟現有網站合不合、頁面多重」。把設計師的版面交給 AI 自動排版，2026 年已經完全可行——重點是選對搭配你團隊工作流程的那一套。

用 AI 建 WordPress 網站：SSH、Elementor MCP、CrocoBuilder、Oxygen、GreenShift 五種實測比較