Visual Editor

Klikaj elementy, aby edytować tekst, kolory, odstępy, czcionki i wiele więcej. Najlepszy do drobnych poprawek; do większych zmian używaj czatu.

Visual Editor pozwala zmieniać interfejs użytkownika aplikacji poprzez klikanie elementów i bezpośrednią edycję ich właściwości. Aby go aktywować, przełącz się na tryb Visual w pasku narzędzi buildera.

Jak to działa

Przełącz się na tryb Visual w pasku narzędzi (obok trybów Preview, Code i Dashboard)
Najeżdżaj kursorem na elementy w podglądzie — zostaną podświetlone nakładką
Kliknij element, aby go zaznaczyć
Edytuj właściwości w panelu bocznym: tekst, kolory, odstępy, czcionki, obramowania, obrazy, efekty

Zmiany są natychmiast stosowane w podglądzie i zapisywane do plików źródłowych. Użyj przycisku Reset last edit w panelu bocznym, aby cofnąć ostatnią zmianę właściwości.

Co mogę edytować?

Tekst — Edytuj treść bezpośrednio
Rozmiar czcionki — xs, sm, base, lg, xl itd.
Grubość czcionki — thin, light, normal, medium, semibold, bold, extrabold
Rodzina czcionek — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Styl czcionki — Przełącznik kursywy (italic)
Wyrównanie tekstu — left, center, right, justify
Kolor tekstu — Dowolny kolor Tailwind
Kolor tła — Dowolny kolor Tailwind
Odstępy — Padding i margin ze wszystkich stron
Obramowanie — Szerokość, kolor i zaokrąglenie (dostępne dla elementów kontenerowych bez treści tekstowej)
Obraz — Zastąp zdjęciem stockowym z wyszukiwarki lub prześlij własny obraz (dotyczy elementów img oraz obrazów tła)
Efekty — Cień i przezroczystość

Cofanie / Ponawianie

Użyj Cmd+Z (Mac) lub Ctrl+Z (Windows), aby cofnąć zmiany. Cmd+Shift+Z / Ctrl+Shift+Z, aby ponowić.

Paleta strony

Visual Editor analizuje Twoją stronę i wyodrębnia wszystkie kolory Tailwind oraz własne właściwości CSS aktualnie w niej używane. Po otwarciu próbnika kolorów dla zaznaczonego elementu możesz wybrać kolor z tej palety strony, zachowując spójność z istniejącym systemem projektowania — bez konieczności zgadywania kodów hex.

Zapytaj AI o zaznaczony element

W przypadku poprawek, których edytor właściwości nie potrafi wyrazić, wpisz krótkie polecenie w pole Ask AI na dole panelu bocznego. Zaznaczony element jest przekazywany jako kontekst, więc prompty w stylu „spraw, żeby ta karta była bardziej zwarta” lub „dodaj efekt hover z subtelnym uniesieniem” działają bez konieczności opisywania, który element masz na myśli.

Elementy statyczne a dynamiczne

Visual Editor działa najlepiej na elementach statycznych, gdzie className i treść tekstowa są literałami łańcuchowymi w JSX. W przypadku elementów dynamicznych (obliczane classNames, renderowanie warunkowe, wyrażenia) edytor automatycznie przełącza się na czat AI ze strukturalnym promptem.

Kiedy używać Visual Editora?

Visual Editor jest najlepszy do szybkich, drobnych poprawek:

Poprawianie literówki
Dopasowywanie odstępów
Zmiana koloru
Aktualizacja tekstu przycisku

Do większych zmian (nowe sekcje, przebudowa układu, nowe funkcje) używaj zamiast tego czatu AI.

Jak zapisać zmiany?

Zmiany są zapisywane automatycznie podczas edycji właściwości. Plik jest zapisywany do Twojego środowiska uruchomieniowego i commitowany, gdy AI lub Ty tworzysz commit.

FAQ

Czy mogę cofnąć zmiany wprowadzone przez Visual Editora?

Tak. Użyj Cmd+Z / Ctrl+Z, aby cofnąć. Visual Editor utrzymuje własny stos cofania/ponawiania operacji.

Dlaczego niektóre elementy mogę edytować, a innych nie?

Statyczne atrybuty tekstu i className można edytować bezpośrednio. Wartości dynamiczne lub obliczane (literały szablonów, wyrażenia trójskładnikowe, wywołania funkcji) są automatycznie przekazywane do czatu AI.

Jaka jest różnica między Visual Editorem a edytorem kodu?

Narzędzie	Najlepsze do
Visual Editor	Szybkie zmiany właściwości (tekst, kolory, odstępy) poprzez klikanie
Code Editor	Pełna edycja kodu źródłowego z VS Code
AI Chat	Złożone zmiany, nowe funkcje, debugowanie