Навыки UI Visual Validator
🎨

UI Visual Validator

Безопасно

Визуальная проверка компонентов пользовательского интерфейса

Ручная проверка пользовательского интерфейса требует много времени и подвержена человеческим ошибкам. Этот навык использует искусственный интеллект для автоматического анализа визуальных структур, проверки связей между элементами и обеспечения согласованности дизайна между компонентами.

Поддерживает: Claude Codex Code(CC)
⚠️ 68 Плохо
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «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.

Аудит безопасности

Безопасно
v1 • 2/25/2026

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.

0
Просканировано файлов
0
Проанализировано строк
0
находки
1
Всего аудитов
Проблем безопасности не найдено
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
23
Сообщество
100
Безопасность
74
Соответствие спецификации

Что вы можете построить

Проверка фронтенд-разработчиками

Фронтенд-разработчики используют этот навык для проверки соответствия реализованных компонентов дизайн-спецификациям путем анализа структурных описаний.

Аудиторы дизайн-систем

Сопровождающие дизайн-системы проверяют согласованность компонентов между библиотеками, анализируя структурные паттерны и использование токенов дизайна.

Визуальное тестирование QA

QA-инженеры проверяют изменения пользовательского интерфейса путем сравнения описаний компонентов и выявления неожиданных визуальных отличий.

Попробуйте эти промпты

Базовая проверка компонента 
Analyze this UI component description and validate its structure: [INSERT COMPONENT DESCRIPTION]. Check for proper hierarchy, spacing, and element relationships.
Проверка токенов дизайна 
Review these component styles [INSERT STYLES] and verify they follow our design system tokens. List any deviations found.
Проверка согласованности верстки 
Compare these two component descriptions [INSERT DESCRIPTION 1] and [INSERT DESCRIPTION 2]. Identify any layout or spacing inconsistencies.
Проверка структуры доступности 
Analyze this component structure [INSERT DESCRIPTION] for proper heading hierarchy, landmark usage, and semantic element placement. Suggest improvements.

Лучшие практики

  • Предоставляйте подробные описания компонентов, включая все релевантные свойства стилей и структурные элементы для точной проверки
  • Используйте последовательные соглашения об именовании при описании компонентов для повышения точности анализа
  • Включайте контекст о используемой дизайн-системе или руководстве по стилю для проверки

Избегать

  • Предоставление расплывчатых описаний вроде «красивая кнопка» без конкретных свойств или измерений
  • Пропуск контекста дизайн-системы — всегда указывайте стандарты, against которые выполняется проверка
  • Игнорирование результатов проверки — используйте вывод для фактического улучшения качества компонентов

Часто задаваемые вопросы

Может ли этот навык проверять файлы изображений?
Нет, этот навык работает с текстовыми описаниями компонентов пользовательского интерфейса, а не с файлами изображений. Для проверки изображений используйте специализированные инструменты сравнения скриншотов.
Какие дизайн-системы поддерживаются?
Навык может проверять любую дизайн-систему, описанную в запросе. Для достижения наилучших результатов предоставьте ваши токены дизайна и правила.
Заменяет ли это визуальное регрессионное тестирование?
Нет, этот навык обеспечивает структурную проверку и проверку токенов дизайна, а не попиксельное сравнение. Используйте его вместе с инструментами визуального регрессионного тестирования.
Может ли он проверять доступность?
Он может проверять структурные паттерны доступности, такие как иерархия заголовков и семантические элементы, но не полное соответствие требованиям доступности.
Насколько точна проверка?
Точность зависит от детализации описаний компонентов. Более подробные входные данные обеспечивают более точные результаты проверки.
Подходит ли этот навык для автоматизированных тестовых конвейеров?
Да, вы можете интегрировать вывод навыка в конвейеры CI/CD, фиксируя результаты проверки как часть процесса проверки компонентов.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-visual-validator

Ссылка

main

Структура файлов

📄 SKILL.md