# Design Guide > Памятка о дизайн-вкусе: иерархия, ритм, плотность, копирайт — перечитать перед сдачей. Триггеры: «дизайн-памятка», «design taste». НЕ анти-слоп→content-rules; QA→design-guardrails. - Skill: `jhamidun/design-guide` (Agent Skill) - Install (CLI): `npx skillmds@latest add jhamidun/design-guide` - Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/design-guide/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: JHamidun (https://skillmd.com/u/jhamidun) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/jhamidun/design-guide --- # Design guide Это не инструкция к инструменту, а памятка о вкусе. Перечитывай перед началом сложной задачи и перед сдачей. ## Иерархия В любом макете глаз должен **сразу понять**, что главное, что второстепенное, что третьестепенное. Если три элемента борются за внимание — макет не работает. Способы создать иерархию (в порядке силы): 1. **Размер** — самое мощное. 3× разница, не 1.2×. 2. **Положение** — верх и левая часть «громче». 3. **Контраст к фону** — тёмное на светлом. 4. **Плотность вокруг** — окружи воздухом то, что должно греметь. 5. **Цвет** — слабее размера. Используй последним. Если у тебя в макете три заголовка одного размера — два из них не заголовки, а что-то другое. Переподпиши. ## Ритм и негативное пространство - Большие пустоты — это не «пусто», это «важно». Не заполняй ватой. - Группируй связанное близко, отделяй несвязанное далеко. Закон близости. - Между секциями зазор должен быть **больше**, чем между элементами внутри секции. В 2-3 раза. - Не центрируй всё. Левый край — друг. ## Плотность - **Низкая плотность** — для манифестов, питчей, вступлений. Один тезис на экран. - **Средняя** — рабочий уровень для большинства слайдов и страниц. - **Высокая** — для дашбордов, отчётов, документации. Сетка обязательна. Внутри одного артефакта плотность должна быть консистентной. Если первая страница пустая, а вторая забита — связи не будет. ## Типографика - **Один шрифт по умолчанию.** Два максимум. - **Шкала размеров кратна 1.25–1.5.** Не «13, 14, 15, 16» — выбери `12 / 16 / 20 / 28 / 40`. - **Высота строки 1.4–1.6 для тела**, 1.0–1.1 для крупных заголовков. - **Длина строки 50–75 символов** для тела. Выше — глаз не находит начало следующей строки. - **Tabular-nums для цифр** в таблицах и метриках. Без этого «1,234» и «9,876» прыгают. - **`text-wrap: pretty`** — бесплатный апгрейд читаемости. ## Цвет - **3 цвета** — пол. **5** — потолок. **7+** — переделывай. - Один **акцент** на макет. Два — если есть semantic-разделение (positive/negative). - **Никогда не используй чистый чёрный (`#000`) на чистом белом (`#fff`).** Сдвинь оба на 5–10%. - **Контраст текста ≥ 4.5:1.** Замерь, не на глаз. - Серые делай тонированными в сторону твоего акцента. «Холодный серый» в тёплой палитре читается как чужой. ## Копирайт Текст — это часть дизайна. Каждое слово на экране — твоя ответственность. - Заголовки — **глаголы и обещания**, а не категории. «Получите ответ за 30 секунд» лучше, чем «Скорость». - Кнопки — **действия от первого лица**. «Сохранить» лучше, чем «Save changes». «Скачать отчёт» лучше, чем «Скачать». - Ошибки — **что произошло + что делать**. Не «Ошибка 500». - Числа — **не больше 3 значащих цифр**. «$2.4M», а не «$2,437,891.34». - Выкинь слова: «просто», «легко», «можно», «есть возможность», «осуществить», «вопрос», «момент». ## Изображения - **Не растягивай.** Кропай или подставляй placeholder. - **Не круглые аватарки внутри прямоугольных карточек** просто так — выглядит как stock-template. - **Full-bleed важен.** Картинка от края до края — сильное решение, оставь его для одного-двух мест. - **Подписи под изображениями** — мелкий моноширинный текст, не вставляй в основной поток. ## Анимация - **Длительность 150–300 ms** для UI-микро-движений. 600+ ms — только для больших переходов. - **Easing — не `linear`.** Используй `cubic-bezier(0.4, 0, 0.2, 1)` или специфичные. - **Не анимируй всё.** Если двигается всё — глаз не знает, на что смотреть. - **Не повторяй loop-анимации** на статичной странице. Это раздражает. - **Уважай `prefers-reduced-motion`**. ## Адаптивность - **Mobile-first** даже в десктоп-макетах. Сначала проверь, что узкая колонка работает. - **Hit-targets ≥ 44×44px** на тач-устройствах. - **Шрифт 16px минимум** в теле на мобильных. Меньше — Safari масштабирует страницу. ## Доступность - **Контраст**, см. выше. - **Семантический HTML** — `