Gemini AI 網頁設計：用 Stitch 打造專業視覺網站

想像一下這個畫面。你坐在咖啡館，打開筆電，輸入一段話：「幫我做一個極簡風格的烘焙工作室形象頁，主色奶油白，配手寫字體和產品情境照。」再喝一口咖啡的時間，螢幕上已經長出一整頁的視覺稿，按鈕、配色、版面間距都幫你排好了，旁邊還附上可以直接搬去改的前端程式碼。

這類工作流在 Gemini 生態系已經能實作。兩個關鍵工具，一個叫 Stitch，一個叫 Antigravity。Stitch 負責介面設計與前端輸出，Antigravity 則是能在編輯器、終端機與瀏覽器之間執行任務的代理式開發平台。兩者搭配，可以縮短從介面草稿到可測試網站的距離，但正式上線仍需要人工檢查程式碼、效能與安全性。

不過先別太興奮。能把設計稿生出來，跟能把一個網站安全上線、被 Google 找到、在手機上流暢跑，是兩件不同的事。這篇會把整套實戰拆給你看：這三個工具各自做什麼、為什麼要兩兩搭配、從需求到上線的完整六階段、讓產出從罐頭升級成驚艷的五個槓桿、實戰上常見的地雷，還有上線後那些 AI 不會幫你管的事。

先講結論：Gemini 生態系能做網頁設計，但它不是一鍵架站機

答案先放前面。Gemini、Stitch、Antigravity 能不能協助做出網站？可以。它們可能縮短需求整理、介面生成與第一版程式碼的時間，但幅度取決於頁面複雜度、技術棧與修改次數。主機、網域、SEO、安全性與效能仍要另外處理，產出的視覺稿與程式碼也要經過檢查、測試與部署。

這個定位很重要，因為它決定了你該怎麼用這套工具。期待對了，你會覺得它像神隊友；期待錯了，你會以為它壞掉了。它的強項是把腦海裡的畫面快速變成可點可改的成品，無意取代你「開一家會自己經營的店」這件事。把這層期待搞清楚，後面每一步你都會用得順。

快速重點整理

• Gemini 提供模型能力，Stitch 負責「從需求到畫面、從畫面到前端程式碼」，Antigravity 是代理式開發平台，可協助撰寫、執行與測試網站邏輯。
• 這個組合加速最多的是「設計稿變成可改程式碼」這一段；上線、效能、SEO 仍要你自己顧。
• 行動裝置流量早已是全球網站流量的大宗，AI 生成的版面一樣得過 RWD 與 Core Web Vitals 這兩關。
• AI 做不到的第一手經驗與品牌判斷，才是你真正的優勢。

先說這篇適合誰。第一種，是會想畫面、但不會寫程式的行銷人或創業者，你想自己把腦海裡的品牌樣貌做出來，不想每次都排隊等設計師。第二種，是設計師，你想把「產出可執行程式碼」這段外包給機器，把時間留給判斷。第三種，是開發者，你想跳過 boilerplate、把精力留給真正難的邏輯。三種人拿這套工具的方式不同，但共通點是：都不該把 AI 當終點，而是當起點。把這個位置擺對，你會用得又快又開心。

Gemini、Stitch、Antigravity 三個名字，搞清楚誰做什麼

這三個名字常被混在一起講，但它們其實是三層不同的東西。搞清楚分工，你才知道什麼時候該叫誰上場。這裡用一張表先把輪廓畫出來，後面再各自展開。

工具	它是什麼	在網頁設計裡的角色	你什麼時候叫它
Gemini	Google 的多模態大模型	大腦與推理引擎	理解需求、看懂參考圖、決定畫面與邏輯
Stitch	Google Labs 的 UI 設計產出器	把話變成畫面，把畫面變成前端程式碼	要快速長出介面、元件、版面時
Antigravity	Google 的代理式開發平台	讓代理在編輯器、終端機與瀏覽器之間規劃、執行與驗證任務	要補後端邏輯、整合資料或測試互動流程時

Gemini：背後的大腦

