Визуальное редактирование и предпросмотр

Визуальное редактирование работает прямо в Просмотр приложений. Используйте панель инструментов под предпросмотром, чтобы выбирать элементы, редактировать текст, заменять изображения, применять тему и просматривать изменения перед публикацией.

Используйте Select element для изменений с помощью ИИ, Edit Text для прямого изменения текста, а Theme — для глобальных стилей, таких как цвета, шрифты и эффекты.

Как работает визуальное редактирование

Когда ИИ-агенты завершают задачу, Просмотр приложений появляется в верхней части проекта. Панель инструментов визуального редактирования находится под предпросмотром.

• Select element позволяет выбрать один или несколько элементов и попросить агентов изменить их.
• Edit Text позволяет редактировать текст прямо в предпросмотре.
• Theme открывает элементы управления темой для глобальных стилей.

Панель инструментов можно свернуть, когда она не нужна.

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

Перед началом редактирования убедитесь, что:

• У вашего проекта есть завершенная сборка. Инструменты визуального редактирования доступны в Просмотр приложений после того, как агенты завершат задачу.
• Вы знаете, что изменения не становятся видимыми до публикации. Ваш публичный URL не изменится, пока вы не опубликуете обновленную версию.
• Вы знаете, что тема затрагивает только общие стили. Элементы, созданные с фиксированными значениями, сохраняют прежний вид после смены темы. См. Если тема выглядит неправильно ниже.

Задайте глобальные стили с помощью Theme

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

Theme лучше всего использовать на этапе подготовки, до начала сборки. Если применить ее заранее, все, что создают агенты, с самого начала будет ей соответствовать.

Выберите тему

Выберите Theme на панели инструментов под Просмотр приложений. Панель Theme включает поле Search Themes и группирует темы по разделам:

• Current Theme — то, что сейчас использует ваш проект. Пока вы ничего не применили, здесь отображается No theme applied yet, а кнопка + рядом создает новую тему.
• Featured Theme — 15 пресетов, отобранных дизайнерами. Каждый показан как предпросмотр страницы, созданной с этой темой, с ее названием и рядом образцов цветов, показывающих палитру. Их нельзя удалить.
• Your Theme — темы, которые вы создали или настроили. Их можно переименовывать и удалять.

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

Вкладка Theme с примененной темой вверху и сохраненными темами ниже.

Чтобы применить тему:

1. Выберите нужную тему.
2. Atoms спрашивает "Do you want to apply theme name?"
3. Выберите Apply для подтверждения или Cancel, чтобы вернуться.
4. Проверьте предпросмотр.

Ожидаемый результат: предпросмотр обновляется в соответствии с выбранной темой, и теперь она отображается в разделе Current Theme.

Примечание: Если у вас есть несохраненные изменения текста или изображений, Atoms предложит сохранить или отменить их перед применением новой темы.

Обновите примененную тему

Точка на вкладке Theme означает, что доступна более новая версия примененной темы.

Чтобы использовать ее, выберите Обновить у текущей темы и подтвердите Do you want to re-apply theme name? После этого ваш проект будет использовать более новую версию.

Обновление не обязательно. Если ничего не делать, проект продолжит использовать примененную вами версию.

Примечание: Примечание: Если ваше приложение не выглядит так, как выбранная тема, отдельные элементы могут иметь стили, переопределяющие тему. Эти переопределения нацелены на конкретный контент и сохраняются после смены темы.

Создайте или отредактируйте тему в Theme Manager

Выберите + рядом с Current Theme, чтобы создать тему с нуля, или откройте существующую тему, чтобы изменить ее. В обоих случаях откроется Theme Manager, где можно точно настроить тему по живому предпросмотру.

Его настройки расположены на трех вкладках:

• Color — цветовые роли, которые использует ваше приложение, сгруппированные по назначению: Base Colors, Card, Popover, Primary, Secondary и другие. У каждой роли есть собственное значение, поэтому изменение Primary затрагивает каждый элемент, который его использует.
• Fonts — ваши гарнитуры Serif, Sans-serif и Mono.
• Effects — Radius углов и Shadow, которую можно настраивать по цвету, непрозрачности, размытию, распространению и смещению.

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

Под предпросмотром также доступны Undo и Redo для пошагового просмотра изменений, а также Reset, чтобы вернуть тему к исходному состоянию.

Theme Manager. Предпросмотр обновляется при изменении значения, а элементы управления под ним включают undo, redo, export, import и reset.

Сохраните тему

1. Выберите Save.
2. Укажите Theme Name или оставьте предложенное.
3. Выберите Save для подтверждения.

Ожидаемый результат: ваша тема появится в разделе My Theme на вкладке Theme, а ее палитра будет показана в виде образцов цветов. Применяется она так же, как и любая другая тема.

Примечание: Изменения не сохраняются, пока вы их не сохраните. Atoms остановит вас и предложит сохранить или отменить изменения, если вы попытаетесь применить другую тему при наличии несохраненных правок.

Повторно используйте тему в разных проектах

В Theme Manager под предпросмотром есть Export и Import. Экспортируйте тему в файл, затем импортируйте ее в другой проект, чтобы повторно использовать то же направление дизайна, или передайте ее коллеге, чтобы его проект соответствовал вашему.

Если тема выглядит неправильно

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

Вместо этого вы можете увидеть, что тема успешно применяется, но затрагивает не все. Сообщение об ошибке при этом не появляется — просто все выглядит неправильно.

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

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

Atoms сообщает, что тему нельзя применить. Это бывает редко и означает, что интерфейс вашего проекта не был построен на системе тем Atoms. Вместо этого используйте Визуальный редактор — все по-прежнему можно сделать поэлементно.

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

