導言：在技術焦慮中找回開發的平靜

在生成式 AI 與 No-code 工具全面爆發的當下，網頁開發的邊界正經歷劇烈的重塑。對於許多自由接案者與網頁設計公司而言，如何將設計圖（Mockup）無痛轉化為可運作的 WordPress 網站，始終是一段充滿摩擦力的過程。

傳統的切版流程繁瑣且昂貴：設計定稿後，前端工程師必須手寫大量的 HTML、CSS，並編寫 PHP 模板來迎合 WordPress 嚴格的佈景主題規範。這不僅曠日廢時，更為後續的核心升級埋下了相容性隱患。作為一名在技術圈打滾多年的開發者，我深刻體會過這種不斷被版本更新與報錯追著跑的焦慮。

這也是我決定打造 GutenPress AI 的初衷。這不是為了炫技，而是希望透過 AI 視覺模型與 WebAssembly 技術，徹底消除這段傳統工作流中的摩擦力，讓創作者與開發者都能找回專注於「創造」本身的平靜。然而，在真正動手打造這款 SaaS 產品的架構時，我首先碰到的，不是 AI 模型的訓練難題，而是最殘酷的現實問題：金流系統與底層電商架構的選型。

虛擬電商核心：WooCommerce 與 Easy Digital Downloads (EDD) 的深度評測

在規劃 GutenPress AI 的虛擬交易與授權金鑰管理時，許多業界朋友第一反應都是：「那用 WooCommerce 不就好了？」老實說，我一開始也是這麼想的。作為全球市佔率最高的 WordPress 電商外掛，WooCommerce 的生態系無疑是最龐大的。

但當我深入分析 Next.js 前端（Headless 架構）的 API 效能與資料表結構時，我果斷決定放棄 WooCommerce，改用 Easy Digital Downloads (EDD)。這是一次技術選型上的「降維打擊」。

為什麼？以下是我的技術考量與深度對比：

WooCommerce 的「重」與冗餘

WooCommerce 從基因上就是為了實體電商而生的。它的資料庫架構塞滿了購物車、實體稅務計算、複雜的物流追蹤、產品變體屬性等極其臃腫的結構。當我們在 Next.js 前端呼叫 REST API 獲取產品資料時，WooCommerce 的回應時間（Response Time）往往會飆升到 500ms 甚至 1 秒以上。對於一個主打「秒級轉換設計圖」的現代 SaaS 平台來說，這種後端 API 的延遲是絕對無法容忍的硬傷。此外，每次更新 WooCommerce 核心，都伴隨著資料庫結構可能損毀的風險。

Easy Digital Downloads (EDD) 的極致輕量化優勢

相比之下，EDD 是專門為「數位下載（Digital Downloads）」與虛擬產品設計的系統。它的代碼庫極其精簡，沒有任何與實體物流相關的包袱。更讓我滿意的是，EDD 內建的 Software Licensing 套件提供了極其簡潔的原生 API 接口。

這意味著什麼？當買家購買 GutenPress AI，下載了我們生成的佈景主題並安裝在他們的第三方 WordPress 網站時，我們的伺服器能夠以毫秒級的速度即時進行 License Key 的驗證、啟用與解綁。這種極致的 API 效能與輕量化，才是建構高併發 SaaS 產品真正需要的底層基石。

台灣 PayPal 帳戶互轉限制的困境與 Geo-IP 解決邏輯

決定了 EDD 作為底層架構後，接下來就是最讓人頭痛的金流串接。

做跨境 SaaS，PayPal 和 Stripe 幾乎是標配。然而，由於 Stripe 尚未正式支援台灣註冊（需要特地飛海外或透過代辦申請國外公司），PayPal 成為了最主流的選擇。但如果你做過跨國服務，你一定知道 PayPal 在台灣的規定有多不友善：因為台灣金管會的政策限制，台灣註冊的 PayPal 帳戶之間是無法互轉美金的。

這意味著，如果 GutenPress AI 只接 PayPal，台灣本地的開發者與設計師根本沒辦法購買我的服務。我將會白白流失掉整個家鄉市場！但如果全站改為台幣計價並串接綠界或藍新金流，對海外買家又會造成匯率換算的摩擦力，甚至被發卡行拒絕交易。

為了解決這個「魚與熊掌不可兼得」的困境，我為 GutenPress AI 設計了一套 Geo-IP Routing（地理 IP 金流分流） 邏輯。