Gemini 提供這套生態系的重要模型能力，Stitch 與 Antigravity 則各自包裝成設計與開發工作流。不同產品採用的具體模型與版本可能更新，不宜把兩者都簡化成同一顆固定的「Gemini 大腦」。想理解模型家族的演進與能力邊界，可以先讀Gemini 完整指南，再搭配生成式 AI 的基礎觀念一起看。

Gemini 在這條工作流裡最關鍵的能力，是「多模態」。它同一時間能讀你的文字、能看你的參考圖、能理解兩者之間的關係。這也是為什麼「一張參考圖加一句話」的效果，會遠遠贏過「只靠文字描述」。它不是把圖和字分開處理，而是把它們當成同一個意圖的兩個線索一起讀。你給的線索越多、越一致，它腦中那個畫面就越接近你要的；線索互相矛盾時，它會挑它覺得最可能的那個，結果就會跟你期待的有落差。

Stitch：從話到畫面，從畫面到程式碼

Stitch 適合先產生可供討論的介面方向，再視需求匯入或重建於 Figma。Figma Make、MCP 與 Design Agent 分別處理不同的生成、工具連接與設計協作情境；是否能串成同一流程，取決於帳號權限、輸出格式與團隊實作方式。

Antigravity：跨編輯器、終端機與瀏覽器工作的開發平台

Antigravity 是 Google 推出的代理式開發平台。代理可以在編輯器、終端機與瀏覽器之間規劃、執行與驗證開發任務，不是專門的 Python 或 3D 視覺化環境。Stitch 官方也提供把設計匯出到 Antigravity、再補上後端邏輯的工作流。它能協助整合資料、撰寫互動邏輯與測試流程，但產出的程式碼仍要由人審查（見 Google 2025 年 11 月的 Gemini 3 for developers 公告，以及 Google Labs 2026 年 5 月的 Stitch 更新說明）。

這三者適合用「接力」理解：模型協助理解需求，Stitch 產出介面，Antigravity 接手程式邏輯與測試。要更懂代理式 AI，可以再延伸讀 AI Agent 的入門觀念與 MCP 協議的運作方式。跨生態的接力同樣可行，想看把 Stitch 的設計稿交給 Claude Code 重寫成正式網站的完整實戰，可以接著往下讀。如果你已經在用 Claude Code 或 Cursor 這類代理式開發工具，差別可以想成生態問題：Antigravity 與 Stitch、Gemini 同一家，畫面到程式碼的接力最少轉檔；Claude Code 走終端機路線，彈性高但整合要自己接；Cursor 偏編輯器內的輔助路線。

這兩個工具，現在還做不到什麼

誠實講一下限制，免得你用完覺得被騙。Stitch 擅長把「畫面」做出來，但它對你品牌的理解，只來自你餵給它的那幾句話和那幾張圖；你沒講的，它就會用最常見的預設去補，所以一致性得靠你自己用設計代幣守住。Antigravity 能寫邏輯、能跑流程，但它寫出來的程式碼一樣要人看過、測過，尤其碰到極端值與真實資料的髒度時，它會出現「看起來對、算起來錯」的狀況。

還有一件他們都做不到的事：他們不會幫你決定「這個畫面對這個品牌是不是對的」。這個判斷永遠是人的事。工具能幫你把想到的東西快速做出來，但「該不該想到這個東西」，是你的工作。把這條線畫清楚，你才不會把工具當成代罪羔羊。

為什麼選「Stitch 配 Antigravity」這個雙打組合

你一定會問：那我不會直接用一個 AI 架站工具就好，幹嘛拆成兩個？

老實說，如果你只是要一個「能看的形象頁」，市面上一拖拉庫 AI 架站平台都能辦到，這類工具整理在AI 網頁設計實戰裡，需要可以自己挑；不知道從何比較起，也可以先看怎麼挑 AI 架站工具的評估重點。但 Stitch 加 Antigravity 這個組合，解的是另一個問題：當你的畫面需要「會動的東西」，而不只是靜態排版。

