Просмотр приложений
Просматривайте свое работающее приложение, тестируйте его взаимодействия и выполняйте проверки перед публикацией — с полным обзором панели инструментов и всех способов вносить визуальные правки.
Просматривайте свое работающее приложение, тестируйте его взаимодействия и выполняйте проверки перед публикацией — с полным обзором панели инструментов и всех способов вносить визуальные правки.
Что такое Просмотр приложений?
Когда ваши AI Agents завершают задачу, Просмотр приложений открывается в верхней части страницы. Вместо того чтобы просто видеть, как выглядит ваш проект, вы можете взаимодействовать с ним как с полностью работающим приложением — переходить по страницам, тестировать функции и вносить визуальные изменения без написания кода. Он также служит финальной контрольной точкой перед публикацией: если что-то выглядит неправильно или ведет себя неожиданно, вы можете заметить и исправить это до того, как это увидят пользователи.
Перед началом: обработка Agent может занять некоторое время. Пока задача выполняется, панель Терминал справа показывает активность в реальном времени, включая создание файлов, генерацию кода и любые ошибки, возникшие по ходу работы. Вы также можете в любой момент использовать значок Refresh, чтобы перезагрузить последнюю версию предпросмотра.
Панель инструментов Просмотр приложений
Над окном предпросмотра расположена узкая панель инструментов. Слева направо вот что делает каждый элемент управления:
- Design: переключает режим визуального редактирования. Когда он активен, нажатие на любой элемент в предпросмотре выбирает этот элемент для редактирования — см. раздел «Изменение приложения» ниже.
- Переключатель устройства: значок дисплея переключает предпросмотр в мобильный вид и обратно, чтобы вы могли проверить адаптивность, не покидая страницу.
- Refresh: перезагружает окно предпросмотра. Это первое, что стоит сделать, если предпросмотр выглядит устаревшим или завис.
- Home: возвращает предпросмотр на главную страницу вашего приложения из любого места, куда вы перешли.
- Выбор страницы: выпадающий список в центре показывает страницы вашего приложения; выберите одну, чтобы открыть ее в предпросмотре напрямую, вместо того чтобы переходить к ней вручную.
- Открыть в новой вкладке: значок стрелки открывает предпросмотр в отдельной вкладке браузера. Особенно полезно, когда встроенный предпросмотр завис или не отвечает.
- Console: на правом краю открывает панель с системными журналами и сообщениями об ошибках — это первое место, куда стоит заглянуть, если что-то выглядит сломанным.
Панель инструментов над предпросмотром: Design слева, затем переключатель устройства («Показать мобильный предпросмотр»), обновление, home, выбор страницы, открытие в новой вкладке и Console справа.
Значок стрелки открывает работающее приложение в отдельной вкладке браузера — надежный запасной вариант, если встроенный предпросмотр работает некорректно.
Как использовать Просмотр приложений
Шаг 1: Дождитесь загрузки предпросмотра
После завершения работы агентов Просмотр приложений загружает ваш предпросмотр в главном окне. Обычно это занимает от нескольких секунд до минуты.
Дольше 2 минут? Нажмите Refresh на панели инструментов. Если он все еще завис, проверьте ошибки в Console (см. шаг 3).
Шаг 2: Просмотрите и протестируйте взаимодействия
После загрузки перед вами ваше реальное приложение:
- Проверьте адаптивность: используйте переключатель устройства, чтобы переключаться между настольным и мобильным видом и убедиться, что макет корректно работает на меньших экранах.
- Проверьте все взаимодействия: откройте каждую навигационную ссылку, нажмите кнопки, отправьте формы и вызовите состояния наведения. Страница, которая отображается, — не то же самое, что страница, которая работает.
- Пройдите ключевой сценарий: следуйте по самому важному пути — от целевой страницы через изучение к выполнению основного призыва к действию, от начала до конца.
- Проверьте в реальной вкладке: откройте предпросмотр в новой вкладке браузера для финальной проверки в той среде, которую действительно будут использовать ваши пользователи.
Шаг 3: Проверьте ошибки (если что-то выглядит неправильно)
Если приложение не загружается или выглядит сломанным, выберите Console на панели инструментов Просмотр приложений. Панель Console откроется под предпросмотром, тогда как Терминал — это отдельная область активности задач. Она собирает системные журналы и сообщения об ошибках, созданные во время сборки. Красные сообщения об ошибках могут содержать описание того, что пошло не так, и дополнительные диагностические сведения.
Чтобы исправить ошибки:
- Нажмите Resolve в уведомлении Сообщить о проблеме, ИИ автоматически проанализирует и исправит все обнаруженные ошибки, а предпросмотр перезагрузится после применения исправлений. Вы можете в реальном времени наблюдать за ходом процесса на панели Терминал.
- Нет кнопки Resolve? Нажмите «…» (дополнительные параметры) рядом с последним сообщением агента и выберите Feedback, чтобы связаться с командой поддержки — приложите ваш Chat Link и снимок экрана с ошибкой.
Полный процесс обработки ошибок см. в Сообщить о проблеме.
Шаг 4: Измените приложение
Метод 1 — Нажмите, чтобы редактировать (лучше всего для визуальных изменений)
Сначала выберите Design на панели инструментов Просмотр приложений, чтобы включить режим визуального редактирования. Design доступен только в подходящих состояниях настольного проекта для пользователей с доступом редактора; если вы его не видите, используйте метод 2 в чате. Затем нажмите на любой элемент прямо в предпросмотре. Элемент будет выделен контуром и меткой с названием выбранного объекта и его размером — например, h1, кнопка или карточка. Прямо у элемента появится встроенная строка «Ask the Atoms to change…», чтобы вы могли описать изменение, ограниченное именно этим местом, а слева откроется визуальный редактор для ручной настройки:
- Цвета: цвет текста, фона и границы через палитру цветов.
- Отступы: padding, margin и расстояние между элементами.
- Типографика: размер шрифта, насыщенность и семейство.
- Макет: выравнивание, свойства flexbox и grid.
- Текстовое содержимое: редактируйте текст прямо на месте.
Каждое изменение мгновенно обновляет предпросмотр, поэтому вы видите результат в реальном времени. Визуальный редактор также включает вкладку Library для просмотра и добавления готовых ресурсов: значков, изображений и UI-компонентов прямо в ваш проект.
Редактирование по нажатию в действии: заголовок выбран (с отображением его тега и размера), а встроенная строка позволяет запросить изменение именно для этого элемента.
Метод 2 — Опишите это в чате
Скажите агентам простыми словами, что нужно изменить, и они применят это к приложению:
Сделайте цвет фона темнее.
Уменьшите отступы вокруг заголовка.
Измените цвет кнопки на синий.
Проверки перед публикацией
Просмотр приложений — это последняя остановка перед Publish. Этот контрольный список помогает выявить распространенные проблемы до того, как их увидят пользователи:
- Предпросмотр загружается корректно, а в Console нет красных сообщений об ошибках.
- Макет корректно работает в мобильном виде, а не только на настольном.
- Каждое взаимодействие работает: навигация, кнопки, формы и основной призыв к действию.
- Контент-заполнители заменены; заключенные в скобки шаблоны вроде [Название компании] легко пропустить, но они очень заметны после публикации.
- Каждая страница в списке выбора страниц хотя бы быстро просмотрена, а не только главная страница.
Все в порядке? Нажмите Publish в правом верхнем углу и поделитесь ссылкой.
Краткая справка
- Обновить предпросмотр — значок Refresh на панели инструментов Просмотр приложений.
- Переключить вид устройства — переключатель устройства на панели инструментов для тестирования разных размеров экрана.
- Переходить между страницами — выпадающий список выбора страниц на панели инструментов.
- Открыть в новой вкладке — значок стрелки на панели инструментов.
- Просмотреть журналы ошибок — выберите Console на панели инструментов Просмотр приложений; панель журналов откроется под предпросмотром.
- Исправить ошибки автоматически — кнопка Resolve в уведомлении Сообщить о проблеме.
- Редактировать визуальные элементы — нажмите на любой элемент в предпросмотре, чтобы выбрать его и открыть визуальный редактор.
- Сообщить о проблеме — «…» → Feedback в любом сообщении агента.
FAQ
Почему в Просмотр приложений отображается экран загрузки?
Веб-сайт загружается, и Просмотр приложений работает нормально, просто подождите немного. Если это занимает больше 2 минут, нажмите значок Refresh или проверьте панель Console на наличие ошибок.
Почему в Просмотр приложений отображаются красные сообщения об ошибках?
Во время сборки Agents могут столкнуться с проблемами, что иногда вызывает ошибки веб-страницы. Нажмите Resolve, и агенты исправят это за вас; после исправления предпросмотр вернется в нормальное состояние. Красные сообщения — это сигнал, а не катастрофа.
Почему я не могу убрать значок Atoms с опубликованной страницы?
Удаление значка требует Pro или более высокого тарифа. Нажмите на свой аватар в правом верхнем углу, выберите Settings, затем перейдите в Plans & Billing и выберите тариф Pro или Max. После обновления значок Atoms будет автоматически удален с ваших опубликованных страниц.
Как исправить проблемы с макетом страницы или стилями с помощью Design Mode?
- Откройте Design Mode и выберите точный элемент, который выровнен неправильно или оформлен неверно.
- Укажите страницу и breakpoint, текущую проблему, желаемый результат и то, что не должно измениться.
- Используйте измеримые указания, такие как отступы, выравнивание, ширина, цвет или поведение переноса. Прикрепите эталонное изображение, если важно визуальное соответствие.
- Применяйте по одному изменению, затем проверяйте настольный и мобильный макеты, а также важные состояния, такие как загрузка, пустое состояние, наведение и ошибка.
- Если результат ломает другую область, вернитесь к последней рабочей версии и повторите попытку с более узкой целью.
Почему в Просмотр приложений отображается пустой белый экран?
- Подтвердите, затрагивает ли проблема только Просмотр приложений, Preview URL или также опубликованный сайт.
- Обновите один раз, откройте Preview в новой вкладке и протестируйте в окне Incognito.
- Проверьте, не выполняется ли еще текущая задача или сборка. Дождитесь завершения перед повторной попыткой.
- Если явное сообщение говорит, что баланс Cloud & AI недостаточен или приложение приостановлено, откройте Settings → Cloud & AI и проверьте этот баланс. Не пополняйте счет только на основании пустого экрана.
- Зафиксируйте любую ошибку Console или Network, не передавая cookie, tokens или секретные значения.
Если экран остается пустым, свяжитесь с поддержкой и укажите Chat Link, полный Viewer URL, время и часовой пояс, затронутые окружения, снимок экрана и очищенные детали ошибки.
Почему в моем Preview или Просмотр приложений отображается пустой экран или бесконечная загрузка?
- Проверьте, затронуты ли только Просмотр приложений, Preview URL или опубликованный сайт.
- Обновите один раз, откройте Preview в новой вкладке и протестируйте в окне Incognito.
- Проверьте, не выполняется ли еще текущая задача или сборка, и дождитесь ее завершения.
- Протестируйте последнюю известную рабочую версию. Если она работает, сравните недавнее изменение, которое привело к появлению пустого экрана.
- Открывайте Settings → Cloud & AI только если продукт явно сообщает о недостаточном балансе или приостановленном приложении.
Если проблема сохраняется, свяжитесь с поддержкой и укажите Chat Link, полный Viewer URL, версию, время и часовой пояс, затронутые окружения, снимок экрана и очищенную ошибку Console или Network.
Почему мои изменения в Design Mode выглядят правильно в Preview, но не на опубликованном сайте?
Preview и опубликованный сайт — это независимые каналы. Сохранение или предпросмотр не отправляют изменения в production.
- Нажмите Update в панели Publish — Откройте панель Publish и нажмите Update. Дождитесь, пока статус не покажет Up to date.
- Выполните жесткое обновление live-сайта — Нажмите Cmd+Shift+R (Mac) или Ctrl+F5 (Windows), либо откройте URL в окне Incognito, чтобы исключить кэш браузера.
- Проверьте номер опубликованной версии — В панели Publish убедитесь, что версия совпадает с тем, что вы видите в Preview. Если они отличаются, опубликуйте снова.
- Проверьте поддомен платформы Prod — Если вы используете пользовательский домен, отдельно откройте URL Prod по умолчанию. Если поддомен Prod обновлен, а пользовательский домен — нет, проблема в DNS или кэшировании CDN.
Если проблема сохраняется, предоставьте Preview URL, Prod URL, снимки экрана для сравнения бок о бок и время, когда вы нажали Publish или Update.
Почему моя страница выглядит сломанной на мобильном устройстве после того, как агент внес изменения?
Когда агент изменяет макет или стили, он может непреднамеренно нарушить адаптивное поведение на меньших экранах.
- Сначала проверьте на мобильной ширине — Используйте переключатель устройства на панели инструментов Просмотр приложений, чтобы переключиться в мобильный вид и проверить результат перед публикацией.
- Используйте Design Mode в мобильном виде — Переключитесь в Design Mode, когда переключатель устройства установлен на мобильный вид. Нажмите на сломанный элемент, чтобы агент нацелился только на этот компонент при данном размере экрана.
- Укажите явные адаптивные ограничения — Точно скажите агенту, как должен выглядеть мобильный макет. Пример: "На экранах уже 768px расположи карточки в один столбец и установи padding 16px."
- Попросите агента сохранить существующие media queries — При запросе изменений для настольной версии добавьте: "Не изменяй существующие адаптивные или мобильные стили."
Если проблема сохраняется, предоставьте Chat Link, снимок экрана со сломанным мобильным макетом и эталонное изображение ожидаемого макета.
Почему изображения отсутствуют или не загружаются в Preview или на опубликованном сайте?
Если изображения выглядят сломанными, показывают значки-заполнители или не загружаются:
- Проверьте пути к файлам изображений — Откройте раздел Files и убедитесь, что файлы изображений существуют по путям, указанным в вашем коде. Во время редактирования агент мог переместить или переименовать файлы.
- Проверьте размер и формат файла — Очень большие изображения или неподдерживаемые форматы могут не загружаться. Сожмите изображения или преобразуйте их в PNG, JPG или WebP.
- Проверьте облачное хранилище — Перейдите в Settings > Cloud & AI, чтобы убедиться, что у вас есть доступное место для хранения.
- Выполните жесткое обновление — Нажмите Cmd+Shift+R (Mac) или Ctrl+F5 (Windows), чтобы очистить кэшированные ссылки на изображения.
Если проблема сохраняется, предоставьте Chat Link, URL отсутствующего изображения и снимок экрана со сломанным состоянием.
Агент изменил не тот элемент или сломал другие части страницы. Что делать?
Когда агент изменяет несвязанные элементы или вносит регрессии в другие части страницы:
- Откатитесь назад — Перейдите в History и выполните Ремикс от последней стабильной версии. Это сбросит контекст чата, сохранив ваш код.
- Используйте Design Mode для изоляции — Переключитесь в Design Mode и нажмите прямо на конкретный элемент. Это привязывает область редактирования агента к этому компоненту.
- Добавьте явные ограничения — Четко укажите, что НЕ должно измениться. Пример: "Измени только цвет фона заголовка на #1A365D. Не изменяй навигационную панель, footer или любой другой компонент."
- Одно изменение на один промпт — Вносите одно изменение, проверяйте результат, затем переходите к следующему.
Если агент снова и снова вызывает регрессии в других элементах, выполните Ремикс от стабильной версии и попробуйте снова с более точно ограниченной инструкцией.
Почему в Preview отображается ошибка сборки или отсутствующая зависимость?
Если панель Preview показывает ошибку сборки, красный баннер ошибки или сообщение об отсутствующих пакетах:
- Используйте кнопку Resolve — Если в Просмотр приложений появляется уведомление Сообщить о проблеме, нажмите Resolve, и ИИ автоматически проанализирует и исправит все обнаруженные ошибки. Если кнопка Resolve не появляется, скопируйте точное сообщение об ошибке из панели Console и вставьте его агенту с текстом: "Исправь эту ошибку сборки: [сообщение об ошибке]."
- Проверьте недавние изменения — Если ошибка появилась после конкретного редактирования, перейдите в History и сравните с последней рабочей версией, чтобы определить, какое изменение вызвало поломку.
- Выполните Ремикс от последней рабочей версии — Если ошибку трудно устранить, выполните Ремикс от последней успешной контрольной точки и повторно применяйте изменения постепенно.
- Проверьте совместимость пакетов — Если ошибка ссылается на конкретный пакет, попросите агента: "Проверь, совместим ли [package name] с текущей конфигурацией проекта, и исправь любые конфликты версий."
Примечание: если сообщение об ошибке ссылается на компоненты платформы (Просмотр приложений, startup script, Publish, deploy record) или внутренние файлы сторонних пакетов (например, @vue/compiler-core, vite), это может быть проблемой платформы, а не агента. Свяжитесь с поддержкой и передайте полное сообщение об ошибке.
Если проблема сохраняется, предоставьте полное сообщение об ошибке, Chat Link и снимок экрана с ошибкой.
Почему мои изменения шрифта, цвета или отступов не применяются?
Если агент подтверждает, что изменение выполнено, но визуальный результат не изменился:
- Выполните жесткое обновление — Нажмите Cmd+Shift+R (Mac) или Ctrl+F5 (Windows). Изменения CSS часто кэшируются браузером.
- Проверьте конфликты специфичности CSS — Агент мог добавить стили, которые переопределяются существующими правилами. Попросите агента: "Проверь, не переопределяется ли запрошенный мной стиль другим правилом CSS, и при необходимости исправь специфичность."
- Используйте Design Mode для проверки — Переключитесь в Design Mode и нажмите на элемент. Визуальный редактор слева показывает текущие примененные цвета, отступы, типографику и свойства макета, чтобы вы могли увидеть, было ли применено запрошенное изменение.
- Проверьте правильный файл — В проектах с глобальными таблицами стилей и стилями на уровне компонентов агент мог отредактировать не тот файл. Спросите: "Где ты применил изменение? Покажи путь к файлу и строку."
Если проблема сохраняется, предоставьте Chat Link, снимок экрана с неизменившимся элементом и точные значения стилей, которые вы запрашивали.
Почему Design Mode выбирает неправильный компонент, когда я нажимаю?
Design Mode использует визуальный макет, чтобы определить, на какой компонент вы нацеливаетесь. Вложенные или перекрывающиеся элементы могут вызывать неправильный выбор.
- Увеличьте масштаб — Увеличьте область перед нажатием. Это помогает различать тесно вложенные компоненты.
- Используйте текстовое описание как запасной вариант — Если при повторных нажатиях выбирается неправильный элемент, вместо этого опишите его в чате. Пример: "Выбери вторую кнопку внутри карточки с ценами в правой колонке."
- Сошлитесь на путь к файлу — Если вы знаете, какой файл содержит компонент, скажите агенту напрямую: "Отредактируй элемент в src/components/PricingCard.tsx, строка 42."
Если проблемы с выбором сохраняются, предоставьте снимок экрана с выделением нужного элемента и Chat Link.