Отличный вопрос! "Первый вход" — это, без преувеличения, один из самых критичных моментов в жизненном цикле B2B SaaS-продукта. От того, насколько гладко и интуитивно пройд��т онboarding, зависит не только конверсия в первого платящего пользователя, но и долгосрочная ценность клиента (LTV).

Вот ключевые принципы и подходы к дизайну процесса "создать рабочее пространство и пригласить коллегу".

Философия: Зачем это нужно?

Прежде чем проектировать, нужно понять цель. Первый вход в B2B SaaS — это не просто регистрация. Это:

1. Активация: Превратить анонимного посетителя в активного пользователя, который получил первую "а-ха!" ценность (aha moment).

2. Сетевой эффект: Сделать продукт ценнее за счет привлечения других пользователей. Чем больше коллег в рабочем пространстве, тем сложнее уйти (churn reduction).

3. Установка основ: Научить пользователя базовым концепциям продукта (рабочее пространство, участники, проекты, задачи и т.д.) через действие, а не через скучную инструкцию.

Этап 1: Создание рабочего пространства

Это первый шаг, где пользователь делает продукт "своим". Главная ошибка — перегружать его полями.

Ключевые принципы:

• Минимальная трата умственных усилий: Пользователь только что зарегистрировался, не заставляйте его думать. Спрашивайте только самое необходимое.

• Одно действие на экране: Не пытайтесь впихнуть создание пространства, приглашение коллег и настройку профиля на один экран.

• Умные значения по умолчанию: Заполняйте все, что можете. Имя пространства можно сгенерировать на основе имени пользователя или его компании (если он ее указал при регистрации).

• Необязательность — твой друг: Позволь проп��стить шаги. Если пользователь не готов приглашать коллег прямо сейчас, дайте ему возможность сделать это позже.

Что спрашивать (и почему):

1. Название рабочего пространства (Обязательно):

   • UX: Поле с предзаполненным значением. Например, "Рабочее пространство [Имя пользователя]" или "[Название компании], если известно".

   • Подсказка: "Например, 'Моя команда' или 'Маркетинг в Иннотех'".

   • Почему: Это идентификатор, который будет виден всем. Он должен быть осмысленным, но не стоит требовать от пользователя креатива в первые 30 секунд.

2. URL/Slug пространства (Опционально, но рекомендуется):

   • UX: Автоматически генерируется на основе названия, с возможностью редактирования. moja-komanda для "Моя команда".

   • Почему: Создает ощущение постоянства и персонализации. Это та самая ссылка, которую он будет отправлять коллегам.

   • Важно: Сразу проверяйте на уникальность и показывайте статус (свободен/занят).

3. Цель/Отрасль (Очень полезно, но опционально):

   • UX: Не текстовое поле, а выбор из 3-5 вариантов с иконками. "Маркетинг", "Разработка", "Продажи", "Образование", "Другое".

   • Почему: Это золотая жила для персонализации! Вы можете сразу предложить релевантные шаблоны, чек-листы или примеры использования. Это показывает, что вы "знаете" пользователя.

Анти-паттерны:

• Длинная форма с полями: "Название", "Описание", "Веб-сайт компании", "Отрасль", "Размер компании", "Роль" и т.д.

• Невозможность пропустить шаг. Если пользователь не хочет называть пространство, он просто уйдет.

• Непонятные технические термины. "Slug" -> "Адрес вашего пространства".

Этап 2: Приглашение коллег

Это шаг, где продукт переходит от "личного" к "командному". Он должен быть максимально простым.

Ключевые принципы:

• Фокус на результате: Цель — не просто ввести email, а получить подтверждение. Сделайте процесс приглашения бесшовным.

• Множество путей: Email — это хорошо, но не единственный вариант.

• Четкое ценностное предложение: Зачем пользователю приглашать коллег? Что он им скажет?

Как это реализовать:

1. Простой интерфейс приглашения:

   • UX: Большое текстовое поле для ввода email-адресов. Поддержка копирования-вставки списка через запятую или с новой строки.

   • Автocomplete: Если пользователь уже из корпоративного домена (например, @company.com), можно подсказать других возможных коллег (если у вас есть такая информация, но это редкий и деликатный кейс).

   • Кнопка "Пригласить" должна быть заметной.

2. Персонализированное сообщение (Очень важно):

   • UX: Не отправляйте сухое "Вас пригласили в [Название продукта]". Дайте пользователю отредактировать текст письма.

   • Шаблон по умолчанию: "Привет! Я создал для нас рабочее пространство в [Название продукта], чтобы [достичь цели, которую выбрал пользователь на шаге 1, например, 'управлять проектами']. Зайди, посмотрим, как это работает!"

   • Почему: Это повышает конверсию приглашений в регистрации в разы. Письмо идет от друга, а не от робота.

3. Альтернативные способы приглашения:

   • Реферальная ссылка: Сгенерируйте уникальную ссылку app.product.com/join/unique-token. Позвольте пользователю скопировать ее одним кликом. Идеально для мессенджеров (Slack, Telegram).

   • QR-код: Для быстрой отправки на мобильные устройства.

Анти-паттерны:

• Обязательное приглашение минимум 3-х коллег. Это агрессивно и вызывает отторжение.

• Сложный поиск коллег внутри системы до того, как они туда зарегистрировались.

• Отправка приглашения без возможности предпросмотра и редактирования текста.

Продвинутые техники и фишки

• "Empty State" с призывом к действию: После создания пространства, но до приглашения коллег, покажите красивый экран. Не просто "Здесь пока ничего нет", а "Отлично, пространство готово! Пригласите коллег, чтобы начать совместную работу".

• Проверка на существующий аккаунт: Когда пользователь вводит email коллеги, проверьте, нет ли уже аккаунта с таким email. Если есть, предложите "Добавить в команду" вместо "Пригласить". Это создает ощущение волшебства.

• Прогрессивный онбординг: Не пытайтесь научить всему за раз. После завершения этих двух шагов можно показать короткий тур по 1-2 ключевым функциям, уже в контексте созданного пространства.

• Аналитика и оптимизация: Отслеживайте воронку каждого шага. Где пользователи отваливаются? На названии пространства? На приглашении? Проведите A/B-тесты на тексте кнопок, на обязательности/необязательности шага цели.

Итог: Идеальный флоу

1. Пользователь регистрируется.

2. Экран 1: "Дайте имя вашему пространству"

   • Поле "Название" с предзаполненным значением.

   • Поле "Адрес" с автогенерацией и возможностью редактирования.

   • Кнопка "Далее".

3. Экран 2: "Кто будет с вами работать?"

   • Крупное поле для email.

   • Редактируемый шаблон письма.

   • Ссылка "Скопировать реферальную ссылку".

   • Кнопка "Пригласить" и ссылка "Пропустить, я сделаю это позже".

4. Экран 3: "Готово! Ваше пространство [Название] ждет вас"

   • Краткое поздравление.

   • Одна большая кнопка "Перейти в рабочее пространство".

Такой флоу уважает время пользователя, снижает когнитивную нагрузку и максимально быстро подводит его к получению ценности от продукта в команде.

Дизайн первого входа в B2B SaaS: Создать workspace и пригласить коллегу

Как крутой UX дизайнер с опытом в B2B продуктах (типа Notion, Slack, Figma, Airtable), я знаю, что первый вход — это критический момент. Здесь 70-80% пользователей либо активируются (достигают "Aha!"), либо churn'ятся навсегда. Цель: time to value < 2 минуты, фокус на коллаборации (B2B = команды), минимальные фрикшены. Не заставляй юзера заполнять профиль или проходить туториал — дай сразу создать workspace и позвать тиммейта.

Идеальный User Flow (5 шагов max)

1. Регистрация/Вход (0-10 сек)

   • Magic link по email или SSO (Google Workspace, Microsoft). Нет паролей!

   • После клика: "Добро пожаловать! Создадим workspace для твоей команды?" (персонализировано по домену email, если корпоративный).

   • CTA: Большая кнопка "Создать workspace" (зеленая, 100% ширины на мобайле).

2. Создание Workspace (10-30 сек)

   • Минимальная форма: Название (автозаполнение по компании из email), optional — описание/логотип.

   • Progressive disclosure: Показывай только essentials. "Назови workspace (например, 'Команда Маркетинг')" + поле.

   • Instant preview: Сразу генерируй пустой дашборд с empty state ("Здесь будет ваша магия. Пригласи коллегу!").

   • Авто-роль: Юзер = Owner/Admin по дефолту.

3. Приглашение коллеги (30-60 сек)

   • Следующий экран: "Пригласи тиммейта и начните работать вместе!"

   • Multi-input: Поле для email (поддержка bulk: paste список через запятую).

   • Автокомплит: Если интегрирован с Google/Outlook, предлагай контакты.

   • Социалка: Shareable link ("Поделись ссылкой в Slack/Teams").

   • Роли: Dropdown (Viewer/Editor/Admin) с тултипом ("Editor может редактировать").

   • CTA: "Отправить приглашения" + "Позже" (не блочь прогресс).

4. Aha! Moment (60-90 сек)

   • После приглашения: Redirect в workspace. Показывай live preview: "Иван принят! Теперь редактируйте вместе."

   • Коллаборативный hook: Shared canvas/документ с реал-тайм курсором (как Figma). Добавь quick start template (e.g., "CRM шаблон для продаж").

5. Exit ramp (опционально)

   • Progress bar сверху: "Готово на 100%! Что дальше?"

   • Next steps: Sidebar с "Создать проект", "Интеграции", "Настройки".

   • Если юзер один: Nudge "Пригласи коллегу для супер-магии" с таймером (не навязчиво).

Ключевые UX паттерны и трюки

