> ## 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.
# Exportujte návrhy Flowstepu jako obrázky JPG nebo PNG
> Flowstep podporuje export návrhů jako JPG nebo PNG. Zjistěte, který formát je vhodný pro váš případ, a stáhněte si své obrazovky v několika kliknutích.
Když jste připraveni sdílet nebo předat návrh, Flowstep vám umožní jej exportovat jako statický obrázek — buď JPG nebo PNG. Oba formáty jsou široce podporovány v designových nástrojích, software pro prezentace a prohlížečích, takže můžete své AI-generované návrhy vzít kamkoli je potřebujete.
## Jak exportovat váš návrh
Přejděte na návrh, který chcete exportovat, v aplikaci Flowstep.
Vyhledejte volbu exportu v panelu nástrojů nebo panelu návrhu. Vyberte ji, abyste otevřeli nastavení exportu.
Vyberte buď **JPG** nebo **PNG** v závislosti na vašem případu (viz porovnání níže).
Potvrďte svůj výběr a stáhněte si exportovaný obrázek do zařízení.
## JPG vs PNG: který formát byste měli použít?
| | JPG | PNG |
| - | - | - |
| **Nejlepší pro** | Sdílení náhledů, prezentace, recenze stakeholderů | Návrhy s průhledným pozadím, vysokověrné předání |
| **Velikost souboru** | Menší — rychlejší sdílení přes e-mail nebo zprávy | Větší — zachovává plný detail obrázku |
| **Průhlednost** | Není podporována | Podporována |
| **Kvalita** | Mírně komprimováno | Bezeztrátové — žádná redukce kvality |
Pokud vkládáte svůj návrh do prezentace nebo posílíte rychlý náhled klientovi, JPG je obvykle správná volba. Pokud potřebujete ostré okraje nebo průhledné pozadí — například pro překrytí návrhu na jiný obrázek — použijte PNG.
## Exportní kód
Mimo obrázky tlačítko **Code** exportuje váš návrh jako React + Tailwind kód — zkopírujte úryvek nebo stáhněte celý balíček jako ZIP. Můžete exportovat jednu obrazovku, několik vybraných obrazovek nebo celý soubor najednou. Když exportujete více než jednu obrazovku, každá se stane vlastním souborem komponenty a veškerá navigace, kterou jste nastavili mezi obrazovkami, je zapojena do generovaného kódu, takže exportovaná aplikace je klikací od konce do konce. Balíčky jsou samostatné: obrázky použité v návrhu (včetně těch, které jste připojili v panelu chatu) jsou zahrnuty v mapě `public/assets/` s kódem, který na ně odkazuje místní cestou, takže export běží tak, jak je.
Stažené soubory — obrázky i balíčky kódu — se pojmenovávají podle obrazovky, kterou patří (v případě nepojmenované obrazovky spadá zpět na název souboru), což usnadňuje identifikaci exportů, když pracujete s mnoha obrazovkami.
## Odešlete návrhy do svého agenta pro kódování
Místo stažení souboru můžete poslat návrh přímo AI asistentovi pro kódování. Klikněte na **Send to your coding agent** v panelu nástrojů — nebo otevřete dialog exportu a vyberte stejnou volbu — zkopírujte si připravený prompt pro svého agenta:
> Váš agent čte tyto obrazovky přes MCP a sestavuje je v repozitáři. Vložte tento prompt do Claude, Cursor nebo vašeho preferovaného agenta.
Prompt říká vašemu agentovi, aby načetl obrazovky přes server Flowstep MCP a znovu je vytvořil ve vaší kódu. Můžete odevzdat jednu obrazovku, několik vybraných obrazovek nebo celý soubor najednou — prompt se přizpůsobí tomu, co jste vybrali.
Toto používá server Flowstep MCP, takže nejdřív připojte klienta MCP. Podívejte se na [Přehled serveru MCP](/cs/mcp/overview) pro podporované klienty a [Rychlý start](/cs/mcp/quickstart) pro připojení.
Pokud potřebujete vést svůj návrh do pracovního postupu vektorového editování, zkopírujte ho přímo do Figmy místo toho. Podívejte se na [Zkopírujte návrhy Flowstepu do Figmy okamžitě](/cs/figma-integration).
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.