Google Stitch: Jak postavit appku bez programování za hodinu
Google Stitch je bezplatný AI nástroj od Googlu, který z textového popisu vygeneruje UI aplikace s exportovatelným kódem. Ukážu ti, jak ho použít krok za krokem — od prvního promptu až po export HTML.
Obsah článku 5 sekcí
V kostce
- Google Stitch je bezplatný AI nástroj z Google Labs, který z textového popisu nebo náčrtu vygeneruje UI aplikace; od března 2026 umí i hlasový canvas.
- Standard mód (Gemini 2.5 Flash) dává 350 generací měsíčně zdarma, Experimental (Gemini 2.5 Pro) 50 generací a umí přetvořit nahraný náčrt.
- Čím konkrétnější prompt, tím lepší design: uveď platformu, styl, klíčové obrazovky a navigaci, a pak iteruj dalšími pokyny v chatu.
- Hotový návrh exportuješ jako HTML/CSS, React komponenty nebo do Figmy; landing page pro SaaS autor zvládl za 22 minut.
Chceš vytvořit aplikaci, ale nebaví tě učit se Figma, HTML a CSS od nuly? Google Stitch ti umožní navrhnout plnohodnotné UI za hodinu — jen pomocí textových pokynů nebo rukou nakresleného náčrtu.
Nástroj je zdarma, funguje v prohlížeči a za návrhem stojí Gemini 2.5. Od března 2026 přibyl i hlasový canvas — doslova mluvíš s návrhovým nástrojem a ten ti v reálném čase upravuje design.
Co je Google Stitch a proč by tě měl zajímat
Stitch je AI nástroj z Google Labs, který spustili na Google I/O 2025. Základní myšlenka: napíšeš, co chceš postavit, a Stitch vygeneruje kompletní UI — rozložení obrazovek, komponenty, barvy, typografii.
Na výstupu dostaneš:
- HTML, CSS nebo React kód připravený ke stažení
- Export do Figmy — předáš designérovi nebo rovnou nasadíš
- Prototyp pro testování s uživateli nebo prezentaci investorům
Stitch není editor jako Figma, kde taháš prvky myší. Je to AI agent pro design — říkáš mu, co chceš, a on to navrhne. Iteruješ dalšími pokyny.
Dva módy:
- Standard (Gemini 2.5 Flash) — rychlý, 350 generací měsíčně zdarma
- Experimental (Gemini 2.5 Pro) — přesnější, 50 generací měsíčně zdarma
Krok za krokem: Postav první appku v Google Stitch
Přihlášení a první projekt
Jdi na stitch.withgoogle.com. Přihlásíš se Google účtem — žádná instalace, žádná registrace navíc. Klikneš na New Project a jsi na plátně.
Napiš první prompt
Tady je klíč k dobrým výsledkům — čím konkrétnější prompt, tím lepší design.
Špatný prompt:
"Udělej aplikaci pro sledování úkolů"
Dobrý prompt:
"Mobilní aplikace pro sledování denních úkolů. Dark mode, minimalistický design. Hlavní obrazovka: seznam úkolů s checkboxy, prioritou (barva) a časem. Plovoucí tlačítko pro přidání úkolu. Spodní navigace: Dnes, Projekty, Nastavení."
Čím víc kontextu dáš — cílová skupina, platforma (web/mobil), styl, klíčové obrazovky — tím méně iterací budeš potřebovat.
Generuj a prohlédni výstup
Stitch vygeneruje náhled. Nové generování od března 2026 vytvoří až 5 obrazovek najednou. Vidíš layout, komponenty, navigaci.
Tohle je iterativní fáze. Přidáš pokyn do chatu vedle plátna:
"Přidej na hlavní obrazovku filtr podle kategorie. Karty úkolů ať mají jemnější shadow."
Stitch okamžitě upraví design. Žádné klikání v editoru — jen text.
Hlasový canvas (nová funkce, březen 2026)
Přepni na Voice Canvas v pravém horním rohu. Mluv přímo k nástroji:
"Zkus jiný font pro nadpisy, něco modernějšího. A přidej prázdný stav pro případ, kdy uživatel nemá žádné úkoly."
Stitch ti v reálném čase nabídne kritiku designu, navrhne alternativy a rovnou aplikuje změny. Je to jako mít designéra po ruce — ale bez hodinové sazby.
Experimental mode pro složitější projekty
Máš náčrt na papíře nebo screenshot existující aplikace, kterou chceš předělat? Přepni na Experimental Mode (přepínač nahoře). Nahraj obrázek a Stitch ho přetvoří do high-fidelity designu.
Hodí se pro:
- Převod drátových modelů (wireframes) do reálného UI
- Redesign stávajících aplikací
- Zpracování skic od product ownera
Export a nasazení
Když jsi spokojený, klikneš na Export. Máš tři možnosti:
- HTML/CSS — rovnou do projektu nebo pošleš vývojáři
- React komponenty — pro frontendisty nebo Next.js projekt
- Export do Figmy — pokud pracuješ se designovým týmem
Pro rychlý prototyp stačí stáhnout HTML soubor a otevřít v prohlížeči. Nebo zkopírovat kód do AI coding nástroje jako Claude Code nebo Cursor a pokračovat v budování logiky aplikace.
Praktický příklad: Landing page pro SaaS za 20 minut
Zkusím konkrétní use case, který mi fungoval.
Prompt:
"Landing page pro B2B SaaS nástroj pro správu faktur. Target: malé firmy, majitelé 30–50 let. Hero sekce s headline + CTA tlačítkem, sekce s 3 výhodami, pricing tabulka (3 plány), jednoduchý footer. Modrá a bílá, profesionální vzhled."
Výsledek po první generaci: 80 % použitelný layout. Pak jsem přidal 3 follow-up pokyny:
- "CTA tlačítko větší a výraznější, přidej pod něj social proof (počet zákazníků)"
- "Pricing tabulka — prostřední plán vizuálně zvýrazni jako doporučený"
- "Footer přidej sekci s linky na dokumentaci a podporu"
Celkový čas: 22 minut. Exportoval jsem HTML, hodil do Claude Code a za dalších 30 minut jsem přidal základní logiku formuláře.
Kdy Stitch použít a kdy ne
Stitch funguje skvěle pro:
- Rychlé prototypy a MVP návrhy
- Prezentace klientům nebo investorům
- Převod nápadu do vizuální podoby bez Figmy
- Vibe coding — kombinace AI designu + AI kódování
Stitch nestačí pro:
- Komplexní design systémy s desítkami komponent
- Pixel-perfect finální produkční design
- Animace a pokročilé interakce
- Přístupnost (accessibility) — musíš kontrolovat ručně
Nejlepší workflow: Stitch pro první fázi návrhu → Claude Code nebo Cursor pro implementaci logiky → vývojář pro produkční finální verzi.
Shrnutí
Google Stitch je zatím jeden z nejpřímočařejších způsobů, jak proměnit nápad v aplikaci bez znalosti designových nástrojů. Je zdarma, funguje okamžitě a nový hlasový canvas z března 2026 posouvá interakci na další úroveň.
Pokud chceš rychle otestovat nápad, připravit prototyp nebo prostě neplatit Figmu, zkus to. Výsledky Standard módu jsou v mnoha případech publikovatelné bez dalších úprav.
Jsi zvyklý na vibe coding s Claude Code nebo Cursorem? Stitch je ideální první krok — navrh UI tam, kód buduj v IDE.
Claude AI zdarma 
OpenCode zdarma 
Cursor zdarma 
Google Stitch zdarma 
Gemini zdarma 
Replit zdarma 
