Gemini AI 網頁設計為何撞臉？Stitch 機制拆解

用 AI 生成過幾次網頁的人，常撞見同一個現象：這次下指令說極簡，下次說溫暖，兩次產出卻像同一家的兄弟作，一樣的大圖首屏、一樣的圓角卡片、一樣的三欄服務介紹。於是出現兩種歸因。一種怪工具不夠強，換下一個模型再試一輪；一種怪自己不會下指令，去抄更長的提示詞。兩種歸因把人帶往不同的繞路，共通點是都沒碰到問題的源頭。

撞臉不是模型失準，而是生成器的預設行為。生成式模型看過大量版面，它做的是在這些版面裡挑選與組合；你沒給的資訊，它多半拿見過最多次的答案補位。所以輸出的上限，在你按下生成之前，就被輸入的約束密度決定了：規格給得越具體，它能自行發揮的空間越小，畫面離那個大家熟悉的樣板越遠。

接下來先把這套機制拆開，看相似輸出從哪裡來；再談指令怎麼寫，把一條指令的四個零件補齊；跟著生成管線往出口走，看它在結構語意、速度效能、上線驗收三個邊界各自停下的位置；終點停在人的位置，哪些事交給機器，哪些事該練成專業，以及三條可走的路線。

快速重點：AI 生成的網頁之所以相似，是因為你沒給的資訊，模型多半拿見過最多次的答案補上；約束越具體，輸出離樣板越遠。生成器照顧得了畫面，照顧不了結構、速度與上線責任，那些仍屬於人。

撞臉不是失誤，是生成器的預設輸出

先把話說直：生成器不是在「為你設計」，它是在幫你補機率。同一個需求，你沒講的部分，它多半用訓練過程裡見過最多次的答案填；見過最多次的答案，通常就是最常見的長相。輸出落在最常見的那一區，那是它照規則辦事的結果，與失常無關。

把責任推給工具強弱，或推給自己的指令功力，都少了中間那一層：生成的本質是挑選與組合，不是從零創造。這也解釋了一個常被抱怨的現象：免費工具與付費工具的預設輸出，常常都偏向同一種「安全的好看」，因為安全的好看正是被生成最多次的那一區。換工具能挪動的幅度，遠小於把輸入寫清楚能挪動的幅度。

工具層只需要最小定位。Stitch 是 Google Labs 推出的 UI 產出器，把文字描述與參考圖轉成畫面與前端碼，歷次更新也都圍繞這個角色擴充輸入方式與匯出目的地（見 Google Labs 的 Stitch 更新公告）。它背後的理解力來自 Gemini 家族的多模態模型，文字與圖像一起讀；模型家族怎麼演進、能力邊界在哪，可以先讀Gemini 模型家族的完整介紹，再配上生成式 AI 的基本觀念，後面讀機制時底子會穩很多。

多模態拆開看就是兩件事。文字與圖像一起讀，代表一張參考圖加一句話，能傳達的訊號比一長串形容詞更精確；也代表你給的線索互相矛盾時，模型會挑它認為機率最高的那個解讀，結果就會跟你的期待錯開。輸入端的一致性，從這裡就已經開始計分。

回頭看開場那個畫面：大圖首屏、圓角卡片、三欄服務介紹，這幾個元素會一再出現，因為它們正是大量網站共同的長相，是統計上的高地。你說極簡，它把高地上的版面換個配色；你說溫暖，它換的是照片色調與字體；骨幹還是那個骨幹。要動骨幹，形容詞做不到，只有頁面目的與佈局規則做得到，這就是下一節的起點。

有一個事實要先立起來：模型不知道你的品牌是什麼，除非你說。它不知道你的客群在什麼場合打開這一頁，不知道哪些配色在你的產業裡已經用到浮濫，不知道上一版網站為什麼被換掉。這些缺口，就是後面所有章節的入口：能補的部分，用輸入補；補不了的部分，用人的檢查補。

期待也要先校準。生成這一步確實快，多數人第一次用都會被速度嚇到；但把整個流程攤開，修改與驗收加起來的時間，常常高於生成本身。速度快的是產出第一版，不是產出可上線的那一版，這兩個「快」差得很遠，先分清楚，後面才不會誤判自己卡在哪。把流程想成三段，生成、修改、驗收：生成的時間正在被壓縮，修改與驗收目前壓不掉多少，因為它們吃的是判斷，不是算力。

讓產出變普通的，是三個輸入習慣

同一套工具，有人做出模板，有人做出作品，差別多半不在模型版本，在輸入端的三個習慣：用形容詞下指令、不給設計代幣、一次生成整頁。三個習慣方向不同，後果相同，都把結果推回平均值。

