~/blog/google-antigravity-practical-tutorial-ai-copilot.md
AI 自動化與智慧應用 · 2025 / 12 / 09

Google Antigravity 不是魔法!『逆向工程』,用現有工具打造你的 AI 開發副駕

Eric — 浪花科技創辦人 / AI 架構師
Eric
浪花科技創辦人 · AI 架構師
Google Antigravity 不是魔法!『逆向工程』,用現有工具打造你的 AI 開發副駕
目錄 table-of-contents.md

Antigravity 到底是什麼,又跟你有什麼關係

Google Antigravity 不是一款你能下載安裝的軟體,而是 Google 拋出的一個方向與開發思維代號,代表「具備完整上下文理解能力的 AI 開發代理(AI Agent)」。它的重點不是取代工程師,而是把開發工作從「手動撰寫程式碼」推升到「策略指導與品質把關」的層次。

好消息是,你其實不必等 Antigravity 正式問世。今天就能用現成、廣為人知的工具(例如 Google 的 Project IDX 搭配內建 Gemini)模擬出同樣的工作流,提前練好「提問、審查、迭代」這三項在 AI 時代真正值錢的能力。本文會帶你逐步走一遍,並給出一個可實際參考的 WordPress 外掛範例。

最近科技圈最火的詞除了 AI 還是 AI,而 Google 拋出的「Antigravity(反重力)計畫」更是把這股火燒得更旺。很多人一聽到這名字,腦中浮現的是科幻電影裡程式碼自動滿天飛、工程師躺著喝咖啡的場景,甚至有文章把它渲染成「開發者末日」。身為一個天天跟程式碼打交道的工程師,我得說:大家先冷靜一下,別被酷炫的名詞嚇壞了。

與其把它當成遙不可及的黑科技,不如把它「逆向工程」,拆解核心理念,然後看看在我們熟悉的 WordPress 開發環境中,如何用現有工具打造自己的 AI 開發副駕,提前體驗「Antigravity」時代的工作模式。

Google Antigravity 到底是什麼?

當 Google 談論 Antigravity 時,他們談的不是要取代工程師,而是要打造一個「具備完整上下文理解能力的 AI 開發代理」。用工程師的語言翻譯,它想解決的是現階段 AI 寫程式的三個天花板:

  • 讀懂整個專案(Codebase-Aware):不像現在多數助手只能就你貼上的片段給建議,Antigravity 的目標是讓 AI 像一位資深同事,完整讀取整個專案的程式碼、資料庫結構、API 文件,甚至過去的版本控制紀錄,據此給出符合專案脈絡的答案。
  • 多模型協作(Multi-model Parallelism):不是單一模型在運作,而是由多個專精不同領域的 AI 模型協同工作。可能有一個專門寫 PHP、一個專門寫 SQL 查詢、一個專門做安全性分析、一個專門寫測試案例,像一個團隊一樣合作完成任務。
  • 自主任務拆解與執行:你給它的不再是「幫我寫一個 for 迴圈」,而是「幫我在網站上新增一個活動報名系統」。AI 會自己把複雜任務拆成:建立資料表 → 開發後台 CPT → 撰寫前端表單 → 處理表單提交 → 發送確認信⋯⋯一系列子任務,並逐一執行。

所以 Antigravity 的本質,是將開發工作從「手動撰寫」提升到「策略指導」的層次。對 WordPress 開發者來說,這是挑戰,更是巨大的機會。

它和我現在用的 Copilot、ChatGPT 有什麼不同?

差別主要在「上下文範圍」與「自主性」。傳統的程式碼補全工具,理解的是你眼前這幾行或這個檔案;而 Antigravity 這類代理式(Agentic)方向,追求的是理解整個專案、自主拆解任務、並串起多個步驟。換句話說,前者像是更聰明的自動完成,後者更像是一個會自己安排工作的「初級工程師」。理解這個區別,是後面所有實作的前提。

為什麼工程師要從「碼農」躍遷到「架構師」?

在 AI 成為開發主力之後,我們的價值在哪?答案是:思考。寫重複的 CRUD(增刪改查)程式碼、套用現成函式庫,這些都會被 AI 大規模取代;我們的核心競爭力,會轉移到那些 AI 暫時做不好的事情上。具體來說有三項。

