AIKraft/AI/Войти
AIKraft/Skills/refactoring ui

refactoring ui

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions

wondelai official Дизайн

Что делает навык

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

Когда применять

  • Генерация фронтенд-кода с соблюдением системных ограничений
  • Ревью существующих дизайнов или кода на предмет визуальных ошибок
  • Консультирование по улучшению визуальной иерархии и глубины интерфейса
  • Исправление проблем с контрастом, отступами и типографикой

Как работает

  1. Применять принцип: сначала проектировать в градациях серого (grayscale), добавляя цвет только в конце для усиления иерархии, а не как костыль.
  2. Использовать ограниченные шкалы (constrained scales) для отступов, типографики, цвета и теней для обеспечения единообразия.
  3. Начинать с избыточного белого пространства и уменьшать его, оставляя детали (иконки, тени, микро-взаимодействия) на потом.
  4. Оценивать интерфейс по Quick Diagnostic (8 проверок yes/no) и рассчитывать балл по формуле: round(satisfied / 8 × 10).
  5. Всегда указывать текущий балл и конкретные строки диагностики, которые нужно исправить для достижения 10/10.
  6. Следовать семи принципам фреймворка Refactoring UI, начиная с визуальной иерархии.

Примеры запросов агенту

Проанализируй этот UI-компонент по методике Refactoring UI и дай оценку по шкале до 10/10.
Исправь визуальную иерархию в этом макете, следуя принципу проектирования в градациях серого.
Проведи рефакторинг отступов и типографики в этом коде, используя ограниченные шкалы.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «refactoring-ui» из репозитория: # https://github.com/wondelai/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r refactoring-ui/ ~/.claude/skills/refactoring-ui/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.