Дизайн-Рецепты & Master-Промпты

Связки проверенных UI-паттернов с едиными дизайн-токенами. AI генерирует согласованный экран без визуальных конфликтов и разрозненных z-index.

Рецепт • saas Выбран

Конверсионный экран запуска SaaS-продукта

High-Conversion SaaS Launch Screen

Сборка экрана первого впечатления: Sticky Blur Header + Асимметричная Bento-сетка ключевых фич + Плавающий док мессенджеров + Единые дизайн-токены.

3 паттерна в связкеСмотреть сборку →

Рецепт • landing

Лендинг услуг AI-инженера и агентства

Agency & AI Engineer Service Landing

Проверенная связка для продажи услуг внедрения AI: плавающий контактный док + юридический виджет + конверсионные блоки.

2 паттерна в связкеСмотреть сборку →

Активная сборка экрана

Конверсионный экран запуска SaaS-продукта

Кейс: Главная страница технологического AI-стартапа, микросервиса или SaaS-платформы под ключ.

Дизайн-токены экрана (гарантия визуальной согласованности):

Radiusrounded-3xl (24px)

Background#0B0F19 (Slate Dark)

Borderborder-slate-800/80

Blur Depthbackdrop-blur-xl

Accent#6366F1 (Indigo Glow)

TypographyInter / Tight Tracking

Входящие UI-паттерны (LEGO-блоки):

layouts

Бенто-сетка преимуществ и возможностей

Асимметричная блочная раскладка карточек разного размера (1x1, 2x1, 2x2) с эффектом Spotlight-подсветки курсора для демонстрации ключевых фич продукта.

Открыть разбор

navigation

Плавающая панель соцсетей и мессенджеров

Фиксированная вертикальная панель быстрых контактов (Telegram, WhatsApp, Телефон) с эффектом раскрытия лейблов при наведении и аккуратной мобильной адаптацией.

Открыть разбор

ux-patterns

Виджет согласия на куки и политики данных (152-ФЗ / GDPR)

Ненавязчивый плавающий баннер согласия с возможностью тонкой настройки категорий (Аналитика, Маркетинг, Необходимые) и запоминанием выбора в LocalStorage.

Открыть разбор

Master Prompt для Cursor ComposerИсключает конфликты стилей

Собери главный экран SaaS-приложения на Next.js (App Router, TypeScript, Tailwind CSS, lucide-react) по согласованному дизайн-рецепту ProektMap:

1. ДИЗАЙН-ТОКЕНЫ СИСТЕМЫ:
   - Радиусы скругления: rounded-3xl (24px) для карточек и rounded-xl (12px) для кнопок.
   - Цветовая база: тёмный фон #0B0F19, границы border-slate-800/80, акцент #6366F1.
   - Эффект глубины: backdrop-blur-xl на всех плавающих слоях.

2. СТРУКТУРА ЭКРАНА И ПАТТЕРНЫ:
   - Секция 1: Bento Grid фич (bento-grid-features) — 3-колоночная асимметричная сетка с 1 флагманским блоком 2x2.
   - Секция 2: Floating Social Dock (floating-social-dock) — фиксированная панель Telegram/WhatsApp в правом нижнем углу с pointer-events-none изоляцией.
   - Секция 3: Cookie Consent Widget (cookie-consent-widget) — ненавязчивый баннер согласия 152-ФЗ с запоминанием в LocalStorage.

3. ТРЕБОВАНИЯ К КОДУ:
   - Все компоненты типобезопасны (TypeScript).
   - Отсутствие конфликтов по z-index: Header (z-40), Floating Dock (z-50), Cookie Banner (z-40).
   - 100% мобильная адаптивность без горизонтального скролла.