UI Visual Validator
視覺化驗證 UI 元件
手動 UI 驗證耗時且容易出現人為錯誤。此技能使用 AI 自動分析視覺結構、驗證元素關係，並確保跨元件的設計一致性。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「UI Visual Validator」。 驗證此按鈕元件：大型主要按鈕，16px 內距，圓角 (8px)，藍色背景 (#0066FF)，白色文字，置中標籤。
預期結果:
驗證結果：
✓ 互動元素的適當內距 (16px)
✓ 一致的 border-radius (8px)
✓ 有效的主要顏色使用
✓ 置中文字對齊
建議：
- 考慮添加懸停狀態對比度檢查
- 驗證焦點環的可見性以確保無障礙性
正在使用「UI Visual Validator」。 比較卡片元件 A (header: 24px, body: 16px, footer: 16px) 與卡片 B (header: 24px, body: 16px, footer: 24px)。
預期結果:
發現不一致：
卡片 A footer：16px 內距
卡片 B footer：24px 內距
這會在卡片元件之間造成視覺不一致。建議將所有卡片變體的 footer 內距標準化為 16px。
安全審計
安全Static analysis found no executable code, no suspicious patterns, and no risk factors. This is a prompt-only skill that generates content descriptions. Risk score is 0/100. The skill operates purely in the AI content generation domain with no system-level access.
品質評分
你能建構什麼
前端開發者驗證
前端開發者使用此技能透過分析結構描述，驗證其元件實作是否符合設計規格。
設計系統審核
設計系統維護者透過檢查結構模式和設計 token 使用情況，驗證跨元件庫的一致性。
QA 視覺測試
QA 工程師透過比較元件描述並識別非預期的視覺差異，驗證 UI 變更。
試試這些提示
分析此 UI 元件描述並驗證其結構：[INSERT COMPONENT DESCRIPTION]。檢查適當的層級、間距和元素關係。
檢查這些元件樣式 [INSERT STYLES] 並驗證它們是否遵循我們的設計系統 tokens。列出發現的任何偏差。
比較這兩個元件描述 [INSERT DESCRIPTION 1] 和 [INSERT DESCRIPTION 2]。識別任何版面或間距不一致之處。
分析此元件結構 [INSERT DESCRIPTION] 的標題層級、地標使用和語義元素放置是否適當。提出改進建議。
最佳實務
- 提供詳細的元件描述，包括所有相關的樣式屬性和結構元素，以進行準確驗證
- 使用一致的命名慣例描述元件以提高分析準確性
- 包含有關用於驗證的設計系統或風格指南的上下文資訊
避免
- 提供模糊的描述，如「一個不錯的按鈕」，而沒有具體屬性或測量值
- 忽略設計系統上下文 - 始終參考被驗證的標準
- 忽略驗證結果 - 使用輸出實際上來提高元件品質