一個只會排版的網站，跟一個會回應使用者的網站，體驗差很大。前者像海報，貼上去就不動了；後者像店面，門推開會有人招呼、櫥窗會即時更新、點選單會帶你到對的地方。Stitch 一個人可以把海報做得很漂亮，但要讓櫥窗會動、讓資料會即時更新、讓互動有邏輯，就輪到 Antigravity 上場。

• 純靜態形象頁：Stitch 一個人就夠。你給需求、它出畫面與程式碼，你微調後上線。
• 需要資料視覺化的頁面（即時報價、統計圖、庫存狀態）：Stitch 出介面，Antigravity 協助整合資料與圖表邏輯。
• 需要 3D 或沉浸式體驗的頁面（產品 360 度展示、空間導覽）：Stitch 可產出 UI，Antigravity 可協助整合相關前端套件；兩者都不是專用 3D 引擎。
• 需要複雜互動流程的頁面（報價計算機、篩選器、多步驟表單）：兩者交錯使用，畫面與邏輯來回接力。

打個比方會更清楚：Stitch 像室內設計師，給你一張漂亮的平面圖和家具清單；Antigravity 像水電與智慧家庭工程師，負責讓燈會亮、窗簾會動、溫度感測器會即時顯示數字。兩個都請，你才有一個「漂亮而且活著」的空間。只請一個，你要嘛得到一個好看但不通水電的樣品屋，要嘛得到一個管線很強卻長得很工程的機房。

判斷要不要動用 Antigravity，有一個簡單的標準：你的畫面會不會「回應使用者丟進來的東西」？如果答案是會，例如使用者輸入數字後畫面要算出結果、勾選條件後列表要即時更新、捲動時某個元素要跟著動，那就值得把 Antigravity 拉進來。如果整頁從頭到尾都長一樣，那就放過自己，Stitch 一個人搞定就好，別為了用而用。

上手門檻與成本，先有心理準備

這兩個工具的門檻很不一樣。Stitch 的門檻較低，能用文字、圖片或設計檔描述需求就能開始；Antigravity 的門檻高一階，因為使用者仍要看得懂程式碼、權限、執行結果與測試失敗。你不一定要從零手寫每一段，但要能讀、能引導，也要知道什麼時候不能直接接受代理的修改。

成本方面，Stitch 仍屬 Google Labs 產品；Antigravity 2.0 已正式提供，並有免費與付費方案。兩者的功能、介面與配額仍可能調整，實際可用量應以官方方案頁和帳號顯示為準。可先用免費額度跑過完整流程，再依使用頻率、模型需求與團隊協作情境評估是否付費。

動手做：從一段需求到可部署網頁的六階段工作流

這是一套實測下來最穩的工作順序。每一段都會標出「這一步誰負責」，你才不會把工具用錯地方。順序不能亂，因為前面省下的十分鐘，後面會用兩小時的除錯還回去。

1. 階段一，把需求講清楚（人）。動手前先寫下三件事：這頁要給誰看、看完要做什麼動作、成功的樣子是什麼。很多人直接跳到「幫我做一個網站」，結果做出來自己也不知道好不好。需求越具體，AI 越不會瞎猜；你寫下來的同時，其實也在逼自己想清楚這一頁到底為何存在。
2. 階段二，生出第一版視覺稿（Stitch）。把需求連同參考圖丟進去，讓它長出第一版。這一版不要期待完美，你要的是「方向對不對」。方向錯了，這裡改最便宜；方向對了，後面才有東西可以打磨。一次生兩到三個變形來挑，比死磕一個版本更有效率。
3. 階段三，設計系統校準（人加 Stitch）。把主色、字體、間距、圓角這些代幣定下來，讓所有元件遵守同一套規則。這一步是罐頭與作品的分水嶺，後面會專門講。做這件事時要狠心，凡是不符合代幣的元件，全部拉回規則，別讓「特例」變成全站的破口。
4. 階段四，把會動的部分接出來（Antigravity）。凡是需要運算的東西，圖表、篩選、計算、3D，交給 Antigravity 寫邏輯，再把產出接回 Stitch 的畫面。接的時候先約定好資料的長相（欄位名、型別），兩邊對得上，畫面才不會接好了卻顯示不出來。
5. 階段五，組裝與響應式檢查（人加工具）。把畫面與邏輯兜成一個能跑的網頁，然後用手機、平板、桌機各看一次。這一步最枯燥，但也最不能省，很多「桌機很美、手機全歪」的悲劇都是在這裡被擋下來的。
6. 階段六，部署與上線（人）。主機、網域、SSL、效能、SEO，這些工作決定網站能不能被找到與使用，後面會分一段說明。把上線當成獨立的階段目標，完成測試再發布。