第一個習慣是用形容詞溝通。「極簡」「高級」「溫暖」，讀的人各有各的畫面，模型也一樣，它只能取一個中間值去迎合所有人，產出自然平庸。形容詞可以出現，但要掛在規格上；只靠形容詞，畫面只會往中間值走，而中間值就是你看膩的那個長相。

第二個習慣是不給設計代幣。色碼、字體、間距、圓角，這些寫死就能全站一致的規則，你沒給，模型就套用它見過最多人用的那一套預設。預設不醜，所以危險：它好看得很平均，好看得沒有記憶點，跟其他幾萬個沒給代幣的產出擺在一起，分不出誰是誰。

代幣聽起來工程，內容卻很日常：主色與輔助色的色碼、標題與內文的字型、字級的級距、元件的圓角與留白寬度。這些決定本來就存在，差別只在於放在你腦中，還是寫成模型讀得到的文字。放在腦中，它永遠是預設；寫出來，它才變成規格。

第三個習慣是一次生成整頁。整頁生成時，模型的注意力被攤薄到每個區塊，每個部分都只有及格邊緣；改成元件單位，一次打磨一張產品卡、一段表單，每個單位都有機會被推到夠高的水準，再組合起來，質感才疊得上去。聽起來多一道工，實際更快，因為改一個小地方不必重長整頁。

三個習慣、三種後果、三種替代做法，整理成一張表：

這條路線有它的適用邊界。如果需求只是一頁能看的形象頁，不必走這套硬規格，通用的生成路線與現成平台都夠用，AI 做網站的幾種路線與挑 AI 架站工具的評估角度可以先看；等到需要做出識別度、要跟版面變化的階段，再回頭補版面趨勢與 AI 應用的觀念也不遲。工具可以先上車，觀念後補，順序別顛倒就好。

識別度有個樸素的檢查法：把頁面拿給三個沒看過你品牌的人看，若都說得出這大概是哪家店、賣什麼，識別度就算過關；都說不出，先補輸入規格，別急著換工具，換了還是同一個結果。

怎麼知道輸入有沒有變好？不看指令寫得漂不漂亮，看來回修改的次數有沒有下降。同樣一頁，從七、八個來回降到兩、三個來回（例示數字，門檻請自訂），就代表模型可亂猜的空間被你一步步封掉了。修改次數是輸入品質最誠實的計分板，比任何心得文都準。

一條指令的四個零件：目的、代幣、參考圖、排除項

把指令當規格寫，而不是當願望許。規格有四個零件：頁面目的、設計代幣，再配上參考圖與排除項。四件齊備，等於把模型可以亂猜的空間逐一封死，輸出自然離平均值夠遠。

目的決定佈局判斷。這頁要訪客做什麼：預約、詢價、留下名單，還是讀完內容就好？目的不同，首屏該放什麼、按鈕在哪、資訊的先後順序全都不同。要人預約的頁面，作品集後面接的是行程與按鈕；要人詢價的頁面，規格與表單會提前。只說「做一個漂亮的官網」，模型只能用最通用的目的去猜，猜出來的就是大家都看過的那個版面。

代幣守住外觀一致。主色色碼、輔助色、字體配對、圓角像素、段落間距，寫成清單餵進去，每個元件都遵守同一套規則，品牌感是從這裡來的。代幣寫一次可以沿用整個專案，是整條流程裡投資報酬率最高的一段。代幣也是跨頁面的契約：首頁、服務頁、聯絡頁分開生成時，同一組代幣餵進去，三頁才會長得像同一家店；漏了這步，每頁各自漂亮，湊起來像三家不同的公司。

參考圖讓多模態有圖可讀。一張截圖能溝通的節奏與密度，比一長串形容詞更精確；附圖時講清楚要的是留白的節奏還是配色的邏輯，不要整張照抄，轉移過來的才會是你要的那一層。

參考圖不必是你自己的。別的產業的版面、雜誌內頁、競品的截圖都可以，重點是標出你要的是哪一層：節奏、密度，還是層級關係。一張不夠就兩張，一張給方向、一張給細節；張數一多，訊號容易互相干擾，模型反而要猜你到底要哪一個，實際的張數上限值得拿自己的題目測一次。

排除項收窄它亂補的效果。說「不要什麼」比再形容一次「要什麼」更有效：不要漸層、不要動態特效、不要輪播，每一條都在直接刪掉輸出分佈裡的一大片。多數人只寫要什麼，漏掉不要什麼，模型就保有整片「常見效果」的空間可以發揮，而你事後要手動清掉的就是這一片。

