Google Stitch × Antigravity × LocalWP

用 AI 把 UI 設計轉成 WordPress Theme

從 Prompt 生成畫面、匯出前端程式碼，到在 Antigravity 轉成可安裝的 WordPress 佈景主題。

UI 生成前端匯出AI CodingTheme 化

個人介紹

Bruce Lee 李冠緯

網站開發 × WordPress 社群 × AI 自動化

13+ 年

哈拉設計創辦人，13+ 年網站開發與自由接案經驗，熟悉 WordPress、Laravel、前後端開發與伺服器維運。

社群

WordPress 社群參與者與活動組織者，參與 WordPress Taipei Meetup、WordCamp Taiwan／Asia、WP Campus Connect。

AI

正在研究如何把 AI 生成的設計，變成真正能安裝、維護和上線的 WordPress 網站。

我喜歡把新工具玩到真的可以上線。 平常在寫程式、辦小聚，還有研究怎麼讓 AI 幫我少加一點班。

今天會完成的事

從「想法」到「本機 WordPress Theme」的完整流程

01什麼是 Google Stitch

02為什麼要用 Stitch

03匯出功能介紹

04匯出 ZIP

05打開 Antigravity

06安裝 LocalWP

07轉成 WordPress Theme

08測試、修正與交付

提示：使用鍵盤 ← → 或下方按鈕切換投影片；列印時可另存為 PDF。

什麼是 Google Stitch

Google Labs 推出的 AI UI 設計工具

Core Idea

From idea to app

用自然語言或圖片描述需求，快速產生 Web / Mobile 介面設計，並同時提供前端程式碼。

Output

UI + Code

Stitch 不只產生靜態圖，也能輸出 HTML/CSS 或 React 形式，方便進一步交給開發工具處理。

適合從零開始探索產品畫面、Landing Page、App Prototype。
可透過對話修改版面、色彩、元件與頁面結構。

為什麼要用 Google Stitch

把「設計前期卡關」變成「可快速迭代的畫面」

傳統流程

先畫 Wireframe
再進 Figma 做視覺
與開發溝通切版細節
反覆調 CSS 與 RWD
初版常常要數天到數週

Stitch 流程

用 Prompt 描述產品與風格
快速生成多個視覺方向
用對話微調畫面
匯出程式碼與素材
把時間留給品牌、體驗與內容

好的 Prompt 決定輸出品質

不要只說「做一個網站」，要把產品、受眾、區塊與風格說清楚

請幫我設計一個 WordPress 課程 Landing Page，目標對象是想學 AI 工具的網站開發者。頁面包含：Hero、課程亮點、三步驟學習流程、講師介紹、FAQ、CTA。視覺風格：深色科技感、圓角卡片、藍綠色漸層、乾淨留白，適合桌機版網站。

產品背景

網站類型、目標族群、使用場景。

頁面內容

每個區塊需要有哪些資訊。

視覺限制

品牌色、字體感、版型與氛圍。

匯出功能介紹

Stitch 的輸出重點：讓設計可以進入下一個開發工具

匯出方式	用途	適合時機
Paste to Figma	把畫面貼到 Figma 繼續精修	需要設計師接手或做品牌細節
HTML / CSS	取得靜態前端程式碼	要切成網頁、Landing Page、Theme
ZIP Package	打包程式碼與素材	交給 Antigravity 或工程師整理
Design Context	保存設計規則與畫面脈絡	讓 AI 開發工具更理解設計意圖

注意：功能名稱與可用項目可能因 Stitch 版本、模式與帳號權限而不同。

匯出 ZIP

下載後先確認：它是「靜態前端」，不是 WordPress Theme

ZIP 可能包含

HTML / CSS / JS
圖片與素材 Assets
頁面元件或版型檔案
設計說明文件

還缺什麼

style.css Theme Header
functions.php
header.php / footer.php
WordPress Loop
wp_head() / wp_footer()

認識 Antigravity

Google Antigravity：Agentic IDE 的指揮中心

01

指揮官模式

開發者像指揮官，用自然語言派多個 Agents 在不同 Workspace 背景並行。

02

Artifacts 回饋

產出任務清單、程式碼變動與截圖；可在成果上反白留言，讓代理吸收修正。

03

瀏覽器自測

能打開 Chrome、點擊、填表、檢查 Console Logs，並自主回頭修復錯誤。

04

模型多元支援

採模型無關架構，可依任務切換 Gemini、Claude 等模型處理不同開發情境。

適合新手用 Vibe Coding 做網頁原型，也適合工程師把環境建置、套件安裝與基礎架構交給 AI；但金流、醫療、資安等高風險專案一定要由專業工程師驗收。

打開 Antigravity

把 Antigravity 當成「會自己看專案、拆任務、改程式」的 AI 開發環境

01

Open Folder

開啟 Stitch 匯出的 ZIP 解壓縮資料夾。

02

Ask Agent

請 Agent 先閱讀專案結構，整理目前頁面與素材依賴。

03

Define Mission