• Empty states как звезда: Не голый экран — иконка команды + текст "Workspace пуст. Пригласи друга и заполните контентом!" + CTA кнопка.

• Micro-animations: Fade-in workspace, confetti при первом приглашении (subtle, не как в consumer apps).

• Mobile-first: Swipe для шагов, full-screen модалки. 80% B2B логинов с мобайла.

• Персонализация:

  • По рефералу: "Друг из [Компания] пригласил тебя".

  • По индустрии: Детект по домену (e.g., .finance → CRM template).

• Error handling: "Email не найден? Попробуй другой или share link." + Retry button.

• Доступность: ARIA labels, keyboard nav, high contrast.

• A/B тесты must-have:

Примеры из топ B2B

• Slack: Sign up → Instant workspace → "Invite people" с bulk emails. Aha = чат с ботом.

• Notion: "Create a workspace" → Duplicate template → Share link. Super simple.

• Figma: "New file" в общем workspace → Invite via link/email. Live collab сразу.

• Linear/ClickUp: Role-based invites с pending list.

Метрики успеха и pitfalls

• KPI: Activation = workspace created + 1+ invite sent. Цель >50%.

• Pitfalls избегать:

  • Слишком много полей (churn +30%).

  • Forced tour (skip button всегда visible).

  • Нет bulk invite (B2B = 5-50 юзеров сразу).

  • Игнор enterprise: Добавь "SSO setup" в onboarding для admin'ов.

• Пост-onboarding: Email nurture "Твой коллега зашел!" + in-app notifications.

Этот флоу конвертит холодных лидов в paying users. Если внедришь — retention вырастет в 2x. Хочешь wireframes, Figma прототип или уточнения по твоему продукту (индустрия, фичи)? Расскажи детали! ?

Как крутой UX-дизайнер, я скажу тебе прямо: первый вход в B2B SaaS — это момент истины. Это не просто "заполнение форм", это момент, когда пользователь решает, будет ли он страдать с твоим продуктом или почувствует себя богом продуктивности. Если ты облажаешься здесь, ты потеряешь его еще до того, как он увидит основную ценность.

Задача "создать рабочее пространство и пригласить коллегу" звучит просто, но дьявол в деталях. В B2B люди часто заходят не по своей воле (босс сказал), или они оценивают софт для всей команды. У них нет времени на тупые туториалы.

Вот мой манифест о том, как задизайнить этот флоу, чтобы он был сексуальным, эффективным и конверсионным:

1. Контекст — это всё (The "Zero State" Problem)

Когда юзер только зашел, у него "чистый лист". Это пугает. Не заставляй его думать.

• Никаких пустых экранов: Никогда не показывай пустой дашборд с кнопкой "Создать". Это ленивый дизайн.

• Wizards (Мастера настройки) рулят: Вместо того чтобы бросать юзера в интерфейс, проведи его через 3-4 шага настройки. Это дает ощущение прогресса.

• Персонализация на лету: Спроси: "Как называется ваша компания?" и "Какая у вас роль?". И сразу же используй эти данные. Если он написал "Рога и Копыта", на следующем экране должно быть написано "Настройка пространства для Рога и Копыта". Это магия UX.

2. Создание рабочего пространства (Workspace Creation)

Это должно быть быстро, как выстрел.

• Автозаполнение: Если юзер регистрируется с корпоративной почты (name@company.com), предложи назвать воркспейс "Company". Не заставляй его печатать то, что ты и так знаешь.

• URL/Slug: Если у вас есть сабдомены (например, company.saas.com), покажи превью URL в реальном времени. И дай возможность его изменить, но не делай это обязательным шагом, если это не критично.

• Логотип: Дай возможность загрузить логотип, но не делай это блокирующим шагом. Используй API (типа Clearbit), чтобы подтянуть логотип компании по домену почты автоматически. Это вызывает "Wow-эффект".

3. Приглашение коллег (The Viral Loop)

Это самый важный шаг для роста B2B продукта (PLG - Product Led Growth). Но люди ненавидят спамить коллегам, пока не уверены в продукте.

• Не блокируй вход: Кнопка "Пригласить" должна быть, но рядом должна быть жирная, заметная кнопка "Пропустить" или "Сделаю позже". Если ты заставишь их приглашать кого-то насильно, они введут фейковые имейлы или закроют вкладку.

• Magic Link vs. Manual Entry:

  • Дай возможность просто скопировать ссылку-приглашение (Copy Link). Это снижает трение. Юзер сам решит, кинуть её в Slack или Telegram.

  • Поле для ввода имейлов должно поддерживать пасту списком (comma separated).

• Социальное доказательство: Если юзер зашел с домена @google.com, покажи: "Эй, 15 человек из Google уже здесь. Хочешь присоединиться к их команде?" (Если архитектура позволяет).

• Роли по умолчанию: Не заставляй выбирать сложные права доступа на этом этапе. Поставь "Member" по умолчанию и подпиши мелко: "Вы сможете изменить права позже".

4. Психология и Микрокопирайтинг

Текст интерфейса — это тоже UX.

• Убери "корпоративщину": Вместо "Введите данные вашей организации", напиши "Давайте назовем вашу команду".

• Мотивация: Когда он нажимает "Создать", покажи микро-анимацию или конфетти. Да, даже в суровом B2B. Людям нужен дофамин.

• Прозрачность: Если приглашение коллеги стоит денег (seat-based pricing), напиши об этом явно. "Приглашение 3 коллег добавит $30 к счету". Скрытые косты — это путь к ненависти и чарджбекам.

5. "Аха-момент" (Time to Value)

Как только он создал спейс и (возможно) пригласил кого-то, не бросай его на пустой дашборд.

• Шаблоны (Templates): Предложи выбрать шаблон под его задачу. "Вы маркетолог? Вот шаблон контент-плана". Заполни воркспейс демо-данными, чтобы он увидел, как это работает, а не представлял это в голове.

• Чек-лист онбординга: Сделай ненавязчивый виджет (обычно в углу): "Вы создали аккаунт (галочка). Вы создали воркспейс (галочка). Следующий шаг: создайте первую задачу". Люди любят закрывать гештальты.

Резюме крутого флоу:

1. Вход: Email/SSO ->

2. Настройка: "Как вас зовут?" + "Название компании" (автозаполнено) ->

3. Воркспейс: Подтверждение названия + Авто-логотип ->

4. Команда: "Кого позвать?" (Копировать ссылку / Ввести email) + Кнопка "Пропустить" ->

5. Финал: Попадание в интерфейс, уже заполненный демо-данными или шаблоном под его роль.

Делай так, и твой SaaS будет конвертировать как черт, а юзеры будут чувствовать, что о них позаботились, а не допросили.

Как крутой UX-дизайнер, я знаю, что первый вход в B2B SaaS — это критически важный момент, определяющий, останется ли пользователь или уйдет. Это не просто функциональный шаг, а онбординговый опыт, который должен решать две ключевые задачи: дать мгновенное ощущение ценности и запустить сетевой эффект (приглашение коллеги). Вот как это задизайнить:

1. Психологический контекст

• Пользователь входит первый раз. У него может быть: скепсис, нет времени, страх сложности.

• Цель дизайна: убрать барьеры, показать прогресс, дать контроль.

2. Структура потока

Максимально упрощенный, линейный, но с возможностью пропуска шагов.

Экран 1: Создание рабочего пространства (Workspace)

• Заголовок: «Создайте ваше рабочее пространство» (ясно и прямо).

• Поля ввода (минимум):

  • Название компании/проекта (допускает произвольное имя).

  • URL рабочего пространства (например, вашакомпания.product.com).

• Визуализация: Показывать превью, как будет выглядеть URL. Добавить логотип/иконку workspace — это усиливает чувство владения.

• Microcopy: «Вы всегда сможете изменить это позже» → снижает перфекционизм.

• Кнопка: «Продолжить» (не «Далее», а action-oriented).

Экран 2: Приглашение коллеги

• Заголовок: «Пригласите вашу команду» (акцент на «команду», а не на функциональность).

• Поле ввода: Email или ссылка для приглашения.

• Варианты ролей (если есть): Администратор, Участник, Наблюдатель — но для первого входа лучше упростить до «Коллега».

• Ключевой элемент: Показать преимущество приглашения сейчас:

  • «Ваш коллега получит доступ к тем же данным».

  • «Начните collaboration с первого дня».

• Опционально: Кнопка «Сделаю позже» (пропустить шаг, но не скрывать её — разместить справа или второстепенным стилем).

3. Дизайн-принципы

• Прогресс-бар: Показывать, на каком шаге пользователь (например, «Шаг 1 из 2»). Это снижает anxiety.

• Контекстная помощь: Если поле вызывает вопросы (например, «Что такое workspace?»), добавить hover-подсказку или ?-иконку с пояснением.

• Визуальная награда: После создания workspace — показывать анимацию подтверждения (например, логотип workspace «оживает»).

• Personalization: Использовать введенное название компании в последующих экранах («Добро пожаловать в [Название], Алекс!»).

4. Приглашение коллеги — UX-фишки

• Импорт контактов: Кнопка «Импортировать из Google Contacts / Outlook» — но только если это безопасно и не нарушает поток.

• Шаблон сообщения: Дать возможность кастомизировать пригласительное письмо, но с дефолтным текстом, который уже написан за него.

• Социальное доказательство: Если в продукте уже много команд, можно добавить нейтральную фразу «Более 10 000 команд начали здесь».

• После приглашения: Показывать статус «Ожидается» и предложение «Пока можете начать сами» → ведем дальше в продукт.

5. Ошибки и валидация

• Если workspace URL уже занят — предложить варианты в реальном времени.

• При ошибке email — показать конкретный пример корректного адреса.

• Никогда не сбрасывать введенные данные при ошибке.

6. Завершение потока