階段二丟給 Stitch 的指令，可以依序寫頁面目的、設計代幣、參考圖與排除項目。像這樣：「這是一個烘焙工作室的形象首頁，目的是讓人想預約體驗課。主色奶油白 #FAF6EF、輔助色焦糖棕、字體思源黑體配一款手寫體、圓角 12px、留白要多。參考圖如附。不要用閃亮漸層、不要放閃光特效。」排除項目能減少模型自行補入不符合品牌的效果。

這六個階段裡，第一個與第六個幾乎全靠人，中間四個是 AI 主場。記住這個比例，你就不會誤以為「用 AI 就等於全自動」。如果你完全不想碰程式碼，那麼組裝與部署會是卡關點，這時別硬上，改走Vibe Coding那條路，讓 AI 用自然語言陪你把網站架起來；需要先把畫面想清楚，就回頭看UI 原型設計的觀念，先把骨架畫對再談皮。

讓 AI 產出驚艷作品、擺脫罐頭感的五個槓桿

同一套工具，為什麼有人做出來像模板、有人做起來像作品？差別不在工具，在於你會不會「餵」它。接下來這五個槓桿，是讓產出質感跳一級的方法。它們沒有一個是 AI 專屬，但套到 AI 工作流上效果特別明顯。

槓桿一：先定設計代幣，再下指令

很多人下指令是「幫我做一個漂亮的網站」，這種指令只會得到一個漂亮的模板。改成「主色 #2B2B2B、輔助色奶油白、字體用思源黑體與一款手寫體、圓角統一 12px、元件間距用 8 的倍數」，產出立刻有品牌感。設計代幣（design tokens）就是這些被寫死、全站一致的規則。你先定，AI 才有遵循的依據；你不定，AI 就用它看過最多人用的那一套，結果就是大家長得都一樣。代幣寫一次可以用一整個專案，是投報率最高的一個動作。

槓桿二：用參考圖取代形容詞

「極簡」「現代」「高級」這些形容詞，每個人腦中的畫面都不一樣，AI 也是。與其用十個形容詞描述你要的感覺，不如直接丟一張參考圖，再附一句「我要這種留白的節奏，但配色換成我品牌的」。一張圖能溝通的東西，比一段話多十倍。這也是 Stitch 這類能讀圖的工具最該被用到極限的地方，別只拿它來打字，拿它來「看圖」。

槓桿三：元件導向，不是整頁導向

不要一次叫 AI「做整頁」，它會給你一個各方面都六十分的東西。拆成「先做首屏」「再做產品卡」「再做 footer」，每個元件單獨打磨到九十分，再組起來。這就是工程師講的元件導向（component-first），它讓每個部分都可重用、可替換、可單獨優化。聽起來多一步，實際上更快，因為你不用每次改一個小東西就重長整頁。元件做好還能留著下次用，越做越快。

槓桿四：一個畫面只說一件事

AI 很聽話，你叫它塞十個賣點，它就乖乖塞十個，結果畫面變成菜市場。人的注意力是稀缺資源，一個畫面只該有一個主角，其他都是配角。下指令時別列十個功能，回頭問自己「這一頁如果只能讓使用者記住一件事，是哪一件」，然後讓 AI 圍繞那一件事佈局。這個紀律比任何工具都重要，而且只有你做得到。

槓桿五：留白與節奏，比花俏更重要

