> ## Documentation Index
> Fetch the complete documentation index at: https://vibewax.be/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vizuální úpravy

> Jak upravovat design, texty a rozložení přímo na stránce

Nemusíte každou drobnou úpravu popisovat agentovi – můžete pracovat přímo v náhledu projektu. Klikněte na prvek a změňte jeho vzhled, přepište text přímo na stránce, nebo anotací přes stránku nakreslete agentovi, o čem mluvíte.

Vizuální úpravy pracují vždy s konkrétním prvkem. Vyberete nějaký prvek na stránce, uvidíte dostupná nastavení a rovnou je změníte. Úpravy designu a textů se při uložení zapíšou přímo do projektu, bez zapojení agenta a bez spotřebování kreditů.

<Note>
  Vizuální úpravy fungují jen na počítači. Na telefonu ani v úzkém okně prohlížeče se panel nástrojů nezobrazí.
</Note>

## Panel nástrojů

<img src="https://vibewax.be/docs/images/visual-edits-toolbar.png" alt="Panel nástrojů nad náhledem s nástroji Upravit vzhled, Upravit text a Anotace" width="1500" height="1000" />

Nad živým náhledem vašeho projektu se nachází plovoucí panel se třemi nástroji:

- **Upravit vzhled**: Klikněte na libovolný prvek a změňte jeho vzhled, obrázek nebo rozložení.
- **Upravit text**: Upravitelný text se obtáhne, stačí na něj kliknout a přepsat ho.
- **Anotace**: Nakreslete na stránku, o čem mluvíte.

Klávesou **Esc** se kdykoli vrátíte k běžnému procházení náhledu.

### Úpravy vzhledu

Výběrem prvku se v levém panelu otevře nastavení. Co v něm najdete, závisí na tom, jaký typ prvku jste vybrali: u sekce uvidíte velikost, odsazení, pozadí a rámečky i rozvržení vnitřních prvků, u textu nastavení typografie a u obrázku možnost výměny souboru.

<img src="https://vibewax.be/docs/images/visual-edits-element-selected.png" alt="Vybraný nadpis v náhledu a jeho nastavení v levém panelu" width="1500" height="1000" />

Hlavička panelu ukazuje, kde se právě nacházíte – od úrovně **Globální** až po vybraný prvek. Přepínačem motivu si před uložením zkontrolujete světlou i tmavou variantu.

### Úpravy textů

Text, který jde přepsat, se přímo v náhledu obtáhne. Klikněte do něj a pište. Nadpis nebo odstavec takto opravíte nejrychleji, protože výsledek vidíte na stránce hned při psaní.

### Anotace

Někdy je rychlejší agentovi ukázat, co máte na mysli, než to popisovat.

Se zapnutou **Anotací** nakreslete tah přes část stránky, o které mluvíte. Vibewax pozná, které prvky se pod vaším nákresem nacházejí, a přiloží je k vaší další zprávě. Nakreslete, co potřebujete, pak napište zprávu a odešlete ji jako obvykle.

Při kreslení můžete využít tlačítka **Zpět**, **Vpřed** a **Smazat**, která se nacházejí přímo v panelu.

<img src="https://vibewax.be/docs/images/visual-edits-annotation.png" alt="Tah nakreslený kolem nadpisu a odstavce, nad polem pro zprávu štítek Anotace" width="1500" height="1000" />

Anotace slouží k ukazování, ne k zanechávání komentářů. Do projektu se neukládají a kromě odeslané zprávy nic nestojí.

<Note>
  Před anotováním uložte nebo zrušte rozpracované úpravy designu a během kreslení neměňte velikost náhledu. Tahy jsou ukotvené k místům na stránce, takže by změnou velikosti zmizely.
</Note>

## Navigace mezi prvky

Kliknout přesně na to, co chcete, nejde vždy – typicky když se prvky překrývají nebo vnořený prvek zakrývá svůj nadřazený prvek.

Malá lišta nad výběrem umožňuje přejít o úroveň výš nebo šipkami na sousední prvky. Najdete na ní i ikonu kódu, která otevře zdrojový kód prvku na záložce **Kód**, a možnost prvek úplně odstranit.

## Zeptat se AI

U textů a obrázků najdete v panelu tlačítko **Zeptat se AI**, které se hodí pro chvíle, kdy je jednodušší změnu popsat než ji nastavit. Text si můžete nechat přepsat podle svého zadání. U obrázku si můžete nechat upravit ten stávající nebo vygenerovat nový a výsledek si prohlédnete, než ho použijete.

S vybraným prvkem se do režimu úprav přepne i pole pro zprávu v chatu. Cokoli do něj napíšete, platí jen pro aktuální výběr.

<Note>
  **Zeptat se AI** i zprávy odeslané z chatu spotřebovávají kredity jako každý jiný požadavek na AI; cenu u **Zeptat se AI** vidíte předem. Všechno, co v panelu nastavíte ručně, je zdarma.
</Note>

## Uložení změn

Dokud máte neuložené změny, panel nástrojů ukazuje jejich počet a můžete je najednou uložit tlačítkem **Uložit**, nebo zrušit tlačítkem **Zahodit**.

<img src="https://vibewax.be/docs/images/visual-edits-save.png" alt="Panel nástrojů s pěti neuloženými změnami a tlačítky Zahodit a Uložit" width="1500" height="1000" />

Ukládání změn neprobíhá přes agenta, takže je okamžité a nestojí žádné kredity. Pokud je změna náročnější, Vibewax ji předá agentovi v chatu a dále se chová jako běžná zpráva.

## Kdy panel nástrojů není k dispozici

Panel se skryje nebo zešedne ve chvílích, kdy by přímé úpravy nefungovaly:

- **Počkejte, až Vibewax dokončí práci**: Agent právě pracuje na projektu.
- **Čeká se na připravení náhledu**: Náhled se teprve spouští.
- **Zavřete plán, ať můžete upravovat stránku**: V chatu máte otevřený plán.


This page is part of the [Vibewax documentation](https://vibewax.be/docs/cs/welcome/overview).