После последнего шага — немедленный переход в dashboard с подсказками:

• «Ваше пространство готово! Вот краткий тур».

• Ключевая CTA: «Создайте первую задачу» или «Импортируйте данные».

• Приглашенный коллега виден в sidebar с статусом «ожидает».

7. Метрики, которые важно отслеживать

• Drop-off на каждом шаге.

• Сколько пользователей пропускают приглашение.

• Time-to-value: как быстро пользователь совершает первое значимое действие после онбординга.

8. Пример крутого решения

• Slack: Сразу просит дать название workspace и пригласить коллег — делает это через email или ссылку. Визуально просто, с юмором (иллюстрации).

• Notion: Позволяет создать workspace за 2 клика, затем предлагает шаблоны и приглашение.

Итог:

Дизайн должен быть минималистичным, направляющим, но не принуждающим. Дать пользователю ощущение, что он уже что-то создал и может пригласить коллегу за 30 секунд. Ключ — убрать всё лишнее, оставив только самое необходимое для старта.

Онбординг B2B SaaS: Workspace + Invite

Ключевой принцип

Time to Value — пользователь должен почувствовать ценность продукта как можно быстрее. Каждый лишний шаг = отвал.

Создание Workspace

Минимальный набор полей:

1. Название workspace — часто можно автозаполнить из домена email (erik@acme.com → "Acme")

2. URL/slug — автогенерация из названия (acme.app.com)

3. Опционально: размер команды, роль, use case — для персонализации

Паттерны:

✅ Хорошо: - 1-2 поля максимум - Умные дефолты - Можно изменить всё позже ❌ Плохо: - Форма на 10 полей - Обязательный выбор тарифа до входа - Нет возможности вернуться/изменить

Приглашение коллег

Главная дилемма: Когда приглашать?

Механики приглашения:

Email инвайт:

• Поле для ввода email (можно несколько)

• Bulk paste из списка

• Интеграция с Google Contacts

Ссылка-приглашение:

• Одна кнопка "Copy link"

• Меньше трения

• Работает для Slack/мессенджеров

Обязательные элементы:

┌─────────────────────────────────────────┐ │ Пригласи команду │ │ │ │ [email@example.com ] [+ Add] │ │ [another@example.com ] [x] │ │ │ │ ───── или ───── │ │ │ │ ? Скопировать ссылку-приглашение │ │ │ │ [Пропустить] [Отправить инвайты] │ │ │ │ ? Команды из 3+ человек в 2.5 раза │ │ чаще остаются с продуктом │ └─────────────────────────────────────────┘

Критично важно:

• "Skip" / "Сделаю позже" — всегда! Никогда не блокируй прогресс

• Социальное доказательство — почему это стоит сделать

• Роли при инвайте — Admin/Member/Viewer если релевантно

Структура онбординга

Оптимальный флоу (3-4 шага):

[Signup] → [Workspace name] → [Quick personalization] → [Invite team] → [Product] ↓ (use case, role)

UI паттерны:

Stepper/Wizard:

• Показывай прогресс (Step 2 of 4)

• Возможность вернуться назад

• Каждый шаг = один фокус

Checklist после входа:

• Slack, Notion стиль

• Можно делать в своём темпе

• Геймификация (прогресс-бар)

Референсы для изучения

Метрики для отслеживания

• Completion rate онбординга по шагам

• Time to first invite sent

• Invite acceptance rate

• Activation rate команд vs одиночек

• Drop-off на каждом шаге

Хочешь углубиться в какой-то конкретный аспект — empty states, микрокопирайтинг, или может конкретный кейс разобрать?

Вот как я бы задизайнил первый вход в B2B SaaS, если цель флоу простая и измеримая: за одну сессию создать workspace и (желательно) пригласить хотя бы одного коллегу, не убив конверсию в активацию.

Что важно именно в B2B

1) Пользователь часто “разведчик”. Он еще не уверен, что будет тащить команду. Значит, invite должен быть выгодным, но не обязательным.

2) “Workspace” для новичка абстрактен. На первом экране важно объяснить, что это: пространство компании или проекта, где будут люди, данные и настройки доступа.

3) Безопасность и контроль. Даже на старте нужно аккуратно обозначить роли, права и приватность. Без перегруза, но чтобы не было ощущения “какой-то сервис просит контакты”.

4) Time-to-value важнее “идеальной анкеты”. Любые поля, которые не влияют на ближайшую пользу, должны быть опциональными или перенесены позже.

Цель флоу, формулировка для команды

Пользователь должен почувствовать:

• “Я создал место для работы”

• “Я могу быстро подключить коллегу”

• “Я уже начал делать полезную вещь, а не заполнять регистрацию”

Идеальный outcome: workspace создан + отправлено хотя бы одно приглашение + пользователь попал на первый совместный артефакт (проект, доска, документ, инбокс, дашборд).

Рекомендуемая структура: 2 шага + быстрый “первый результат”

Экран 0. Welcome (микро-обещание и прогресс)

Заголовок: “Настроим рабочее пространство за 1 минуту”
Подзаголовок: “Создайте workspace и пригласите коллегу, чтобы начать вместе”
Прогресс: Шаг 1 из 2
Важно: этот прогресс снижает тревогу и задает ожидание короткого пути.

Шаг 1. Create workspace (минимум полей)

Поля:

• Workspace name (обязательное)
  Подсказка: “Например, Acme Studio”

• Workspace URL/slug (авто, редактируемо)
  Сразу показать, что будет адрес, но не заставлять думать.

• Use case (опционально, 4-6 вариантов)
  Не ради “маркетинга”, а чтобы настроить пустой стартовый экран, шаблон, подсказки.

CTA: “Create workspace”

UX детали:

• Автозаполнение по email-домену: если почта corporate, предложить имя по домену.

• Мгновенная валидация slug и “занято”.

• Если есть важные настройки (регион данных, часовой пояс) лучше поставить дефолт и убрать в “Advanced”, либо спросить позже, когда появится доверие.

Шаг 2. Invite teammate (не обязаловка, но сильный мотиватор)

Заголовок: “Пригласите коллегу, чтобы работать вместе”
Подзаголовок: “Совместная работа раскрывает основные возможности: комментарии, назначения, доступы.”

Компоненты:

• Поле ввода emails с поддержкой вставки списка через запятую/новую строку

• Роль (по умолчанию “Member”, опционально “Admin”)
  Ссылка “Что это значит?” открывает поповер на 2 строки.

• Персональное сообщение (опционально) с шаблоном

CTA: “Send invites”
Вторичная: “Skip for now” (важно: не прятать)
Но рядом с “Skip” дать мягкий хук: “Можно пригласить позже из Settings”.

Как повысить invite rate без давления:

• Блок “Почему стоит пригласить сейчас” на 3 коротких преимущества, максимум.

• Показать, что вы не спамите: “Приглашение одно, без рассылок.”

• Если пользователь с корпоративным доменом, предложить “Invite people from @company.com” и автодополнение по ранее введенным адресам (если есть).

Экран после отправки: подтверждение + следующий шаг, который дает пользу

Сообщение: “Приглашения отправлены”
Далее: “Создадим первый проект/пространство” или сразу открыть готовый стартовый объект.

Почему это важно: даже если коллега не примет invite сегодня, пользователь уйдет с ощущением прогресса.

Самая частая ошибка: invite как “стена”

Если вы делаете приглашение обязательным, вы теряете “разведчиков” и тех, кто тестирует один. Поэтому лучше так:

• Workspace всегда можно создать соло

• Invite сильно рекомендуем, но пропускаем

• После пропуска сохраняем заметный “Bring your team” entry point в интерфейсе

Микрокопирайтинг, который обычно работает

Для workspace:

• “Workspace is where your team, projects, and permissions live.”

• “You can rename this later.”

Для invite:

• “Invite teammates to collaborate in real time.”

• “We’ll send a single email invitation. No marketing emails.”

Ошибки:

• Вместо “Invalid email” лучше “Проверьте адрес, например name@company.com”

• Для запрещенных доменов или политик: “В вашей организации приглашения ограничены. Обратитесь к администратору.” с понятным CTA.

Edge cases, которые надо продумать сразу

• Пользователь не знает email коллеги: предложить “Copy invite link” (если безопасно) или “Invite later”.

• У пользователя личная почта (gmail): не делать вывод “это не B2B”, просто не форсить командные сценарии.

• Дубликаты и уже приглашенные: аккуратно “уже в команде” и не показывать как ошибку.

• Роли: если вы не готовы объяснить RBAC просто, не показывайте сложный выбор ролей на первом шаге. Дайте один понятный дефолт.

Аналитика флоу, без которой это просто “красивые экраны”

События:

• workspace_created

• invite_step_viewed

• invites_sent (count)

• invite_skipped

• time_to_first_value (до первого созданного объекта или выполненного ключевого действия)

Сегменты:

• корпоративный домен vs личный

• один invite vs несколько

• пропуск invite и последующая активация через 24-72 часа

Эксперименты:

• “2 шага” vs “1 экран с двумя секциями”

• invite с преимуществами vs invite без текста

• дефолтная роль member vs выбор роли

Если хочешь, могу описать это как конкретный набор экранов в стиле “spec для разработчика”: поля, состояния, валидации, тексты, события аналитики, и что показывать на первом дашборде после онбординга под твою нишу (например, B2B SaaS для маркетинга, для DevOps, для финтеха).

Модель: Gemini 3 Pro
Оценка: 6.6 из 10
Сильные стороны: Есть яркие идеи (автологотип по домену, copy link, не блокировать вход).
Слабые стороны: Манифест и эмоции сильнее спецификации. Слишком много “хайпа”, мало четких параметров экранов. Ещё и сходу стиль ответов панибратский в духе “йо бро, ща запилим”.
Прогноз (чьи промпты дадут самый точный UI в Nano Banana): промпты будут художественные, но не очень управляемые.

