Интерфейс редактора

Редактор живёт внутри кабинета — собственной шапки у него нет, сверху уже шапка аккаунта. Всё, что раньше было в верхней панели, собрано в двух плавающих панелях поверх холста: слева — переключение страниц, справа — сохранение и остальные действия.

Левая плавающая панель

• Переключение между страницами вашего пространства (выпадающий список).

Правая плавающая панель

• Индикатор сохранения — «Сохраняем…», «Есть правки» или «Сохранено». Отдельной кнопки «Сохранить» нет — правки уходят автосейвом примерно через секунду после того, как вы перестали печатать, и точно сохраняются при переходе на другую страницу.
• Открыть страницу на сайте — опубликованная версия в новой вкладке.
• Дизайн-система (палитра) — палитра, типографика и радиусы страницы. DS извлекается автоматически после первой генерации (детерминированный парсер — без LLM) и фиксируется. AI использует её как hard-constraint при всех следующих правках, чтобы дизайн не «плыл». Можно пересобрать вручную — кнопка «Изменить стиль» или «Переделать с нуля», либо выбрать готовый пресет из библиотеки открытых DS (Linear, Stripe, Apple, Vercel, Cursor, Claude, …).
• История версий — откатить страницу к предыдущему снимку.
• Режим разработчика — смена тега, ручная правка классов и идентификаторов элемента.
• Экспорт и импорт HTML — скачать страницу/сайт архивом или занести чужую вёрстку. См. Экспорт и импорт HTML.

Левая панель — дерево структуры

В отличие от старых версий редактора, здесь нет переключателя вкладок «Элементы / HTML-структура / Страницы» — левая панель показывает только дерево DOM текущей страницы: удобно навигировать по большим страницам, выделять контейнеры, менять порядок и удалять элементы. Подробнее: HTML-структура.

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

Layout-панель

Внизу инспектора (или отдельной кнопкой над холстом) — layout-панель: быстрые контролы flex/grid, gap, padding, margin для выделенного контейнера. Удобнее, чем печатать flex items-center gap-4 px-6 py-3 руками.

Холст

Центральная область — iframe с живой страницей. Клик по любому элементу выделяет его — он попадает в инспектор справа.

Над холстом — переключатель устройств:

• Desktop — широкий канвас, как на ноутбуке.
• Tablet — средняя ширина.
• Mobile — узкий канвас.

Это превью, а не отдельные версии страницы. Адаптивность настоящая, через Tailwind-классы (md:, lg:, sm:), которые AI расставляет автоматически. Меняя в инспекторе классы вручную, можно тонко донастроить поведение под каждый брейкпоинт.

В нижней панели — масштаб канваса (− / + / Сбросить) и кнопки Отмена / Повтор.

Инспектор (правая панель)

Появляется, когда вы выделяете элемент на холсте или в дереве. Показывает:

• Путь в DOM — хлебные крошки до выделенного элемента.
• Тег — можно сменить (например, <div> на <section>).
• Размеры — ширина и высота, любой CSS-юнит (200px, 100%, auto, 50vw).
• Состояния — превью hover/focus/active, чтобы посмотреть как элемент выглядит при наведении (только в редакторе, не сохраняется).
• Классы — список Tailwind-классов с автокомплитом. Удаление крестиком, добавление через input снизу.
• Текст — содержимое элемента, если применимо.
• Атрибуты — href, src, id, data-* и любые другие. Для ссылок есть picker по страницам сайта и якорям, для src — picker файлов из менеджера.
• Дублировать / Удалить — действия над выделенным элементом.

Подробнее: Инспектор.

Панель ассистента

Своего чата у редактора нет — в правой панели работает тот же ассистент, что и во всём кабинете, с той же историей переписки. На десктопе панель видна всегда, отдельной кнопки-переключателя в шапке нет. Ассистент умеет:

• Генерировать новые секции по описанию;
• Менять выделенный элемент (выделение в дереве/на холсте попадает в чат как «снимаемый чип»);
• Писать кастомный HTML/JS под виджеты;
• Возвращаться к истории прошлых сессий — она общая для всего кабинета, не только для редактора.

Подробнее: Правки через помощника.

Автосохранение

Изменения через инспектор и ассистента сохраняются в фоне — отдельно нажимать «Сохранить» не нужно, такой кнопки нет вовсе. На опубликованном сайте новые правки появляются автоматически после сохранения, повторная публикация не требуется.

Превью

Чтобы посмотреть страницу глазами посетителя, кликните «Открыть страницу на сайте» в правой плавающей панели — откроется опубликованная версия в новой вкладке.