808 lines
32 KiB
Markdown
808 lines
32 KiB
Markdown
# MeetMe — Дизайн-система в Penpot (Claude Code + MCP)
|
||
|
||
## Предисловие
|
||
|
||
Перед началом работы прочитай и усвой полностью:
|
||
|
||
- `.claude/skills/impeccable/SKILL.md` и все 7 файлов из `reference/`
|
||
- `.claude/skills/taste-skill/SKILL.md`
|
||
|
||
Эти скиллы — не опциональные. Без них выйдет типичный AI-слоп: Inter везде, фиолетово-синие градиенты, карточки внутри карточек, серый текст на цветном фоне. Читай. Потом работай.
|
||
|
||
---
|
||
|
||
## Контекст проекта
|
||
|
||
**MeetMe** — мобильное дейтинг-приложение (Vue 3 + Tauri 2). Пользователи регистрируются по телефону, создают несколько профилей, листают ленту, ставят лайки, получают матчи, переписываются в чате, договариваются о реальных встречах.
|
||
|
||
Весь дизайн — **на русском языке**: лейблы, плейсхолдеры, заголовки, подписи, пустые состояния, сообщения об ошибках, CTA-кнопки.
|
||
|
||
Два брейкпоинта:
|
||
|
||
- **Mobile** — 390 × 844 px (iPhone 14 Pro как эталон)
|
||
- **Desktop** — 1440 × 900 px
|
||
|
||
---
|
||
|
||
## Задача
|
||
|
||
Создать в Penpot полноценный дизайн-проект **MeetMe** со следующей структурой:
|
||
|
||
```
|
||
MeetMe/
|
||
├── 🎨 Foundations
|
||
│ ├── Color Palette
|
||
│ ├── Typography
|
||
│ ├── Spacing & Grid
|
||
│ ├── Elevation & Shadows
|
||
│ └── Motion Tokens
|
||
├── 🔷 Icons
|
||
│ └── Icon Library (48+ иконок)
|
||
├── 🧱 Components
|
||
│ ├── Atoms
|
||
│ ├── Molecules
|
||
│ └── Organisms
|
||
└── 📱 Screens
|
||
├── Mobile (390px)
|
||
└── Desktop (1440px)
|
||
```
|
||
|
||
---
|
||
|
||
## Айдентика и тон
|
||
|
||
**Название:** MeetMe
|
||
**Характер:** тёплый, живой, немного дерзкий — не корпоративный. Как хорошее свидание: интересно, немного волнительно, красиво.
|
||
**Аудитория:** 22–35 лет, городские жители, ценят эстетику.
|
||
**Тон:** уверенный, человечный, без заигрывания. Не «найди любовь», а «встреть своего человека».
|
||
|
||
---
|
||
|
||
## 1. ЦВЕТОВАЯ ПАЛИТРА
|
||
|
||
### Принципы (из impeccable color-and-contrast)
|
||
|
||
- Все цвета определяй в **OKLCH** — предсказуемый контраст при изменении яркости
|
||
- Нейтралы должны быть **тёплыми** (чуть красный/жёлтый подтон), не холодно-серыми
|
||
- Избегай: синих оттенков по умолчанию, generic «brand purple», чистого чёрного/белого
|
||
|
||
### Палитра MeetMe
|
||
|
||
**Brand (основной акцент):**
|
||
Тёплый терракотово-коралловый — не стандартный розовый Tinder, не красный. Живой, зрелый.
|
||
|
||
```
|
||
--color-brand-50: oklch(97% 0.012 22) /* почти белый с теплом */
|
||
--color-brand-100: oklch(93% 0.030 22)
|
||
--color-brand-200: oklch(86% 0.065 22)
|
||
--color-brand-300: oklch(76% 0.110 22)
|
||
--color-brand-400: oklch(66% 0.148 22)
|
||
--color-brand-500: oklch(58% 0.172 22) /* основной — #D4614A approx */
|
||
--color-brand-600: oklch(50% 0.160 22)
|
||
--color-brand-700: oklch(42% 0.140 22)
|
||
--color-brand-800: oklch(32% 0.110 22)
|
||
--color-brand-900: oklch(22% 0.075 22)
|
||
```
|
||
|
||
**Neutral (тёплые серые):**
|
||
|
||
```
|
||
--color-neutral-0: oklch(100% 0 0)
|
||
--color-neutral-50: oklch(97% 0.004 60)
|
||
--color-neutral-100: oklch(94% 0.008 60)
|
||
--color-neutral-200: oklch(88% 0.012 60)
|
||
--color-neutral-300: oklch(78% 0.016 60)
|
||
--color-neutral-400: oklch(64% 0.014 60)
|
||
--color-neutral-500: oklch(52% 0.012 60)
|
||
--color-neutral-600: oklch(40% 0.010 60)
|
||
--color-neutral-700: oklch(30% 0.008 60)
|
||
--color-neutral-800: oklch(20% 0.006 60)
|
||
--color-neutral-900: oklch(12% 0.004 60)
|
||
```
|
||
|
||
**Semantic:**
|
||
|
||
```
|
||
--color-success: oklch(62% 0.155 145) /* зелёный — матч состоялся */
|
||
--color-warning: oklch(78% 0.140 72) /* янтарный — встреча pending */
|
||
--color-error: oklch(58% 0.180 15) /* красный — ошибка */
|
||
--color-info: oklch(60% 0.130 240) /* синий — уведомление */
|
||
```
|
||
|
||
**Поверхности (Light mode):**
|
||
|
||
```
|
||
--surface-page: --color-neutral-50
|
||
--surface-card: --color-neutral-0
|
||
--surface-elevated: --color-neutral-0
|
||
--surface-overlay: oklch(12% 0.004 60 / 60%)
|
||
```
|
||
|
||
**Все токены фиксируй в Penpot как Color Styles**, организованные в группы: `brand/`, `neutral/`, `semantic/`, `surface/`.
|
||
|
||
---
|
||
|
||
## 2. ТИПОГРАФИКА
|
||
|
||
### Принципы (из impeccable typography)
|
||
|
||
- Не Inter. Никогда Inter как единственный шрифт.
|
||
- Пара: выразительный дисплейный + читаемый текстовый
|
||
- Модульная шкала, не произвольные размеры
|
||
- Следи за tracking (letter-spacing) — по умолчанию он слишком тесный у большинства шрифтов
|
||
|
||
### Выбор для MeetMe
|
||
|
||
**Display / Headings:** `Playfair Display` (Google Fonts)
|
||
Причина: серифный, тёплый, немного романтичный. Хорошо работает в заголовках карточек профилей и экране матча. Контрастирует с современным гротеском основного текста.
|
||
|
||
**Body / UI:** `Manrope` (Google Fonts)
|
||
Причина: геометрический гротеск с тёплым характером, отличная читаемость на маленьких размерах, хорошие кириллические глифы.
|
||
|
||
### Типографическая шкала (модульная, ratio 1.25)
|
||
|
||
| Токен | Шрифт | Size | Weight | Line-height | Tracking | Применение |
|
||
| ------------- | ---------------- | ---- | ------ | ----------- | -------- | ---------------------- |
|
||
| `display-2xl` | Playfair Display | 48px | 700 | 1.1 | -0.02em | Экран матча, hero |
|
||
| `display-xl` | Playfair Display | 38px | 700 | 1.15 | -0.015em | Заголовки онбординга |
|
||
| `display-lg` | Playfair Display | 30px | 600 | 1.2 | -0.01em | Имя в профиле |
|
||
| `display-md` | Playfair Display | 24px | 600 | 1.25 | -0.005em | Заголовки секций |
|
||
| `heading-lg` | Manrope | 20px | 700 | 1.3 | -0.01em | Навбар, диалоги |
|
||
| `heading-md` | Manrope | 17px | 600 | 1.35 | -0.005em | Карточки, подзаголовки |
|
||
| `heading-sm` | Manrope | 15px | 600 | 1.4 | 0 | Лейблы полей |
|
||
| `body-lg` | Manrope | 16px | 400 | 1.6 | 0 | Основной текст |
|
||
| `body-md` | Manrope | 14px | 400 | 1.6 | 0 | Описание профиля |
|
||
| `body-sm` | Manrope | 12px | 400 | 1.5 | 0.01em | Мета, временные метки |
|
||
| `label-lg` | Manrope | 14px | 500 | 1 | 0.04em | Кнопки, таббар |
|
||
| `label-sm` | Manrope | 11px | 500 | 1 | 0.06em | Бейджи, чипы |
|
||
|
||
**Все токены фиксируй в Penpot как Text Styles.**
|
||
|
||
---
|
||
|
||
## 3. SPACING & GRID
|
||
|
||
### Шкала отступов (4px база)
|
||
|
||
```
|
||
--space-1: 4px
|
||
--space-2: 8px
|
||
--space-3: 12px
|
||
--space-4: 16px
|
||
--space-5: 20px
|
||
--space-6: 24px
|
||
--space-8: 32px
|
||
--space-10: 40px
|
||
--space-12: 48px
|
||
--space-16: 64px
|
||
--space-20: 80px
|
||
```
|
||
|
||
### Радиусы скругления
|
||
|
||
```
|
||
--radius-sm: 6px /* чипы, теги */
|
||
--radius-md: 12px /* карточки, поля ввода */
|
||
--radius-lg: 20px /* карточки профиля */
|
||
--radius-xl: 28px /* модальные окна */
|
||
--radius-full: 9999px /* кнопки, аватары */
|
||
```
|
||
|
||
### Грид Mobile (390px)
|
||
|
||
- Колонки: 4
|
||
- Гаттер: 16px
|
||
- Отступы: 20px
|
||
|
||
### Грид Desktop (1440px)
|
||
|
||
- Колонки: 12
|
||
- Гаттер: 24px
|
||
- Отступы: 80px
|
||
- Max content width: 1280px
|
||
|
||
---
|
||
|
||
## 4. ELEVATION & ТЕНИ
|
||
|
||
Не используй `box-shadow: 0 4px 20px rgba(0,0,0,0.25)` — это AI-слоп.
|
||
Тени должны быть тёплыми и слоистыми.
|
||
|
||
```
|
||
--shadow-xs: 0 1px 2px oklch(12% 0.004 60 / 8%)
|
||
--shadow-sm: 0 1px 3px oklch(12% 0.004 60 / 10%), 0 1px 2px oklch(12% 0.004 60 / 6%)
|
||
--shadow-md: 0 4px 6px oklch(12% 0.004 60 / 7%), 0 2px 4px oklch(12% 0.004 60 / 6%)
|
||
--shadow-lg: 0 10px 15px oklch(12% 0.004 60 / 8%), 0 4px 6px oklch(12% 0.004 60 / 5%)
|
||
--shadow-xl: 0 20px 25px oklch(12% 0.004 60 / 8%), 0 8px 10px oklch(12% 0.004 60 / 4%)
|
||
```
|
||
|
||
**Карточка профиля** использует `--shadow-lg` + небольшой warm tint.
|
||
|
||
---
|
||
|
||
## 5. БИБЛИОТЕКА ИКОНОК
|
||
|
||
Создай коллекцию **48 иконок** в едином стиле:
|
||
|
||
- Стиль: **Outlined с rounded endpoints**, stroke 1.5–2px, 24×24 viewport
|
||
- Никакого filled + outlined микса в одном экране
|
||
- Все иконки — компоненты Penpot с именованием `icon/[category]/[name]`
|
||
|
||
### Список иконок (сгруппируй в Penpot по категориям):
|
||
|
||
**Navigation (8)**
|
||
|
||
- `nav/feed` — сетка карточек или стопка
|
||
- `nav/matches` — сердце с двойным контуром или звёзды
|
||
- `nav/chat` — облако диалога
|
||
- `nav/dates` — календарь с точкой
|
||
- `nav/profile` — силуэт человека
|
||
- `nav/settings` — шестерёнка или слайдеры
|
||
- `nav/back` — стрелка влево
|
||
- `nav/close` — крест
|
||
|
||
**Actions (12)**
|
||
|
||
- `action/like` — сердце
|
||
- `action/dislike` — крест в круге или большой X
|
||
- `action/superlike` — звезда
|
||
- `action/send` — стрелка отправки
|
||
- `action/attach` — скрепка
|
||
- `action/camera` — камера
|
||
- `action/microphone` — микрофон
|
||
- `action/photo` — рамка изображения
|
||
- `action/video` — видеокамера
|
||
- `action/delete` — корзина
|
||
- `action/edit` — карандаш
|
||
- `action/more` — три точки (горизонтальные)
|
||
|
||
**Profile (8)**
|
||
|
||
- `profile/age` — торт или число
|
||
- `profile/location` — пин геолокации
|
||
- `profile/height` — линейка роста
|
||
- `profile/weight` — весы
|
||
- `profile/verified` — галочка в круге
|
||
- `profile/add` — плюс в круге
|
||
- `profile/switch` — стрелки обмена (смена профиля)
|
||
- `profile/tag` — тег/лейбл
|
||
|
||
**Chat (8)**
|
||
|
||
- `chat/read` — двойная галочка
|
||
- `chat/delivered` — одна галочка
|
||
- `chat/typing` — три точки анимированные
|
||
- `chat/audio` — волна аудио
|
||
- `chat/emoji` — смайлик
|
||
- `chat/date-proposal` — календарь с сердцем
|
||
- `chat/greetings` — рука с приветствием
|
||
- `chat/report` — флажок
|
||
|
||
**Status (6)**
|
||
|
||
- `status/online` — зелёная точка
|
||
- `status/pending` — часы
|
||
- `status/confirmed` — галочка
|
||
- `status/cancelled` — крест
|
||
- `status/match` — конфетти или двойное сердце
|
||
- `status/limit` — замок или стоп-сигнал
|
||
|
||
**Misc (6)**
|
||
|
||
- `misc/filter` — воронка
|
||
- `misc/search` — лупа
|
||
- `misc/notification` — колокол
|
||
- `misc/map-pin` — булавка карты
|
||
- `misc/link` — цепочка
|
||
- `misc/info` — буква i в круге
|
||
|
||
---
|
||
|
||
## 6. КОМПОНЕНТНАЯ БИБЛИОТЕКА
|
||
|
||
### ATOMS
|
||
|
||
#### Button
|
||
|
||
**Варианты (Property: variant)**
|
||
|
||
- `primary` — brand-500 фон, белый текст
|
||
- `secondary` — brand-100 фон, brand-700 текст
|
||
- `ghost` — прозрачный фон, brand-600 текст
|
||
- `destructive` — error фон, белый текст
|
||
|
||
**Размеры (Property: size)**
|
||
|
||
- `lg` — height 52px, padding 24px, radius-full, label-lg
|
||
- `md` — height 44px, padding 20px, radius-full, label-lg
|
||
- `sm` — height 36px, padding 16px, radius-md, label-sm
|
||
|
||
**Состояния (Property: state)**
|
||
|
||
- `default`, `hover`, `pressed`, `disabled`, `loading`
|
||
|
||
**Иконка (Property: icon):** leading / trailing / icon-only
|
||
|
||
#### Input
|
||
|
||
- height 52px, radius-md, border 1.5px neutral-200
|
||
- Лейбл над полем (floating label — анимируется при фокусе)
|
||
- Состояния: `default`, `focused` (brand-500 border), `error` (error border + helper text), `disabled`, `filled`
|
||
- Варианты: `text`, `password` (с кнопкой показа), `phone` (с префиксом +7), `search`
|
||
|
||
#### Avatar
|
||
|
||
- Размеры: 32px, 40px, 48px, 64px, 80px, 120px
|
||
- Форма: круг
|
||
- Состояния: с фото, инициалы (brand-100 фон), загрузка, онлайн-индикатор
|
||
- Бейдж: счётчик уведомлений (правый верхний угол)
|
||
|
||
#### Badge / Chip
|
||
|
||
- `badge` — небольшой счётчик (число), brand или error
|
||
- `chip` — тег с текстом, варианты: outline, filled; с иконкой или без; dismissible
|
||
|
||
#### Tag (интересы)
|
||
|
||
- Компактный чип с иконкой-эмодзи и текстом
|
||
- `selected` / `unselected` состояния
|
||
- Используется в профиле для отображения тегов интересов
|
||
|
||
#### Divider
|
||
|
||
- Горизонтальный, с опциональным текстом по центру («или»)
|
||
|
||
---
|
||
|
||
### MOLECULES
|
||
|
||
#### ProfileCard (карточка в ленте)
|
||
|
||
Основной компонент приложения. Полноэкранная карточка на мобиле.
|
||
|
||
**Структура:**
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ │
|
||
│ [Фото профиля — bg] │
|
||
│ │
|
||
│ │
|
||
│ ╔═══════════════════════╗ │
|
||
│ ║ Анна, 26 ║ │
|
||
│ ║ 📍 Москва, Арбат ║ │
|
||
│ ║ 🏷 Путешествия Йога ║ │
|
||
│ ╚═══════════════════════╝ │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
- Фоновое фото занимает всю карточку
|
||
- Снизу градиент `oklch(12% 0 0 / 0%)` → `oklch(12% 0 0 / 80%)` — 40% высоты
|
||
- Имя: `display-lg` белый
|
||
- Возраст: рядом с именем, `display-lg` `oklch(100% 0 0 / 75%)`
|
||
- Геолокация: `body-md` белый, иконка `profile/location`
|
||
- Теги: горизонтальный скролл чипов
|
||
- Тени под текстом нет — только градиент
|
||
|
||
**Действия (кнопки поверх карточки):**
|
||
|
||
- Дизлайк — круглая кнопка 64px, нейтральный фон, иконка `action/dislike` в neutral-600
|
||
- Лайк — круглая кнопка 64px, brand-500 фон, иконка `action/like` белый
|
||
- Суперлайк (опционально) — 52px, янтарный, звезда
|
||
|
||
**Свайп-оверлеи:**
|
||
|
||
- Свайп вправо: зелёный бейдж «НРАВИТСЯ» в левом верхнем углу, наклон текста
|
||
- Свайп влево: красный бейдж «ПРОПУСТИТЬ» в правом верхнем углу
|
||
|
||
#### MessageBubble
|
||
|
||
- Чужое сообщение: нейтральный фон, скругление `0 radius-lg radius-lg radius-lg`
|
||
- Моё сообщение: brand-500 фон, белый текст, скругление `radius-lg 0 radius-lg radius-lg`
|
||
- Время: `body-sm` neutral-400
|
||
- Статус доставки: иконки `chat/delivered`, `chat/read`
|
||
- Медиа-сообщение: превью фото/видео с rounded corners
|
||
- Голосовое: волна + длительность + кнопка воспроизведения
|
||
|
||
#### MatchCard (в списке матчей)
|
||
|
||
```
|
||
┌──────────────────────────────┐
|
||
│ [Avatar 64px] Анна, 26 │
|
||
│ Москва │
|
||
│ ────────── │
|
||
│ Написать → │
|
||
└──────────────────────────────┘
|
||
```
|
||
|
||
- Горизонтальный layout
|
||
- Левая часть: аватар с онлайн-индикатором
|
||
- Правая: имя `heading-md`, город `body-sm` neutral-500, CTA `label-lg` brand-600
|
||
- Правый край: время матча `body-sm` neutral-400
|
||
|
||
#### ChatListItem
|
||
|
||
```
|
||
┌──────────────────────────────────────┐
|
||
│ [Avatar 48px] Анна 14:32 │
|
||
│ Привет! Как дела? [2]│
|
||
└──────────────────────────────────────┘
|
||
```
|
||
|
||
- Аватар, имя, последнее сообщение (truncated), время, счётчик непрочитанных
|
||
- Active state: brand-50 фон
|
||
|
||
#### DateCard (встреча)
|
||
|
||
- Иконка `nav/dates` brand-500
|
||
- Имя партнёра, дата и время
|
||
- Адрес/координаты
|
||
- Status badge: `pending` (янтарный), `confirmed` (зелёный), `cancelled` (красный)
|
||
- Действия: «Подтвердить» / «Отменить» / «Перенести»
|
||
|
||
#### FilterSheet (панель фильтров)
|
||
|
||
Bottom sheet на мобиле, sidebar на десктопе.
|
||
|
||
- Возраст: range slider (ageMin–ageMax)
|
||
- Город: dropdown select
|
||
- Район: dropdown select (зависимый)
|
||
- Теги: chip multi-select
|
||
- CTA: «Применить фильтры», «Сбросить»
|
||
|
||
---
|
||
|
||
### ORGANISMS
|
||
|
||
#### BottomNav (Mobile)
|
||
|
||
Высота 83px (+ safe area). 5 вкладок:
|
||
|
||
- Лента (`nav/feed`)
|
||
- Матчи (`nav/matches`) — с бейджем
|
||
- Чат (`nav/chat`) — с бейджем
|
||
- Встречи (`nav/dates`)
|
||
- Профиль (`nav/profile`)
|
||
|
||
Active state: иконка brand-500, лейбл brand-600, точка под иконкой.
|
||
|
||
#### SideNav (Desktop)
|
||
|
||
Ширина 240px, фиксированная. Logo MeetMe сверху. Те же 5 пунктов + «Настройки». Имя и аватар активного профиля снизу с кнопкой смены.
|
||
|
||
#### ProfileHeader
|
||
|
||
Используется на экране публичного профиля.
|
||
|
||
- Фото-галерея (swiper, точки-индикаторы)
|
||
- Кнопка назад
|
||
- Кнопка «Пожаловаться» (три точки → меню)
|
||
- Информация профиля снизу
|
||
|
||
#### ChatHeader
|
||
|
||
- Назад, аватар + имя + онлайн-статус, три точки (закрыть чат / встреча / жалоба)
|
||
|
||
#### MatchModal (bottom sheet / центральный модал)
|
||
|
||
Появляется при взаимном лайке.
|
||
|
||
- Анимированный фон (конфетти? мягкие частицы)
|
||
- Два аватара с перекрытием
|
||
- Заголовок: `display-xl` «Это матч!»
|
||
- Подзаголовок: «Ты и Анна понравились друг другу»
|
||
- CTA primary: «Написать Анне»
|
||
- CTA ghost: «Продолжить поиск»
|
||
|
||
---
|
||
|
||
## 7. ЭКРАНЫ — MOBILE (390px)
|
||
|
||
Создай фреймы для всех экранов в Penpot. Каждый экран — отдельный фрейм 390×844.
|
||
|
||
### Авторизация
|
||
|
||
**LoginView**
|
||
|
||
- Логотип MeetMe (wordmark Playfair Display + иконка) по центру верхней трети
|
||
- `display-xl`: «Рады видеть тебя»
|
||
- Поля: телефон (+7), пароль
|
||
- Кнопка primary `lg`: «Войти»
|
||
- Ссылка: «Нет аккаунта? Зарегистрироваться»
|
||
|
||
**RegisterView**
|
||
|
||
- «Создай аккаунт»
|
||
- Поля: телефон, пароль, подтверждение пароля
|
||
- Кнопка: «Зарегистрироваться»
|
||
- Ссылка: «Уже есть аккаунт? Войти»
|
||
|
||
### Онбординг
|
||
|
||
**CreateProfileView — Шаг 1 (Основное)**
|
||
|
||
- Прогресс-бар (3 шага)
|
||
- «Расскажи о себе»
|
||
- Поля: Имя, Дата рождения, Пол (radio-кнопки с иконками ♂ ♀)
|
||
- CTA: «Далее»
|
||
|
||
**CreateProfileView — Шаг 2 (Детали)**
|
||
|
||
- Поля: Город (select), Район (select), Рост, Вес, Национальность
|
||
- Описание (textarea, 300 символов)
|
||
- CTA: «Далее»
|
||
|
||
**CreateProfileView — Шаг 3 (Интересы)**
|
||
|
||
- «Выбери до 10 интересов»
|
||
- Chip grid из тегов (GET /tags)
|
||
- CTA: «Готово»
|
||
|
||
**MediaUploadView**
|
||
|
||
- «Добавь фото»
|
||
- 6 слотов в сетке 2×3, первый — обязательный (основное фото)
|
||
- Плейсхолдер слота: `+` иконка, пунктирная рамка
|
||
- Подсказка: «Первое фото увидят все»
|
||
- CTA: «Начать знакомства»
|
||
|
||
### Лента
|
||
|
||
**FeedView**
|
||
|
||
- Карточка профиля на весь экран (за вычетом статус-бара и BottomNav)
|
||
- Вверху: логотип MeetMe (compact) + иконка фильтра + иконка уведомлений
|
||
- Кнопки действий снизу карточки
|
||
- Индикатор позиции (точки или счётчик «3 из 20»)
|
||
|
||
**FeedView — Empty State**
|
||
|
||
- Иллюстрация (простая, монолинейная, brand-200 цвет)
|
||
- «Ты просмотрел всех»
|
||
- «Попробуй позже или измени фильтры»
|
||
- CTA: «Изменить фильтры»
|
||
|
||
**FeedView — Limit Reached**
|
||
|
||
- «У тебя 10 матчей»
|
||
- «Пообщайся с ними, чтобы продолжить поиск»
|
||
- CTA: «Перейти к матчам»
|
||
|
||
### Матчи
|
||
|
||
**MatchesView**
|
||
|
||
- Заголовок «Матчи»
|
||
- Horizontal scroll «Новые» — аватары в кружках (как в Instagram Stories)
|
||
- Список MatchCard ниже — все матчи в хронологии
|
||
|
||
### Чат
|
||
|
||
**ChatsListView**
|
||
|
||
- Заголовок «Сообщения»
|
||
- Поиск по чатам
|
||
- Список ChatListItem
|
||
- Empty state: «Пока нет чатов. Напиши кому-нибудь из матчей!»
|
||
|
||
**ChatView**
|
||
|
||
- ChatHeader
|
||
- Сообщения (с группировкой по датам — «Сегодня», «Вчера», дата)
|
||
- Быстрые приветствия (горизонтальный скролл чипов, появляется при первом сообщении)
|
||
- Input bar: поле ввода + иконки: фото, голосовое, отправить
|
||
- Кнопка «Назначить встречу» — плавающая или в меню чата
|
||
|
||
### Встречи
|
||
|
||
**DatesView**
|
||
|
||
- Заголовок «Встречи»
|
||
- Фильтр по статусу (таббар: Все / Ожидают / Подтверждены)
|
||
- Список DateCard
|
||
- Empty state: «Пока нет встреч. Договорись в чате!»
|
||
|
||
**DateProposalSheet (bottom sheet)**
|
||
|
||
- «Назначить встречу»
|
||
- Поле: дата и время (date-time picker)
|
||
- Карта или поле координат
|
||
- CTA: «Отправить предложение»
|
||
|
||
### Профиль
|
||
|
||
**MyProfilesView**
|
||
|
||
- «Мои профили»
|
||
- Список профилей (аватар, имя, возраст)
|
||
- Кнопка «Добавить профиль» (+ иконка)
|
||
- Active badge на текущем профиле
|
||
|
||
**ProfileEditView**
|
||
|
||
- Редактирование с теми же полями что в создании
|
||
- Секция «Медиа» — галерея с drag-to-reorder
|
||
- Кнопка «Удалить профиль» (destructive, внизу)
|
||
|
||
**ProfilePublicView**
|
||
|
||
- ProfileHeader (фото-галерея)
|
||
- Имя, возраст, геолокация
|
||
- Описание
|
||
- Теги (chips)
|
||
- Рост, вес, национальность (иконки + значения)
|
||
- Кнопки Лайк/Дизлайк (если это лента) или «Написать» (если это матч)
|
||
|
||
### Настройки
|
||
|
||
**SettingsView**
|
||
|
||
- Аватар + имя аккаунта
|
||
- Секции: Аккаунт, Уведомления, Безопасность, О приложении
|
||
- Кнопка «Выйти» (destructive)
|
||
|
||
---
|
||
|
||
## 8. ЭКРАНЫ — DESKTOP (1440px)
|
||
|
||
Каждый фрейм 1440×900.
|
||
|
||
**Общий Layout:**
|
||
|
||
- Левая колонка: SideNav (240px, фиксированная)
|
||
- Основная область: 1200px
|
||
- Для чата: split-view — список (320px) + сообщения
|
||
|
||
**FeedView Desktop**
|
||
|
||
- SideNav слева
|
||
- Центр: карточка профиля 420×560px (не во весь экран!)
|
||
- Справа от карточки: детали профиля (имя, теги, описание) — 320px колонка
|
||
- Кнопки под карточкой или справа
|
||
|
||
**ChatsView Desktop**
|
||
|
||
- SideNav | ChatList 320px | ChatMessages | (опционально ProfilePanel 280px)
|
||
- Нет bottom sheet — поле ввода снизу в колонке сообщений
|
||
|
||
**MatchesView Desktop**
|
||
|
||
- Сетка 3 колонки из MatchCard
|
||
|
||
**ProfileEditView Desktop**
|
||
|
||
- Двухколоночный layout: форма | превью профиля
|
||
|
||
---
|
||
|
||
## 9. МОДАЛЬНЫЕ ОКНА И ОВЕРЛЕИ
|
||
|
||
- **MatchModal** — центральный модал на десктопе, bottom sheet на мобиле
|
||
- **FilterSheet** — right sidebar на десктопе, bottom sheet на мобиле
|
||
- **DateProposalSheet** — аналогично
|
||
- **ReportSheet** — «Пожаловаться»: тип жалобы (chips) + текстовое поле + «Отправить»
|
||
- **ConfirmDialog** — удаление профиля, закрытие чата
|
||
|
||
---
|
||
|
||
## 10. ПУСТЫЕ СОСТОЯНИЯ И СОСТОЯНИЯ ЗАГРУЗКИ
|
||
|
||
Для каждого ключевого экрана создай:
|
||
|
||
**Loading (Skeleton):**
|
||
|
||
- ProfileCard skeleton: прямоугольник с animated shimmer
|
||
- ChatListItem skeleton: аватар-круг + две строки
|
||
|
||
**Empty States (с иллюстрацией):**
|
||
|
||
- Лента пуста
|
||
- Нет матчей
|
||
- Нет чатов
|
||
- Нет встреч
|
||
|
||
**Error State:**
|
||
|
||
- Что-то пошло не так + кнопка «Повторить»
|
||
|
||
---
|
||
|
||
## 11. ЛОГОТИП MEETME
|
||
|
||
Создай wordmark:
|
||
|
||
- Текст «MeetMe» шрифтом Playfair Display, 700 weight
|
||
- «Meet» — neutral-900
|
||
- «Me» — brand-500
|
||
- Опционально: небольшой знак — стилизованное «M» из двух сердец или двух силуэтов
|
||
- Compact версия: только знак (для BottomNav, favicon)
|
||
- Размеры: Full (для онбординга), Medium (для NavBar), Small / Icon-only
|
||
|
||
---
|
||
|
||
## 12. ОРГАНИЗАЦИЯ В PENPOT
|
||
|
||
### Структура страниц:
|
||
|
||
```
|
||
Page 1: 🎨 Foundations
|
||
Frames: Color Palette | Typography Scale | Spacing | Shadows | Motion
|
||
|
||
Page 2: 🔷 Icons
|
||
Frame: Icon Library (сетка 8×6, все 48 иконок с лейблами)
|
||
|
||
Page 3: 🧱 Components — Atoms
|
||
Frames: Button | Input | Avatar | Badge | Chip | Tag | Divider
|
||
|
||
Page 4: 🧱 Components — Molecules
|
||
Frames: ProfileCard | MessageBubble | MatchCard | ChatListItem | DateCard | FilterSheet
|
||
|
||
Page 5: 🧱 Components — Organisms
|
||
Frames: BottomNav | SideNav | ProfileHeader | ChatHeader | MatchModal
|
||
|
||
Page 6: 📱 Mobile Screens
|
||
390×844: Login | Register | CreateProfile (×3) | MediaUpload |
|
||
Feed | Feed Empty | Feed Limit | Matches | ChatsList |
|
||
Chat | Dates | DateProposal | MyProfiles | ProfileEdit |
|
||
ProfilePublic | Settings
|
||
|
||
Page 7: 🖥 Desktop Screens
|
||
1440×900: Feed | Chat | Matches | ProfileEdit
|
||
```
|
||
|
||
### Именование в Penpot:
|
||
|
||
- Компоненты: `ComponentName/variant/size/state`
|
||
- Цвета: `brand/500`, `neutral/200`, `semantic/success`
|
||
- Текстовые стили: `display/2xl`, `body/md`, `label/lg`
|
||
- Иконки: `icon/nav/feed`, `icon/action/like`
|
||
|
||
---
|
||
|
||
## 13. ANTI-PATTERNS (не делай этого)
|
||
|
||
Из impeccable — то, что категорически запрещено:
|
||
|
||
- ❌ `font-family: Inter` как единственный шрифт
|
||
- ❌ Градиент `purple → blue` в качестве акцента
|
||
- ❌ `box-shadow: 0 4px 20px rgba(0,0,0,0.25)` — тёмная жирная тень
|
||
- ❌ Карточки внутри карточек внутри карточек
|
||
- ❌ `border-radius: 24px` на всём подряд
|
||
- ❌ Серый текст на цветном фоне (проверяй контраст WCAG AA)
|
||
- ❌ Bounce easing (cubic-bezier с выходом за 1)
|
||
- ❌ «Плавающие» заголовки с декоративными линиями и иконками над каждым
|
||
- ❌ Полупрозрачные карточки с `backdrop-filter: blur` везде
|
||
- ❌ Все кнопки одинаковые, round, pill-shaped — нужна иерархия
|
||
- ❌ Пустые состояния без иллюстрации и без конкретного CTA
|
||
- ❌ Текст `color: #666` на белом фоне — не пройдёт WCAG
|
||
|
||
---
|
||
|
||
## 14. ПОРЯДОК РАБОТЫ
|
||
|
||
1. **Foundations** — создай все токены как Penpot Styles (цвет, текст)
|
||
2. **Icons** — нарисуй все 48 иконок, сохрани как компоненты
|
||
3. **Логотип** — создай 3 версии
|
||
4. **Atoms** — Button, Input, Avatar, Badge, Chip
|
||
5. **Molecules** — ProfileCard, MessageBubble, MatchCard, ChatListItem, DateCard
|
||
6. **Organisms** — BottomNav, SideNav, ProfileHeader, ChatHeader, MatchModal
|
||
7. **Mobile screens** — собери все 17 экранов из компонентов
|
||
8. **Desktop screens** — 4 ключевых экрана
|
||
9. **States & Edge cases** — loading, empty, error для каждого экрана
|
||
|
||
Не спрашивай подтверждения на каждый шаг — работай последовательно до полной готовности проекта.
|
||
|
||
---
|
||
|
||
## Финальная проверка
|
||
|
||
После завершения прогони аудит по impeccable:
|
||
|
||
- Типографический контраст (все текстовые пары ≥ 4.5:1)
|
||
- Touch targets на мобиле (≥ 44×44px)
|
||
- Длина строк (45–75 символов для body text)
|
||
- Консистентность радиусов (не более 3 уровней на один экран)
|
||
- Отступы кратны шкале (никаких «13px»)
|
||
- Все состояния компонентов реализованы
|
||
- Все иконки используются минимум на одном экране
|