init

2026-06-08 13:23:20 +03:00
commit 637dddf656
160 changed files with 56097 additions and 0 deletions
--- a/promts/meetme-penpot-prompt.md
+++ b/promts/meetme-penpot-prompt.md
@@ -0,0 +1,748 @@
+# 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»)
+- Все состояния компонентов реализованы
+- Все иконки используются минимум на одном экране