此技能會自動根據 Vercel 的 Web 介面指南審查網頁介面，識別您的 UI 程式碼中的無障礙性問題、使用者體驗問題和設計合規性違規。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「web-design-guidelines」。 使用 web-design-guidelines 審查 src/components/Header.tsx
預期結果:
- src/components/Header.tsx:15 - 導航元素缺少 ARIA 標籤
- src/components/Header.tsx:23 - 連結文字的色彩對比度低於 4.5:1
- src/components/Header.tsx:31 - 動作應使用語意化的 <button> 而非 <div>
正在使用「web-design-guidelines」。 使用 web-design-guidelines 審查 **/*.html
預期結果:
- index.html:42 - 表單標籤必須透過 for 屬性與輸入關聯
- index.html:58 - 圖片需要 alt 文字以確保無障礙性
- about.html:12 - 標題層級不應跳過（h1 -> h3）
安全審計
安全Static analysis flagged 7 potential issues (external_commands, network, weak cryptographic algorithms). Manual review confirms all findings are false positives. The 'external_commands' detections are markdown backticks for code formatting, not shell execution. The 'network' detection is an intentional hardcoded URL to Vercel's official GitHub guidelines repository. The 'weak cryptographic algorithm' detections are triggered by YAML frontmatter content with no actual cryptographic code. This skill is a safe design review tool that fetches official Vercel guidelines and applies them to audit UI code.
品質評分
你能建構什麼
無障礙性審查
審查 React 元件或 HTML 檔案的 WCAG 合規性、ARIA 使用情況和色彩對比度問題
設計系統合規性
檢查 UI 元件是否遵循既定的設計模式和 Vercel 的介面指南
上線前程式碼審查
在部署前對所有 UI 檔案執行最終審查，以捕捉任何無障礙性或 UX 問題
試試這些提示
使用 web-design-guidelines 技能審查我在 src/components/Button.tsx 中的 UI 程式碼的無障礙性和設計合規性。
使用 web-design-guidelines 審查 components 目錄中所有符合 **/*.tsx 的檔案，檢查介面指南違規。
在整個 src 目錄上執行 web-design-guidelines，根據 Vercel 的 Web 介面指南檢查所有 UI 程式碼。
我想要審查我的 UI 程式碼。使用 web-design-guidelines 並詢問我要審查哪些檔案。
最佳實務
- 指定確切的檔案路徑或 glob 模式，將審查集中在相關檔案上
- 以 file:line 格式審查結果，並按嚴重性順序修復問題
- 每次審查前取得最新的指南以獲得最新規則
避免
- 未指定要審查哪些檔案就執行技能
- 忽略無障礙性發現 - 這會影響身心障礙使用者
- 假設技能會捕捉所有問題 - 它是輔助工具，不能取代手動測試