normalize
Нормализация UI-компонентов к дизайн-системе
Устраняет несоответствия дизайна путём автоматического обнаружения и исправления отклонений от вашей дизайн-системы. Гарантирует, что каждый компонент использует правильные токены, паттерны и установленные конвенции.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "normalize". Нормализуй компонент навигационной панели
Résultat attendu:
Проанализировал навигационную панель и нашёл 12 отклонений от дизайн-системы: заменил кастомные отступы на токены отступов (4px -> space-2, 16px -> space-4), обновил насыщенность шрифта для соответствия типографической шкале (600 -> semibold), заменил кастомную реализацию кнопки на компонент Button из дизайн-системы, согласовал состояния наведения с паттернами взаимодействия и ensured ARIA-метки соответствуют руководствам по доступности.
Utilisation de "normalize". Проверь страницу настроек на согласованность дизайна
Résultat attendu:
Аудит страницы настроек завершён: найдено 8 несоответствий, включая жёстко заданные цвета (#3B82F6 следует использовать токен primary-blue), непоследовательные отступы (24px смешано с space-6), кастомный переключатель toggle (следует использовать компонент Toggle) и misaligned адаптивную точку breakpoints (md вместо lg). Создан план нормализации — ожидается одобрение для продолжения.
Audit de sécurité
SûrStatic analyzer flagged 33 'weak cryptographic algorithm' patterns, all false positives from instructional emphasis markers like 'CRITICAL', 'IMPORTANT', 'NEVER' in documentation. The skill performs read-only design system analysis with no code execution, network requests, or system commands. All findings dismissed as non-security instructional text.
Score de qualité
Ce que vous pouvez construire
Модернизация устаревшего UI
Команды разработки, мигрирующие унаследованные кодовые базы на стандарты дизайн-системы, могут использовать этот скилл для систематической замены кастомных реализаций на системные компоненты.
Обеспечение соблюдения дизайн-системы
UI/UX-лиды могут гарантировать, что все новые функции следуют установленным паттернам дизайна, запуская этот скилл во время код-ревью или перед мержем PR.
Стандартизация библиотеки компонентов
Команды, создающие библиотеки компонентов, могут использовать этот скилл для выявления несоответствий между компонентами и обеспечения единообразия API-дизайна и визуальной согласованности.
Essayez ces prompts
Нормализуй страницу оформления заказа в соответствии со стандартами нашей дизайн-системы.
Проанализируй весь раздел пользовательского дашборда и создай детальный план нормализации. Перечисли все отклонения от дизайн-системы перед внесением изменений.
Нормализуй типографику и отступы в модальном окне настроек. Используй токены дизайна вместо жёстко заданных значений.
Нормализуй новую функцию профиля, затем консолидируй все созданные переиспользуемые компоненты в общую UI-библиотеку.
Bonnes pratiques
- Всегда запускай скилл frontend-design сначала, чтобы обеспечить наличие контекста дизайн-системы перед нормализацией
- Просматривай план нормализации перед выполнением, чтобы понять все предложенные изменения
- Тщательно тестируй функции после нормализации, чтобы убедиться, что не было введено UX-регрессий
- Консолидируй новые переиспользуемые компоненты в общие пути компонентов вместо их дублирования
Éviter
- Запуск нормализации без существующей документации дизайн-системы или руководств по стилю
- Обход фазы планирования и внесение изменений без понимания контекста
- Создание новых одноразовых компонентов вместо использования существующих эквивалентов из дизайн-системы
- Жертвование доступностью или удобством использования ради только визуальной согласованности