frontend-design

# Frontend Design Skill Этот скилл — о создании **визуально выдающихся** интерфейсов. Не просто рабочих — а таких, где дизайн говорит сам за себя. Основной принцип: каждый интерфейс должен выглядеть как работа senior-дизайнера, а не как «шаблон из интернета». ## Навигация по reference-файлам | Тема | Файл | |------|------| | Верстка, CSS, адаптив, Flexbox/Grid | `references/layout-css.md` | | Визуальные стили, цвет, типографика, эффекты | `references/visual-styles.md` | | Компоненты, фреймворки, React/Vue/Tailwind | `references/components-frameworks.md` | | Производительность, доступность, SEO | `references/performance-a11y.md` | Читай нужный reference-файл перед тем как писать код. --- ## Золотые правила хорошего UI ### 1. Иерархия важнее красоты Пользователь должен за 3 секунды понять: что это, что важно, что делать. - Один главный акцент на экране - Размер и вес текста = важность информации - Пустое пространство — не «пустое», а воздух для восприятия ### 2. Консистентность убивает хаос - Один радиус скругления на весь интерфейс (4/8/12/16px) - Одна шкала отступов (4px / 8px / 12px / 16px / 24px / 32px / 48px / 64px) - Максимум 2 шрифта: заголовочный + основной - Максимум 3 цвета: основной, акцентный, нейтральный ### 3. Детали создают профессионализм ```css /* Плохо — резкие переходы */ button { background: blue; } button:hover { background: darkblue; } /* Хорошо — всё плавно */ button { background: #3b82f6; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); ...