Frontend Design Skill
Для продуктового интерфейса общая точка входа —
ui-design: единый контракт дизайна, реализации и
проверки. Прочитай его один раз, если он ещё не загружен; затем вернись к нужным
референсам ниже, без повторного обхода ссылок. Редактируемые hero/баннеры,
инфографика и отдельные визуальные ассеты также описаны там. Этот файл —
веб-специализация, не второй независимый процесс и не замена правил продукта.
Этот скилл — о создании визуально выдающихся интерфейсов. Не просто рабочих — а таких, где дизайн
говорит сам за себя. Основной принцип: каждый интерфейс должен выглядеть как работа 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. Детали создают профессионализм
/* Плохо — резкие переходы */
button { background: blue; }
button:hover { background: darkblue; }
/* Хорошо — всё плавно */
button {
background: #3b82f6;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
button:hover {
background: #2563eb;
box-shadow: 0 4px 12px rgba(59,130,246,0.4);
transform: translateY(-1px);
}
4. Mobile-first — не опция, а стандарт
Начинай с мобильного экрана, расширяй для десктопа.
Быстрые рецепты по стилям
Современный минимализм (2024-2025 тренд)
:root {
--bg: #0f0f11;
--surface: #1a1a1f;
--border: rgba(255,255,255,0.08);
--text: #e4e4e7;
--muted: #71717a;
--accent: #6366f1;
}
Glassmorphism
.glass {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
}
Soft Neomorphism
.neu {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 6px 6px 14px #b8bec7, -6px -6px 14px #ffffff;
}
Градиентный акцент
.gradient-text {
background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
Чек-лист перед сдачей интерфейса
1---2name: frontend-design3description: Создание высококачественных, визуально выдающихся фронтенд-интерфейсов. Используй ВСЕГДА когда пользователь просит создать веб-страницу, компонент, лендинг, дашборд, UI-кит, форму, карточки, навигацию, анимации, или любой другой веб-интерфейс. Скилл покрывает: HTML/CSS/JS компоненты, React/Vue/Svelte, Tailwind CSS, адаптивный и мобильный дизайн, визуальные стили (glassmorphism, neomorphism, material, flat, градиенты, тёмная тема), интерактивность (drag-and-drop, анимации, hover-эффекты, transitions), верстку (Flexbox, Grid, Container Queries), производительность, доступность (WCAG/ARIA), дизайн-системы и токены. Если пользователь хочет что-то "красивое", "современное", "стильное" в вебе — обязательно используй этот скилл. НЕ используй для нативных мобильных приложений (iOS/Swift/SwiftUI, Android) — для iOS бери скилл ios-development; этот скилл только про веб-UI (браузер).4---56# Frontend Design Skill78Для продуктового интерфейса общая точка входа —9[`ui-design`](../ui-design/SKILL.md): единый контракт дизайна, реализации и10проверки. Прочитай его один раз, если он ещё не загружен; затем вернись к нужным11референсам ниже, без повторного обхода ссылок. Редактируемые hero/баннеры,12инфографика и отдельные визуальные ассеты также описаны там. Этот файл —13веб-специализация, не второй независимый процесс и не замена правил продукта.1415Этот скилл — о создании **визуально выдающихся** интерфейсов. Не просто рабочих — а таких, где дизайн16говорит сам за себя. Основной принцип: каждый интерфейс должен выглядеть как работа senior-дизайнера,17а не как «шаблон из интернета».1819## Навигация по reference-файлам2021| Тема | Файл |22|------|------|23| Верстка, CSS, адаптив, Flexbox/Grid | `references/layout-css.md` |24| Визуальные стили, цвет, типографика, эффекты | `references/visual-styles.md` |25| Компоненты, фреймворки, React/Vue/Tailwind | `references/components-frameworks.md` |26| Производительность, доступность, SEO | `references/performance-a11y.md` |2728Читай нужный reference-файл перед тем как писать код.2930---3132## Золотые правила хорошего UI3334### 1. Иерархия важнее красоты35Пользователь должен за 3 секунды понять: что это, что важно, что делать.36- Один главный акцент на экране37- Размер и вес текста = важность информации38- Пустое пространство — не «пустое», а воздух для восприятия3940### 2. Консистентность убивает хаос41- Один радиус скругления на весь интерфейс (4/8/12/16px)42- Одна шкала отступов (4px / 8px / 12px / 16px / 24px / 32px / 48px / 64px)43- Максимум 2 шрифта: заголовочный + основной44- Максимум 3 цвета: основной, акцентный, нейтральный4546### 3. Детали создают профессионализм47```css48/* Плохо — резкие переходы */49button { background: blue; }50button:hover { background: darkblue; }5152/* Хорошо — всё плавно */53button {54 background: #3b82f6;55 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);56 box-shadow: 0 1px 3px rgba(0,0,0,0.1);57}58button:hover {59 background: #2563eb;60 box-shadow: 0 4px 12px rgba(59,130,246,0.4);61 transform: translateY(-1px);62}63```6465### 4. Mobile-first — не опция, а стандарт66Начинай с мобильного экрана, расширяй для десктопа.6768---6970## Быстрые рецепты по стилям7172### Современный минимализм (2024-2025 тренд)73```css74:root {75 --bg: #0f0f11;76 --surface: #1a1a1f;77 --border: rgba(255,255,255,0.08);78 --text: #e4e4e7;79 --muted: #71717a;80 --accent: #6366f1;81}82```8384### Glassmorphism85```css86.glass {87 background: rgba(255, 255, 255, 0.08);88 backdrop-filter: blur(16px);89 -webkit-backdrop-filter: blur(16px);90 border: 1px solid rgba(255, 255, 255, 0.12);91 border-radius: 16px;92}93```9495### Soft Neomorphism96```css97.neu {98 background: #e0e5ec;99 border-radius: 16px;100 box-shadow: 6px 6px 14px #b8bec7, -6px -6px 14px #ffffff;101}102```103104### Градиентный акцент105```css106.gradient-text {107 background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);108 -webkit-background-clip: text;109 -webkit-text-fill-color: transparent;110 background-clip: text;111}112```113114---115116## Чек-лист перед сдачей интерфейса117118- [ ] Работает на мобильном (320px минимум)119- [ ] Hover-эффекты на всех интерактивных элементах120- [ ] Анимации плавные (transition не > 300ms)121- [ ] Контрастность текста ≥ 4.5:1 (WCAG AA)122- [ ] Шрифты загружаются без FOUT (font-display: swap)123- [ ] Картинки имеют alt-текст124- [ ] Кнопки имеют :focus-visible стиль125- [ ] Нет горизонтального скролла126- [ ] Loading-состояния для асинхронных данных127- [ ] Empty-state для пустых списков
AnastasiyaW