UI-Атлас & Проверенные способы генерации
Не склад случайных промптов. Изучайте анатомию и механику интерфейсов: Visual → Anatomy → WHY → Prompt → Code.
Плавающая панель соцсетей и мессенджеров
Фиксированная вертикальная панель быстрых контактов (Telegram, WhatsApp, Телефон) с эффектом раскрытия лейблов при наведении и аккуратной мобильной адаптацией.
Виджет согласия на куки и политики данных (152-ФЗ / GDPR)
Ненавязчивый плавающий баннер согласия с возможностью тонкой настройки категорий (Аналитика, Маркетинг, Необходимые) и запоминанием выбора в LocalStorage.
Бенто-сетка преимуществ и возможностей
Асимметричная блочная раскладка карточек разного размера (1x1, 2x1, 2x2) с эффектом Spotlight-подсветки курсора для демонстрации ключевых фич продукта.
Эдиториал Hero-секция с крупной типографикой
Главный экран с крупным акцентным заголовком, контрастным eyebrow-бейджем, подзаголовком с ограничением ширины и парой целевых действий (CTA) без визуального шума.
Умная фиксированная шапка со сжатием и размытием
Навигационная панель, которая плавно уменьшает высоту, активирует матовое размытие фона и границу при начале скролла страницы вниз.
Нижняя мобильная панель навигации (Зона большого пальца)
Фиксированная внизу экрана панель для смартфонов с учетом safe-area-inset отступов, активными индикаторами разделов и быстрым доступом к главным экранам.
Интерактивная тарифная сетка с переключателем периода
Тарифная таблица из 3 планов с тумблером Месяц/Год (скидка 20%), акцентной карточкой «Популярный выбор», списком фич и готовыми CTA.
Сетка отзывов и социального подтверждения (Social Proof)
Блок реальных отзывов студентов и инженеров с цитатами, аватарами, ролями, ссылками на проекты и рейтингом 5 звезд в строгом стиле.
Монохромная сетка логотипов технологий и партнеров
Аккуратный ряд логотипов стека или партнеров в монохромном исполнении с эффектом нормализации высоты и мягким hover-эффектом.
Доступный аккордеон часто задаваемых вопросов (FAQ)
Раздел ответов на частые вопросы с поддержкой клавиатурной навигации (Enter/Space), плавным раскрытием ответов и возможностью открыть только один пункт за раз.
Сравнительная матрица возможностей (ProektMap vs Другие)
Наглядная таблица построчного сравнения вашего продукта с классическим подходом или конкурентами с понятными чекбоксами и акцентной подсветкой.
Фиксированная конверсионная плашка действия (Sticky CTA Bar)
Всплывающая снизу плашка с кратким оффером и кнопкой быстрого перехода, которая появляется только после прокрутки первого экрана.
Информационная полоса уведомлений в топе сайта
Верхняя акцентная строка для анонсов новых релизов, скидок или вебинаров с кнопкой перехода и возможностью закрытия.
Бесконечная бегущая строка логотипов и технологий (Marquee)
Плавная бесконечная бегущая строка на чистом CSS с аппаратным ускорением (GPU), паузой при наведении курсора и мягким затуханием по краям (mask-image).
Адаптивная контентная галерея артефактов (Masonry Grid)
Сетка скриншотов и результатов генераций с разной высотой карточек, всплывающими деталями при наведении и фильтрацией по категориям.
Интерактивный слайдер сравнения До / После
Ползунок для попиксельного сравнения двух состояний (сырой код vs отполированный интерфейс, до рефакторинга vs после).
Легкие скролл-анимации появления блоков (Scroll Reveal)
Мягкое появление контента при попадании в зону видимости экрана на базе IntersectionObserver без тяжелых внешних JS библиотек.
Фиксированное оглавление статьи и боковая панель (Sticky TOC)
Боковая колонка с оглавлением статьи/документации, которая плавно фиксируется при скролле и подсвечивает текущий читаемый раздел.
Каскадно накладывающиеся карточки этапов (Stacking Cards)
Эффект, при котором карточки этапов последовательно накладываются друг на друга стопкой при скролле страницы вниз.
Командная строка быстрого поиска и действий (Cmd + K)
Модальное окно быстрого поиска по сайту, готовым решениям и действиям с клавиатурными шорткатами (Cmd/Ctrl + K, стрелки, Enter, Escape).