Промпт: Генерация экрана просмотра компании (Fairflow)¶

Используй этот промпт для AI-инструментов веб-дизайна (Midjourney, DALL·E, Figma AI, Galileo AI и т.п.), чтобы корректно сгенерировать экран просмотра карточки компании в CRM.

Контекст¶

Fairflow — проектно-центричная CRM-платформа. Экран просмотра компании — детальная карточка юридического лица с полной информацией: реквизиты, контакты, сделки, продажи, активность, история.

Цель промпта: получить визуально корректный макет/мокап экрана, который можно использовать как референс для вёрстки или для обсуждения UX.

Референсные изображения¶

При генерации ориентируйся на следующие экраны (приложены как примеры):

Вариант A: Компактная шапка с закреплённым менеджером, 5 карточек метрик, двухколоночный блок (Реквизиты | Информация о компании).
Вариант B: Расширенный экран с табами/секциями: Реквизиты, Банк, Сделки, История (слева) | Информация, Продажи, Текущие активности (справа).

Структура экрана (Layout)¶

Общая компоновка¶

┌─────────────────────────────────────────────────────────────────────────────┐
│ [Sidebar] │ [Header: проект, поиск, уведомления, аватар]                     │
├───────────┼─────────────────────────────────────────────────────────────────┤
│           │                                                                  │
│  Nav      │  ┌─────────────────────────────────────────────────────────────┐ │
│  icons    │  │ ШАПКА КОМПАНИИ: название, теги, ИНН, телефон, email        │ │
│           │  │ + Закреплённый менеджер / Ответственный                      │ │
│           │  └─────────────────────────────────────────────────────────────┘ │
│           │                                                                  │
│           │  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐                    │
│           │  │Метрика│ │Метрика│ │Метрика│ │Метрика│ │Метрика│  ← 5 карточек │
│           │  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘                    │
│           │                                                                  │
│           │  ┌─────────────────────┐  ┌─────────────────────────────────┐   │
│           │  │ Реквизиты           │  │ Информация о компании            │   │
│           │  │ Банковские реквизиты│  │ Контакты                         │   │
│           │  │ Сделки              │  │ Связанные компании                │   │
│           │  │ История             │  │ Продажи / Активности              │   │
│           │  └─────────────────────┘  └─────────────────────────────────┘   │
│           │                                                                  │
└───────────┴─────────────────────────────────────────────────────────────────┘

Блоки (сверху вниз)¶

№	Блок	Содержимое
1	Шапка компании	Иконка/логотип, название, теги (VIP, Крупный, отрасль), ИНН, телефон, email. Справа — закреплённый менеджер (аватар, ФИО, должность, иконки действий). Кнопки: Редактировать, Печать, Копировать ссылку, Удалить
2	Карточки метрик	5 горизонтальных карточек: Сумма сделок, Оборот, Сделок, Продаж, Контактов. Каждая — иконка, значение, подпись
3	Левая колонка	Реквизиты (ОГРН, КПП, адреса, банк), Сделки (список), История (таймлайн)
4	Правая колонка	Информация о компании (телефон, email, сайт, отрасль, сотрудники, ответственный), Контакты (карточки с аватарами), Связанные компании, Теги, Примечание, Продажи, Текущие активности

Детальная спецификация компонентов¶

1. Шапка компании (Company Header)¶

Левая часть:
Крупная иконка здания (круг, синий фон) или логотип компании
Название: крупный жирный шрифт (например, «ООО Альфа»)
Теги: pill-бейджи (VIP — жёлтый, Крупный — голубой, ПРОИЗВОДСТВО — голубой)
Строка контактов: ИНН (с иконкой документа), телефон (с иконкой телефона), email (с иконкой конверта)
Правая часть (опционально):
Бейдж «ЗАКРЕПЛЁН» (синий)
Карточка менеджера: аватар (круг с инициалами «ПА»), ФИО, должность «Менеджер аккаунта»
Иконки быстрых действий: телефон, календарь, email, ещё (три точки)
Иконки: карандаш (редактировать), принтер, ссылка, корзина

2. Карточки метрик (Summary Stats)¶

Пять карточек в ряд, каждая с: - Фоновым цветом (голубой, зелёный, фиолетовый, жёлтый, розовый/красный) - Иконкой в левом верхнем углу (деньги, оборот, сделки, корзина, люди) - Крупным числом (например, «750 000 Р», «2») - Подписью («Сумма сделок», «Оборот», «Сделок», «Продаж», «Контактов»)

Скруглённые углы, лёгкая тень, одинаковые по высоте.

3. Виджет «Реквизиты»¶

Заголовок с иконкой документа, кнопка «Копировать»
Поля: ОГРН, КПП
Секция «Юридический адрес» (полный адрес)
Секция «Фактический адрес»
Секция «Банк»: название банка, БИК, К/С, Р/С
Дата создания (мелким серым текстом)

4. Виджет «Информация о компании»¶

Заголовок с иконкой здания
Общая информация: телефон, email, сайт, отрасль, число сотрудников, ответственный
Раздел «Контакты»: карточки контактов с аватаром (круг, инициалы), ФИО, должность, телефон, email
Раздел «Связанные компании»: список названий с кнопками «Отвязать» или «Посмотреть»

5. Виджет «Сделки»¶

Заголовок, ссылка «Показать все»
Список сделок: название, сумма (например, «600 000 Р»), статус-бейдж (зелёный «+%» или «Прогресс»)

6. Виджет «История»¶