Редактируйте элементы с помощью Визуальный редактор

1. Наведите курсор на панель инструментов визуального редактирования и выберите Select element.
2. На панели инструментов отобразится Click to select, Ctrl/Cmd + Click for multiple.
3. Выберите элемент в предпросмотре. Чтобы выбрать несколько элементов, удерживайте Ctrl в Windows или Cmd на Mac во время выбора.
4. Ваши выбранные элементы прикрепляются к чату проекта. На панели инструментов отображается количество выбранных элементов, например Edit 1 selection in chat window.
5. Опишите нужное изменение в чате проекта и отправьте сообщение.
6. Снова выберите Select element, чтобы выйти из режима выбора.

Используйте чат проекта для изменений, связанных с макетом, цветами, отступами, стилями или изменениями, затрагивающими несколько выбранных элементов.

Редактируйте текст напрямую

1. Выберите Edit Text на панели инструментов под Просмотр приложений.
2. Когда появится Click text content to edit, выберите текст, который хотите изменить.
3. Отредактируйте текст прямо в предпросмотре.
4. Вы можете редактировать несколько текстовых элементов перед сохранением. На панели инструментов отображается количество ожидающих сохранения правок, например 1 text change или 2 text changes.
5. Выберите Save, чтобы сохранить все ожидающие текстовые изменения, или Discard, чтобы удалить их.

Вы также можете дважды щелкнуть по тексту при использовании Select element, чтобы начать редактировать его напрямую.

Сохраните или отмените изменения

Прямые изменения текста и изображений не применяются, пока вы их не сохраните. Когда есть ожидающие изменения, на панели инструментов отображается их количество вместе с Discard и Save.

• Save применяет все ожидающие прямые правки.
• Discard удаляет ожидающие правки и возвращает затронутые элементы в предыдущее состояние.

Если вы попытаетесь выйти из режима редактирования при наличии несохраненных изменений, Atoms покажет:

Несохраненные изменения

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

Выберите Cancel, чтобы продолжить редактирование, или Discard, чтобы выйти без сохранения изменений.

Сохранение обновляет рабочий проект. Оно не обновляет опубликованный сайт, пока вы не выполните публикацию.

Замените изображение

1. Войдите в режим Select element.
2. Выберите изображение, которое хотите заменить.
3. Выберите изображение из библиотеки изображений или используйте элемент загрузки на выбранном изображении.
4. Проверьте замену в предпросмотре.
5. Выберите Save, чтобы применить изменение изображения, или Discard, чтобы удалить его.

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

Вкладка Library с категориями изображений и Popular Images.

Откуда берутся изображения

Image — это встроенная коллекция. Используйте Search assets для поиска чего-то конкретного или просматривайте категории — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings и People, а для остальных используйте More tags. Выбор категории открывает ее; используйте стрелку назад, чтобы вернуться. Ниже Popular Images показывает общую подборку. Наведите курсор на любое изображение и выберите Use asset, чтобы применить его.

Generate создает новое изображение по описанию и требует тарифа Pro или Max. Введите то, что хотите, в поле Describe the image you want to generate и выберите Generate. Результаты появятся под полем. Выберите готовую миниатюру, чтобы применить ее к вашему элементу.

Upload добавляет ваш собственный файл перетаскиванием, вставкой или по клику. Изображения могут быть в форматах JPEG, PNG, GIF, BMP, TIFF или WEBP, размером до 4 МБ. Загруженные изображения появляются под областью загрузки — выберите одно, чтобы применить его.

Примечание: Use asset отображается только у встроенных изображений. Изображения, которые вы сгенерировали или загрузили, применяются выбором их миниатюры.

Описывайте изменения в чате

После выбора одного или нескольких элементов с помощью Select element опишите желаемый результат в чате проекта.

Например:

• "Сделайте этот раздел спокойнее, с большим количеством свободного пространства и меньшим заголовком."
• "Приведите эти кнопки в соответствие со стилем на странице тарифов."

Будьте конкретны в описании ожидаемого результата. Такие инструкции, как "сделайте это лучше", могут привести к непредсказуемым результатам

Просматривайте изменения

Используйте панель инструментов над предпросмотром:

• Device view — переключение между размерами экрана для проверки адаптивности. Изменения темы и типографики, которые хорошо выглядят на компьютере, часто ломаются на мобильных устройствах, поэтому всегда проверяйте мобильную версию перед публикацией.
• Page selector — переход между страницами вашего приложения.
• Refresh — перезагрузка предпросмотра, если он выглядит устаревшим.
• Open in a new tab — просмотр приложения на всю ширину в отдельной вкладке браузера.
• Console — открытие панели журналов, если что-то выглядит неправильно.

Ожидаемый результат: ваши изменения видны на каждой странице и при каждой ширине устройства, которую вы собираетесь поддерживать.

Восстановление после проблемы с предпросмотром

Если предпросмотр выглядит устаревшим, продолжает загружаться или показывает красные ошибки, проблема может быть связана с Просмотр приложений, а не с вашими визуальными правками. См. Устранение неполадок сборки и предпросмотра, чтобы узнать шаги по устранению неполадок — Refresh, панель Console, Resolve и как сообщить об ошибке, если она не исчезает.

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

Опубликуйте изменения

Визуальные правки остаются в вашем рабочем проекте, пока вы их не опубликуете. Выберите Publish в правом верхнем углу или Обновить, если проект уже опубликован.

Примечание: Если ваш проект использует Specify Версия, а не Always Latest, опубликованный сайт остается привязанным к выбранной вами версии, и ваши изменения дизайна не появятся публично, пока вы не опубликуете новую версию.

Об ошибках, о которых агенты сообщают во время сборки, см. Сообщить о проблеме.