Просмотр приложений

Что такое Просмотр приложений?

Когда AI Agents завершают задачу, в верхней части страницы появляется Просмотр приложений. Он позволяет просматривать ваше работающее приложение и вносить визуальные изменения напрямую — без необходимости писать код.

Перед началом

• Обработка Agent может занять некоторое время — пожалуйста, подождите.
• Проверьте панель Терминал справа, чтобы увидеть подробный прогресс. Панель Терминал показывает логи в реальном времени о том, что делает AI Agent, включая создание файлов, генерацию кода и любые ошибки, возникшие в процессе сборки.
• Нажмите значок обновления в любой момент, чтобы перезагрузить предпросмотр.

Как использовать Просмотр приложений

Шаг 1: Дождитесь загрузки предпросмотра

После завершения работы Agents Просмотр приложений загружает ваш предпросмотр в основное окно предпросмотра.

⏱️ Обычно это занимает от нескольких секунд до минуты.

Если это занимает больше 2 минут: нажмите значок обновления на панели инструментов Просмотр приложений. Если проблема сохраняется, проверьте панель Терминал на наличие ошибок (см. шаг 3 ниже).

Шаг 2: Просмотрите ваше приложение

После загрузки вы сможете увидеть свое работающее приложение в окне предпросмотра.

• Desktop / Tablet / Mobile — Используйте панель устройств в верхней части окна предпросмотра, чтобы переключаться между режимами просмотра и проверять адаптивность. На панели отображаются три значка, представляющие настольные устройства, планшеты и мобильные устройства. Нажмите каждый значок, чтобы увидеть, как выглядит ваше приложение на разных размерах экрана, не покидая страницу.
• Открыть в новой вкладке— Нажмите значок стрелки в правом верхнем углу окна предпросмотра, чтобы открыть предпросмотр в отдельной вкладке браузера. Это особенно полезно, если встроенный предпросмотр завис или не отвечает.

Шаг 3: Проверьте наличие ошибок (если что-то выглядит неправильно)

Если ваше приложение не загружается или отображается некорректно, проверьте панель Console на наличие сообщений об ошибках.

Панель Console находится в правой части экрана, под вкладкой Терминал. Она отображает системные логи и сообщения об ошибках, созданные в процессе сборки.

Если вы видите красные сообщения об ошибках, обычно они включают:

• Описание того, что пошло не так
• Файл и номер строки, где произошла ошибка
• Трассировку стека, помогающую определить первопричину

Чтобы исправить ошибки: (Подробнее см.: Сообщить о проблеме)

• Нажмите "Resolve" — ИИ автоматически проанализирует и исправит все обнаруженные ошибки.
• После применения исправлений предпросмотр перезагрузится. Вы можете отслеживать прогресс в реальном времени через панель Терминал.

Нет кнопки "Resolve"?

Нажмите "..." (дополнительные параметры) рядом с последним сообщением Agent, затем выберите "Feedback", чтобы сообщить о проблеме нашей команде поддержки. Пожалуйста, приложите вашу Chat Link и скриншот ошибки.

Шаг 4: Измените ваше приложение

Метод 1: Нажмите, чтобы редактировать (рекомендуется для визуальных изменений)

Нажмите на любой элемент прямо в окне предпросмотра. В левой части экрана появится визуальный редактор, позволяющий настроить:

• Цвета — Изменяйте цвет текста, фона или границы с помощью палитры цветов
• Отступы — Настраивайте внутренние отступы, внешние отступы и расстояние между элементами
• Типографику — Изменяйте размер шрифта, насыщенность и семейство шрифтов
• Макет — Меняйте выравнивание, настройки flexbox или свойства grid
• Текстовое содержимое — Редактируйте текст прямо в редакторе

После внесения изменений предпросмотр обновляется мгновенно, чтобы вы могли видеть результат в реальном времени.

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

Метод 2: Опишите в чате

Сообщите AI Agent, что вы хотите изменить, используя естественный язык. Например:

• "Сделай цвет фона темнее"
• "Уменьши отступы вокруг заголовка"
• "Измени цвет кнопки на синий"

ИИ поймет ваш запрос и применит изменения к вашему приложению.

Краткая справка

• Обновить предпросмотр – Нажмите значок обновления на панели инструментов Просмотр приложений, чтобы перезагрузить окно предпросмотра.
• Переключить вид устройства – Используйте значки Desktop, Tablet или Mobile на панели предпросмотра, чтобы проверить, как выглядит ваше приложение на разных размерах экрана.
• Открыть в новой вкладке – Нажмите значок стрелки в правом верхнем углу окна предпросмотра, чтобы открыть предпросмотр в отдельной вкладке браузера.
• Просмотреть логи ошибок – Проверьте панель Console в правой части экрана на наличие сообщений об ошибках и системных логов.
• Исправить ошибки автоматически – Нажмите кнопку "Resolve" в уведомлении Сообщить о проблеме, чтобы ИИ исправил все обнаруженные ошибки.
• Редактировать визуальные элементы – Нажмите любой элемент в окне предпросмотра, чтобы открыть визуальный редактор слева.
• Сообщить о проблеме – Нажмите "..." → "Feedback" в любом сообщении Agent, чтобы сообщить о проблемах команде поддержки.

FAQ

Почему в Просмотр приложений отображается экран загрузки?

Экран загрузки означает, что сайт загружается. Просмотр приложений работает нормально. Подождите немного, пока предпросмотр загрузится должным образом. Если это занимает больше 2 минут, попробуйте нажать значок обновления или проверить панель Console на наличие ошибок.

Почему в Просмотр приложений отображаются красные сообщения об ошибках?

Agents могут сталкиваться с проблемами в процессе сборки, что иногда вызывает ошибки веб-страницы. Нажмите "Resolve", и Agents исправят ошибку за вас. После исправления Просмотр приложений снова будет нормально показывать предпросмотр, поэтому не стоит беспокоиться из-за появления красных сообщений об ошибках.

Почему я не могу убрать значок Atoms с опубликованной страницы?

Удаление значка доступно только в тарифе Pro и выше. Вы можете выполнить Upgrade в любое время через Settings → Plans & Billing. После обновления значок будет автоматически удален с ваших опубликованных страниц.

Чтобы выполнить Upgrade, нажмите на свой аватар в правом верхнем углу, выберите Settings, затем перейдите в Plans & Billing. Выберите тариф Pro или Max и завершите процесс обновления. После обновления значок Atoms больше не будет отображаться на ваших опубликованных страницах.