Заголовок, ссылка «Показать все»
Таймлайн по датам: дата заглавными (ВОСКРЕСЕНЬЕ, 19 ЯНВАРЯ), под ней события с аватаром пользователя, типом действия, описанием, временем

7. Виджет «Текущие активности»¶

Заголовок, ссылка «Показать все»
Список активностей по датам: тип (Заметка, Звонок, Встреча), аватар, описание, дата/время

Визуальный стиль¶

Цветовая палитра¶

Элемент	Цвет	Использование
Фон основного контента	#FFFFFF	Белый
Фон сайдбара	#F8FAFC или тёмно-серый	Светло-серый / тёмный
Акцент (кнопки, активные элементы)	#3B82F6 (синий)	Primary
Карточка метрик 1	Голубой (#EFF6FF)	Сумма сделок
Карточка метрик 2	Зелёный (#ECFDF5)	Оборот
Карточка метрик 3	Фиолетовый (#F5F3FF)	Сделки
Карточка метрик 4	Жёлтый (#FEFCE8)	Продажи
Карточка метрик 5	Розовый/красный (#FDF2F8)	Контакты
Тег VIP	Жёлтый (#FEF08A)	Бейдж
Тег категории	Голубой (#DBEAFE)	Бейдж
Текст основной	#1F2937	Чёрно-серый
Текст вторичный	#6B7280	Серый
Тень карточек	Лёгкая, 0 1px 3px rgba(0,0,0,0.1)	Глубина

Типографика¶

Заголовок компании: 24–28px, font-weight: 600–700
Заголовки виджетов: 16–18px, font-weight: 600
Основной текст: 14–16px, font-weight: 400
Вторичный текст, подписи: 12–14px, color: #6B7280
Числа в метриках: 20–24px, font-weight: 600

Отступы и сетка¶

Отступ между карточками: 16–24px (gap)
Внутренние отступы карточек: 16–20px
Скругление углов: 8–12px (border-radius)
Сайдбар: 64–80px ширина

Иконки¶

Стиль: outline (контурные) или duotone
Размер: 16–24px для действий, 32–40px для крупных (иконка компании)
Набор: здание, документ, телефон, конверт, пользователь, календарь, принтер, карандаш, корзина, ссылка, деньги, корзина покупок, люди

Интерактивные элементы¶

Кнопки: «Редактировать», «Печать», «Копировать», «Удалить»
Ссылки: «Показать все» в каждом виджете
Иконки быстрых действий (телефон, email, календарь) у контактов и менеджера
Бейджи тегов (кликабельные для фильтрации)
Аватары с инициалами (клик → переход на карточку контакта)

Состояния и вариации¶

Пустые состояния¶

Нет контактов: «Добавить контакт» или пустой блок
Нет сделок: «Пока нет сделок»
Нет активностей: «Нет запланированных активностей»
Связанные компании: пустой список или placeholder

Адаптивность¶

Desktop: двухколоночный layout (1/3 + 2/3 или 1/2 + 1/2)
Tablet: карточки метрик в 2 ряда (3+2 или 2+2+1)
Mobile: одна колонка, карточки метрик скроллятся горизонтально или в 2 колонки

Пример промпта для AI (копируй и вставляй)¶

Сгенерируй экран просмотра карточки компании в CRM-системе (веб-интерфейс).

Структура:
1. Слева — узкий сайдбар с иконками навигации (портфель, компании, дашборд). Активна иконка «Компании».
2. Справа — основной контент:
   - Верхняя шапка: название «ООО Альфа», теги VIP и Крупный, ИНН, телефон, email. Справа — карточка закреплённого менеджера с аватаром «ПА», кнопки редактирования.
   - Ряд из 5 цветных карточек метрик: Сумма сделок (750 000 Р), Оборот (150 000 Р), Сделок (2), Продаж (2), Контактов (2). Каждая карточка — свой цвет (голубой, зелёный, фиолетовый, жёлтый, розовый).
   - Двухколоночный блок: слева — «Реквизиты» (ОГРН, КПП, адреса, банк), «Сделки», «История»; справа — «Информация о компании» (телефон, email, сайт, отрасль), «Контакты» (2 карточки с аватарами ИИ и ЛД), «Связанные компании», «Текущие активности».

Стиль: чистый, современный, профессиональный. Белый фон, карточки со скруглёнными углами и лёгкой тенью. Синий акцент для кнопок и активных элементов. Sans-serif шрифт. Иконки outline-стиля.

Чек-лист для проверки сгенерированного макета¶

[ ] Шапка компании с названием, тегами и контактами
[ ] 5 карточек метрик с разными цветами
[ ] Двухколоночный layout для детальной информации
[ ] Виджет «Реквизиты» с ОГРН, КПП, адресами, банком
[ ] Виджет «Информация о компании» с контактами (аватары с инициалами)
[ ] Секции «Сделки», «История», «Активности»
[ ] Сайдбар слева
[ ] Верхний хедер с проектом, поиском, уведомлениями, аватаром
[ ] Единый визуальный стиль (цвета, типографика, отступы)

Референсы в проекте¶

Функциональная спецификация: docs/functional/09-companies.md — описание экрана Company Details
Реализация: frontend/src/views/crm/Companies/CompanyDetails.tsx — текущая вёрстка
Виджеты: CompanyHeaderWidget, CompanyHeaderStats, CompanyRequisitesWidget, CompanyInfoWidget, CompanyDealsWidget, CompanyOrdersWidget, CompanyHistoryWidget, CompanyActivitiesWidget