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

Раздел Design открывается рядом с вашим предпросмотром в реальном времени и позволяет менять внешний вид проекта без написания кода.

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

Как работает Design

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

• Theme задает глобальные правила для всего приложения — цвета, шрифты и эффекты. Лучше всего использовать до начала сборки.
• Визуальный редактор настраивает выбранные вами элементы. Работает в любом проекте и в любое время.
• Library заменяет изображения или создает новые.

Theme задает правила, а Визуальный редактор доводит детали до совершенства. Выберите Exit, чтобы закрыть панель.

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

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

Перед тем как открыть Design, убедитесь, что:

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

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

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

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

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

Вкладка Theme открывается с полем Search Themes и группирует темы по разделам:

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

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

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

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

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

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

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

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

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

Чтобы использовать ее, выберите Update у текущей темы и подтвердите 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. Вместо этого используйте Визуальный редактор — все по-прежнему можно сделать поэлементно.

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

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

Выберите элемент в предпросмотре, чтобы отредактировать его. Чтобы работать сразу с несколькими, удерживайте Ctrl и нажимайте в Windows или Cmd и нажимайте на Mac.

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

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

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

• Layout — внешние и внутренние отступы.
• Appearance — цвет фона, непрозрачность и скругление углов. Значение Radius идет от None через Small, Medium, Large, XL, 2XL, 3XL до Full.
• Content — текст элемента.
• Style — семейство шрифта, насыщенность, размер, выравнивание текста и оформление.
• Class — классы стилей, примененные к элементу; по умолчанию свернуты.

Какие разделы отображаются, зависит от того, что вы выбрали: для текстового элемента доступны Content и Style, а для контейнера могут отображаться только Layout, Appearance и Class.

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

Изменения отображаются в предпросмотре по мере внесения. Чтобы отказаться от них, используйте Discard внизу предпросмотра.

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

Изменения не сохраняются, пока вы их не сохраните. После внесения изменений внизу предпросмотра появляются Discard и Save.

• Save сохраняет ваши изменения.
• Discard отменяет их и возвращает элемент в прежнее состояние.

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

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

Сохранение оставляет изменение в вашем проекте. Оно не публикует его на вашем сайте — см. Опубликуйте изменения.

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

Советы:

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

Заменяйте изображения с помощью Library

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

1. Выберите элемент, который хотите изменить, в предпросмотре. Пока вы этого не сделаете, Library показывает Select an element to start visual editing.
2. Откройте вкладку Library и выберите источник — Image, Generate или Upload.
3. Примените изображение. Способ зависит от его источника. Для встроенного изображения наведите курсор и выберите Use asset. Для изображения, которое вы сгенерировали или загрузили, выберите готовую миниатюру.
4. Проверьте предпросмотр. Изображение сразу применяется к выбранному элементу.
5. Выберите Save внизу предпросмотра или Discard, чтобы отменить действие.

Ожидаемый результат: выбранный элемент получает новое изображение, а кнопки 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 отображается только для встроенных изображений. Изображения, которые вы сгенерировали или загрузили, применяются выбором их миниатюры.

Описывайте изменения вместо кликов

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

• Плавающая панель над выбранным элементом. Небольшая панель появляется над выбранным элементом. Две ее иконки переключают режим между описанием изменения и прямым редактированием свойств. Введите текст в Ask the Atoms to change… и отправьте.
• Поле чата под панелью Design. Когда элемент выбран, в поле отображается метка Design и подсказка Ask the Atoms team to modify the selected element…, чтобы агенты применили вашу инструкцию к этому элементу, а не ко всему проекту.

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

Описывайте результат, а не механизм:

- "Сделай это спокойнее — больше свободного пространства, заголовок поменьше."

- "Сделай стиль этой кнопки таким же, как на странице с ценами."

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

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

Просмотрите изменения

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

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

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

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

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

Одна вещь, которая относится именно к Design: если кажется, что ваши изменения исчезли, проверьте, сохранили ли вы их. Несохраненные изменения отбрасываются при выходе из Design — см. Сохраните изменения.

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

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

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

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