Web Design Guidelines Skill 是一組供 AI 助手依循的網站介面檢查指引，可協助團隊整理程式中的可讀性、操作與無障礙問題。介面檢查的實用價值，是把檢查結果轉成可追蹤的修改項目；是否符合實際使用情境，仍須由人員操作與判斷。
介面檢查：這個 Skill 在網站專案中扮演什麼角色？
Skill 是供支援相應工作流程的 AI 助手參考的任務說明。Web Design Guidelines Skill 針對網頁介面原始碼，提供規範來源與檢查方向，讓團隊較容易以一致的方式盤點問題。檢查輸出應包含檔案、位置、問題及建議，方便負責人重現。
開始之前需要準備哪些資料？
先界定要檢查的頁面與版本，提供實際元件檔案、操作情境和已知設計規範。若檢查詢價表單，應說明欄位、送出結果和錯誤狀態。避免提交客戶個資、密碼或未授權內容，並確認團隊使用的工具與資料處理方式符合內部規定。
如何讓 AI 輸出可執行的檢查結果？
要求 AI 列出影響對象、檔案位置、重現步驟與修改建議，並區分可由程式判斷的問題與必須人工確認的事項。例如：標示沒有可辨識名稱的按鈕、表單欄位未關聯標籤，或鍵盤焦點不明顯。使用網站專案時，不要把每一項通則當成無條件適用的結論。
哪些項目需要人工操作？
鍵盤操作、焦點順序、錯誤提示、螢幕閱讀器讀取與行動版排版都需要實際測試。用滑鼠無法暴露所有障礙；建議以鍵盤從導覽列走到表單並送出錯誤資料，確認提示能被看見及理解。圖片替代文字要依圖片用途撰寫，而非只檢查是否存在 alt 屬性。
修正後如何驗收？
先依影響程度排序，再由負責人修正並記錄前後狀態。重測原問題及相鄰流程，例如修正彈出視窗後，同時測試開啟、關閉、焦點回復和手機版捲動。AI 回報沒有問題，不代表網站已通過正式無障礙稽核；大型或高風險服務仍應安排專業評估與真實使用者測試。
一份檢查任務可以怎麼寫？
可以要求助手檢查指定頁面的導覽、按鈕與表單，並要求每項結果包含位置、使用者影響、重現方法及修正方向。例如：「檢查聯絡頁表單的欄位標籤和錯誤提示，只回報有具體證據的問題；需要瀏覽器操作才能確認的項目，請標示待人工測試。」此範例可依團隊工具與授權資料調整。
如何分類檢查結果？
先將問題分成可讀性、操作、表單、媒體及版面，再依影響的使用者與流程排序。無法完成送出的錯誤應優先於不影響操作的視覺細節；但實際優先順序仍應依企業服務、使用者需求和影響範圍決定。把檢查版本與狀態記錄在同一份工作清單，避免同一問題被重複回報。
程式檢查與瀏覽器測試如何搭配？
原始碼能揭露部分標籤與屬性，瀏覽器測試則能檢查實際顯示、焦點移動及響應式行為。建議先以 Skill 整理候選問題，再逐項使用手機、平板及桌面視窗重現。動畫、顏色對比、讀屏與動態訊息可能受到執行狀態影響，應在真實畫面核對。
交付前需要留下哪些紀錄？
可保留被檢查的頁面、程式版本、測試裝置、問題優先順序及修正結果。對無法重現或需要產品決策的項目，應寫明原因與負責人。網站改版後再次執行時，可用相同情境比較，但不應把 AI 的結果當成獨立第三方認證。
上線與驗收檢查清單
- 確認檢查範圍、程式版本與資料授權。
- 依使用者影響紀錄問題與重現步驟。
- 用鍵盤及不同尺寸畫面重測修正結果。
- 交付時註明未測試項目與後續負責人。
常見問題
Skill 需要能讀取哪些資料？
以完成任務所需的頁面或原始碼為限，敏感資料應先移除，權限由專案負責人確認。
能否只靠 AI 判定網站無障礙？
不能。自動檢查能協助找出部分問題，但鍵盤、輔助科技與實際使用情境仍須人工驗證。
介面規範多久更新一次？
規範與工具會變動；建立定期檢視節奏，並在重要改版或元件更新後重新檢查。
延伸閱讀與資料來源
想了解官網的詢問流程，可參考公司官網詢價動線規劃；網站規劃的其他主題可參考不動產網站設計指南。需要討論整體網頁設計時，可查看隻豬人網頁設計工作室的服務範疇與精選案例。
官方資料：相關官方文件。資料整理時間：2026 年 11 月；工具介面與服務內容可能變動，操作時請以官方最新說明為準。
