Google Stitch: Jak postavit appku bez programování za hodinu

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

Krok 1: 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ě.

Krok 2: 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.

Krok 3: 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.

Krok 4: 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.

Krok 5: 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

Krok 6: Export a nasazení

Když jsi spokojený, klikneš na Export. Máš tři možnosti:

1. HTML/CSS — rovnou do projektu nebo pošleš vývojáři
2. React komponenty — pro frontendisty nebo Next.js projekt
3. 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:

1. "CTA tlačítko větší a výraznější, přidej pod něj social proof (počet zákazníků)"
2. "Pricing tabulka — prostřední plán vizuálně zvýrazni jako doporučený"
3. "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.