1. 問題定義的藝術

跟 AI 協作,最關鍵的一步是學會「提問」。你必須用精確、無歧義的語言,把一個模糊的商業需求,轉化成 AI 可以理解的技術規格。這是「提示工程(Prompt Engineering)」的精髓,但比單純寫 Prompt 更高階,考驗的是你對系統的理解深度。

2. 驗證與迭代的科學

AI 會犯錯,而且可能犯一些看起來很蠢、或隱藏很深的錯誤。它產出的程式碼,100% 需要人類專家審查(Code Review)、測試與驗證。我們的角色就像 F1 賽車的品管總監:AI 是那台超強的組裝機器人,但最終能不能上場、安不安全,由我們拍板定案。

3. 跨模組的宏觀視角

Antigravity 擅長在一個定義好的框架內完成任務,但當任務牽涉到多個系統整合時——例如 WordPress 網站的訂單要同步到外部的 HubSpot CRM、再透過 n8n 自動化流程觸發 LINE 通知——這種「上帝視角」的架構規劃能力,正是資深工程師無可取代的價值。

實戰教學:今天就在 WordPress 工作流中模擬 Antigravity

講了這麼多理論,來點實際的。雖然我們沒有真的 Antigravity,但我們有 Google 的 Project IDX 和內建的 Gemini。Project IDX 是一個雲端開發環境,可以想像成一個預先配置好、專為網頁開發設計的 VS Code,最大亮點是深度整合 Gemini,讓 AI 擁有你整個工作區的上下文。這就是我們模擬 Antigravity 的最佳實驗場。

整個流程其實就是四個環節,記住它,就抓住了「與 AI 協作」的骨架:

  1. 任務設定:定義一個清楚、範圍適中的需求。
  2. 提示工程:把需求寫成精確、可執行的技術規格交給 AI。
  3. 程式碼生成與審查:拿到產出後逐行檢查安全、效率、標準、完整性。
  4. 精煉與迭代:以人類專業判斷指出優化點,讓 AI 重構。

第一步:任務設定 — 打造一個客製化 WooCommerce 儀表板小工具

我們的目標是:開發一個 WordPress 外掛,在後台儀表板新增一個小工具,顯示「近期低庫存商品」。這是很常見的電商客製化需求,不大不小,剛好可以展現 AI 協作的威力。

第二步:提示工程 — 與你的 AI 副駕「對話」

在 Project IDX 的聊天視窗中,我們要像對一位初級工程師下指令一樣,清晰描述需求。這是我會用的 Prompt:

請幫我建立一個新的 WordPress 外掛,功能如下:

1. 外掛名稱為「Roamer Tech - Low Stock Widget」。
2. 主要功能是在 WordPress 後台儀表板新增一個 widget。
3. 這個 widget 的標題是「近期低庫存商品」。
4. Widget 內容需要顯示最近 5 筆「庫存數量低於 10」的 WooCommerce 商品。
5. 顯示的每一筆商品都需要包含:商品名稱、目前的庫存數量,以及一個可以直接點擊連到該商品後台編輯頁面的連結。
6. 請遵循 WordPress 的編碼標準與安全性規範,程式碼需要加上適當的註解。
7. 請使用 WP_Query 或 wc_get_products 進行查詢,並確保查詢效率。

你看,這個 Prompt 不只是說「我要一個低庫存列表」,而是把標題、數量、顯示欄位、連結、技術選型等細節都定義清楚。這就是高品質的「問題定義」——它直接決定了 AI 產出的品質下限。

第三步:程式碼生成與初步審查

Gemini 會很快生成一份完整的 PHP 檔案。這時候,我們的「工程師囉嗦模式」就要啟動。拿到程式碼,絕對不能複製貼上就完事,要像審查同事的 Code 一樣逐行檢查:

  • 安全性:輸出的內容有沒有用 esc_html()esc_url() 處理過?權限檢查(例如 current_user_can())有沒有做?
  • 效率:它的資料庫查詢寫得好不好?有沒有可能造成 N+1 問題?(雖然在這個案例中比較不會,但這是個好習慣)
  • 標準:函式命名、掛載 Hook 的方式,是否符合 WordPress 的最佳實踐?
  • 完整性:有沒有考慮到網站上沒有安裝 WooCommerce 的情況?程式碼會不會因此報錯?