把四個零件組成一段可以直接貼進 Stitch 的指令，以下用示範情境演示：「這是一間木作傢俱工作室的形象首頁，任務是說服訪客看完作品集後預約工作室參觀。主色暖灰 #8A8378、輔助色原木棕、字體思源黑體搭一款手寫體、圓角 8px、段落間距放寬。版面參考隨附的兩張截圖。不要漸層、不要閃光特效。」目的、代幣、參考圖、排除項一次給齊，模型可以自行發揮的空間被壓到最小，來回修改的次數通常跟著下降。

拿到畫面之後，順序是先對骨架再談皮。資訊架構對了，配色與字體的調整才有意義；骨架怎麼想，可以回頭讀UI 原型設計的骨架方法。產出的前端碼也不是終點，把設計稿交給另一套代理式工具重寫成正式網站的交接做法，已有人完整走過，Stitch 草稿交給 Claude Code 接力的案例把這條路攤開來看了一遍。

指令的成效怎麼計分，前面提過一次，這裡換個角度收：一份指令好不好，不看它像不像範本，看它有沒有讓你少改幾輪。每寫一版指令就記錄當次的修改輪數，幾輪下來你會有自己的數據，哪個零件最有效、哪個零件常被漏掉，答案會自己浮出來。

畫面到網站之間，斷在哪一層

生成這一步交出的是畫面與靜態碼，它們距離能對外營運的網站，還隔著互動邏輯、資料接線與程式碼審查；這些屬於下一層，是代理式開發工具與人的分工地帶。

Antigravity 補的就是這一層。它與 Gemini 3 同步亮相，定位是代理式開發平台，代理能自行規劃、執行並驗證任務，活動範圍橫跨終端機、瀏覽器與編輯器，開發者被放在建築師的位置，定方向、看成果（見 Google 2025 年 11 月的 Gemini 3 開發者公告）。它與 Stitch 同一生態，設計稿到程式碼的接力，轉檔與對接的成本最低。本機預覽與部署環境，這裡一律泛稱，各家做法的差異不改變分工的原理。

誠實面對這一層的邊界：模型寫的邏輯要人審。空值、極端值、同時湧入的請求，這類真實世界的髒度，會讓程式表面通過檢查、數字卻是錯的，畫面端看不出來，接上真資料才會炸。審查與信任無關，是這一層的本質：代理產出越快，人審的密度要越高，否則你只是在更快地累積沒檢查過的程式碼。

審查審什麼？三個地方優先：邊界，沒有資料時畫面顯示什麼；錯誤，請求失敗時使用者看到什麼；數字的單位與進位，算錯比顯示不出來更傷。這三個地方，生成的程式碼最容易帶過，因為在展示環境裡它們從來不會發生；上線之後，它們天天發生。

示範一個接線情境（建構範例，情境與名稱皆為虛構）：一間登山裝備租借店需要即時庫存查詢，畫面讓生成器出，查詢邏輯讓代理寫。動手前兩邊先約定欄位名與型別，庫存數量是整數、回傳狀態有哪幾種、沒有資料時回什麼，先寫清楚再接線。畫面接好了卻顯示不出來的窘境，多半省得掉。約定的文件不用長，十行以內：欄位名、型別、空值代表什麼、出錯回什麼。這份文件之後就是驗收的依據，代理寫完，人對著它逐項點。這跟前面木作工作室的指令示範是同一個道理，把規格寫在前面，事後的來回就少。

走不走得進這一層，看能力自評：能讀也能改程式碼，代理是你的加速器；能讀不能改，可以指揮，但別單獨放行；兩者皆無，別硬闖，改走不碰程式碼的自然語言架站路線，Vibe Coding 的入門觀念是另一個入口。三種位置都合法，卡死通常來自位置放錯，不是能力不足。

機器讀的網頁：結構與語意的暗層

畫面人眼看是好的，搜尋引擎和螢幕閱讀器這兩種讀者卻可能讀不懂，因為它們讀的不是畫面，是語意結構。生成器最佳化的是「看起來像」，於是常見三個暗傷：標題層級跳級，上層標題直接跳過中間層；圖片沒有替代文字；明明是條列內容，卻被做成一排通用區塊。人眼掃版面全都看得懂，機器沿結構走一遍卻處處斷頭。

為什麼機器讀的是結構？搜尋引擎要判斷這一頁在講什麼、哪一段是重點、跟哪些頁面相似，靠的是標題層級與語意標籤組成的骨架；螢幕閱讀器替視障使用者朗讀，也沿同一副骨架走。畫面只是皮，骨架才是兩種讀者共同的路；皮長得漂亮、骨架接錯，兩種讀者都會在半路摔下來。

