Spacing Systemавтор Owl-Listener

Spacing System Skill.

Выбирайте отступы по связям между элементами и их назначению, а не отдельными правками в пикселях.

UI-дизайн
Дизайн-токены

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Spacing SystemSKILL.md

Задача UI-дизайн Результат • Именованная шкала отступов, построенная от выбранной базовой единицы. • Правила использования для inset, stack, inline и промежутков сетки. • Соответствие режимов плотности разным контекстам контента. Перед началом Конкретный инструмент для токенов не требуется; применение зависит от существующей системы компонентов.

Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Придайте отступам последовательный смысл

Компактная система отступов: базовая шкала, семантическое применение, группировка и режимы плотности.

Процесс на основе источникаНе тест выполнения

Принцип работы

Spacing System задаёт базовую единицу и повторно используемую шкалу для внешних отступов, внутренних отступов и промежутков. Он разделяет внутреннее пространство контейнера (inset), вертикальные стеки, связи inline и промежутки сетки, поэтому одинаковые числа могут иметь чётко описанное разное назначение.

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

Ожидаемые результаты

Именованная шкала отступов, построенная от выбранной базовой единицы.
Правила использования для inset, stack, inline и промежутков сетки.
Соответствие режимов плотности разным контекстам контента.

Смотреть пример задания

От задания до проверки

01
Выберите базу и шкалу
Изучите существующие паттерны и выберите ограниченный набор значений отступов, не сохраняя каждое случайное значение.
02
Назначьте семантическое применение
Определите, какие шаги относятся к внутреннему пространству компонентов, к промежуткам между связанными элементами управления и к промежуткам между разделами.
03
Опишите изменения плотности
Объясните, как компактный и просторный режимы меняют значения по умолчанию, сохраняя читаемость группировки.

02 Когда использовать

Когда использовать

Конкретный инструмент для токенов не требуется; применение зависит от существующей системы компонентов.

Хорошо подходит

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

Ограничения

Не колоночная сеткаКолонки страницы и адаптивные gutter относятся к Layout Grid.
Не автоматическая миграцияИсточник описывает правила, а не codemod, который безопасно заменяет каждое существующее значение CSS.

Что подготовить

Текущие примеры отступовПредоставьте типичные компоненты и используемые в них значения.
Замысел группировкиОбъясните, какие элементы связаны, а какие разделы нужно отделять.
Требования к плотностиУкажите контексты: насыщенные данными, обычные и ориентированные на чтение.

03 Важные решения

Важные решения

Замысел задокументирован
Одна таблица токенов не говорит разработчику, какой промежуток нужен между подписью и полем ввода.
Плотность без произвола
Режимы могут менять компактность, сохраняя общую систему, а не создавая ещё один набор произвольных значений.

04 Пример задания

Попробуйте узкое задание

Приведённый ниже пример задания не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Используйте описанный в репозитории способ установки и сохраните все упомянутые дополнительные файлы. Эта запись описывает целевой метод проектирования, а не исполняемое приложение.

Исходный файл в репозитории

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/spacing-system/SKILL.md

Конкретный инструмент для токенов не требуется; применение зависит от существующей системы компонентов.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания

Используйте spacing-system, чтобы согласовать наши формы настроек и плотную таблицу записей. Определите базовую единицу, именованную шкалу, правила inset/stack/inline, а также компактный и обычный режимы. Опишите отступ между подписью и полем отдельно от отступов между разделами; не перепроектируйте колонки страницы.

Проверьте результат

Сравните фактический результат с этими наблюдаемыми критериями.

Каждое предложенное значение входит в описанную шкалу.
Связанные группы остаются визуально отличимыми от несвязанных разделов.
Изменения плотности сохраняют понятное правило использования.

OpenDesign предоставляет локальное дизайн-пространство для агентов программирования. Этот список не означает, что навык входит в комплект или что внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesign Прочитать краткое руководство

05 Источник и лицензия

Источник и лицензия

На этой странице описана зафиксированная ревизия источника по ссылке ниже. Поведение и требования upstream могут измениться.

Владелец источника: Owl-Listener
Репозиторий: Owl-Listener/designer-skills
Файл навыка: ui-design/skills/spacing-system/SKILL.md
Лицензия: MIT
Проверенная версия: 2026-10-07 · 9a6930cf84a8

Редакционное резюме источника

Компактная система отступов: базовая шкала, семантическое применение, группировка и режимы плотности.

Оригинальное резюме от OpenDesign на основе связанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Нужна ли база в 8 пикселей?

Источник называет базы в 4 и 8 пикселей типичными вариантами; выбирайте по потребностям продукта.

Входят ли поля страницы в систему?

Система может описывать единые поля страницы, но более широкая структура колонок и точек перелома относится к спецификации сетки.

Зачем называть типы отступов?

Inset, stack, inline и gap описывают, как используется пространство, что делает применение более повторяемым, чем один список чисел.

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Скачать OpenDesign Просмотреть дизайн-навыки