讓 AI 改善網頁設計和手機體驗
從 web-design-guidelines 的具體界面檢查開始，定位按鈕、表單、鍵盤操作和手機佈局問題。動畫細節可再用 review-animations 檢查。
先選 web-design-guidelines 這個技能
你已經有一個頁面，希望按鈕更好找、表單更易用、手機上更順手，可以先選 Vercel Agent Skills 中的 web-design-guidelines。Skill 是給助手使用的任務說明；這個具體技能讀取你指定的頁面程式碼，並對照最新界面規則檢查。
它關注鍵盤操作、控件說明、表單反饋、觸摸交互和佈局等問題。先給一個頁面的文件或目錄，讓 AI 指出具體位置，再決定怎樣改。推薦依據是這個技能的用途，不是整個技能包的收藏數。
開始前準備這幾樣
只有截圖時，可以討論視覺問題，但這個技能的主要檢查對象是程式碼。先讓 AI 給出問題和建議，再做範圍明確的修改。本站不需要帳號密碼或密鑰；這份方案不要求新增付費服務。
- 一個已有頁面的程式碼文件或目錄，寫清誰會使用、要完成什麼，以及目前最不順手的地方。
- 選擇支持 Skills 的 AI 助手，按 Vercel README 安裝並選中 web-design-guidelines，而不是為一次檢查安裝包內所有技能。
- 能打開的本地預覽地址，最好再有你想檢查的手機。程式碼檢查後，用瀏覽器和手機查看實際效果；查看網頁需要另有可用的瀏覽器工具。
複製給 AI 的首次任務
請使用 web-design-guidelines 檢查【頁面文件或目錄】。頁面供【使用人群】完成【具體任務】。先讀取最新規則，重點檢查按鈕、表單、鍵盤操作和手機佈局。按影響排序，給出文件與行號、使用者會遇到的問題和最小修改建議。先給檢查報告，不修改程式碼。若查看了瀏覽器，請寫明地址和螢幕寬度；沒有實際查看的效果請標明待驗證。怎樣核對改進是否有用？
- 每個問題都應能對應到程式碼位置和使用者操作，例如按 Tab 鍵能否看到當前選中的按鈕，表單報錯是否說明下一步。
- 修改後用桌面瀏覽器和手機寬度預覽，檢查文字是否擠出頁面、按鈕是否容易點、輸入與錯誤提示是否可見。需要確認真機體驗時，再在實際手機上操作同一流程。
- 涉及動畫時，反復快速操作並檢查系統的“減少動態效果”設定。保留檢查前後的記錄；程式碼審查和瀏覽器預覽分別寫清，不能直接當成真機驗證。
實際案例
什麼時候換 review-animations？
如果主要問題變成“彈窗動畫太慢”“點擊反饋不順”或“切換時卡頓”，可以選擇 Emil Kowalski Skills 中的 review-animations。它專門審查已有動畫程式碼，檢查動畫目的、速度、能否中途響應操作和減少動態效果的設定。
提供組件程式碼和具體問題後使用這個技能。它的結論是動畫審查建議，不是整個頁面已適合手機使用的證明；普通表單和佈局問題繼續按頁面檢查處理。
來源與下一步
來源核對日期：2026-10-13。這裡推薦兩個明確的技能，並提供首次任務模板；實際發現和修改效果應以你的檢查記錄為準。