明確要求轉換成 WordPress Theme，而不是單純修前端。

Mission：請把這個 Stitch 匯出的靜態網頁，轉換成可安裝的 WordPress Theme。請建立必要檔案：style.css、functions.php、header.php、footer.php、front-page.php、index.php。

資料來源：Google Antigravity 官方文件與 Codelab。

認識 LocalWP

先在本機建立一個可以放心拆壞的 WordPress 沙盒

01

不用主機也能跑

LocalWP 會在電腦裡建立 WordPress 測試站，不需要先買主機或設定網域。

02

安全試 Theme

AI 轉出的 Theme 可以先在本機啟用、預覽、修錯，不會影響正式網站。

03

接上交付流程

確認畫面、圖片路徑與 RWD 正常後，再打包部署到正式 WordPress 環境。

安裝 LocalWP

先建立安全的本機 WordPress 測試環境

STEP 1下載 LocalWP安裝後建立新的 WordPress Site。

→

STEP 2建立網站選擇站名、PHP、資料庫與管理帳號。

→

STEP 3開啟 Theme 資料夾進入 wp-content/themes。

→

STEP 4放入 Theme啟用、預覽、修正錯誤。

從靜態內容改成可管理內容

初版可以先保留靜態，第二階段再導入 WordPress 動態化

階段 1

完成可啟用 Theme，畫面與 Stitch 靜態版一致。

階段 2

把標題、段落、按鈕連結改為 Customizer 或 ACF 欄位。

階段 3

把重複區塊轉成 Gutenberg Block 或 Pattern。

常見替換： <h1>固定標題</h1> → <?php the_title(); ?> 固定內文 → <?php the_content(); ?> 圖片路徑 → <?php echo esc_url(get_template_directory_uri()); ?>/assets/image.png

WordPress Theme 最小結構

Antigravity 要轉換的不是「一頁 HTML」，而是一個 Theme 專案

my-stitch-theme/ ├── style.css # Theme 資訊與主要樣式 ├── functions.php # 載入 CSS / JS、Theme 支援功能 ├── header.php # <head>、導覽列、wp_head() ├── footer.php # 頁尾、wp_footer() ├── front-page.php # 首頁版型 ├── index.php # 預設備援模板 └── assets/ # 圖片、CSS、JS、字體

靜態 → Theme

拆出可重複使用的 header、footer、template。

寫死 → WordPress

把內容逐步替換成 WordPress 函式與後台可管理資料。

使用 Antigravity 轉成 WordPress Theme

給 Agent 的任務要「具體、可驗收、分階段」

請依序完成： 1. 分析目前 HTML / CSS / assets 結構 2. 建立 WordPress Theme 最小必要檔案 3. 將原本頁面拆成 header.php、front-page.php、footer.php 4. 用 wp_enqueue_style / wp_enqueue_script 載入素材 5. 修正圖片路徑為 get_template_directory_uri() 6. 確保 wp_head()、body_class()、wp_footer() 正確存在 7. 最後提供啟用與測試步驟

關鍵轉換片段

讓樣式與腳本用 WordPress 方式載入

// functions.php function stitch_theme_assets() { wp_enqueue_style( 'stitch-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') ); wp_enqueue_script( 'stitch-theme-main', get_template_directory_uri() . '/assets/main.js', array(), wp_get_theme()->get('Version'), true ); } add_action('wp_enqueue_scripts', 'stitch_theme_assets');

驗收清單

Theme 啟用前，至少檢查這 8 件事

Theme 後台可以正常啟用
首頁畫面與靜態版一致
CSS / JS 沒有 404
圖片路徑都正確

手機版 RWD 沒有破版
wp_head() / wp_footer() 存在
選單、按鈕、表單可正常操作
沒有把測試 API Key 或私密資料放進 Theme

完整工作流

AI 設計不是終點，而是 WordPress 開發的起點

STEP 1 Google Stitch → Export ZIP 用 Prompt 或圖片生成 UI，確認版型、區塊、RWD 後，匯出 ZIP 與靜態前端素材。

STEP 2 Antigravity 打開 ZIP 專案，讓 Agent 分析結構、拆任務，轉成 WordPress Theme。

STEP 3 LocalWP 把 Theme 放進本機 WordPress，啟用、預覽，檢查路徑與錯誤。

STEP 4 WordPress 驗收後部署到正式站，再逐步加入動態資料、後台管理與維護結構。

重點總結

這套流程的價值：更快做出可驗證的網站原型

Stitch 負責把想法變成畫面；Antigravity 負責把畫面整理成工程；WordPress 負責讓網站可以被管理與持續營運。

速度

降低從空白畫布開始的成本。

可交付

不是只有截圖，而是可測試的 Theme。

可維護

用 WordPress 結構接住後續內容與客戶需求。

Question & Answer

Q & A

歡迎提問、交流，也可以掃描 QR Code 加入 Facebook，持續討論 WordPress、AI 工具與數位創作。

WordPressAI WorkflowTheme Development

掃描加入 Facebook

取得最新分享、活動資訊與技術交流。