這四個面向不是隨便列的,它對應了真實專案最常出包的地方:沒跳脫輸出造成 XSS、沒檢查權限造成越權、沒處理相依套件缺席造成致命錯誤。把它當成你的固定檢查清單。

以下是我在 Gemini 產出的基礎上,進行微調與強化後的版本。請注意其中刻意加入的權限檢查與相依檢查:

<?php
/**
 * Plugin Name:       Roamer Tech - Low Stock Widget
 * Description:       Adds a custom dashboard widget to show recent low-stock products in WooCommerce.
 * Version:           1.0.0
 * Author:            Eric @ Roamer Tech
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       rt-low-stock-widget
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

// Add the dashboard widget.
add_action( 'wp_dashboard_setup', 'rt_add_low_stock_dashboard_widget' );

function rt_add_low_stock_dashboard_widget() {
    // Only add the widget for users who can manage WooCommerce.
    if ( ! current_user_can( 'manage_woocommerce' ) ) {
        return;
    }

    wp_add_dashboard_widget(
        'rt_low_stock_widget',                  // Widget slug.
        esc_html__( 'Recent Low-Stock Products', 'rt-low-stock-widget' ), // Title.
        'rt_render_low_stock_widget_content'    // Display function.
    );
}

function rt_render_low_stock_widget_content() {
    // It's a critical check to prevent fatal errors if WooCommerce is not active.
    if ( ! class_exists( 'WooCommerce' ) ) {
        echo '<p>' . esc_html__( 'Please activate WooCommerce to use this widget.', 'rt-low-stock-widget' ) . '</p>';
        return;
    }

    // Using wc_get_products is the modern, recommended way.
    $products = wc_get_products( array(
        'limit'        => 5,
        'status'       => 'publish',
        'stock_status' => 'instock',
        'meta_key'     => '_stock',
        'meta_value'   => 10,
        'meta_compare' => '<',
        'orderby'      => 'date',
        'order'        => 'DESC',
    ) );

    if ( ! empty( $products ) ) {
        echo '<ul>';
        foreach ( $products as $product ) {
            $stock_quantity = $product->get_stock_quantity();
            $edit_link = get_edit_post_link( $product->get_id() );

            echo '<li>';
            echo '<a href="' . esc_url( $edit_link ) . '">' . esc_html( $product->get_name() ) . '</a>';
            echo ' - <strong>Stock: ' . esc_html( $stock_quantity ) . '</strong>';
            echo '</li>';
        }
        echo '</ul>';
    } else {
        echo '<p>' . esc_html__( 'No low-stock products found. Great job!', 'rt-low-stock-widget' ) . '</p>';
    }
}

這段程式碼好在哪?它在輸出前都做了跳脫(esc_html() / esc_url()),在註冊 widget 前先確認使用者權限,並在渲染前確認 WooCommerce 確實存在——這三點正是 AI 初版產出最常漏掉、卻最容易被人類審查抓出來的地方。

第四步:精煉與人類專業的價值

程式碼能跑了,但還不夠「專業」。一個資深工程師會想得更遠:這個儀表板 widget 每次頁面刷新都要查一次資料庫,如果後台使用頻繁、商品量大,這就是個潛在的效能瓶頸。怎麼優化?用 WordPress 內建的 Transients API 加入快取。

Transients API 是 WordPress 提供的「帶過期時間的暫存」機制:它把運算結果先存起來,並設定一個有效期限,期限內直接讀快取、不再打資料庫,到期後才重新查詢。對「不需要即時、但會被反覆讀取」的資料(例如低庫存清單)特別合適。

於是我會接著對 AI 說:「很好,現在請幫我重構這段程式碼,為查詢結果加入 1 小時的快取,使用 Transients API。」AI 會再次生成程式碼,而我的工作,就是驗證它做得對不對。這時要檢查的重點包括:

  • 快取鍵是否唯一且具描述性:避免和其他外掛的暫存撞名。
  • 過期時間是否合理:HOUR_IN_SECONDS 這類常數表達 1 小時,比硬寫 3600 更易讀。
  • 失效機制是否到位:當商品庫存有異動時,是否需要主動清除快取,避免顯示過期資訊?
  • 讀寫流程是否正確:先嘗試讀快取,沒有才查詢並寫回快取——這個順序不能反。

這就是「人類監督、AI 執行」的完美協作:AI 負責把模式化的程式碼快速生出來,人類負責判斷「該不該做、做得對不對、邊界在哪」。

對 WordPress 開發者的真正衝擊是什麼?

經過上面的模擬你會發現,Google Antigravity 或類似的 AI 工具,並不是要消滅我們的工作,而是強迫我們升級。它就像一個能力超強、但沒有經驗的實習生:能做得又快又多,但需要你來指引方向、把關品質、修正錯誤、做出最終決策。

未來,一個優秀的 WordPress 工程師,他的日常可能不再是埋頭寫程式碼,而是:

  • 分解複雜需求,撰寫清晰的技術規格給 AI。
  • 花大量時間在 Code Review、效能測試和安全性審核上。
  • 專注於系統架構設計、API 整合、資料流規劃等更宏觀的任務。
  • 成為解決「AI 搞不定」那些刁鑽問題的專家。

總結來說,Google Antigravity 是一個信號,告訴我們軟體開發的遊戲規則正在改變。恐懼和抗拒沒有用,最好的策略就是擁抱它、理解它、駕馭它。從今天開始,在你的專案中有意識地引入 AI 協作,練習如何「提問」和「審核」,你就能在這場技術浪潮中,從被動的「碼農」進化為主動的「架構師」。

準備好迎接 AI 驅動的開發新時代了嗎?

AI 技術的整合與應用,是浪花科技的核心競爭力之一。無論您是想打造更智慧的企業官網、優化開發流程,還是需要客製化的系統整合方案,我們都有豐富的實戰經驗。我們不只寫程式,更為您設計能應對未來的系統架構。如果您對如何將 AI 融入 WordPress 專案感興趣,或有任何複雜的技術挑戰,歡迎點擊這裡,填寫表單與我們的技術團隊聊聊,讓我們一起打造您的下一個成功專案。

延伸閱讀

// FAQ

常見問題

與 AI 協作開發的標準流程有哪四個環節?
與 AI 協作開發可拆成四個環節:任務設定,定義清楚且範圍適中的需求;提示工程,把需求寫成精確、可執行的技術規格交給 AI;程式碼生成與審查,拿到產出後逐行檢查;以及精煉與迭代,以人類專業判斷指出優化點讓 AI 重構。掌握這四步就抓住了與 AI 協作的骨架。
審查 AI 生成的 WordPress 程式碼時應該檢查哪些面向?
AI 產出的程式碼絕不能複製貼上就用,建議從四個面向逐行檢查:安全性(輸出是否用 esc_html() 或 esc_url() 處理、是否做了 current_user_can() 權限檢查)、效率(資料庫查詢寫得好不好、有無 N+1 問題)、標準(函式命名與掛載 Hook 的方式是否符合最佳實踐)、完整性(是否考慮相依套件未安裝等情況以免報錯)。這對應了真實專案最常出包的地方,可當成固定檢查清單。
代理式(Agentic)的 AI 開發工具和 Copilot、ChatGPT 差在哪?
差別主要在「上下文範圍」與「自主性」。傳統的程式碼補全工具理解的是你眼前這幾行或這個檔案;代理式方向追求的是讀懂整個專案、自主拆解任務並串起多個步驟。前者像是更聰明的自動完成,後者更像是一個會自己安排工作的初級工程師。
怎麼寫出高品質的 Prompt 來請 AI 開發 WordPress 外掛?
高品質的 Prompt 要把細節定義清楚,而不是只說「我要一個低庫存列表」。應明確指定外掛名稱、功能位置(例如後台儀表板 widget)、顯示的資料筆數與條件、每筆要顯示的欄位與連結、技術選型(例如使用 WP_Query 或 wc_get_products),並要求遵循編碼標準與安全性規範、加上註解。Prompt 的品質直接決定了 AI 產出的品質下限。
~/roamer-tech/newsletter // FREE
// newsletter

訂閱免費電子報

把 AI 自動化、企業系統設計與 WordPress / Laravel 開發的真實案例和可直接照做的技巧,整理成電子報寄給你。只寄精選內容、不灌垃圾信,一鍵就能退訂。

$
// final.exec()

準備好讓你的網站開始為你工作了嗎?