Промпт: Генерация дизайна карточки компании (Fairflow)¶
Используй этот промпт для генерации UI-дизайна экрана «Карточка компании» в AI-инструментах (Figma AI, Midjourney, DALL·E, Gemini и т.п.) или для передачи дизайнеру.
Контекст проекта¶
Fairflow — проектно-центричная модульная CRM-платформа. Карточка компании — экран детального просмотра юридического лица (клиента) в рамках проекта. Компания связана с контактами (many-to-many), сделками и продажами.
Технологии: React 19, TypeScript, Tailwind CSS 4. Стиль — современный, деловой, без «AI slop». Консистентность с карточкой контакта и карточкой сделки.
Задание¶
Сгенерируй UI-дизайн карточки компании для экрана /p/:pid/companies/:id — Company Details.
Структура экрана¶
1. Шапка карточки (Card Header)¶
| Элемент | Описание |
|---|---|
| Иконка/Логотип | Квадратная область слева: логотип компании (если есть) или иконка/аватар по умолчанию (building, briefcase) |
| Название компании | Крупный заголовок, например «ООО „Альфа“» |
| Мета-информация | ИНН | Телефон | Email — в одну строку, кликабельные (tel:, mailto:) |
| Владелец | «Владелец: Петрова А.С.» — ссылка на профиль |
| Действия | Кнопки: [Редактировать] [Расшарить] [Удалить] и меню ⋮ (Merge, Передать) |
2. Вкладки (Tabs)¶
Горизонтальные табы под шапкой:
- Обзор (активна по умолчанию)
- Контакты
- Сделки
- Продажи
- Активности
- Документы
- История
Примечание: Вкладки «Сделки» и «Продажи» скрываются, если соответствующие модули отключены (Contextual UI).
3. Содержимое вкладки «Обзор»¶
| Секция | Содержимое |
|---|---|
| Реквизиты | ИНН, ОГРН, КПП, юридический адрес, фактический адрес, банковские реквизиты (БИК, р/с, к/с) — структурированный список пар «метка : значение» |
| Контакты | Карточки контактов (макс. 3): имя, должность. Пример: «Иванов (Директор)», «Петрова (Бухгалтер)». Ссылка «Все контакты» → вкладка Контакты |
| Последние сделки | Список (макс. 3): название, сумма, стадия. Ссылка «Все сделки» → вкладка Сделки |
4. Содержимое остальных вкладок (кратко)¶
- Контакты: Таблица контактов (many-to-many). Кнопки: [+ Привязать контакт], [✕ Отвязать]
- Сделки: Список всех сделок по компании
- Продажи: Список продаж по сделкам компании
- Активности: Список задач, звонков, встреч, заметок. Кнопка [+ Активность]
- Документы: Документы, привязанные к компании
- История: Лог событий (аудит)
Визуальные требования¶
- Шапка — компактная, иконка/лого слева, название и мета-инфо по центру/слева, действия справа.
- Табы — стандартный паттерн: подчёркивание активной вкладки, нейтральный фон неактивных.
- Реквизиты — сгруппированы в блоки (например: «Основные», «Адреса», «Банк»). Используй моноширинный шрифт для ИНН, ОГРН, номеров счетов.
- Карточки контактов — мини-карточки с аватаром/инициалами, именем, должностью. Горизонтальное расположение.
- Пустые состояния — предусмотри отображение, когда нет контактов, сделок и т.д. (placeholder или текст «Пока нет данных»).
- Адаптивность — на мобильных шапка и табы должны оставаться читаемыми (возможен коллапс в бургер/аккордеон).
Референсы¶
- Карточка контакта (
docs/functional/08-contacts.md) — аналогичная структура: шапка (аватар, имя, мета, действия) + табы. - Карточка сделки (
docs/functional/10-deals.md) — sidebar + табы. - Drawer создания компании — 6–8 полей, без вложенности (
docs/functional/09-companies.md).
Пример промпта для AI-генератора изображений¶
UI design for a B2B CRM company card screen. Modern, clean, professional style.
Header: company logo/icon on left, company name "OOO Alpha" as main title,
metadata row (INN, phone, email), owner badge, action buttons (Edit, Share, Delete, more menu).
Below: horizontal tabs (Overview, Contacts, Deals, Sales, Activities, Documents, History).
Overview tab content: structured requisites block (INN, OGRN, KPP, addresses, bank details),
3 contact mini-cards with avatars and roles, 3 recent deals list.
Light theme, subtle shadows, Tailwind-like spacing. Desktop layout.
No generic AI slop, avoid purple gradients and stock imagery.
Чек-лист для проверки дизайна¶
- [ ] Шапка содержит все элементы: иконка/лого, название, ИНН/телефон/email, владелец, действия
- [ ] Все 7 вкладок присутствуют
- [ ] Вкладка «Обзор» содержит реквизиты, контакты (макс. 3), последние сделки (макс. 3)
- [ ] Карточки контактов компактны, с аватаром и должностью
- [ ] Реквизиты сгруппированы и читаемы
- [ ] Стиль согласован с CRM (деловой, не перегруженный)