檢查的順序固定，三步做完這一層就補齊：先把標題樹從上到下走一遍，層級不能跳；再逐張補替代文字，圖片說的是什麼就寫什麼；該用語意標籤的區塊歸位，導覽、主要內容、頁尾各就各位。無障礙的對比檢查跟這三步用同一套工具，順手一起做，不必另開一個工程。對比太低的文字、只有顏色沒有文字的按鈕，對低視力與對比感知較弱的訪客等於整頁上鎖，修的工跟語意檢查是同一輪。這層檢查還有個好處：不挑工具，頁面無論怎麼來的，同一套走法都適用，做完的紀錄留著，就是下一頁的檢查底稿。

結構化資料的邊界也要畫清楚。標記必須與頁面可見內容一致，掛上頁面裡不存在的東西，那是作弊，不是優化；而且 FAQ 複合式結果已從 2026 年 5 月起停止顯示（見 Google Search 的更新紀錄），把 FAQ 標記當版位策略的算盤已經打不響。標記該怎麼選、怎麼掛，結構化資料的正確用法有完整說明。挑選的原則很樸素：頁面上看得到、對訪客有用的資訊才值得標；看不到的，先補到頁面上再談標記。標記是替已經存在的內容掛名牌，不是替不存在的內容畫藍圖。

這一層的毛病不是 AI 獨有，手寫的網站一樣會犯；差別在於人寫的常常錯得零散，生成的錯得整齊，同一個缺陷被複製到每一頁。更廣的錯誤類型整理在常見網頁設計錯誤的類型分析，上線前對著走一輪，比出事再回頭查快得多。

速度與裝置這一關，沒有人自動幫你把關

效能這一關，預設沒有人替你守。三個事實各自獨立：行動裝置長期占全球網站流量的大宗（見 Statista 的行動流量統計）；頁面體驗是 Google 採用的排名訊號之一，但沒有單一總分，指標良好也不保證排名（見 Google 對頁面體驗的說明）；載入延遲會把訪客往外推（見 web.dev 談速度的文章）。三件事合起來的意思只有一句：手機上這一關，只能人工補。

生成的頁面在這關特別容易出事，原因同樣是機制。模型傾向把畫面填滿，動畫、大圖、未壓縮的素材都敢放，因為那在它的世界裡代表豐富；它不知道你的訪客是在通勤路上用手機網路開這一頁。版面位移爆掉更是常態：圖片沒設長寬，內容載入後把版面往下推；字體載入跳版，按鈕在訪客要點的瞬間換了位置。每一次跳動，都在消耗訪客僅存的耐心。

三個指標翻成白話：LCP 是主要內容多久才出現，INP 是訪客操作後頁面多快有反應，CLS 是頁面在載入過程中跳動多大。名詞之外記住三個字的體感：等、卡、跳。訪客說不上這些術語，但等過、卡過、被跳版誤點過，身體都記得。

圖片是最大宗的兇手。生成的頁面常直接引用大圖，沒有壓縮、沒有設長寬、第二屏之後也照載不誤；一頁五六張實拍圖，手機網路上載入時間就往上翻。處理順序固定：先壓縮與轉成輕量格式，再補上長寬，排在第一屏之後的圖延後載入。字體是第二個兇手，文字跳動與位移多半來自它；這裡有取捨：等字型載完才顯示文字，跳動小，但等待期訪客看到的是空白。常見折衷是只預載主要字型、設一段短的等待上限，超過就先以備援字型顯示。

• 響應式檢查：桌機、平板、手機各開一次，看斷點上的折行與跑版；觀念與做法在響應式網頁設計的基礎。
• 三指標檢查：LCP、INP、CLS 各自過一輪，生成的頁面優先抓位移；判讀與優化看Core Web Vitals 的判讀方法。
• 無障礙檢查：對比、替代文字、鍵盤可達性，跟前一段的語意檢查同一輪做完。

測量時分清楚兩種數字：固定環境測出來的診斷值適合抓問題，改一個看一個；真實訪客的實測資料適合看結果，但流量小的網站可能整週收不到樣本，欄位空白不代表沒問題。先用診斷工具把明顯的傷抓掉，上線之後再讓實測資料慢慢說話。

過了這三項，頁面才算從桌面好看走到手機能用。速度的完整優化手法，網站速度優化的實作指南攤得很細。這些檢查不保證排名往前，它們保證的是另一件事：你不會因為體驗，把已經上門的訪客再推出去。

生成結束之後，上線還有四項檢查

