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

Натискайте на елементи, щоб редагувати текст, кольори, відступи, шрифти тощо. Найкраще підходить для невеликих правок; для більших змін використовуй чат.

Візуальний редактор дозволяє змінювати інтерфейс свого застосунку, натискаючи на елементи та редагуючи їхні властивості безпосередньо. Переключись у режим Visual на панелі інструментів builder, щоб активувати його.

Як це працює

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

Зміни миттєво застосовуються у попередньому перегляді та записуються у вихідні файли. Використовуй кнопку Reset last edit на бічній панелі, щоб скасувати останню зміну властивості.

Що можна редагувати?

Текст — редагуй вміст безпосередньо
Розмір шрифту — xs, sm, base, lg, xl тощо
Товщина шрифту — thin, light, normal, medium, semibold, bold, extrabold
Сімейство шрифтів — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Стиль шрифту — перемикач курсиву
Вирівнювання тексту — left, center, right, justify
Колір тексту — будь-який колір Tailwind
Колір фону — будь-який колір Tailwind
Відступи — padding і margin з усіх сторін
Рамка — товщина, колір і радіус (доступно для контейнерних елементів без текстового вмісту)
Зображення — заміни фото зі стокового пошуку або завантаж власне (застосовується до елементів img і фонових зображень)
Ефекти — тінь і прозорість

Скасування / Повторення

Використовуй Cmd+Z (Mac) або Ctrl+Z (Windows), щоб скасувати зміни. Cmd+Shift+Z / Ctrl+Shift+Z — щоб повторити.

Палітра сторінки

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

Запитати AI про вибраний елемент

Для правок, які не можна виразити через редактор властивостей, введи короткий промпт у поле Ask AI внизу бічної панелі. Вибраний елемент передається як контекст, тому промпти на кшталт «зроби цю картку компактнішою» або «додай стан наведення з легким підйомом» працюють без необхідності описувати, який саме елемент ти маєш на увазі.

Статичні та динамічні елементи

Візуальний редактор найкраще працює зі статичними елементами, де className і текстовий вміст є рядковими літералами у JSX. Для динамічних елементів (обчислювані className, умовний рендеринг, вирази) редактор автоматично переходить до чату AI зі структурованим промптом.

Коли варто використовувати Візуальний редактор?

Візуальний редактор найкраще підходить для невеликих швидких правок:

Виправлення друкарської помилки
Коригування відступів
Зміна кольору
Оновлення тексту кнопки

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

Як зберегти зміни?

Зміни зберігаються автоматично під час редагування властивості. Файл записується у твій runtime та commitується, коли AI або ти створюєте commit.

FAQ

Чи можна скасувати зміни у Візуальному редакторі?

Так. Використовуй Cmd+Z / Ctrl+Z для скасування. Візуальний редактор підтримує власний стек скасування/повторення.

Чому деякі елементи можна редагувати, а інші — ні?

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

У чому різниця між Візуальним редактором і редактором коду?

Інструмент	Найкраще підходить для
Visual Editor	Швидкі зміни властивостей (текст, кольори, відступи) одним кліком
Code Editor	Повне редагування вихідного коду у VS Code
AI Chat	Складні зміни, нові функції, налагодження