UI Visual Validator
UIコンポーネントの視覚的検証
手動のUI検証は時間がかかり、ヒューマンエラーが発生しやすいです。このスキルはAIを使用して視覚構造を自動的に分析し、要素の関係性を確認し、コンポーネント間でのデザインの一貫性を確保します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「UI Visual Validator」を使用しています。 Validate this button component: Large primary button with 16px padding, rounded corners (8px), blue background (#0066FF), white text, centered label.
期待される結果:
Validation Results:
✓ Proper padding (16px) for interactive element
✓ Consistent border-radius (8px)
✓ Valid primary color usage
✓ Centered text alignment
Recommendations:
- Consider adding hover state contrast check
- Verify focus ring visibility for accessibility
「UI Visual Validator」を使用しています。 Compare card component A (header: 24px, body: 16px, footer: 16px) vs card B (header: 24px, body: 16px, footer: 24px).
期待される結果:
Inconsistency Found:
Card A footer: 16px padding
Card B footer: 24px padding
This creates visual inconsistency between card components. Recommend standardizing footer padding to 16px across all card variants.
セキュリティ監査
安全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.
品質スコア
作れるもの
フロントエンド開発者検証
フロントエンド開発者はこのスキルを使用して、構造の説明を分析することでコンポーネントの実装がデザイン仕様に一致することを検証します。
デザインシステム監査者
デザインシステム担当者は、構造的なパターンとデザイントークンの使用をチェックすることで、ライブラリ間でのコンポーネントの一貫性を確認します。
QAビジュアルテスト
QAエンジニアはコンポーネントの説明を比較し、予期しない視覚的な違いを特定することでUIの変更を検証します。
これらのプロンプトを試す
このUIコンポーネントの説明を分析して構造を検証してください：[INSERT COMPONENT DESCRIPTION]。適切な階層、スペーシング、要素の関係性を確認してください。
これらのコンポーネントスタイル [INSERT STYLES] を確認し、デザイントークンに従っているかを検証してください。見つかった逸脱をリストアップしてください。
これらの2つのコンポーネントの説明 [INSERT DESCRIPTION 1] と [INSERT DESCRIPTION 2] を比較してください。レイアウトやスペーシングの不整合を特定してください。
このコンポーネント構造 [INSERT DESCRIPTION] を分析し、適切な見出し階層、ランドマークの使用、意味的な要素の配置を確認してください。改善案を提案してください。
ベストプラクティス
- 正確な検証のために、すべての関連するスタイルプロパティと構造要素を含む詳細なコンポーネント説明を提供します
- 分析の精度を向上させるために、コンポーネントの説明時に一貫した命名規則を使用します
- 検証に使用するデザインシステムやスタイルガイドのコンテキストを含めます
回避
- 「良いボタン」などの具体的なプロパティや測定値なしで曖昧な説明を提供します
- デザインシステムのコンテキストをスキップします - 検証対象の標準を常に参照してください
- 検証結果を無視します - 出力、実際にコンポーネントの品質向上に使用してください