驚艷的網站很少是因為「塞滿」，通常是因為「克制」。留白是設計裡最被低估的元素，它讓主角被看見、讓眼睛能呼吸、讓資訊有節奏。AI 預設傾向把空間填滿，因為那看起來「做了很多事」。你的工作剛好相反，是在它填滿之後，狠心刪掉一半。這個刪的動作，是人的判斷，AI 做不來，而且通常刪完之後質感會立刻跳一級。

這五件事其實就是網頁設計趨勢與 AI 應用背後的老道理，差別只在於：過去這些原則是設計師用來規範自己，現在你用它們來規範 AI。把版面設計基礎與必備元素再複習一遍，你會發現 AI 時代並非設計變簡單了，而是設計判斷變得更值錢。會下判斷的人，加上會產出的 AI，才是這一輪真正的贏家組合。

地雷清單：Stitch 與 Antigravity 實戰常見的坑

工具再強，踩到雷一樣翻車。接下來這張表，整理了實際使用時最常碰到的狀況，幫你少走冤枉路。每一個都附上後果與解法，遇到的時候不用從頭懷疑人生。

狀況	後果	建議解法
直接拿 AI 產出當成品上線	語意結構亂、無障礙標題層級錯、搜尋引擎讀不懂	把 AI 產出當草稿，上線前一定過一次結構與語意檢查
圖片沒壓縮就丟上去	行動版載入爆慢，Core Web Vitals 全紅	統一壓縮、轉新一代格式、開延遲載入，再上線
過度信任互動邏輯，沒測極端值	資料一多就卡、或數字算錯還不自知	Antigravity 產出的邏輯，用極端值與空值各跑一遍
用太多形容詞下指令	每個人腦中畫面不同，產出永遠不到位	形容詞換成參考圖加設計代幣，溝通精準度三級跳
設計代幣全站不一致	每改一頁就要手調一次，越改越亂	代幣集中管理，所有元件只引用、不寫死
把 AI 誤當成品交付者	期待落空，覺得工具不好用	把產出視為待審草稿，由人完成品牌、可用性與程式碼檢查

表格裡第一個雷值得多講兩句，因為它最容易被忽略。AI 產出的 HTML，常常是「視覺對了、結構錯了」：它會用一堆 div 把畫面排得漂漂亮亮，卻忘了用正確的標題層級（h2、h3 的順序）、忘了給圖片替代文字、把該是清單的東西做成一堆 div。人眼看起來沒問題，但搜尋引擎與螢幕閱讀器是「讀結構」的，結構一亂，它們就讀不懂你這頁在講什麼，排名與無障礙一起吃虧。所以上線前，務必把標題層級從上到下走一遍、把每張圖的替代文字補上、把語意標籤（article、section、nav）放對位置。這件事 AI 可以幫你做，但要你開口要求，它不會主動做。

這些坑的共同點只有一個：把 AI 當成成品交付者，沒把它當成草稿加速器。心態對了，雷就少一半。更廣義的自架地雷整理在另一篇常見錯誤總整理裡，那是給所有架站方式用的，這裡則是特別針對 AI 產出這條路。兩篇對照著看，你能少走至少半年的冤枉路。

AI 生成網頁，還要不要管 Core Web Vitals？

要。而且比你想的更重要。

有兩個事實要分開看。全球網站流量有很大一部分來自行動裝置（依 Statista 的行動流量統計，2026 年 4 月）。Google 的排名系統也會使用 Core Web Vitals 等頁面體驗訊號，但沒有單一「頁面體驗分數」，良好指標也不保證排名（見 Google 的 page experience 文件）。因此，手機打開會頓、會跳版的網站，最直接的問題是使用者體驗；搜尋影響則要和內容相關性等其他訊號一起看。

為什麼速度這麼重要？因為使用者真的沒耐心，每一秒的延遲都在把人往外推（見 web.dev 的 Why does speed matter?）。AI 生成的網頁特別容易在這裡出事，因為它會大方地塞動畫、塞大圖、塞沒壓縮的素材，覺得「這樣比較好看」。它不懂你的使用者是在捷運上用 4G 打開這個頁面的。所以 AI 給你的是「視覺上的滿分」，你要自己把它修成「體驗上的滿分」。

