AI 能在幾分鐘內把提示詞變成一張看起來完整的落地頁。第一版很有價值，但不代表已經可以上線。流量進入頁面前，仍需要有人檢查使用者最先看到的承諾、閱讀順序、行動按鈕、重複元素，以及幫助訪客做決定的關鍵資訊。
這正是視覺 QA：針對訪客實際會看到的頁面進行聚焦審核。它不是工程、埋點、無障礙、法務或功能測試的替代品。當既有 HTML 的結構已經可用時，更合適的下一步通常不是重新生成整頁，而是保留可用 HTML，在上下文中修正可見層，預覽結果，再交接審核過的版本。
下文使用 貼上程式碼示範一張 AI 風格的產品發布頁。所有圖片均來自實際編輯器狀態：它們說明修改發生的位置，不會把示例文案、佔位客戶名稱或未完成的表格儲存格寫成生產事實。
上線前視覺 QA 應回答哪些問題
開始前，頁面應該已經有真實優惠、獲准的來源內容，以及每個行動按鈕擬定的目標。不要一開始就隨機換色或移動所有元素。先從讀者視角回答幾個問題：
- 首次造訪者只看首屏，能否理解頁面提供的價值？
- 主要 CTA 是否清楚說明下一步，並將指向已核准的目標？
- 是否存在只會重複、而不能支援主要訊息的橫幅、標籤或 AI 填充文案？
- 頁面新增的結構化資訊是否真正幫助訪客做選擇？
- 哪些已核准的品牌與結構元素應在本輪修改中保持不動？
這個區分很重要。視覺編輯器很適合局部、可見的修改；表單是否能成功提交、追蹤事件是否驗證、整合是否正常、權益是否正確以及安全問題，仍必須走原有技術 QA。
從已經擁有的 AI HTML 開始
1. 將完整且有權修改的頁面貼上作為工作副本
使用你有權修改的 HTML：來自 AI 工具的輸出、開發交接頁面，或上一期活動頁面。保留原始版本用於對照。在 HtmlDrag 開啟 貼上程式碼，以完整頁面為起點，而不是逐個重建既有區塊。
貼上程式碼以既有 HTML 為起點，而不是重新提示 AI 或從空白設計開始。
2. 等頁面完成渲染，再判斷第一個元素
貼上原始碼後，等待編輯器準備工作頁面。下圖顯示程式碼仍可見、編輯器正在建立工作的狀態。它提醒我們：完整頁面可供檢查之後，才適合開始視覺審核；不要在單個片段尚未被完整解讀時草率判斷。
既有程式碼正在轉為可編輯頁面；這不表示來源頁面已經具備發布條件。
3. 先像訪客一樣閱讀原始頁面
畫布開啟後，按順序瀏覽首屏、附近 CTA、輔助卡片、發布詳情與最後 CTA。下圖中原始標題被選取，但整頁仍可見。這正是關鍵：標題單獨看或許沒有問題，放回它所服務的優惠中卻可能過於寬泛。
選取原始首屏標題時，仍可看到周圍 CTA 與產品視覺，方便整體判斷。
先修正可見優先順序，再增加內容
4. 將泛化標題改為與決策相關的承諾
AI 初稿常寫「更快行動」、「更聰明地工作」或「讓事情持續推進」。這類說法不一定錯，但通常過於寬泛，無法說明頁面為什麼存在。應圍繞產品幫助讀者完成的具體決策重寫首屏。
這裡，選取的標題被改為 “Keep every launch decision, approval, and customer detail ready to ship.”。截圖記錄了編輯器中的實際標題修改。它只是上下文中文本編輯的示範，不是其他產品可直接套用的通用文案；最終主張仍應明確你的受眾、結果與範圍。
更具體的承諾可以與 CTA 和頁面主視覺一起審核，而不是脫離上下文單獨修改。
5. 刪除重複資訊，而不是把新資訊繼續疊上去
並非每個可見元素都值得保留。泛化的公告橫幅可能與已經釐清的首屏爭奪注意力，卻沒有提供新資訊。實際操作中，頂部橫幅被選取，右鍵選單顯示刪除操作。刪除重複或不再相關的元素，往往比再增加一個標籤、一句口號或一層顏色更有價值。
刪除操作可從選取元素的上下文選單進入；只刪除本次活動確認不再需要的內容。
6. 讓 CTA 符合真實的下一步
對於需要銷售溝通、發布審查、申請或核准的頁面，Start free 未必是合適的行動。實際畫面將可見文案改為 Book a launch readiness review，並顯示選取按鈕的樣式控制。這證明的是 CTA 文案與視覺處理在上下文中的修改。
連結目標是另一個決定。HtmlDrag 支援為選取元素新增或編輯連結，但本圖沒有顯示已儲存的目標地址。因此不能把它寫成「已經設定跳轉連結」。上線前，請只連接經確認的 URL，並在真實環境中測試最終目標。
可在真實首屏中檢查 CTA 文案與視覺重點；其最終連結仍需另行確認與驗證。
只補充真正幫助訪客決策的資訊
7. 插入元素前，先定義它的職責
頁面需要一個小型新行動或輔助元素時，可從 Components 分頁插入，不必重建整個區塊。下圖記錄了 Button 插入及編輯器確認。新增按鈕、文字、圖片、圖示、表格或形狀都應有明確的讀者任務，而不是僅僅填滿空白。
編輯器已確認插入 Button 元素；它的文案、位置與必要性仍需繼續審核。
8. 新增連結元素在目標核准前仍是未完成狀態
下一張實際畫面中，新增的 See the launch readiness steps 元素被選取，右鍵選單中可看到 Add link…。這證明元素插入後可以進入新增超連結的流程；它並未顯示最終目標，因此不能描述為「連結已設定完成」。
生產頁面中，行動文案應清楚說明下一步，只關聯經核准的目標，並在發布後驗證 URL。現有按鈕同樣如此：可見文案與目標地址必須一致。
選取新增元素後，可透過上下文選單新增連結；最終 URL 仍屬於活動決策。
9. 當行列能減少比較成本時，再插入表格
落地頁有時只需要一塊緊湊的結構化詳情，例如待確認事項、負責人和狀態。開啟 Components，選擇 Table，再選取最小的可用網格。下圖記錄的是 3 × 3 網格選擇，不表示所有頁面都需要表格。
從能回答讀者問題的最小表格開始，再在上下文中修改內容與視覺權重。
10. 每個表格儲存格都應按公開內容審核
插入的表格已經出現可編輯表頭：What to confirm、Owner 和 Status，並有一個活動儲存格。這就是截圖所能證明的全部。其餘儲存格明顯尚未完成，因此不能把它說成最終發布計畫、已核准負責人清單或面向客戶的狀態表。
匯出前，應用經核准的事實替換佔位內容，刪除未使用的行和列，確認表格的視覺位置服務於所在區塊，並檢查它在目標頁面尺寸下仍然可讀。
表格仍可在畫布上編輯；未完成的儲存格應在上線審核前補全或移除。
保護已經正確的部分，再預覽整頁
不要讓一次聚焦修改演變成意外重設計。品牌標誌、已核准的產品視覺或結構元素已經正確時，可在 Layers 中將其鎖定，再修改附近內容。鎖定的作用是避免誤移動或誤編輯，不代表元素已經通過品牌、法務或無障礙審核。
然後離開編輯狀態，以訪客視角檢查頁面。下圖顯示移除泛化橫幅、更新首屏和 CTA 後的預覽。不要只看第一屏：標題換行、視覺焦點、重複資訊、未完成詳情、連結、頁尾和最後 CTA 都屬於上線前檢查範圍。
預覽會把工作頁面還原為訪客視圖，用於交接前的視覺 QA。
匯出審核過的 HTML，再完成真正的上線檢查
視覺審核完成後，匯出你實際檢查過的版本。Export as 面板提供 Edited HTML、Original HTML、Download HTML、Copy HTML 和 Export to AI。匯出是交接點，不等於生產部署，也不表示所有技術要求已經完成。
匯出完成視覺審核的 HTML 後，仍應繼續執行常規程式碼審核、功能 QA、資料分析、法務、無障礙和發布檢查。
保留第一版，審核訪客看見的關鍵決定
AI 消除了空白頁面問題，卻沒有替代團隊決定頁面該說什麼、該要求訪客做什麼，以及哪些細節可以安全發布。一次聚焦的視覺 QA 能保留已經有用的結構，修正訪客真正會遇到的內容，並避免從頭返工。
當 AI 生成的落地頁只需要上線前最後一次視覺修改時，可將既有 HTML 貼到 HtmlDrag，再繼續既有發布流程。