Дизайн и предпросмотр

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 означает, что доступна более новая версия примененной темы.

Чтобы использовать ее, выберите Обновить у текущей темы и подтвердите 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, опубликованный сайт остается привязанным к выбранной версии, и ваши изменения дизайна не появятся публично, пока вы не опубликуете новую версию.

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