三個一定要過的關

• RWD 響應式：同一份版面要在桌機、平板、手機都順。AI 預設會把畫面填滿，你要手動檢查斷點與排版的折行。觀念看響應式設計這篇就夠，重點是別假設「桌機看 OK 就等於手機看 OK」。
• Core Web Vitals：LCP（最大內容繪製）、INP（互動到下次繪製）、CLS（累計版面位移）三個指標，是 Google 衡量體驗的尺。AI 產出的頁面常常 CLS 爆掉，因為圖片沒設長寬、字體載入會跳。深入做法看Core Web Vitals 攻略。
• 結構化資料：頁面若符合 Google 支援的類型，可加入與可見內容一致的 Schema，爭取相應搜尋功能。FAQ rich result 已在 2026 年 5 月停止顯示（見 Google 的文件更新紀錄），不能再把 FAQ 標記當成豐富版位策略。手法在結構化資料教學裡。

別忘了無障礙，那是體驗的底線

頁面體驗還有一塊常被忽略：無障礙（accessibility）。AI 產出的畫面，很容易出現「圖片沒有替代文字」「按鈕只有顏色沒有文字」「對比太低」這類問題，對使用螢幕閱讀器的人來說等於整頁壞掉。這不只是道德問題，也是搜尋引擎與部分採購案會檢查的硬指標。上線前花十分鐘把替代文字補上、把對比拉到符合標準、把標題層級排整齊，成本很低，收益卻涵蓋了一整批你原本會錯失的使用者。

這幾關過了，你的網站才算從「好看」升級到「能用又找得到」。速度優化的完整手法，整理在Core Web Vitals 實戰，建議上線前照著跑一遍；想在搜尋結果站穩，再補一份站內 SEO 的基本功，把標題、描述、內部連結、圖片替代文字這些細節一次顧好。

從草稿到上線：部署、網域、SSL 與長期維護

這一段是 AI 最幫不上忙的地方，也是最多人卡住的地方。你手上有了漂亮的網頁，然後呢？

先把宿主定下來。WordPress 到今天仍是全球使用率最高的內容管理系統，市占率高得驚人（依 W3Techs 的市占統計，2026 年 6 月）。如果你的網站未來會持續長新內容、需要後台、需要外掛生態，從 AI 產出的靜態稿搬進 WordPress 是很自然的一條路；怎麼從零把 WordPress 架起來，可以看架站新手教學，三個層次把形象網站搭起來。如果你還在挑平台，WordPress、Wix、Webflow 的優缺點與適用場景，在平台比較實測裡擺在一起比給你看。

上線前後，這四件事一定要做

1. 網域。這是你的門牌，挑一個好記、跟品牌一致的名字。怎麼查、怎麼買、怎麼避免常見設定問題，可以看網域申請與管理教學。網域是長期使用的資產，申請前要確認持有人資料與續費條件。
2. DNS 指向。網域買了，要讓它指向你的主機，世界才打得開。DNS 設定的原理與步驟，看 DNS 設定教學跟著做。設定完記得等生效，別急著以為自己搞砸了。
3. SSL 憑證。HTTPS 能保護傳輸內容，也是 Google 使用的輕量排名訊號；部分不安全情境會觸發瀏覽器警示，但不能簡化成固定「扣分」。免費與付費憑證怎麼選，可以看SSL 憑證指南。
4. 本地到線上的搬家。很多人習慣先在本機做好再推上去，這一步最容易漏資料、漏連結。WordPress 從本地端搬到線上主機的完整流程，跟著做就不會漏。搬家後記得檢查內部連結與圖片路徑，這兩個是最常破的地方。

這四件事看起來瑣碎，但少做任何一件，網站可能打不開、觸發瀏覽器警示，或在搬家後出現圖片路徑錯誤。AI 可以協助設定與檢查，實際權限、部署結果與安全責任仍由人承擔。