這不是在 WordPress 裝個外掛就能解決的事。我們將這套邏輯直接佈署在 Next.js 的 Edge Middleware 中，實現在毫秒內的精準分流。以下是我撰寫的簡化版架構程式碼：

// src/middleware.ts 簡化邏輯
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 從 request geo object 中抓取使用者所在國家，若無則預設為 US
  const country = request.geo?.country || 'US';
  const response = NextResponse.next();

  if (country === 'TW') {
    // 針對台灣 IP，在 Cookie 或標頭中注入分流標記
    // 系統會依此標記，將結帳閘道動態導向台灣本地的信用卡金流（如綠界）並以 TWD 計價
    response.headers.set('x-gateway-preference', 'taiwan-local');
  } else {
    // 針對非台灣的海外 IP，預設啟用 PayPal 與美金結帳通道
    response.headers.set('x-gateway-preference', 'paypal-global');
  }
  return response;
}

透過這套 Edge 級別的自動偵測機制，當台灣的使用者進入結帳頁面時，前端介面會「無感」地切換為台灣本地信用卡管道（以台幣結帳）；而國外使用者則繼續看見他們熟悉的 PayPal 訂閱與美金結帳按鈕。

雖然這意味著我在後台帳務處理時，必須同時維護兩套帳本與對帳邏輯，但從產品上線的第一天就確保金流的絕對合規性與順暢度，絕對能為後續的規模化少走很多冤枉路。

技術抉擇：擁抱 Gutenberg 全站編輯 (FSE)

除了金流，讓我們回到產品的本質。在架構初期，我們面臨了另一個關鍵抉擇：該如何讓 AI 產出的程式碼具備真正的可用性？

GutenPress AI 的核心邏輯，並非將圖片暴力轉換為充滿絕對定位的凌亂 HTML，而是完全擁抱 WordPress 官方的 Gutenberg 全站編輯 (Full Site Editing, FSE) 架構。這項決策背後，是對程式碼潔癖與長期可維護性的堅持：

• AI 語意區塊解析：當系統掃描設計圖時，視覺大模型會自動辨識出導覽列、Hero 區塊或文章卡片，並精準映射到原生的 core/group 或 core/columns 區塊。這確保了產出的主題擁有乾淨的語意結構。
• theme.json 統一控管：AI 提取的色彩、字型與間距，會全數編譯進符合標準的 theme.json 中。後續客戶只需使用 WordPress 內建的站點編輯器即可二次修改，無需動到一行 PHP 程式碼。

我們團隊甚至為此開發了一套「自適應網格對齊演算法」。它能自動偵測橫向排列的元件，並賦予對應的 CSS Grid 屬性。拒絕絕對定位，是我們對響應式排版（RWD）品質的最後底線。

WebAssembly：將笨重的伺服器裝進瀏覽器

在技術落地的過程中，另一個痛點是如何讓使用者在線上「即時預覽」他們剛剛生成的佈景主題。

過去的 SaaS 平台往往需要為每次預覽啟動獨立的 Docker 容器，不但成本高昂，且啟動延遲常高達數秒，足以讓使用者失去耐心。我們選擇了一條更硬核的路：導入 WordPress Playground (WebAssembly) 技術。

我們將 PHP 核心與 SQLite 資料庫直接編譯為 WebAssembly，讓完整的 WordPress 運行在客戶端的瀏覽器沙盒中。為了解決台灣本地網路載入過慢的問題，我們更進一步重寫了 Service Worker 的攔截邏輯，將核心靜態資源持久化快取，把預覽的載入時間硬生生壓縮至 500 毫秒以內。

這種秒級的絲滑體驗，不僅省下了巨額的伺服器開銷，更讓使用者能立刻看見成果。技術，本該如此優雅且不著痕跡。

結語

做產品不能只憑熱情，底層架構的技術選型與金流合規，才是決定產品能否順利落地的基石。

將複雜的設計圖轉化為符合 FSE 標準的區塊主題，背後需要對 WordPress 生態系與 WebAssembly 的深刻理解。今天順利將 Next.js 平台前端與 EDD GraphQL 介面的通訊徹底跑通，看著 terminal 回傳的一排綠色 200 OK，心中的踏實感難以言喻。

我是沃德，這是我公開建構 GutenPress AI 的第一天。我們明天見。