Сначала это выглядело как странный эксперимент Microsoft: прицепить Copilot к правому краю Edge. Потом подтянулись Яндекc и Perplexity. А к весне 2026 года сплит-вью (split view) с ИИ стало обязательным элементом любого серьёзного приложения. Не верите? Откройте ChatGPT Atlas и увидите чат, прилипший к левому краю, пока основное пространство занято кодом или текстом. Зайдите в Figma — AI-панель болтается справа, готовая сгенерировать компонент по описанию. Adobe Photoshop? Та же история. Telegram? Встроенный AI-бот уже живёт в боковой вкладке.
UX-дизайнеры, привыкшие к монолитным интерфейсам, в панике: как теперь вписывать ИИ, чтобы не превратить экран в свалку панелей? Ответ — разобрать 15 реальных кейсов и вытащить оттуда универсальные правила.
Вторжение на экраны: почему все прилипли к вертикальной перегородке
Сплит-вью — не новость. Разработчики и редакторы кода (VS Code, IntelliJ) юзали разделённые окна десятилетиями. Но ИИ добавил интерактивный контекст. Теперь боковая панель — не просто статичный список файлов, а диалоговое окно с агентом, который видит, что вы делаете на основном полотне. В марте 2026 ChatGPT Atlas (ответвление GPT-4.5) представил режим Canvas+Chat: нейросеть сидит слева, вы справа работаете с документом, а она комментирует, предлагает правки и даже рисует графики. Perplexity Comet пошёл ещё дальше — панель адаптируется под тип контента: если вы читаете статью, AI показывает релевантные факты; если смотрите код — выводит документацию и тесты.
15 лиц одного тренда (и ни одного повторения)
Собрал эти примеры по двум критериям: ИИ-ассистент должен быть постоянно виден (или легко вызываться) и взаимодействовать с основным контентом. Никаких всплывающих модалок — только плоскостное разделение.
| Продукт | Расположение панели | Как ИИ использует контекст |
|---|---|---|
| Microsoft Edge + Copilot | Справа, выдвигается по кнопке | Анализирует открытую страницу, предлагает резюме, перевод, генерацию идей |
| Yandex Browser + Алиса 2.0 | Левая панель с возможностью прикрепить | Показывает контекстные подсказки для поиска, текста на странице, изображений |
| Google Chrome + Gemini Side Panel | Справа, вызывается через Ctrl+Shift+U | Сравнивает страницы, предлагает переформулировки, ищёт факты |
| ChatGPT Atlas | Слева в режиме Canvas+Chat | Видит редактируемый документ/код, даёт правки, вставляет код по запросу |
| Perplexity Comet | Адаптивно: плавающая панель или закреплённая слева | Отслеживает тип контента, выводит источники, сводки, цитаты |
| Telegram + AI Assistant | Правая вкладка внутри чата | Видит историю диалога, предлагает ответы, перевод, анализ документов |
| Slack + Einstein GPT | Правая панель рядом с каналом | Резюмирует тред, ищёт сообщения, генерирует краткие сводки |
| Adobe Photoshop + Firefly Pro | Справа, контекстная панель для выделенных слоёв | Предлагает фильтры, генеративную заливку, ретушь на основе выбранного объекта |
| Figma + Figma AI | Правая панель свойств, расширенная AI-вкладка | Генерирует варианты дизайна, создаёт компоненты по описанию, исправляет сломанные связи |
| Canva + Magic Studio | Левая панель инструментов с AI-режимом | Предлагает ремиксы макета, генерирует изображения, подбирает шрифты под контент |
| Notion AI | Правая плавающая панель, появляется по @ | Анализирует выбранный блок, предлагает переписывание, перевод, генерацию таблиц |
| VS Code + GitHub Copilot Chat | Правая панель, вызывается иконкой | Видит весь проект, предлагает рефакторинг, объясняет код, пишет тесты |
| Cursor IDE | Плавающее окно справа, прикрепляемое | Автоматически вносит изменения в файлы, понимает структуру проекта, работает с git |
| Replit + Ghostwriter | Нижняя панель с переключением на AI | Помогает писать код, отлаживать, развёртывать прямо в браузере |
| Google Docs + Duet AI | Правая панель предложений | Проверяет орфографию, стиль, предлагает перефразирование, генерирует текст на основе выделенного |
Звучит как каталог? На самом деле за этими строчками стоит гигантский сдвиг парадигмы. Дизайнеры, привыкшие жёстко отделять «рабочую область» от «панели инструментов», теперь вынуждены проектировать пространство, где граница — не физическая линия, а зона переговоров между человеком и машиной. И то, как эти панели ведут себя на разных устройствах — отдельная боль. На десктопе сплит-вью спасает, а на мобильном — убивает UX, если панель не умеет сворачиваться в плавающую кнопку.
Паттерны, которые можно (и нужно) украсть
Проштудировав эти 15 примеров, я выделил три чётких паттерна, которые повторяются у самых успешных реализаций.
1 Контекстное прилипание
Панель не просто висит, а меняет содержимое в зависимости от того, что юзер делает на основной области. Perplexity Comet и ChatGPT Atlas — мастера этого подхода. Если вы выделили абзац, AI предлагает рерайт; если нажали на код — анализ. Никаких лишних кликов.
2 Плавающее якорение
Панель можно открепить от края и перетащить. Это даёт чувство контроля, которое юзеры обожают. Figma AI и Adobe Firefly Pro позволяют откреплять панель и держать её поверх слоёв — критично для дизайнеров, которые хотят видеть сразу два инструмента.
3 Умное сворачивание
На маленьких экранах (1200px и меньше) панель должна превращаться в односложную иконку или скрываться вовсе. Edge Copilot это делает автоматически, а Яндекс Браузер — чуть хуже: иногда панель наезжает на контент. Мы в детально разобрали эти кейсы в отдельной статье.
Внимание, антипаттерн: когда панель с ИИ открывается автоматически при загрузке страницы — это бесит. Не делайте так. Дайте пользователю инициировать диалог.
Что делать дизайнеру? Правила игры на новом поле
Спросите себя: а нужен ли вам вообще сплит-вью? Если ИИ выполняет короткие задачи (поиск, перевод, генерация изображения) — может, хватит плавающего окна? Но если ассистент должен следить за процессом и советовать (как в IDE или редакторах) — без постоянной панели не обойтись.
Вот правила, которые я вывел из этих 15 примеров. Во-первых, панель должна быть отзывчивой: на планшете — плавающая кнопка, на десктопе — ширина до 400px. Во-вторых, ИИ не должен перекрывать критически важное содержимое (кнопки, поля ввода). В-третьих, всегда давайте возможность скрыть панель навсегда — не все хотят жить с ИИ-соседом.
Кстати, если вы только начинаете осваивать проектирование интерфейсов с ИИ, рекомендую курс «Профессия UX/UI-дизайнер + ИИ» на Skillbox — там разбирают как раз такие сценарии, плюс дают инструменты, чтобы встроить нейросеть в интерфейс, а не просто навесить её сбоку.
Неочевидный прогноз: сплит-вью убьёт концепцию «экран-в-фокусе»
Прямо сейчас мы переживаем переходный период. Дизайнеры всё ещё думают категориями «главная страница — детальная — корзина». Но когда ИИ сидит в правой панели и видит всё, что делает пользователь, само понятие «страницы» размывается. Вы не перемещаетесь по сайту, а ведёте диалог с системой о том, что видите. Copilot в Edge уже умеет анализировать текущую вкладку, а GEO (Generative Engine Optimization) показывает, как контент должен адаптироваться под эти сценарии.
Следующий шаг — панели, которые предсказывают ваше намерение. Представьте: вы наводите курсор на картинку, а ИИ уже предлагает изменить её размер, стиль или вовсе заменить. Технологии вроде JanusCoder и SVG для ИИ, о которых мы писали ранее, делают это возможным уже сейчас.
Запомните мой тезис: к 2027 году сплит-вью станет стандартом по умолчанию, и дизайнеры, которые не научатся вписывать ИИ в боковую панель, будут делать интерфейсы, похожие на артефакты эпохи до нейросетей. Учитесь на чужих ошибках — я в этой статье привёл 15 примеров, но в нашем полном гиде по использованию боковой панели есть ещё больше деталей и антипаттернов.
Последнее: не пытайтесь скопировать Figma AI один в один. У каждого продукта своя аудитория и сценарий. Для маркетингового сайта может сработать подход из Claude Code и Open Design, о котором мы рассказывали в статье. Главное — сохранить контроль в руках пользователя. Если ИИ будет слишком навязчивым, он станет раздражителем, а не помощником.
