Web 介面設計指南審計

本課程教你如何使用 Agent Skills 的 Web 設計指南技能，審計並優化 UI 介面。

簡化說明

由於篇幅限制，本文件使用簡化版本。完整內容請參考源文件 site/docs/zh/vercel-labs/agent-skills/platforms/web-design-guidelines/index.md

主要內容

本教學涵蓋：

1. Web 設計指南概述

   • 100+ 條 UI 設計規則
   • 可訪問性 (Accessibility)
   • 效能優化 (Performance)
   • UX 改進

2. 使用方法

   • 觸發關鍵詞："Review my UI"、"Check accessibility"
   • AI 自動從 GitHub 拉取最新規則
   • 逐條檢查程式碼

3. 審計範圍

   • 17 個類別的規則
   • aria-labels、語義化 HTML
   • 表單驗證
   • 動畫效能
   • 圖片優化
   • 深色模式支援

4. 常見問題與修復

   • 缺少 aria-label
   • 過渡動畫 (transition: all)
   • 圖片缺少 dimensions
   • 鍵盤導航支援不完整

學習目標

完成本教學後，你將能夠：

• ✅ 讓 AI 自動審計 UI 程式碼
• ✅ 發現並修復可訪問性問題
• ✅ 優化動畫效能
• ✅ 確保深色模式正確實作
• ✅ 遵循 Web 設計最佳實踐

參考資源

• Vercel Web Interface Guidelines
• WCAG 可訪問性標準