Интерфейс редактора
Как устроен HTML-редактор Framix — холст, левая панель с тремя вкладками, инспектор и Framix AI
Интерфейс редактора
Когда вы открываете страницу в редакторе, перед вами появляется рабочая зона, разделённая на четыре части: верхняя панель, левая панель, холст и инспектор справа.
Верхняя панель
Слева — название текущей страницы и её URL-путь. Справа — действия:
| Кнопка | Что делает |
|---|---|
| Открыть сайт (внешняя ссылка) | Открыть опубликованную страницу в новой вкладке. |
| Дизайн-система (палитра) | Открыть палитру, типографику и радиусы страницы. DS извлекается автоматически после первой генерации (детерминированный парсер — без LLM) и фиксируется. AI использует её как hard-constraint при всех следующих правках, чтобы дизайн не «плыл». Можно пересобрать вручную — кнопка «Изменить стиль» или «Переделать с нуля». |
| Библиотека дизайн-систем | Выбрать готовый пресет из 138+ открытых DS (Linear, Stripe, Apple, Vercel, Cursor, Claude, …) — fast-path без вызова LLM. |
| Экспорт HTML | Скачать страницу или весь проект как ZIP. См. Экспорт и импорт HTML. |
| История версий | Откатить страницу к предыдущему снимку. |
| Framix AI | Открыть/закрыть боковую панель ИИ-чата. |
| Сохранить | На десктопе явная кнопка; правки также сохраняются автоматически в фоне. |
Левая панель
Сверху — три вкладки-иконки:
🧩 Элементы
Палитра готовых snippet'ов: кнопки, заголовки, формы, секции, шапки. Клик по карточке вставляет snippet в текущее место (рядом с выделенным элементом или в конец страницы). Поддерживается drag-and-drop из палитры на холст. Подробнее: Палитра элементов.
🌳 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 файлов из менеджера. - Дублировать / Удалить — действия над выделенным элементом.
Подробнее: Инспектор.
Панель Framix AI
Открывается кнопкой «Framix AI» в правом верхнем углу или горячей клавишей. Это боковая панель с чатом, который умеет:
- Генерировать новые секции по описанию;
- Менять выделенный элемент;
- Писать кастомный HTML/JS под виджеты;
- Возвращаться к предыдущим сессиям через иконку «История».
Подробнее: Framix AI.
Автосохранение
Изменения через инспектор и AI сохраняются в фоне — отдельно нажимать «Сохранить» не обязательно. На опубликованном сайте новые правки появляются автоматически после сохранения, повторная публикация не требуется.
Превью
Чтобы посмотреть страницу глазами посетителя, кликните «Открыть сайт» в верхней панели — откроется опубликованная версия в новой вкладке.