AI 生成的落地頁通常只需幾分鐘就能完成約 90%。版面結構與字體已經到位，主要訊息也獲得確認。真正的問題往往出現在最後一哩：標題太籠統、價值主張段落需要更精準，或 CTA 沒有引導讀者採取正確行動。
這時很容易掉進用提示詞整頁重新生成的陷阱。像是「讓標題更有說服力，再修改 CTA」這種寬泛要求，可能讓模型重建整份 HTML。已確認的樣式、響應式 class、品牌色與版面細節都可能意外改變，五分鐘的修改變成一小時的回歸檢查。
AI 精準精修會先建立一條視覺修改授權邊界：選取允許變更的元素，描述目標結果，並把未選取的 DOM 排除在修改上下文之外。本指南以 RelayGrid 的客戶導入落地頁示範這套方法。
為什麼整頁重生成偏偏在最後階段失敗
當生成式模型或 vibe coding 工具為了局部修改而重寫整頁時，通常會出現三類問題：
- 樣式與 class 漂移：Tailwind utility、inline CSS 與容器寬度可能改變，導致響應式版面與網格失真。
- 內容被移動：頁尾連結、客戶案例與不在範圍內的微文案可能被改寫或刪除。
- 審查負擔增加：團隊不再只檢查一個標題，而是每次提示詞後都得重新驗證整頁。
解法是依範圍授權：只操作指定的 DOM 節點，保護文件樹的其餘部分。
選取與保護的決策矩陣
精準精修不是把每個要求都縮小，而是讓選取邊界與目標一致。
| 目標 | 應選取 | 應保護 |
|---|---|---|
| 讓價值主張更清楚 | Hero 的主標題與副標題 | 導覽、產品 mockup、徽章與背景 |
| 改變轉換行動 | 主要 CTA 按鈕 | 次要按鈕、連結與信任訊號 |
| 在地化或重新設計區塊 | 完整區塊容器 | 相鄰區塊、全域頁首與頁尾 |
如此一來，每次迭代的修改半徑都清楚且可驗證。
五階段精準精修工作流程
在 RelayGrid 範例中，目標是強化 B2B 讀者看到的 Hero，同時不改動版面、產品插圖或社會證明。
第一階段：建立穩定的 HTML 基準
從既有 HTML 開始，而不是重新寫提示詞。在 HtmlDrag 的 AI Refinement 中，可以上傳檔案、貼上程式碼或匯入 URL。獨立的 HTML 檔案能把樣式表、class 與 DOM 階層保留為可重現的基準。
圖 1：匯入既有 HTML，為限定範圍的修改建立穩定基礎。
完成渲染後先檢查結構：哪些文字區塊已經不能支撐訊息？哪些視覺元素可以直接保留？
圖 2：結構與產品卡片已能運作，只需讓標題與 CTA 更精準。
第二階段：精準隔離修改目標
不要只寫「更新 Hero」，而是逐一選取元素。這裡建立三個編號標記：
- 標記 1：主標題
<h1>（「Customer onboarding, made simpler.」）。 - 標記 2：說明段落。
- 標記 3：主要按鈕（「See the platform」）。
產品儀表板、上方徽章、次要按鈕與客戶 Logo 都刻意不選取。
圖 3：視覺標記把每個 DOM 節點與精確指令連接起來。
第三階段：使用同時指定與保護的提示詞
實務提示詞要把明確修改與保護條款放在一起。每個編號都要對應一個結果，並明確要求不要改動未選取的程式碼。
1. Replace the headline with: Turn every customer handoff into faster first value.
2. Replace the supporting paragraph with: Give your B2B onboarding team one shared plan for owners, milestones, and blockers—so customers reach first value with less chasing.
3. Change the primary CTA label to: Book an onboarding walkthrough. Change its background color to #153852. Keep its white text, current padding, rounded shape, and placement.
Guard Clause: Do not change any unmarked content, layout, product preview, navigation, customer proof, or other buttons.
圖 4：這份要求把標記對應到文字與顏色修改，同時凍結未選取區域。
結果產生後只檢查一件事：目標節點是否正確變更，受保護區域是否保持不變？
圖 5：新的訊息與 CTA 顏色被加入原本保留的結構中。
第四階段：拆成越來越小的微型迭代
不要試圖用一次巨大的提示詞達到完美。在遞減式迭代中，後續要求會逐步減少涉及的元素。
第二次只選取已更新的段落，在維持字級、顏色、寬度與位置的前提下縮短文字。
圖 6：第二次微型迭代只處理段落的精簡。
結果是 「One shared onboarding plan for every owner, milestone, and blocker.」 把範圍縮小到單一元素，就能降低對版面的附帶影響。
圖 7：微型迭代讓文字更簡潔，但不改變標題、CTA 或視覺層級。
第五階段：處理完整區塊轉換與非同步佇列
當多個子節點必須一起調整時，應將整個容器標記為一個語意單位。如此 AI 才能同時維持標題、說明與按鈕文案的連貫性。
逐元素選取最適合微文案。翻譯或活動切換可能需要同時修改標題、說明與按鈕；這時應有意識地選取完整區塊容器。
圖 8：當區塊內的所有元素要作為一個單位調整時，才選取完整區塊。
多節點轉換可能會進入受管理的佇列。「Waiting for an available AI slot」只表示工作正在等待執行，並不是完成結果。必須等最終渲染畫面出現後，才能確認修改。
圖 9：等待狀態代表工作仍在進行，不代表翻譯內容已經顯示。
混合式橋接：從提示詞交棒給視覺化編輯器
像素級對齊或細微調整不適合只靠自然語言反覆嘗試；「將按鈕向下移動 4 像素」這類要求，直接在編輯器中確認更可靠。
AI 適合語意轉換與內容重組；若要進行像素級調整，單靠自然語言就較難預測。
建議採用混合式工作流：先用精準精修處理內容，再交給視覺化編輯器完成細節。在 HtmlDrag 中，Open in Editor 可以：
- 插入元素與元件：新增容器、徽章、圖示或卡片。
- 插入與編輯表格：建立比較表或價格表，不必手寫全部標記。
- 鎖定元素：保護已確認的區塊與品牌資產。
- 刪除與清理：移除佔位文字與過時區塊。
- 管理連結與目的地：新增帶 UTM 的 URL、錨點與外部目的地。
- 管理版本並匯出：儲存快照並匯出乾淨 HTML。
圖 10：視覺化編輯器支援直接修改、插入元素與版本化匯出。
精準 HTML 精修的提示詞範本
要執行受控修改，可以套用以下經過驗證的提示詞結構，提升每一輪迭代的精準度。
| 目標 | 範本 |
|---|---|
| 價值主張 | Update only marked element [1]. Rewrite the heading to focus on [business value]. Keep typography and responsive sizing intact. Do not touch unmarked elements. |
| 修改 CTA | Update only marked button [2]. Change the label to [new action]. Update the background to [hex color] while preserving radius, padding, and position. Guard adjacent links. |
| 縮短文字 | Update only marked paragraph [1]. Shorten it to under 15 words about [key benefit]. Maintain line-height, color, and alignment. Do not alter surrounding containers. |
送出前檢查清單
- 固定基準：載入完整 HTML 與穩定的依賴。
- 使用最小範圍：只標記需要變更的 DOM 節點。
- 對應編號：為每個元素指定一項指令。
- 加入保護條款：禁止修改未選取的內容與版面。
- 逐步縮小迭代：讓後續要求的範圍越來越小。
- 交給視覺化編輯器：用它處理表格、連結與確定性的細節。
- 匯出前比較：將未選取區域與基準頁面對照。
常見問題
為什麼讓 AI 重新生成整頁 HTML 會造成樣式錯亂？
大型語言模型以 token 為單位機率式生成文字。為了修改一句文案而重新輸出數百行 HTML 時，模型可能替換 class、漏掉響應式斷點或重排 DOM 節點，進而造成視覺回歸。
精準精修可以同時修改 Tailwind CSS 與 inline style 嗎？
可以。因為精修被限制在指定的 DOM 範圍內，AI 只會讀取選取節點的 class 或 inline style 並在局部套用修改，不會碰觸全域 CSS。
使用視覺標記比用文字描述元素好在哪裡？
「標題下方第二個按鈕」這類文字描述可能產生歧義。視覺標記會直接綁定正確的 DOM 元素，避免模型自行猜測。
什麼時候應該從 AI 精修切換到視覺化編輯器？
內容撰寫、訊息調整、語氣變更與結構化改寫適合交給 AI。元素對齊、表格格式、鎖定重要元件、插入連結與匯出乾淨 HTML，則交給視覺化編輯器。
結語：停止重寫，開始精修
一個已經能運作的 AI 生成落地頁，不需要每次修改訊息都重新製作。匯入 HTML、標記正確節點、定義邊界、檢查結果，再決定是否需要下一輪。如果要改變整個區塊，就有意識地擴大選取範圍。
如此一來，精修結果可被驗證，最後的人工作業判斷則交由視覺化編輯器保留。使用 HtmlDrag，無需重寫其餘程式碼，也能完成最後一哩。