技能 web-design-guidelines
🎨

web-design-guidelines

安全 🌐 網路存取

檢閱網頁 UI 設計是否符合指南

也可從以下取得: ZhanlinCui,vercel-labs,antfu,sickn33,supercent-io

根據 Vercel 的官方無障礙設計指南檢查您的網頁 UI。獲得關於語義 HTML、焦點狀態、表單、動畫、排版、圖片等的即時回饋。

支援: Claude Codex Code(CC)
⚠️ 68 差
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「web-design-guidelines」。 index.html

預期結果:

✓ 通過

index.html:12: 移除焦點外框替換
index.html:19: 為圖片新增替代文字
index.html:34: 檢查可見焦點樣式
index.html:42: 驗證表單標籤關聯

正在使用「web-design-guidelines」。 styles.css

預期結果:

✓ 通過

styles.css:8: 新增 prefers-reduced-motion 媒體查詢
styles.css:15: 避免使用 transition: all 進行動畫
styles.css:23: 為圖片設定明確的寬度/高度

安全審計

安全
v1 • 1/30/2026

All static findings were evaluated as false positives. The skill safely fetches public guidelines from a trusted GitHub URL. No dangerous patterns present.

2
已掃描檔案
46
分析行數
4
發現項
1
審計總數
中風險問題 (2)
SKILL.md:19SKILL.md:25-27
Markdown Backtick Formatting Misidentified
Static scanner flagged Markdown backticks (`file:line`) as Ruby/shell backtick execution. This is false positive - backticks are used for code formatting in documentation.
SYNC.md:4
Git SHA Pattern Misidentified
Static scanner flagged Git SHA in SYNC.md as 'weak cryptographic algorithm'. Git SHAs are version control hashes, not encryption.
低風險問題 (1)
SKILL.md:26
Hardcoded URL for Guidelines Fetch
Skill fetches guidelines from hardcoded GitHub URL. This is intentional design for retrieving latest rules.

風險因素

🌐 網路存取 (1)
SKILL.md:26
審計者: claude

品質評分

38
架構
100
可維護性
87
內容
21
社群
93
安全
91
規範符合性

你能建構什麼

無障礙審查

檢查您的網站是否符合 Vercel 的無障礙標準，包括語義 HTML、焦點狀態、表單和螢幕閱讀器支援。

設計系統審查

根據官方指南審查 UI 元件，包括排版、間距、顏色和深色模式實作。

程式碼審查助理

在拉式請求審查期間自動識別網頁 UI 程式碼中的反模式和違規項目。

試試這些提示

基本 UI 檢閱 
根據 Vercel 的網頁介面指南檢閱以下檔案，並以檔案:行號格式回報任何違規項目：
無障礙檢查 
根據 Vercel 的指南檢查這些檔案的無障礙合規性。專注於語義 HTML、焦點狀態、表單無障礙性和 ARIA 使用。
設計模式審查 
根據 Vercel 的設計指南審查這些 UI 元件。回報反模式並針對排版、間距和動畫提出改善建議。
完整指南檢查 
根據完整的網頁介面指南檢閱所有檔案。檢查所有類別，包括焦點狀態、表單、圖片、深色模式和效能實務。

最佳實務

  • 在每次檢閱前擷取最新指南，確保套用最新規則
  • 以簡潔的檔案:行號格式回報發現，方便在程式碼編輯器中導覽
  • 當未提供特定檔案時，要求使用者提供檔案模式

避免

  • 使用 focus: none 而未提供可見的替代焦點樣式
  • 替換外框但未維持可見的焦點指示
  • 使用 transition: all，可能導致效能和無障礙問題

常見問題

此技能檢查哪些指南？
此技能根據 Vercel 的網頁介面指南進行檢查，涵蓋語義 HTML、焦點狀態、表單無障礙性、動畫、排版、圖片、深色模式等。
此技能測試實際頁面渲染嗎？
否，此技能根據指南對程式碼進行靜態檢查。它不會在瀏覽器中渲染頁面或測試使用者行為。
我可以將其用於非網頁專案嗎？
此技能專注於網頁技術（HTML、CSS、JavaScript）。它不設計用於原生行動應用程式、桌面應用程式或後端程式碼。
指南多久更新一次？
此技能每次使用時都會從 GitHub 擷取最新指南，確保您始終套用最新的最佳實務。
此檢查 WCAG 合規性嗎？
它根據 Vercel 的指南進行檢查，這些指南符合無障礙最佳實務。它不針對特定的 WCAG 等級進行驗證，也不產生 WCAG 合規報告。
哪些檔案類型可以檢閱？
此技能可處理網頁程式碼檔案，包括 HTML、CSS、JavaScript、JSX、TypeScript 和網頁開發中使用的類似格式。

開發者詳情

作者

antfu

授權

MIT

儲存庫

https://github.com/antfu/skills/tree/main/skills/web-design-guidelines/

引用

main

檔案結構

📄 SKILL.md

📄 SYNC.md