文章目錄
先說結論
AI 可以協助把已確認的需求整理成內容層級、視覺方向及網頁草稿。設計師與業務負責人須核實說法、品牌一致性和任務是否清晰，開發人員則須測試真正運作的網站。生成效果圖不能證明無障礙、查詢送達、搜尋收錄或業務成效。
「做一個高級網站」這類提示詞，可以產生漂亮圖片，卻未必說清楚公司提供甚麼。應先從訪客的決定出發：服務是否適合、下一步會怎樣，以及如何查詢。設計要令這些問題容易得到答案。
把 AI 用來提出可按需求比較的方案，並在整個過程保留已批准事實及設計決定。真正有用的交付是一個可編輯、流程已核實的網站，而不是一批看似完成的畫面。
示例工作流程
需求、層級、視覺、製作與驗證
確認事實及訪客任務
草擬內容層級
比較克制的視覺方向
用真實內容製作
測試成功及失敗路徑
指定內容負責人後上線
快速判斷
清楚知道每種成果證明了甚麼
| 成果 | 用途 | 仍需核實 |
|---|---|---|
| 內容大綱 | 服務、問題及頁面次序 | 業務事實與缺漏資料 |
| AI 生成效果圖 | 比較層級及視覺方向 | 真實文字、響應式行為及素材權利 |
| 可運作的網頁草稿 | 嘗試導覽與表格 | 無障礙、送達、編輯及失敗情況 |
| 準備上線的網站 | 已批准並測試的客戶流程 | 日後維護與實際表現 |
左右捲動，查看完整比較。
1. 圍繞一個服務決定寫需求
假設例子，並非客戶項目：一間小型單車維修店希望訪客提出檢查查詢。已確認服務包括一般維修及保養，由維修人員檢查後確認範圍與價錢。頁面應說明哪些工作適合、檢查流程、需要提供甚麼資料，以及店舖如何回覆。
店主提供服務清單、真實營業時間、聯絡資料、可使用的照片及定價邊界。AI 可以整理資料並提出遺漏問題，但不可編造評價、資歷、即日服務名額或固定維修價。需求只設定一個主要行動：提出檢查查詢。只有確實提供可確認時段，預約系統才應加入範圍。
2. 先建立內容層級，再處理裝飾
按訪客問題草擬內容次序：清晰標題、服務適用情況、檢查如何進行、實用資料及查詢表格。限制條件應靠近相關說法，例如「檢查後確認價錢」不應藏在有吸引力的按鈕下方很遠的位置。
請 AI 提出兩個大綱，說明每一節回答哪個訪客問題。比較遺漏及排序，而不是選較長的版本。Apple 的版面指引重視層級、對齊及分組；可把這些基礎應用到網頁，而毋須照搬平台裝飾。標題要具體，相關資訊放在一起，尤其表格旁要交代提交後會發生甚麼。
3. 在一套小型設計規則內探索視覺
限制色彩數量，建立一致的字體層級及可重複的間距。克制的方向可使用米白底、近黑文字，並以藍色標示主要行動與焦點。維修店可比較以文字為主、或以真實店舖照片為主的頁面，但兩者使用同一批內容，避免同時改顏色、文案和版面而無法判斷差異。
按可觀察的問題評估每稿：訪客能否找到服務及行動、讀清內文、分辨按鈕與標籤，以及看見定價邊界？評估前換掉生成文字及佔位圖片。AI 插圖不應被當成真實店舖、員工或已完成客戶工作的證據。
4. 把獲批方向變成真正運作的頁面
以真正的標題、文字、連結及表格欄位製作網頁，不是把效果圖放進頁面。檢查查詢表格可要求聯絡資料及單車問題；若已議定處理方式，也可加入選填照片。說明提交後的安排，只收集團隊會使用的資料。
表格要有處理中、成功及失敗狀態。按提交後立即給回饋，但只有接收服務記錄了查詢，才確認已收到。傳送失敗時保留已輸入文字，並提供已核實的其他聯絡方法。開發人員負責這些行為，店主則須驗證查詢進入正確收件匣，而且收到的資料足以跟進。
5. 測試無障礙，評估實際介面
以 WCAG 2.2 為參考，檢查鍵盤操作、可見焦點、對比、標籤、錯誤及狀態訊息。用鍵盤、放大文字及窄手機畫面完成整個流程。確認固定聯絡按鈕不會遮住正在操作的表格欄位，必填等重要資訊也不能只靠顏色表達。
請一位不熟悉維修店的人找出適合的服務，並提交測試查詢。記錄他在哪一步猶豫，以及缺了哪些資訊。這種評估有實際用途，不需要聲稱轉換率已改善。先修正阻礙任務的問題，動畫只用作必要回饋；啟用減少動態效果時，操作仍要容易理解。
6. 核實上線基礎，保留復原方法
Google 的 SEO 指引涵蓋具體頁面標題、有用文字、可檢索連結，以及協助搜尋引擎理解內容。在實際網頁檢查這些項目，也要檢查收錄設定、手機行為；若替換舊站，則包括現有網址。這些工作不能保證收錄、排名、流量，或被 AI 答案引用。
上線前驗證真實查詢送達、欄位錯誤、服務失敗及重複提交處理。保留之前可運作的版本以便復原，並指定誰維護營業時間、服務範圍及照片。上線後按原本任務檢視實際查詢與頁面行為，只有證據指出缺少能力時才擴展；增加動畫不能補救失靈的聯絡流程。
決定之前
流程經驗證，網站才算準備好
- 服務說明與主要行動都使用已確認事實。
- 視覺選擇支持清晰、一致的內容層級。
- 效果圖佔位內容已換成真實文字與控制項。
- 鍵盤、手機、查詢送達及錯誤情況已測試。
- 有內容負責人及可復原的版本。
開始之前，常見問題
AI 生成的網站可以立即發布嗎？
先把它視為草稿，直到說法、素材及完整操作流程已核實。所需工作取決於生成成果，但單憑截圖無法證明查詢表格或無障礙行為可用。
簡單服務網站需要自行開發嗎？
現成網站平台通常已足夠。只要它支援已確認內容、編輯及整合需求，就值得優先考慮。只有特定必要行為能支持額外維護成本時，才考慮客製開發。
AI 文案會改善搜尋排名嗎？
寫作方式本身不能證明品質或成效。應為訪客任務提供有用、準確內容，並核實技術基礎。持續觀察結果，而不要承諾排名或 AI 引用。
資料來源及延伸閱讀
下一步
網站設計及開發
如果這是適合你的方向，可以先釐清範圍、測試方式及交接安排。