上線只是起點，維護才是長期戰

很多人以為網站上線就結束了，其實那只是開始。主機要續費、外掛要更新、備份要定期做、內容要持續長，這些都是長期功。AI 幫你把第一版做出來，但每個月回來看看數據、修掉壞掉的連結、補上新的內容，這些仍是你的事。把維護寫進行事曆，比一時做到完美更重要；一個會持續更新的普通網站，長期表現會贏過一個上線後就沒人動的漂亮網站。

AI 做不到的那一塊，才是你真正的優勢

工具會越來越強，今天要手調的東西，半年後可能一句話就生成。所以問「AI 能做什麼」其實問錯方向，真正該問的是：AI 做不到什麼？

答案就三件事：第一手經驗、品牌判斷、對真人意圖的理解。

AI 能模擬語氣，也能組合既有風格，但無法替你確認現場需求。客戶真正需要的可能是讓人願意預約的產品資訊，而不是華麗官網；這類取捨必須靠訪談、可用性測試與實際數據。模型能協助整理搜尋意圖資料，品牌方向與需求判斷仍要由人負責。

這三件事要靠「跟真人互動」和「讓數據驗證假設」來練。經驗來自訪談、觀察與實作；品牌判斷要靠比較作品並回頭檢視決策；對意圖的理解，則來自真實流量與使用者行為。工具能縮短執行時間，不能替你完成這些驗證。

這也是實務工作上最深的體會。工具人人買得到，會用工具的人很多，但能在工具產出上面做出「只有你會做的判斷」，才是別人搶不走的那一塊。AI 把執行的門檻壓到地板，於是「判斷」就成了新的天花板。執行人人能做，判斷才是稀缺。

所以別急著擔心 AI 搶飯碗，先想清楚：你在這個領域累積了哪些「不做這行就不會知道」的經驗。那些東西，才是你在 AI 時代還能站著的理由。網頁設計也一樣，會用 Stitch 與 Antigravity 的人很快會滿街都是，但能判斷「這個畫面對這個品牌是對的」的人，永遠稀缺。把時間投在累積判斷，會比投在學會某一個工具更值得，因為工具會換，判斷會留下。

你的下一步：四週落地行動方案

看完一堆觀念，最重要的還是動手。下面是建議的四週節奏，每天不用超過一小時，做完你手上就有一個真的上線的頁面。

1. 第一週，選一個你自己的小專案。不要拿客戶的、不要拿公司的，拿一個你最想做的個人頁面。把它寫成三句話需求：給誰看、看完做什麼、成功的樣子。需求不清楚，後面全白做。
2. 第二週，用 Stitch 跑完整個設計到程式碼流程。先用參考圖加設計代幣長出第一版，再用元件導向的方式逐個打磨。目標是做出一個你自己看了會想分享的首屏。
3. 第三週，把需要動的部分交給 Antigravity。就算只是一個簡單的報價計算機或即時圖表也好，親自體驗「畫面與邏輯接力」的感覺。這一週你會最痛苦也最興奮。
4. 第四週，上線、測速度、過 Core Web Vitals。把網域、DNS、SSL、響應式、速度一次顧好，親眼看到自己的頁面在手機上流暢打開。這一刻，你會真的相信「我一個人也能做出一個驚艷的網站」。

四週節奏最怕做到一半停下。AI 工具讓起步容易，也容易累積半成品。這段期間先專注一個專案，把它做完、上線並完成基本測試；一個可運作的小網站，比多個停在草稿階段的作品更能暴露真實問題。

開始挑出你手上那個一直想做、卻一直沒動工的頁面吧。從一頁開始就好，不要貪多。把第一頁做到自己看了會想分享給朋友，剩下的就只是複製節奏的事。真正困難的從來不是工具，而是你願不願意開始。

如果你在過程中遇到「畫面會做，但不知道怎麼讓它被找到、被點擊、被轉換」的問題，這正是我們 Whoops SEO 最常幫人補的那一塊。不必一次到位，先從一頁開始，等你需要的時候，我們都在。