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

# Generujte UI obrazovky z textových promptů s Flowstepem

> Používejte Flowstep k vygenerování jedné nebo až 6 obrazovek najednou z jednoho textového promptu — ideální pro rychlou UI ideaci a prozkoumávání úplných toků.

<iframe src="https://www.youtube.com/embed/hHNwjKz_264" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

Flowstep generuje UI obrazovky z přirozených jazykových promptů, což vám umožní přejít od nápadu k vizuálnímu návrhu v sekundách. Ať potřebujete jednu obrazovku k ověření konceptu nebo úplnou sadu obrazovek pokrývajících celou cestu uživatele, ke spuštění stačí dobře napsaný prompt.

## Vygenerujte návrh

<Steps>
  <Step title="Otevřete nový projekt">
    Ze svého Flowstep ovládacího panelu vytvořte nový projekt nebo otevřete existující, do kterého chcete přidat obrazovky.
  </Step>

  <Step title="Napište svůj prompt">
    Zadejte popis obrazovky nebo obrazovek, které chcete. Buďte konkrétní ohledně typu aplikace, cíle uživatele a obsahu, který očekáváte.
  </Step>

  <Step title="Určete, kolik obrazovek chcete">
    Ve výchozím nastavení Flowstep generuje jednu obrazovku. Pokud chcete více obrazovek, řekněte to explicitně v promptu — Flowstep může z jednoho promptu vygenerovat až 6 obrazovek.
  </Step>

  <Step title="Vygenerujte">
    Odešlete svůj prompt. Flowstep vytvoří vaše obrazovky a zobrazí je v editoru, připravené k prohlédnutí nebo úpravě.
  </Step>
</Steps>

## Jedna obrazovka vs. více obrazovek

Z jednoho promptu můžete vygenerovat buď jednu obrazovku nebo až 6 obrazovek. Oba přístupy jsou vhodné pro různé fáze návrhové práce.

* **Jedna obrazovka** — nejlepší pro prozkoumávání konkrétního stavu UI, komponenty nebo zaměřeného konceptu.
* **Více obrazovek** — nejlepší pro mapování toků, porovnávání možností rozložení nebo rychlé pokrytí celé cesty uživatele.

Pokud chcete více obrazovek, buďte v promptu explicitní. Flowstep používá k rozhodnutí, kolik obrazovek má vytvořit, konkrétní formulaci promptu, takže nejasné prompty obvykle vrátí jednu obrazovku. Generované obrazovky jsou pojmenovány **Screen 1**, **Screen 2** a tak dále — používejte tato jména k odkazování na konkrétní obrazovku v následujících promptech.

## Další způsoby, jak zadávat prompty

Text není jediným vstupem. Můžete také:

* **Připojit soubory** — přidejte obrázky (JPG, PNG, WEBP) nebo dokumenty (PDF, MD, TXT) do 3 MB za kus k promptu pomocí přetažení, výběru souboru nebo vkládáním. V promptu odkazujte na připojený obrázek a Flowstep jej zahrne do vygenerovaných obrazovek. Viz [Použití referencí](/cs/design-references).
* **Diktujte svůj prompt** — klikněte na tlačítko mikrofonu v panelu promptu (nebo stiskněte **Cmd+Shift+V** na Macu, **Ctrl+Shift+V** na Windows) a mluvte až 60 sekund. Přepis se připojí k tomu, co jste již zadali.
* **Nechte Flowstep prohledat web** — když to váš prompt vyžaduje (například "naklonujte stránku s cenami Stripe"), Flowstep může prohledat web a přečíst si značku stránky — barvy, písma, logo, UI komponenty — a použít je v generovaných obrazovkách. Flowstep se rozhoduje sám, zda provádět výzkum, takže se nemusí spustit na každý prompt; pamatujte, že vytvořené webové stránky používají různé obrázky a navigaci než originál.
* **Nastavte designové pokyny** — definujte trvalá pravidla stylu, která se aplikují na každou generaci v souboru. Viz [Designové pokyny](/cs/design-guidelines).

## Psaní efektivních promptů

<Tip>
  **Příklad promptu pro jednu obrazovku:** "Navrhněte přihlašovací obrazovku na mobilu pro aplikaci sledování fitness s poli pro e-mail a heslo, tlačítkem pro přihlášení a odkazem na zapomenuté heslo."
</Tip>

<Tip>
  **Příklad promptu pro více obrazovek:** "Vygenerujte více obrazovek pro onboarding tok aplikace na doručování jídla — pokryjte výběr preferencí kuchyně, zadání adresy doručení a potvrzení první objednávky."
</Tip>

<Tip>
  **Příklad promptu na úplnou cestu:** "Pokryjte celou cestu uživatele v aplikaci pro hlášení výdajů, od odeslání účtenky k schválení manažerem."
</Tip>

Při psaní promptů mějte na paměti tyto principy:

* Pojmenujte platformu (mobilní, desktop, tablet), aby Flowstep správně nastavil velikost obrazovek.
* Popište cíl uživatele, ne jen UI prvky — Flowstep odvodí rozložení ze záměru.
* Zahrňte klíčový obsah, jako jsou popisky, akce nebo data, pokud jsou důležité pro návrh.
* Používejte fráze jako "vygenerujte více obrazovek" nebo "pokryjte celou cestu uživatele" k vyvolání výstupu s více obrazovkami.