Модель: Grok 4.1
Оценка: 7.0
Сильные стороны: Хороший набор современных паттернов: bulk invite, link share, роли, empty states, accessibility.
Слабые стороны: Слишком много уверенных цифр и утверждений без опоры, местами “маркетинговая интонация”.
Прогноз: промпты дадут эффектный UI, но точность будет плавать.

Модель: DeepSeek 3.2
Оценка: 7.6
Сильные стороны: Неплохой UX-костяк: психологический контекст, прогресс, микрокопи, валидация, “ожидает” после инвайта.
Слабые стороны: Слишком общий уровень, меньше инженерных и B2B-углов (права, доверие, политика инвайтов).
Прогноз: промпты будут “норм”, но не очень стабильные.

Модель: Claude 4.5
Оценка: 8.0
Сильные стороны: Коротко и по делу - Time to Value, минимальные поля, важный trade-off “когда приглашать”, конкретная схема блока инвайта.
Слабые стороны: Скорее шпаргалка и таблица решений, чем дизайн-спека. Не хватает состояний и микротекстов.
Прогноз: точность средняя, нужно дописывать детали.

Модель: GLM 4.7
Оценка: 8.4
Сильные стороны: Сильная структура и много практики: активация, сетевой эффект, “одно действие на экран”, альтернативы инвайта, персональное сообщение.
Слабые стороны: Текст местами расплывается в объяснения, а не в параметры интерфейса.
Прогноз: хорошие промпты получатся после небольшой “сушки”.

Модель: GPT 5.2
Оценка: 9.0
Сильные стороны: Самый “спековый” подход - outcome, безопасность, edge cases, аналитика и эксперименты.
Слабые стороны: Местами меньше “визуального” описания экранов, нужно руками формализовать UI-скелет.
Прогноз: из этого проще всего делать точные промпты.

Промпт: UI дизайн экрана онбординга для B2B SaaS приложения. Чистое, минималистичное модальное окно по центру экрана на слегка размытом светло-сером фоне. Заголовок жирным шрифтом: "Добро пожаловать". Подзаголовок: "Укажите вашу роль для настройки". Ниже три карточки выбора в ряд с иконками и текстом на русском: "Менеджер", "Разработчик", "Директор". Карточка "Менеджер" выделена синей рамкой и галочкой. Внизу большая яркая синяя кнопка с текстом "Продолжить". Современный стиль, интерфейс высокой четкости, стиль Figma.

Nano Banana рисует:

Промпт: Веб-дизайн экрана настройки воркспейса. Белый чистый фон. Крупный заголовок слева: "Создайте рабочее пространство". Форма с двумя полями ввода. Первое поле подписано "Название компании", внутри текст "ООО Вектор". Второе поле подписано "Адрес в системе", внутри текст "vector.saas.ru" и зеленая галочка справа. Рядом с полями — круглый слот для загрузки логотипа с иконкой фотоаппарата. Внизу справа синяя кнопка "Создать". Много белого пространства, аккуратные тени, деловой стиль.

Nano Banana рисует:

Промпт: UI дизайн экрана приглашения в команду для SaaS. Контент выровнен по центру. Заголовок: "Пригласите коллег". Список из трех полей ввода для email адресов. В первом поле серый плейсхолдер "imya@company.ru". Справа от полей — заметная кнопка с иконкой цепи и текстом "Скопировать ссылку". Внизу экрана большая основная кнопка "Отправить приглашения", а под ней маленькая серая текстовая ссылка "Пропустить этот шаг". Чистый макет, синие акценты, современный UI.

Nano Banana рисует:

Промпт: Дизайн дашборда веб-приложения, стартовый экран. Слева узкая темно-серая боковая панель с иконками меню. Основная рабочая область белая. Заголовок: "С чего начнем работу?". Под ним сетка из трех цветных карточек-шаблонов. Первая карточка: "Управление задачами" с иконкой списка. Вторая карточка: "База клиентов" с иконкой людей. Третья карточка: "Пустой проект" с иконкой плюса. В правом верхнем углу круглая аватарка пользователя. Высокое качество, детализированный интерфейс.

Nano Banana рисует:

Промпт: Создай пиксельно-идеальный UI mockup экрана B2B SaaS после логина по magic link, full HD 1920x1080, light mode. Фон: градиент #F8FAFC сверху к #FFFFFF снизу. Центр экрана (60% ширины, отступы 20% слева/справа): большая иконка команды (3 стилизованных аватара в круге, line art, #64748B), заголовок H1 "Добро пожаловать!" Inter Bold 48px #1A1A1A, подзаголовок "Создадим workspace для твоей команды?" Inter Regular 24px #64748B. Ниже: автозаполненное поле "Название workspace" (по email, e.g. "Команда Маркетинг [user@company.ru]") input border #E2E8F0 radius 12px height 56px Inter Medium 16px #1A1A1A, optional "Описание" multiline 100px height. Кнопка CTA "Создать workspace" full-width 100% на мобиле, #00D4AA bg градиент к #00B894, white text Inter Bold 18px, hover #00C4A0 shadow 0 8px 24px rgba(0,212,170,0.3). Сверху progress bar 20% filled #00D4AA на #E2E8F0 track height 4px. Footer: "Или войти в существующий" link #64748B. Пустое пространство снизу с subtle wave pattern #F1F5F9. Responsive: на мобиле stack vertical, кнопка 100vw. Нет логотипа, фокус на CTA. Высокая детализация, реалистичный скриншот как Figma export.

Nano Banana рисует:

Промпт: Пиксельно-идеальный UI mockup экрана создания workspace B2B SaaS, 1920x1080 light mode. Сверху progress bar 40% #00D4AA. Левая половина (50%): форма — H2 "Назови workspace" Inter Bold 32px #1A1A1A, input "Команда Маркетинг" border #E2E8F0 radius 16px 56px height, иконка pencil слева #9CA3AF, optional логотип upload drag-zone 200x200 #F1F5F9 dashed border radius 12px "Загрузи логотип (опционально)". Правая половина (50%): instant preview пустого дашборда — заголовок "Ваш workspace готов!" Inter Bold 28px, empty state иконка пустой доски #CBD5E1, текст "Здесь будет ваша магия. Пригласи коллегу!" Inter Regular 18px #64748B, CTA кнопка "Пригласить коллегу" #00D4AA radius 12px 48px height white text. Кнопка "Создать и перейти" bottom-right full-hero #00D4AA shadow. Анимация fade-in preview. Фон #FFFFFF с subtle grid pattern #F8FAFC. Responsive: на мобиле preview снизу формы. Детали: ARIA labels visible в тултипах, keyboard focus blue #00D4AA. Реалистичный Figma-style скриншот, high res.

Nano Banana рисует:

Промпт: UI mockup экрана приглашения в workspace B2B SaaS, 1920x1080 light mode, progress bar сверху 70% #00D4AA. Центр (70% ширины): H2 "Пригласи тиммейта и начните работать вместе!" Inter Bold 36px #1A1A1A, sub "Добавь emails (через запятую) или поделись ссылкой" Inter Regular 20px #64748B. Основной input: большая textarea height 120px border #E2E8F0 radius 16px placeholder "ivan@company.ru, anna@team.com" Inter Medium 16px, bulk-support hint "Paste список из 50+ emails". Ниже: dropdown "Роль: Editor" (Viewer/Editor/Admin) с тултипом "Editor может редактировать" popover #1A1A1A bg radius 8px. Две кнопки: "Автокомплит контакты" (Google/Outlook icon #9CA3AF) и "Генерировать shareable link" копируется в clipboard. Hero CTA "Отправить приглашения" #00D4AA full-width radius 12px 56px height white Inter Bold 18px, secondary "Позже" outline #64748B. Live preview справа: список pending invites "Иван: pending". Фон #F8FAFC с иллюстрацией команды (3 аватара connected lines #00D4AA). Responsive: stack на мобиле, swipe для секций. Pixel-perfect, dev-ready скриншот.

Nano Banana рисует:

Промпт: Пиксельно-идеальный mockup экрана workspace после первого приглашения B2B SaaS, 1920x1080 light mode, progress bar 100% #00D4AA с confetti burst subtle (золотые частицы). Header: workspace название "Команда Маркетинг" left Inter Bold 24px #1A1A1A, right: аватар owner + уведомление "Иван принят! ?" badge #00D4AA radius 20px, кнопка "Пригласить еще" #00D4AA. Центр: shared canvas empty state — большая доска 80% height border #E2E8F0 radius 24px, внутри реал-тайм курсоры (2 курсора: синий/зеленый с именами "Ты" и "Иван"), quick template "CRM для продаж" card hover #F1F5F9 radius 12px. Текст overlay "Теперь редактируйте вместе в реал-тайм!" Inter Bold 28px #1A1A1A + sub "Aha! Коллаборация запущена" #64748B. Sidebar left: 240px width "Next steps" список: "Создать проект" link, "Интеграции", "Настройки" icons #9CA3AF. Notifications toast bottom-right "Приглашение отправлено Ивану". Фон #FFFFFF grid subtle. Responsive: sidebar collapse на мобиле. High-fidelity UI скриншот как Notion dashboard.

Nano Banana рисует:

Промпт: UI mockup empty state workspace B2B SaaS (если юзер пропустил invite), 1920x1080 light mode, progress bar скрыт (100%). Header: "Команда Маркетинг" Inter Bold 24px, search bar radius 12px #E2E8F0, + кнопка. Центр full-hero: большая иллюстрация пустой комнаты с дверью "Пригласи друга" line art #CBD5E1 scale 1.2, H1 "Workspace пуст. Пригласи коллегу!" Inter Bold 40px #1A1A1A, sub "Поделись ссылкой в Slack/Teams для супер-магии" Inter Regular 20px #64748B. CTA стек: primary "Пригласить коллегу" #00D4AA radius 12px 56px white, secondary "Создать шаблон" outline #64748B. Нudges снизу: "Или quick start: CRM / Доска задач" chips hover. Sidebar: "Помощь" links. Фон #F8FAFC с soft glow на CTA. Responsive: vertical stack на мобиле, иконка 100vh. Pixel-perfect, motivational empty state как Figma/Slack, dev-ready скриншот.

Nano Banana рисует:

Промпт: Нарисуй экран-приветствие после успешного входа в аккаунт. Заголовок: «Создайте ваше первое рабочее пространство» Подзаголовок: «Это займёт 2 минуты. Затем вы сможете пригласить команду и начать работу.» Единственная центральная кнопка-призыв: «Начать настройку» (primary button, крупная, с иконкой стрелки вправо). На заднем плане — нейтральная, абстрактная иллюстрация, намекающая на collaboration (например, несколько соединённых точек или схематичный workspace). В футере мелким шрифтом: «Уже есть пространство? Перейти в список workspace» (ссылка). Общий стиль: светлый фон, минималистичный, акцент на кнопке. Никаких лишних элементов навигации.

Nano Banana рисует:

Промпт: Нарисуй экран создания workspace. Вверху прогресс-бар: «Шаг 1 из 2» с активным первым шагом. Заголовок H1: «Назовите ваше рабочее пространство» Подзаголовок: «Так ваша команда будет видеть его в системе. Вы всегда сможете изменить это позже.» Поле ввода 1: - Лейбл: «Название компании или проекта» - Плейсхолдер: «Например, “СуперПроект” или “ООО Ромашка”» - Под полем: текст «Это видно только вам и вашей команде.» Поле ввода 2: - Лейбл: «Адрес workspace» - Префикс в поле: https://app.product.com/ - Плейсхолдер: ваш-проект - Под полем: текст «Только латинские буквы, цифры и дефисы. Можно изменить позже.» - Рядом с полем: кнопка «Проверить доступность» (secondary button, маленькая). Если URL свободен — зелёная галочка и текст «Доступен!»; если занят — красный крестик и предложение альтернатив. Блок «Логотип workspace» (опционально): - Заголовок: «Добавить логотип (необязательно)» - Область для перетаскивания файла (drag-and-drop) со стилем dashed border. - Текст внутри: «Перетащите сюда файл PNG или JPG, до 2 МБ» - Или кнопка «Выбрать файл». - После загрузки — превью миниатюры и кнопка «Удалить». Внизу экрана: - Кнопка «Продолжить» (primary, активна, если заполнено хотя бы поле «Название»). - Ссылка «Пропустить и создать позже» (вторичный текст, справа от кнопки). Общий layout: центрированная форма, максимум 500px шириной, много воздуха.

Nano Banana рисует:

Промпт: Нарисуй экран приглашения коллег. Прогресс-бар вверху: «Шаг 2 из 2» с активным вторым шагом. Заголовок H1: «Пригласите вашу команду» Подзаголовок: «Совместная работа начинается здесь. Пригласите хотя бы одного коллегу, чтобы начать.» Основной блок: - Поле ввода с лейблом «Email коллег» - Плейсхолдер: «colleague@company.com, teammate@company.com...» - Под полем: текст «Отправим приглашение с инструкцией по входу.» - Кнопка «Добавить ещё» (текстовая, с иконкой +) под полем — добавляет новое поле ввода. Выбор роли (dropdown рядом с каждым email): - Лейбл: «Роль» - Дефолтное значение: «Участник» - Опции: «Администратор», «Участник», «Наблюдатель» - Под dropdown: краткое описание роли (например, «Участник: может редактировать задачи и файлы»). Альтернативный способ приглашения: - Заголовок: «Или поделитесь ссылкой» - Поле со скопированной ссылкой: https://app.product.com/invite/xyz123 (всё выделено, readonly) - Кнопка «Скопировать ссылку» (secondary, рядом). - Под полем: «Отправьте эту ссылку в чат или по почте.» Блок социального доказательства (лёгкий): - Иконка группы людей. - Текст: «Более 10 000 команд уже работают вместе здесь.» Кнопки действий внизу: - Primary: «Отправить приглашения» (если email добавлены) или «Поделиться ссылкой» (если выбран способ со ссылкой). - Secondary: «Сделаю позже» (текстовая ссылка). - При нажатии «Сделаю позже» — всплывает микро-подтверждение: «Вы сможете пригласить коллег в любое время в настройках workspace.» Визуальный элемент: иллюстрация людей, которые вместе собирают пазл или смотрят на один экран (метафора collaboration).

Nano Banana рисует:

Промпт: Нарисуй экран успешного завершения онбординга. Большая зелёная иконка успеха (галочка в круге) по центру. Заголовок H1: «Готово! Ваше рабочее пространство “Название” создано.» Подзаголовок (варианты в зависимости от действий): - Если приглашения отправлены: «Мы отправили приглашения на email. Ждём вашу команду!» - Если приглашения не отправлены: «Вы можете пригласить команду в любой момент в настройках.» Блок «Что дальше?» (карточки с иконками и CTA): 1. Карточка «Создайте первую задачу» - Иконка: плюс в круге. - Описание: «Начните с простого: добавьте задачу, назначьте и установите срок.» - Кнопка «Создать задачу» (primary, внутри карточки). 2. Карточка «Импортируйте данные» - Иконка: стрелка вверх (импорт). - Описание: «Перенесите задачи из Trello, Asana или CSV-файла за 5 минут.» - Кнопка «Начать импорт» (secondary, внутри карточки). 3. Карточка «Изучите возможности» - Иконка: книга или видео. - Описание: «Посмотрите 3-минутный тур или прочитайте руководство.» - Ссылка «Открыть руководство». Внизу экрана: - Кнопка «Перейти в Dashboard» (primary, крупная, стрелка вправо). По клику — переход в основной интерфейс. - Мелким шрифтом: «Вы всегда можете вернуться к этим шагам через “Помощь”.» Общее настроение: праздничное, но не навязчивое. Использовать мягкие цвета успеха (зелёный, белый, светло-серый).

Nano Banana рисует:

Промпт: Нарисуй dashboard в состоянии «первый вход». Слева — стандартная навигационная панель (sidebar) с логотипом, меню (Проекты, Задачи, Календарь, Настройки). Основная область — центр экрана. Заголовок: «Добро пожаловать в [Название workspace], [Имя пользователя]!» Подзаголовок: «Здесь будет жить ваша работа. Начните с одного из действий ниже:» Карточки-подсказки (3 штуки, горизонтально): 1. «Создайте первый проект» - Иконка: папка с плюсом. - Кнопка «Создать проект» (primary). 2. «Пригласите команду» (если ещё не приглашал) - Иконка: человек с плюсом. - Текст: «Работайте вместе — пригласите коллег.» - Кнопка «Пригласить» (secondary). 3. «Настройте интеграции» - Иконка: пазл. - Текст: «Подключите Slack, Google Calendar, Figma.» - Кнопка «Перейти в настройки» (secondary). В правом верхнем углу — уведомление-тост (если приглашения отправлены): «Приглашения отправлены. Вы будете уведомлены, когда коллеги присоединятся.» В правом нижнем углу — плавающая кнопка «Помощь» (иконка ?), при нажатии открывает быстрые подсказки. Общий стиль dashboard: чистый, с большим whitespace, акцент на карточках действий. Нет таблиц, графиков или лишних данных.

Nano Banana рисует:

Промпт: UI design, modern B2B SaaS onboarding screen, clean minimalist interface, white background. Center-aligned card layout on subtle gray (#F9FAFB) background. Top section: - Progress indicator: 4 dots, first dot filled with primary blue (#2563EB), remaining 3 dots gray (#D1D5DB) - Below progress: small text "Шаг 1 из 4" in gray (#6B7280), 12px font Main card (white, subtle shadow, 24px border-radius, 480px width): Header inside card: - Icon: abstract workspace/building icon in primary blue, 48x48px, top center - Title: "Создайте рабочее пространство" — bold, 24px, dark gray (#111827), center-aligned - Subtitle: "Это будет общее пространство для вашей команды" — 14px, gray (#6B7280), center-aligned Form section: - Label: "Название компании" — 14px, semi-bold, dark gray (#374151), left-aligned - Input field: large rounded input (48px height, 12px border-radius), placeholder text "Например, Acme Inc", light gray border (#E5E7EB), focus state with blue border - Helper text below input: "Вы сможете изменить это позже" — 12px, gray (#9CA3AF) - Label: "URL вашего пространства" — 14px, semi-bold, dark gray, left-aligned, 16px margin-top - Input group: prefix text "app.product.com/" in gray background (#F3F4F6), followed by editable input field with auto-generated slug "acme", green checkmark icon indicating availability Bottom of card: - Primary button: "Продолжить" — full width, blue (#2563EB), white text, 48px height, 12px border-radius, bold 16px text Desktop view, 1440x900 resolution, Figma-style precision, Inter or SF Pro font family, pixel-perfect spacing, 8px grid system.

Nano Banana рисует:

Промпт: UI design, modern B2B SaaS onboarding screen, clean minimalist interface, white background. Center-aligned card layout on subtle gray (#F9FAFB) background. Top section: - Progress indicator: 4 dots, first 2 dots filled with primary blue (#2563EB), remaining 2 dots gray (#D1D5DB) - Below progress: small text "Шаг 2 из 4" in gray (#6B7280), 12px font Main card (white, subtle shadow, 24px border-radius, 520px width): Header inside card: - Icon: user/person icon with sparkle in primary blue, 48x48px, top center - Title: "Расскажите о себе" — bold, 24px, dark gray (#111827), center-aligned - Subtitle: "Это поможет нам настроить продукт под ваши задачи" — 14px, gray (#6B7280), center-aligned First question section: - Label: "Какая у вас роль?" — 14px, semi-bold, dark gray (#374151), left-aligned - Selection chips in 2x3 grid layout, each chip: - Rounded rectangle (12px radius), light gray border (#E5E7EB) - One chip selected: blue border (#2563EB), light blue background (#EFF6FF) - Chips content: "Основатель/CEO", "Продакт-менеджер", "Дизайнер", "Разработчик", "Маркетолог", "Другое" - Each chip 14px text, 40px height, icon on left side Second question section (16px margin-top): - Label: "Для чего вы планируете использовать [Product]?" — 14px, semi-bold, dark gray - Selection chips in 2x2 grid: - "Управление проектами", "Совместная работа", "Отслеживание задач", "Документация" - Same styling as above, multiple selection allowed Bottom of card: - Two buttons row: - Left: "Назад" — text button, gray (#6B7280), no background - Right: "Продолжить" — primary blue button (#2563EB), white text, 48px height, 160px width Desktop view, 1440x900 resolution, Figma-style precision, Inter or SF Pro font family, pixel-perfect spacing, 8px grid system.

Nano Banana рисует:

Промпт: UI design, modern B2B SaaS onboarding screen, clean minimalist interface, white background. Center-aligned card layout on subtle gray (#F9FAFB) background. Top section: - Progress indicator: 4 dots, first 3 dots filled with primary blue (#2563EB), last dot gray (#D1D5DB) - Below progress: small text "Шаг 3 из 4" in gray (#6B7280), 12px font Main card (white, subtle shadow, 24px border-radius, 520px width): Header inside card: - Icon: group of people/team icon in primary blue, 48x48px, top center - Title: "Пригласите команду" — bold, 24px, dark gray (#111827), center-aligned - Subtitle: "Вместе работать эффективнее. Добавьте коллег сейчас или позже" — 14px, gray (#6B7280), center-aligned Email input section: - Label: "Email коллег" — 14px, semi-bold, dark gray (#374151), left-aligned - Input row: input field (flex-grow) with placeholder "colleague@company.com" + blue "Добавить" button on right - Below input: list of added emails as removable tags/chips: - "anna@acme.com" with small X button, light blue background (#EFF6FF), blue text - "dmitry@acme.com" with small X button, same styling - Each tag: rounded pill shape, 32px height, 14px text Divider section: - Horizontal line with text "или" centered, gray (#E5E7EB) line, gray text Link invite section: - Rounded container with light gray background (#F9FAFB), 12px border-radius - Left side: link icon in gray - Center: truncated link text "https://app.product.com/invite/abc123..." - Right side: "Скопировать" button, outline style, blue text and border Social proof banner (bottom of card content): - Light blue background (#EFF6FF), rounded corners - Lightbulb or info icon on left - Text: "Команды из 3+ человек в 2.5 раза чаще достигают успеха с продуктом" — 13px, dark blue (#1E40AF) Bottom of card: - Two buttons row: - Left: "Пропустить" — text button, gray (#6B7280), underline on hover - Right: "Отправить приглашения" — primary blue button (#2563EB), white text, 48px height Desktop view, 1440x900 resolution, Figma-style precision, Inter or SF Pro font family, pixel-perfect spacing, 8px grid system.

Nano Banana рисует:

Промпт: UI design, modern B2B SaaS onboarding completion screen, clean minimalist interface, white background with subtle celebration. Center-aligned layout on subtle gray (#F9FAFB) background. Top section: - Progress indicator: 4 dots, all 4 dots filled with green (#10B981) indicating completion - Small checkmark animation suggestion Main card (white, subtle shadow, 24px border-radius, 520px width): Celebration header: - Large success icon: green checkmark in circle OR confetti illustration, 72x72px, center-aligned - Title: "Всё готово! ?" — bold, 28px, dark gray (#111827), center-aligned - Subtitle: "Рабочее пространство Acme создано" — 16px, gray (#6B7280), center-aligned Summary section (light gray background #F9FAFB, rounded, inside card): - Title: "Что дальше:" — 14px, semi-bold, dark gray, left-aligned - Checklist with 3 items, each with icon on left: - Checkmark green icon + "Workspace создан" — green text, strikethrough or completed style - Checkmark green icon + "2 приглашения отправлены" — green text - Arrow/rocket blue icon + "Создайте первый проект" — blue text, this is the CTA Quick actions section: - 3 horizontal cards in a row, each card: - Light border, subtle shadow, 12px radius - Icon on top (40x40px) - Title below: "Создать проект", "Импорт данных", "Посмотреть туториал" - 12px gray subtitle under each - Hover state: light blue border Bottom of card: - Primary CTA button: "Перейти в Acme →" — full width, blue (#2563EB), white text, 48px height, 16px bold text - Below button: small text link "Настроить workspace" — 14px, gray, underlined Optional: subtle confetti particles or celebration dots in background, very light opacity Desktop view, 1440x900 resolution, Figma-style precision, Inter or SF Pro font family, pixel-perfect spacing, 8px grid system.

Nano Banana рисует:

Промпт: UI design, modern B2B SaaS empty state screen, main product interface with sidebar navigation, clean minimalist style. Layout structure: - Left sidebar: 240px width, dark background (#111827) or white with border - Main content area: remaining width, white background Left sidebar contents: - Top: Workspace logo/avatar "A" in blue circle + "Acme" text, dropdown chevron - Navigation items with icons (20px): "Главная" (home icon, selected state with blue background), "Проекты" (folder icon), "Команда" (people icon), "Настройки" (gear icon) - Bottom: user avatar circle + "Erik Doe" + dropdown chevron - Selected nav item: light blue background (#EFF6FF), blue text (#2563EB) Main content area: - Top header bar: 64px height, contains: - Page title "Проекты" — 20px, semi-bold, left side - Right side: "Пригласить" ghost button + "Новый проект" primary blue button Empty state center (vertically and horizontally centered in main area): - Large illustration: abstract project/folder illustration, soft colors, 200x200px OR simple icon - Title: "У вас пока нет проектов" — 24px, bold, dark gray (#111827) - Subtitle: "Создайте первый проект, чтобы начать работу с командой" — 14px, gray (#6B7280), max-width 360px, center-aligned - Primary button: "Создать проект" — blue (#2563EB), white text, 48px height, icon "+" on left - Secondary link below: "Или импортируйте из другого инструмента" — 14px, blue text, underlined Onboarding checklist floating card (bottom-right corner, optional): - Small card with shadow, 280px width - Header: "Начало работы" + progress "2/5" + minimize button - Checklist items: - ✓ "Создать workspace" — strikethrough, green check - ✓ "Пригласить команду" — strikethrough, green check - ○ "Создать первый проект" — active, bold, blue dot - ○ "Добавить задачу" — gray - ○ "Попробовать интеграции" — gray - Progress bar at bottom: 40% filled, blue Desktop view, 1440x900 resolution, Figma-style precision, Inter or SF Pro font family, pixel-perfect spacing, 8px grid system.

Nano Banana рисует:

Промпт: UI design, modern B2B SaaS modal dialog for inviting team members, overlay on blurred product interface background. Background: blurred/dimmed screenshot of product interface, 50% dark overlay Modal dialog (center of screen): - White background, 24px border-radius, subtle shadow - Width: 480px, auto height - Padding: 32px Modal header: - Close button (X icon) in top-right corner, gray, 24x24px - Title: "Пригласить в Acme" — 20px, bold, dark gray (#111827), left-aligned - No subtitle Invite method tabs (below header): - Two tabs: "По email" (selected, blue underline) | "По ссылке" - Tab text: 14px, selected tab blue (#2563EB), unselected gray (#6B7280) Email tab content: - Multi-email input field: - Large textarea-style input, 100px height - Placeholder: "Введите email адреса через запятую или по одному на строку" - Added emails appear as pills/tags inside input area - Role selector row: - Label: "Роль" — 14px, gray - Dropdown selector: "Участник" selected, chevron down icon - Dropdown options: "Администратор", "Участник", "Только просмотр" - Personal message (optional): - Collapsible section: "+ Добавить сообщение" — blue text, collapsed by default - When expanded: textarea for custom message Modal footer: - Left: text "3 приглашения" — 14px, gray, showing count - Right: "Отмена" text button + "Отправить" primary blue button Link tab content (when selected): - Info text: "Любой с этой ссылкой сможет присоединиться к workspace" — 14px, gray - Link display box: light gray background, truncated URL, "Скопировать" button - Role selector: same as email tab - Toggle: "Ссылка активна" — with on/off switch, green when on - Expiration dropdown: "Истекает через: 7 дней" Desktop view, 1440x900 resolution, Figma-style precision, Inter or SF Pro font family, pixel-perfect spacing, 8px grid system.

Nano Banana рисует:

Промпт: UI design, email template preview for B2B SaaS team invitation, shown in email client mockup style. Email client frame (optional light gray border to simulate email preview): - Width: 600px (standard email width) - White background - Clean, email-safe design Email content: Header section: - Product logo centered, 120px width, 40px from top - Below logo: thin gray divider line Main content section (padding 40px sides): - Greeting: "Привет!" — 24px, bold, dark gray (#333333) - Main text: "Erik Doe приглашает вас присоединиться к рабочему пространству Acme в [Product Name]." — 16px, line-height 1.6, dark gray (#555555) Feature highlights (optional section): - 3 small icons with text in a row or stacked: - "✓ Совместная работа в реальном времени" - "✓ Управление задачами и проектами" - "✓ Все в одном месте" - 14px, gray text, icons in blue CTA section: - Large button centered: "Присоединиться к Acme" — blue (#2563EB), white text, 52px height, 200px width, rounded corners - Below button: small text "Или скопируйте ссылку: https://app.product.com/invite/..." — 12px, gray Personal message section (if included): - Light gray background box, rounded corners - Quote style: "Привет! Присоединяйся к нашему новому инструменту для работы. — Erik" — italic, 14px Footer section: - Thin gray divider - Company name + address (legal requirement) — 12px, gray (#999999) - Unsubscribe link — 12px, gray, underlined - Social media icons (optional): Twitter, LinkedIn — small, gray Email metadata shown above content (mockup style): - From: "Acme via [Product] noreply@product.com" - Subject: "Erik пригласил вас в Acme" - Small preview text visible Desktop view, centered on light gray background to simulate email client, Figma-style precision, system-safe fonts (Arial, Helvetica), email-compatible design.

Nano Banana рисует:

Промпт: A clean and modern B2B SaaS onboarding screen for creating a new workspace. The design should be minimalist, professional, and use a light color palette with a single vibrant accent color (e.g., a bright blue #007AFF for buttons and links). Layout: Centered on the screen is a semi-transparent white card with soft shadows and rounded corners (12px border radius). The card has a padding of 40px on all sides. Content inside the card: 1. Header: At the top, there's a small, centered logo placeholder (a simple, abstract geometric shape). Below the logo, a large, friendly heading in dark grey (#1A1A1A): "Давайте создадим ваше рабочее пространство". Underneath, a smaller subheading in light grey (#6B7280): "Это займет всего минуту. Назовите его так, как вам удобно". 2. Form Fields: First Field (Name): A large, clearly labeled text input field. The label "Название рабочего пространства" is above it in a medium-weight font. The placeholder text inside the field is "Моя команда". The field is pre-filled with this placeholder text, and the text is slightly selected to encourage editing. The field has a subtle blue outline when focused. Second Field (URL): Another text input field below the first. The label is "Адрес вашего пространства". To the left of the input field, there is non-editable grey text showing the base URL: app.product.com/. The input field itself contains the auto-generated slug moya-komanda. The slug text is in a monospace font to distinguish it. A small green checkmark icon is visible to the right of the field, indicating the URL is available. 3. Optional Section: Below the URL field, a collapsible section titled "Какова основная цель вашей команды?" with a small question mark icon. The section is already expanded. It contains a grid of 4 large, tappable buttons with icons and labels: A rocket icon with "Маркетинг". A code brackets icon with "Разработка". A handshake icon with "Продажи". A graduation cap icon with "Образование". The "Разработка" button is selected and has a light blue background with the accent color for its icon and text. 4. Footer: At the bottom of the card, there are two buttons. A large, prominent primary button with the text "Создать пространство". It is filled with the vibrant blue accent color and has white text. * To the right of it, a smaller, secondary text-only button with the text "Пропустить". Background: The background behind the card is a very light grey (#F9FAFB) with a subtle, out-of-focus gradient or a faint abstract pattern. Overall Vibe: Welcoming, efficient, and professional. The user feels guided and not overwhelmed.

Nano Banana рисует:

Промпт: A modern B2B SaaS onboarding screen for inviting team members. The design is consistent with the previous screen, using the same light color palette, vibrant blue accent color (#007AFF), and card-based layout. Layout: A centered white card with soft shadows, rounded corners (12px), and 40px padding. Content inside the card: 1. Header: A large, welcoming heading in dark grey (#1A1A1A): "Отлично! Теперь пригласите коллег". A subheading in light grey (#6B7280): "Начните совместную работу прямо сейчас. Приглашения можно отправить позже.". 2. Main Invitation Area: A large, multi-line text area for email addresses. The label above it says "Введите email-адреса". The placeholder text inside the area is: "colleague1@company.com, colleague2@company.com". The text area is large enough to fit 3-4 lines of text. Below the text area, a small, helpful hint in light grey: "Можно вводить несколько адресов через запятую или с новой строки." 3. Personalized Message Section: A clearly defined section with a heading "Текст приглашения (можно изменить)". Inside, there is a text box pre-filled with a friendly, editable message: "Привет! Я создал для нас рабочее пространство «[Название пространства из шага 1]» в [Название Продукта], чтобы вместе управлять проектами. Зайди, посмотрим, как это работает!" The placeholders [Название пространства] and [Название Продукта] are subtly highlighted or in a different color to indicate dynamic content. 4. Alternative Invitation Methods: A horizontal divider with the text "Или" in the middle. Below the divider, a section with an alternative method. A heading "Отправьте ссылку напрямую". A grey bar displaying a generated referral link: app.product.com/join/aB3dE7fG At the end of the bar, there is a distinct, clickable button with an icon of two overlapping squares (copy icon) and the text "Копировать". 5. Footer: At the bottom of the card, a large primary button: "Отправить приглашения". * Next to it, a smaller secondary text-only button: "Я сделаю это позже". Background: The same light grey (#F9FAFB) background with a subtle abstract pattern as the previous screen. Overall Vibe: Collaborative and helpful. The user is encouraged to invite others but doesn't feel pressured.

Nano Banana рисует:

Промпт: A success and confirmation screen for completing a B2B SaaS onboarding flow. The design is clean, celebratory, and uses the established light theme and vibrant blue accent color (#007AFF). Layout: A centered white card with soft shadows, rounded corners (12px), and generous padding (40px). Content inside the card: 1. Header: At the top, a large, celebratory illustration or icon. A simple, stylized checkmark inside a circle, or an icon of people joining together, rendered in the vibrant blue accent color. Below the icon, a large, bold heading in dark grey (#1A1A1A): "Ваше пространство готово!". A subheading in light grey (#6B7280): "«[Название пространства из шага 1]» ждет вас.". 2. Summary/Confirmation (Optional but good): A small, subtly highlighted box with rounded corners inside the main card. It contains a brief summary: "Приглашения отправлены: 2" (with a small mail icon) "Ваша реферальная ссылка скопирована." (with a small checkmark icon, if the user copied it on the previous screen) 3. Call to Action (CTA): The main focus of the screen is a single, very large, and inviting primary button. The button text is: "Перейти в рабочее пространство". The button is filled with the vibrant blue accent color (#007AFF) and has clear, legible white text. It should be the most prominent element on the screen. 4. Secondary Action (Optional): * Below the main button, a much smaller, understated text link: "Посмотреть короткий тур по продукту". Background: The background is the same light grey (#F9FAFB), but it can have slightly more prominent celebratory elements, like faint confetti patterns or light rays emanating from behind the card, without being distracting. Overall Vibe: Achievement, satisfaction, and clear direction forward. The user has successfully completed the setup and is now seamlessly transitioned into the product itself.

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-интерфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов устройств, без 3D. Светлая тема: фон #F7F8FA, карточки белые, тонкие бордеры #E5E7EB, текст #111827, вторичный текст #6B7280, акцентный цвет #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.08). Иконки line 16px. Никакого lorem ipsum, только читабельный русский текст.

Экран регистрации. В центре страницы широкая карточка на 2 колонки.
Левая колонка: логотип "SetFlow" вверху, ниже заголовок "Начните работу с командой за 2 минуты", подзаголовок "Создайте рабочее пространство и пригласите коллег". Ниже 3 коротких преимущества с иконками: "Роли и права доступа", "Аудит действий", "Безопасное хранение данных". Внизу маленькая строка: "Есть вопросы? support@setflow.com".

Правая колонка: заголовок "Создать аккаунт". Ниже 2 большие кнопки SSO: "Продолжить с Google" и "Продолжить с Microsoft" с иконками. Под ними разделитель "или" (тонкая линия слева и справа).
Форма: поле "Рабочий email" с плейсхолдером "alex@acme.com", поле "Пароль" с подсказкой справа "Показать", под паролем мелко "Минимум 10 символов". Чекбокс "Я согласен с условиями и политикой конфиденциальности" (с ссылками). Основная кнопка акцентная "Создать аккаунт". Ниже ссылкой: "Уже есть аккаунт? Войти".
Внизу правой колонки маленькая заметка с иконкой замка: "Мы не рассылаем приглашения без вашего действия".
Состояние: курсор в поле email, тонкая синяя обводка фокуса, остальное нейтрально.

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-инт��рфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов, без 3D. Светлая тема: фон #F7F8FA, карточки белые, бордеры #E5E7EB, текст #111827, вторичный #6B7280, акцент #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.08). Иконки line 16px. Никакого lorem ipsum, только русский текст.

Онбординг после входа. В центре страницы большая карточка шириной около 760px.
Вверху карточки: логотип "SetFlow" слева, справа мелкая ссылка "Выйти".
Под логотипом крупный заголовок "Создайте рабочее пространство", подзаголовок "Это место, где будут люди, проекты и настройки доступа".
Далее горизонтальный степпер из 2 шагов: "1. Workspace" (активный, с синим кружком и цифрой 1), "2. Приглашения" (неактивный серый). Справа от степпера текст "Шаг 1 из 2".

Форма:

1. Поле "Название рабочего пространства" (обязательное), плейсхолдер "Acme Studio", под полем подсказка "Можно изменить позже".

2. Поле "Адрес в браузере" с префиксом "app.setflow.com/" и редактируемым суффиксом, суффикс уже заполнен "acme-studio". Справа маленькая кнопка "Изменить". Под полем подсказка "Используется в ссылках на проекты".

3. Выпадающий список "Сценарий использования" со значением по умолчанию "Проектный менеджмент". Справа иконка chevron.

4. Переключатель (toggle) "Создать примерный проект" включен, подпись мелко "Поможет быстрее оценить продукт".

Внизу карточки: слева нейтральная ссылка "Настройки данных", справа две кнопки: вторичная "Назад" (неактивна/скрыта), основная акцентная "Создать workspace". Состояние: все поля валидны, кнопка "Создать workspace" активна.

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-интерфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов, без 3D. Светлая тема: фон #F7F8FA, карточки белые, бордеры #E5E7EB, текст #111827, вторичный #6B7280, акцент #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.08). Иконки line 16px. Никакого lorem ipsum, только русский текст.

Тот же экран онбординга, та же карточка и степпер: "1. Workspace" активный, "2. Приглашения" неактивный, справа "Шаг 1 из 2".
Поля "Название рабочего пространства" заполнено "Acme Studio". Поле "Адрес в браузере" показывает "app.setflow.com/acme-studio".

Состояние ошибки: поле "Адрес в браузере" подсвечено красной обводкой, справа маленький значок ошибки.
Под полем красный текст ошибки: "Адрес acme-studio уже занят".
Ниже серым: "Попробуйте один из вариантов:" и рядом 2 маленьких кликабельных варианта-пилюли, но без чрезмерного скругления: "acme-studio-2" и "acme-studio-team".
Кнопка "Создать workspace" внизу справа неактивна (серый фон), пока ошибка не исправлена.
Остальные поля без ошибок.

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-интерфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов, без 3D. Светлая тема: фон #F7F8FA, карточки белые, бордеры #E5E7EB, текст #111827, вторичный #6B7280, акцент #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.08). Иконки line 16px. Никакого lorem ipsum, только русский текст.

Онбординг, та же центральная карточка 760px.
Вверху: логотип "SetFlow", справа ссылка "Выйти".
Заголовок "Пригласите коллегу", подзаголовок "Совместная работа открывает комментарии, назначения и доступы".
Степпер: "1. Workspace" отмечен галочкой как завершенный, "2. Приглашения" активный (синий кружок). Справа "Шаг 2 из 2".

Форма приглашения:

1. Большое поле "Email коллеги" с плейсхолдером "maria@acme.com". Под полем подсказка "Можно вставить несколько адресов через запятую или с новой строки".

2. Выпадающий список "Роль" со значением "Участник". Справа иконка chevron. Подсказка мелко "Роль можно поменять позже".

3. Текстовое поле "Сообщение" (опционально) с плейсхолдером "Например: Присоединяйся, настроим проект вместе".

Под формой тонкая заметка с иконкой щита: "Мы отправим одно приглашение. Никаких рассылок".
Внизу карточки: слева кнопка-ссылка "Пропустить пока", справа основная кнопка "Отправить приглашение" (неактивна, так как email не введен).

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-интерфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов, без 3D. Светлая тема: фон #F7F8FA, карточки белые, бордеры #E5E7EB, текст #111827, вторичный #6B7280, акцент #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.08). Иконки line 16px. Никакого lorem ipsum, только русский текст.

Тот же экран шага 2 из 2 в центральной карточке. Степпер: шаг 1 с галочкой, шаг 2 активный.
Поле email заполнено несколькими адресами в виде чипов внутри поля, каждый чип с крестиком: "maria@acme.com", "oleg@acme.com", "daria@acme.com". Курсор стоит в конце поля, рядом мигает тонкая вертикальная каретка.
Кнопка "Отправить" активна и содержит текст "Отправить 3 приглашения".

Выпадающий список "Роль" открыт вниз. В дропдауне 3 пункта, каждый с названием и коротким описанием:

• "Участник" (выбран), описание "Может создавать и редактировать проекты".

• "Администратор", описание "Управляет доступами и настройками workspace".

• "Только просмотр", описание "Может смотреть без изменений". У пунктов есть маленькие иконки. Выбранный пункт подсвечен легким фоном.

Поле "Сообщение" заполнено текстом: "Привет! Я создал workspace Acme Studio. Присоединяйся, чтобы обсудить задачи и настроить первый проект."
Внизу карточки слева ссылка "Пропустить пока" остается видимой, но менее заметной.

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-интерфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов, без 3D. Светлая тема: фон #F7F8FA, карточки белые, бордеры #E5E7EB, текст #111827, вторичный #6B7280, акцент #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.08). Иконки line 16px. Никакого lorem ipsum, только русский текст.

Экран шага 2 из 2 в той же карточке, степпер: шаг 1 завершен, шаг 2 активный.
В поле emails три чипа: "maria@acme.com" (нормальный), "oleg@acme" (ошибочный), "daria@acme.com" (нормальный).
Ошибочный чип "oleg@acme" выделен красной обводкой, рядом маленький значок ошибки. Вся рамка поля email тоже слегка красная.

Под полем красный текст: "Адрес oleg@acme выглядит неполным. Пример: oleg@acme.com"
Справа внутри поля небольшая подсказка-ссылка "Исправить" рядом с ошибочным чипом.
Кнопка "Отправить приглашения" внизу справа неактивна.
Остальные поля без изменений, роль "Участник".

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-интерфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов, без 3D. Светлая тема: фон #F7F8FA, карточки белые, бордеры #E5E7EB, текст #111827, вторичный #6B7280, акцент #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.08). Иконки line 16px. Никакого lorem ipsum, только русский текст.

Финальный экран онбординга в той же центральной карточке.
Степпер сверху показывает оба шага завершенными с галочками. Справа "Готово".
В центре карточки крупная иконка успеха (галочка в круге), заголовок "Приглашения отправлены", подзаголовок "Коллеги получат письмо и смогут присоединиться к workspace".

Ниже список приглашенных в виде компактной таблицы 3 строки:
Email | Роль | Статус
maria@acme.com | Участник | Ожидает принятия
oleg@acme.com | Участник | Ожидает принятия
daria@acme.com | Участник | Ожидает принятия
Статус отображается серым бейджем "Ожидает принятия".

Внизу карточки справа две кнопки:
Основная акцентная "Перейти в workspace"
Вторичная "Скопировать ссылку-приглашение"
Слева маленькая ссылка "Пригласить еще".

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-интерфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов, без 3D. Светлая тема: фон #F7F8FA, карточки белые, бордеры #E5E7EB, текст #111827, вторичный #6B7280, акцент #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.06). Иконки line 16px. Никакого lorem ipsum, только русский текст.

Экран продукта после создания workspace "Acme Studio" с полноценным app chrome.
Левая сайдбар-колонка шириной около 260px на белом фоне:
Вверху переключатель workspace: "Acme Studio" с маленькой стрелкой.
Ниже пункты меню с иконками: "Главная" (активный), "Проекты", "Входящие", "Команда", "Файлы", "Настройки".
Внизу сайдбара аватар "Alex Ivanoff" и статус "Администратор".

Верхняя панель (top bar): слева поле поиска "Поиск по проектам и людям", справа кнопка "Создать" и иконка уведомлений.

Основная область:
Слева крупный заголовок "Главная", ниже маленькая строка "Workspace: Acme Studio".
Под заголовком карточка "Первые шаги" с чеклистом:

1. "Создать первый проект" (кнопка справа "Создать")

2. "Пригласить еще людей" (подпись "3 приглашения ожидают принятия")

3. "Настроить роли и доступы" (вторичный текст "Рекомендуется для команд")

4. "Импортировать данные" (вторичный текст "Опционально") У каждого пункта чекбокс состояния, пока не отмечены.

Справа от чеклиста отдельная карточка "Команда" с мини-списком:

• Maria K. (приглашение отправлено) статус серым

• Oleg P. (приглашение отправлено) статус серым

• Daria S. (приглашение отправлено) статус серым Внизу кнопка "Управлять приглашениями".

Ниже в основной области большой empty state: "Проектов пока нет" и кнопка "Создать проект". Рядом короткая подсказка "Начните с шаблона: Sprint, Roadmap, Backlog".
В правом верхнем углу экрана виден тост-уведомление: "Workspace создан. Отправлено 3 приглашения." с маленькой кнопкой закрытия.

Nano Banana рисует:

Промпт:

Фронтальный скриншот веб-интерфейса B2B SaaS, desktop 1440x900, строго без перспективы, без мокапов, без 3D. Светлая тема: фон #F7F8FA, карточки белые, бордеры #E5E7EB, текст #111827, вторичный #6B7280, акцент #2563EB. Шрифт Inter. Скругления 12px, мягкая тень 0 8 24 rgba(0,0,0,0.08). Иконки line 16px. Никакого lorem ipsum, только русский текст.

Публичная страница приглашения (не внутри app chrome). В центре карточка шириной около 720px.
Сверху логотип "SetFlow".
Заголовок "Вас пригласили в Acme Studio"
Подзаголовок: "Alex Ivanoff приглашает вас присоединиться как Участник"
Ниже блок с деталями в 2 строки: "Workspace: Acme Studio" и "Доступ: Участник".

Два сценария на одном экране, аккуратно в табах:
Табы сверху: "Я новый пользователь" (активный) и "У меня уже есть аккаунт".
Активный таб "Я новый пользователь" показывает форму:

• Поле "Имя" плейсхолдер "Maria"

• Поле "Рабочий email" заполнено и заблокировано "maria@acme.com" с иконкой замка

• Поле "Пароль" плейсхолдер "Создайте пароль"

• Чекбокс "Я согласен с условиями" Основная кнопка "Присоединиться к workspace"

Под формой небольшой разделитель и альтернативная кнопка "Продолжить с Microsoft" (SSO), мелкая подсказка "Если ваша компания использует единый вход".

Во вкладке "У меня уже есть аккаунт" (не активна, но видна) кратко видно два поля "Email" и "Пароль" и кнопку "Войти и присоединиться".
Внизу карточки маленький текст: "Если вы не ожидали приглашение, просто закройте страницу".

Nano Banana рисует: