Словами самого skill
Этот skill учит создавать целостные, доступные визуальные системы с помощью шкал типографики, теории цвета, систем отступов и основ иконографики. Он охватывает создание design token с модульными шкалами типов, отступами по 8-точечной сетке, семантическими цветовыми палитрами с требованиями по контрастности WCAG и системами размеров иконок.
Skill предоставляет конкретные паттерны реализации для Tailwind CSS, отзывчивой плавной типографики, тёмной темы с семантическими token и валидации доступности. Он решает распространённые проблемы визуального дизайна, такие как несогласованные отступы, слабый контраст и произвольные «магические числа», определяя шкалы на основе соотношений и переиспользуемые системы token.
Что он выдаёт
- Определения design token в CSS custom properties или конфигурации Tailwind
- Компонент иконки с вариантами размеров
Как это работает
- 01Создайте модульные design token
Определите шкалы типографики с размерами на основе соотношений (от 0.75rem до 3rem), отступы по 8-точечной сетке (от 4px до 64px) и семантические цветовые token для бренда, состояний и нейтральных оттенков.
- 02Примените отзывчивую типографику
Используйте плавную типографику с clamp() для адаптивных под вьюпорт размеров и поддерживайте оптимальную ширину строки не более 65 символов.
- 03Реализуйте доступные цветовые палитры
Создавайте цветовые системы, соответствующие требованиям WCAG по контрастности: 4.5:1 для основного текста, 3:1 для крупного текста и элементов UI, с программной проверкой контраста.
- 04Создание последовательных систем иконок
Определяйте шкалы размеров иконок от 12px до 32px с помощью переиспользуемых компонентов, принимающих size-параметры и сохраняющих поведение flex-shrink-0.
- 05Проектирование тёмной темы с семантическими токенами
Используйте семантические имена токенов по назначению, а не по внешнему виду, что позволяет переключать темы через data-атрибуты без изменения компонентов.
- 06Поддержание вертикального ритма
Применяйте единые правила отступов между соседними элементами, используя значения заданной шкалы, чтобы создать визуальную гармонию во всём интерфейсе.