hemp/dating-app-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ffde85242a2d487e6d82bf7a01a6d11a43343d2c
dating-app-frontend/promts/meetme-penpot-prompt.md
Oscar b98387ea58 eslint --fix
2026-06-08 15:09:53 +03:00

32 KiB
Raw Blame History

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»)
  • Все состояния компонентов реализованы
  • Все иконки используются минимум на одном экране
Reference in New Issue View Git Blame Copy Permalink