Визуальный редактор

Кликайте на элементы, чтобы редактировать текст, цвета, отступы, шрифты и многое другое. Лучше всего подходит для небольших правок; для крупных изменений используйте чат.

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

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

Переключись в режим Visual на панели инструментов (рядом с Preview, Code и Dashboard)
Наводи курсор на элементы в preview — они подсвечиваются оверлеем
Кликни на элемент, чтобы выбрать его
Редактируй свойства в боковой панели: текст, цвета, отступы, шрифты, границы, изображения, эффекты

Изменения мгновенно применяются в preview и записываются в исходные файлы. Используй кнопку Reset last edit в боковой панели, чтобы отменить последнее изменение свойства.

Что можно редактировать?

Text — редактировать текст напрямую
Font size — xs, sm, base, lg, xl и т. д.
Font weight — thin, light, normal, medium, semibold, bold, extrabold
Font family — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Font style — переключатель курсива
Text alignment — left, center, right, justify
Text color — любой цвет Tailwind
Background color — любой цвет Tailwind
Spacing — padding и margin со всех сторон
Border — ширина, цвет и радиус (доступно для контейнерных элементов без текстового содержимого)
Image — заменить стоковым фото по поиску или загрузить собственное изображение (применяется к элементам img и фоновым изображениям)
Effects — тень и прозрачность

Отмена и повтор действий

Используй Cmd+Z (Mac) или Ctrl+Z (Windows), чтобы отменить изменения. Cmd+Shift+Z / Ctrl+Shift+Z — чтобы повторить.

Палитра страницы

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

Спроси AI о выбранном элементе

Для правок, которые нельзя выразить через редактор свойств, введи короткий запрос в поле Ask AI внизу боковой панели. Выбранный элемент передаётся как контекст, поэтому запросы вроде «сделай эту карточку компактнее» или «добавь hover-состояние с лёгким подъёмом» работают без необходимости описывать, какой именно элемент ты имеешь в виду.

Статические и динамические элементы

Визуальный редактор лучше всего работает со статическими элементами, где className и текстовое содержимое являются строковыми литералами в JSX. Для динамических элементов (вычисляемые className, условный рендеринг, выражения) редактор автоматически переключается на AI-чат со структурированным промптом.

Когда стоит использовать визуальный редактор?

Визуальный редактор лучше всего подходит для небольших и быстрых правок:

Исправление опечатки
Корректировка отступов
Изменение цвета
Обновление текста кнопки

Для более крупных изменений (новые секции, реструктуризация макета, новые функции) используй AI-чат.

Как сохранить изменения?

Изменения сохраняются автоматически при редактировании свойства. Файл записывается в runtime и фиксируется в commit, когда AI или ты создаёте commit.

Часто задаваемые вопросы

Можно ли отменить правки в визуальном редакторе?

Да. Используй Cmd+Z / Ctrl+Z для отмены. Визуальный редактор ведёт собственный стек отмены и повтора действий.

Почему одни элементы можно редактировать, а другие — нет?

Статические атрибуты текста и className можно редактировать напрямую. Динамические или вычисляемые значения (шаблонные литералы, тернарные выражения, вызовы функций) автоматически переключаются на AI-чат.

В чём разница между визуальным редактором и редактором кода?

Инструмент	Лучше всего подходит для
Visual Editor	Быстрое изменение свойств (текст, цвета, отступы) кликом
Code Editor	Полноценное редактирование исходного кода с VS Code
AI Chat	Сложные изменения, новые функции, отладка