草稿做完到真的上線，中間隔著一段沒有生成器幫忙的路。少做任何一件的後果都很具體：網域沒續約，網站直接打不開；憑證沒設好，瀏覽器先跳安全警示再談內容；本機搬到線上時路徑沒對齊，圖片整批掛掉、連結全斷。四項檢查照順序走：

1. 網域持有與續約。確認網域登記在自己或公司名下，不是任何代辦方的；續約年限與自動扣款看清楚。購買與管理的細節，網域購買與續約的教學寫得很完整。
2. DNS 指向與生效。網域指向主機的設定改好後要等生效，時間從幾分鐘到數小時不等；等待期先別急著判定失敗反覆重改，改亂了回復更花時間。
3. SSL 憑證與 HTTPS。憑證裝好、整站轉為加密連線、混合內容清乾淨；免費與付費憑證的取捨，SSL 憑證的選擇指南有並排比較。
4. 搬家路徑全查。本機到線上的搬移，逐頁點圖片、點連結、寄一封測試表單；完整流程照本機搬到線上的步驟教學走，漏的最少；搬之前先做一次全站備份，搬完上線再抽查一輪，兩個動作幾分鐘就能做完，救回來的時間以天計。

這四項都確認過，草稿才取得對外開門的資格。AI 可以代勞設定與逐項檢查，但網域所有權、部署的結果與安全的責任，終究由按下發布鍵的人承擔；驗收這一步交不出去，也不該交出去。

宿主的選擇也是這一段的決策。會持續長內容、需要後台與外掛生態的網站，WordPress 仍佔全球內容管理系統使用大宗（見 W3Techs 的長期統計），把 AI 產出的靜態稿搬進去是很自然的路徑；還在挑平台的人，各架站平台的並排比較先看過一輪再決定，換平台的成本比選錯配色高得多。

帳號與權限的歸屬，是部署這一段最常被跳過的檢查。網域、主機、憑證、DNS，四個服務四組帳號，全都該登記在你或公司名下；委託代辦的，要有明確的移交辦法。網站上線那天就該問一句：哪天換人接手，這四組帳號拿不拿得回來？拿不回來，網站的所有權就實質握在別人手裡，這個代價比任何技術問題都貴。

上線之後的維護，從責任歸屬看比從待辦清單看得清：主機續約、系統更新、備份、資安修補，每一項都有「誰負責、多久一次、壞了誰修」三個欄位要填。AI 能代勞其中一部分執行，欄位的答案永遠要有人簽名；填不出答案的那一天，就是網站開始腐壞的起點。

機制的邊界，就是你的位置

生成機制會越來越強，今天要手工補的三個邊界層，明天可能自動化掉一部分。但有一件事的方向不變：執行成本被壓到地板之後，稀缺的變成判斷。判斷的折舊遠比工具慢；把時間投在判斷的累積，長期報酬高於投在任何單一工具的熟練。

判斷的內容很具體：現場累積的第一手經驗、對品牌調性的拿捏、讀懂真人意圖的能力。這三樣都不在生成管線裡。模型讀不到你的現場，體會不了你的客戶在哪一步猶豫，也不必為你的品牌成敗負責。它能組合出千百種版面，卻無法替你確認「這一頁對這家店是對的」；這個確認動作，來自你與真實顧客的往來，來自你對自己品牌的認識。生成管線內的事，交給機器；管線外的事，練成專業。

還有一個判斷時常被跳過：什麼時候不該用生成起步。頁數極少、內容幾乎不變、要長期穩定運作的網站，維護的是它寫的程式碼，不是你的，起步省的時間會在日後慢慢還回去。反過來，需要快速試多個方向、頁面壽命短、視覺權重高於邏輯複雜度的情境，生成的優勢最大。先問頁面的性質，再問工具的能力，順序對了，工具才會是好工具。

落成行動是三條路線。輸入的四項規格給得齊、三個邊界層補得動的人，走自己產草稿：先訂代幣，一次生兩三個方向，逐層驗收，今天就能做的動作是把下一頁的需求寫成四項規格。互動重、或自評落在能讀不能改的人，走半自動接力：設計稿與代幣備齊，交給代理或開發者，今天的動作是把手上草稿整理成可交接的文件。任一層補不起來，就停損，帶著原型與代幣去找專業者，這是溝通成本最低的談法，今天的動作是把預算與上線日期寫下來。三條路線都通向同一個要求：規格你出，驗收你簽。

選任何路線之前，先把需求層級認清楚再回頭看工具，AI 工具的總整理適合當這一步的地圖。把約束寫好、把驗收守住，是這套機制裡真正屬於你的兩件事；需要有人一起補那一關的時候，我們都在。