Цвета, размеры, отступы, радиусы и тени получают ограниченные значения.
Система ограничивает случайность
Мини-дизайн-система не требует большой библиотеки. Для одной страницы достаточно небольшого набора значений и нескольких повторяемых компонентов.
Кнопка, карточка, поле и сообщение собираются одинаково в каждом месте.
Наведение, фокус, загрузка, успех и ошибка входят в правило компонента.
Быстрая проверка: Если два элемента выполняют одну роль, различие должно быть объяснено. Иначе это не вариант, а случайность.
USWDS использует дизайн-токены для повторяемых решений цвета, отступов и типографики. Material Design также строит визуальный язык через роли, а не локальные значения.источники
Сравните набор кнопок
В первой версии каждый блок придумывает кнопку заново. Во второй роль определяет внешний вид и состояние.
Вариант А: пять уникальных кнопок
Действия страницы
4 радиуса5 цветов3 тени
Сбой: Одинаковые действия получают разные правила и создают ощущение нескольких сайтов.
Вариант Б: роли повторяются
Действия страницы
радиус 10отступ 8/16/321 акцент
Система: Роль кнопки определяет вариант, а токены удерживают повторяемость.
Выберите мини-систему
Какой набор лучше подойдет для одного лендинга?
Мини-лаборатория
Система должна ограничивать выбор, но сохранять нужные роли.
Соберите правила из готовой страницы
Агент создал 11 оттенков серого, 7 радиусов и 6 вариантов карточек при двух реальных типах контента.
Инвентаризация
Серые цвета11
Радиусы7
Тени5
Карточки6 вариантов
Реальные роли карточек2
Какая команда лучше?
Дайте задачу агенту
Используйте шаблон как рамку разговора. Сначала наблюдение и критерии, затем изменение.
Проведи инвентаризацию визуальной системы страницы.
1. Выпиши уникальные цвета, размеры текста, отступы, радиусы, тени и варианты компонентов.
2. Сгруппируй значения по реальным ролям и найди случайные дубли.
3. Предложи минимальный набор токенов для этой страницы.
4. Опиши компоненты: кнопка, карточка, поле, сообщение и их состояния.
5. Замени только дублирующие стили. Не меняй содержание и структуру.
6. В конце выдай спецификацию системы и список исключений с объяснением.Урок освоен, если вы можете
Ваш преподаватель - агент
Попросите агента сначала показать инвентаризацию, а не готовый редизайн. Система хороша, если после нее новый блок можно собрать без новых значений.
Третий модуль завершен
Теперь вы понимаете сценарий страницы, поведение элементов, мобильные приоритеты, доступность и согласованность системы.