Článek

Google Stitch: Zkoušel jsem AI design od Googlu. Tady jsou moje dojmy.

16 min čtení
Google Stitch: Zkoušel jsem AI design od Googlu. Tady jsou moje dojmy.

Akcie Figmy spadly o 8 % den poté, co Google spustil Stitch. Tweet oznamující březnový update 2026 nasbíral 15,9 milionu zobrazení. Musel jsem to vyzkoušet sám.

Google Stitch je bezplatný AI nástroj na design uživatelských rozhraní od Google Labs. Pod kapotou běží Gemini 2.5. Popíšete, co chcete, v běžné angličtině a nástroj vygeneruje propracované obrazovky.

Ne wireframy. Ne hrubé skici. Reálné UI, které můžete exportovat do kódu.

Koncept, který za tím stojí, se nazývá „vibe design“ a nutí celý trh designových nástrojů přehodnotit, jak se produkty tvoří.

Jako freelance webový vývojář, který staví WordPress weby a landing pages pro klienty, jsem Google Stitch testoval na reálné práci. Ne pětiminutové demo. Skutečná landing page, scénář redesignu, export do kódu a napojení na programovací AI agenty.

Celkový dojem? 8 z 10. Ale s výhradami.

Níže vás provedu tím, co Stitch skutečně umí, jak vypadá první výstup (spoiler: průměrně), které funkce mě opravdu překvapily, jak funguje pipeline z designu do kódu napojená na vibe coding agenty, jak si stojí vedle v0 a Lovable a kde přesně naráží na limity.

Co je Google Stitch a jak funguje

Tradiční designové nástroje vás nutí začít wireframy, mřížkou a rozhodnutími na úrovni pixelů. Když otevřete Figmu, už děláte stovky mikro-rozhodnutí, aniž byste si odpověděli na tu nejzákladnější otázku: jak by to mělo působit?

Google Stitch tuhle posloupnost otáčí. Popíšete pocit, cíl nebo produktový nápad v běžné angličtině. Stitch vygeneruje reálné obrazovky v high-fidelity kvalitě, ne hrubé skici nebo wireframy. To je vibe design v praxi.

Přeskočíte prázdné plátno a rovnou začínáte s něčím, na co můžete reagovat, co můžete upravovat a iterovat. Když začnete strukturou, jste okamžitě zamčení v rozhodnutích. Když začnete „vibou“, prozkoumáváte svobodně.

Technologie pod kapotou:

  • Standard Mode – Gemini 2.5 Flash. 350 generací měsíčně. Rychlejší, lepší pro rychlé iterace a průzkum.
  • Experimental Mode – Gemini 2.5 Pro. 50 generací měsíčně. Vyšší kvalita, hlubší reasoning, podporuje vstup obrázků (wireframy, screenshoty, skici).

Google přidal i model Gemini 3.1 Pro pro maximální kvalitu reasoningu, schopný pracovat s rozsáhlými design systémy a přísnými designovými pravidly. Nabídka modelů se neustále rozrůstá a každý zpracovává prompty jinak.

Cena? Kompletně zdarma. Žádné placené plány. Žádný subscription. Stačí Google účet na stitch.withgoogle.com. Pro kontext: v0 od Vercelu stojí 20 $/měsíc a Lovable začíná na 25 $/měsíc.

Google Stitch vám dá srovnatelný výchozí bod za nulové náklady.

Co z toho dostanete: reálné obrazovky (ne mockupy) exportovatelné do HTML/CSS, Tailwind CSS, React/JSX a dokonce editovatelné Figma vrstvy. Jeden nástroj pokrývající designový průzkum, prototypování i developer handoff ve stejném workflow. Březnový update 2026 přidal i AI-nativní nekonečné plátno, hlasovou interakci a instant prototypování, ke kterému se dostanu níže.

Zní to moc dobře. Moje zkušenost byla trochu jiná.

Můj první pokus: jak vypadá první generace

Otevřel jsem Stitch, vybral Standard Mode a napsal prompt pro SaaS landing page. Něco, co bych reálně stavěl pro klienta: hero sekce, tři cenové balíčky, reference, CTA. Dostatečně konkrétní, myslel jsem si.

První výstup? Čekal jsem wow. Dostal jsem… průměr.

Layout byl čistý, ale generický. Vypadal jako každá další AI-generovaná landing page, kterou jsem viděl za poslední rok. Struktura tam byla. Duše ne.

Nejdřív jsem si myslel, že Stitch generuje pouze obrázkové rendery bez editovatelného textu. Pak jsem objevil HTML generation mode. Přepnete do něj a získáte skutečný textový obsah, který můžete editovat, exportovat a přímo s ním pracovat. Tohle změnilo všechno.

Co fungovalo na první pokus:

  • Rozumná struktura layoutu
  • Slušná barevná paleta podle mého promptu
  • Mobile-responsive náhled rovnou z výroby

Co ne:

  • Generická vizuální identita (mohlo to být jakékoliv SaaS)
  • Žádná unikátní designová osobnost
  • Výchozí render mode zobrazuje pouze obrázky (HTML mode to řeší)

Druhá a třetí iterace byly výrazně lepší. Doplňující prompty s konkrétním designovým slovníkem („use asymmetric grid“, „brutalist typography“, „high contrast with muted accents“) přinesly znatelně silnější výsledky. U čtvrté generace vypadala landing page opravdu dobře. Ne Figma-level dokonalost, ale silný výchozí bod, který jsem mohl předat dál nebo doupravit.

Každá změna ale znamená kompletní regeneraci. Funguje to podobně jako Figma MCP. Chcete upravit jedno tlačítko? Celá obrazovka se přestaví.

(Direct Edits, ke kterým se dostanu později, tohle částečně řeší pro text a obrázky, ale ne pro změny layoutu.)

Designér Michal Malewicz to vystihl přesně: „Pokud nemáte vkus, skončíte u nafouklého průměru. Průměr z průměru z průměru. Bezpečné, ale nudné a předvídatelné.“

Google Stitch AI je výchozí bod, ne hotový produkt. Představte si ho jako velmi rychlého junior designéra, který potřebuje jasné zadání. Generický prompt se rovná generický výstup. Konkrétní prompt s designovým slovníkem se rovná něco, s čím se dá reálně pracovat.

Nejlepší výsledky vyžadují i určitou zkušenost s designovými nástroji a slušnou znalost CSS. Pokud víte, jaký je rozdíl mezi flexbox a grid, mezi 4px a 8px spacing systémy, vaše prompty budou dramaticky lepší.

Redesign: tohle mě opravdu překvapilo

Nahrál jsem screenshot existujícího klientského rozhraní. Přidal prompt: „Redesign this with a modern, minimal aesthetic. Keep the navigation structure.“

Výsledek mě upřímně zaskočil.

Google Stitch zachoval jádro layoutu a zároveň aplikoval kompletně odlišné vizuální zpracování. Nová typografie, propracovanější spacing, modernizovaná barevná paleta. Všechno v řádu sekund. Pro klientské prezentace („takhle by váš web mohl vypadat“) je tohle neuvěřitelně silné.

Praktický workflow:

  1. Udělejte screenshot existujícího webu
  2. Nahrajte do Experimental Mode
  3. Přidejte redesign prompt s konkrétním stylovým směrem („modern minimal“, „dark mode with neon accents“, „clean SaaS aesthetic“)
  4. Získejte propracovaný koncept v řádu minut

Digitální agentury hlásí 70% úsporu času v počáteční fázi konceptu při tomto přístupu. Některé prezentují tři různé vizuální směry pro klientskou mobilní aplikaci do 48 hodin. Zakladatelé startupů hlásí kompletní tvorbu MVP rozhraní za 3–5 dní se Stitch, což snižuje time-to-market o 60 %.

Není divu. Co mi dřív zabralo půl dne práce ve Figmě, teď zvládnu za deset minut promptování.

Use case je zřejmý: klient zavolá a řekne „chci moderní redesign.“ Místo čtyř hodin ve Figmě před první prezentací strávíte patnáct minut v Google Stitch a na schůzku přijdete se třemi vizuálními směry. Pro rychlou analýzu konkurence můžete dokonce udělat screenshot konkurenčního produktu, nahrát ho a prozkoumat, jak se vizuálně odlišit.

Nicméně redesign funguje pouze z fotek a screenshotů, ne z designů, které jste vytvořili přímo ve Stitch. A návrhy z Experimental Mode nelze exportovat přímo do Figmy, pouze do HTML/CSS. To je reálný problém pro týmy postavené na Figmě.

Pro freelancery, kteří dělají redesign pitche a rychlé klientské koncepty, tahle funkce sama o sobě stojí za váš čas.

Voice Canvas a klíčové funkce Google Stitch, které musíte znát

Kromě základního flow prompt-to-design přinesl Google Stitch v březnovém updatu 2026 několik funkcí, které ho odlišují od každého dalšího AI designového nástroje, který jsem testoval.

Voice Canvas

Mluvíte na plátno. AI agent poslouchá, komentuje váš design v reálném čase a provádí úpravy živě. Řeknete „give me three different menu options“ a vygeneruje je. Řeknete „the spacing feels too tight on mobile“ a upraví to.

Hlasové ovládání v designovém nástroji zní jako gimmick. Není. Agent skutečně vidí, na čem pracujete a na co klikáte. Pokládá upřesňující otázky, poskytuje designové připomínky a provádí změny v reálném čase.

Pro rychlé iterace, zatímco přemýšlíte nahlas, je to překvapivě přirozené. Tady mě Google překvapil nejvíc.

Agent Manager

V podstatě git branching pro kreativní směry. Můžete spustit tři vizuální směry paralelně: moderní minimalismus, živý a hravý styl a korporátní profesionální design. Agent sleduje pokrok napříč všemi směry současně, každý staví na stejném projektovém kontextu.

Když náklady na prozkoumávání klesnou téměř k nule, kvalita finálního výstupu stoupne. Můžete si dovolit zkoušet odvážné směry vedle bezpečných sázek. Smyčka diverge-converge, která designovému týmu zabere týden, proběhne za jedno odpoledne.

Direct Edits

Ruční editace textu, výměna obrázků a úpravy spacingu přímo na plátně. Žádné opětovné promptování. Žádné spálené generační kredity. Dvakrát klikněte na obrazovku, změňte, co potřebujete.

Ušetříte kredity na větší strukturální změny, kde AI generace opravdu hraje roli.

Instant Prototypes

Klikněte Play. Stitch automaticky detekuje pořadí obrazovek a přidá propojení mezi nimi. Kliknete na tlačítko Login v náhledu a Stitch vygeneruje další logickou obrazovku v uživatelském flow.

Žádné ruční propojování. Žádné kreslení šipek mezi frames jako ve Figma prototypování.

Pro rychlé klientské dema nebo uživatelské testování tohle odstraňuje celý jeden krok z procesu.

Responsive Preview

Přepínejte mezi zobrazeními na různých zařízeních a okamžitě uvidíte, jak se design přizpůsobuje různým velikostem obrazovek. Pro rychlou kontrolu responsivity před exportem je to přesně to, co potřebujete.

Export a integrace s vibe coding agenty

Tady se Google Stitch stává zajímavým pro vývojáře. Pipeline z designu do kódu je plynulejší než cokoliv, co jsem používal s Figmou.

Exportní formáty:

  • HTML/CSS (čistý markup)
  • Tailwind CSS
  • React/JSX komponenty
  • Figma (editovatelné vrstvy se správným Auto Layout, pouze Standard Mode)

DESIGN.md je formát, ze kterého jsem nejvíc nadšený. Je to přenosný markdown soubor, který slouží jako jediný zdroj pravdy pro váš design systém: barvy s hex kódy, typografická škála, spacing tokeny, vzory komponent – vše v přirozeném jazyce. Jeden soubor čitelný lidmi i AI agenty.

Předložte ho coding agentovi a ten okamžitě zná celý váš vizuální jazyk. Vygenerujete ho pomocí design-md skillu uvnitř Stitch a zůstane synchronizovaný s vaším projektem.

MCP server integrace je místo, kde se vibe design potkává s vibe codingem. Připojte Stitch ke Claude Code, Cursoru nebo Google Antigravity IDE přes Model Context Protocol. Řekněte svému coding agentovi „implement the dashboard from our Stitch project“ a ten si automaticky stáhne designový kontext.

Žádné ruční kopírování. Žádné odkazování na screenshoty. Přímý přístup.

Google v březnu 2026 také vydal TypeScript SDK, které vývojářům umožňuje programaticky generovat UI obrazovky z textových promptů a extrahovat HTML a screenshoty. Pokud chcete zabudovat Stitch do svého vlastního toolchainu, API je k dispozici.

Moje zkušenost: pipeline ze Stitch do kódu funguje dobře. Znatelně lépe než workflow Figma-to-code, který jsem dosud používal. Samotný Figma export je výborný. Vložíte design do Figmy a dostanete čisté, editovatelné vrstvy se správnou strukturou. U starého Figma workflow exportujete design a pak ho ručně překládáte do komponent, přičemž se dohadujete nad spacingem a barvami.

Se Stitch generuje AI nástroj na design výstup, který AI coding agenti mohou nativně zpracovat. Design a kód sdílejí stejný zdroj. Pro větší firmy, kde je handoff mezi designérem a vývojářem často chaotický a časově náročný, tohle samo o sobě může stačit jako důvod k adopci Google Stitch do workflow.

Doporučený workflow:

  1. Prozkoumávejte a iterujte ve Stitch
  2. Dopilujte ve Figmě, pokud je potřeba (pro pixel-perfect práci)
  3. Exportujte DESIGN.md
  4. Stavte s coding agentem přes MCP

Google Stitch vs v0 vs Lovable: kdy co použít

Tři nástroje, tři různé úlohy. Zmatek je pochopitelný, takže tady je jasný rámec.

Google Stitch = designový průzkum a ideace. Zdarma. Nejlepší pro: „Jak by to mohlo vypadat?“ Popíšete vibu, vygeneruje obrazovky. Žádné spouštění kódu, žádný backend, žádný deployment.

v0 by Vercel = produkční React komponenty. 20 $/měsíc. Nejlepší pro: „Potřebuji funkční komponentu do své aplikace.“ Generuje shadcn/ui komponenty, které přímo zapadnou do existujících Next.js codebases. Developer-first.

Lovable = full-stack aplikace s backendem. 25 $/měsíc. Nejlepší pro: „Chci funkční aplikaci, aniž bych psal kód.“ Databáze, autentizace, deployment v ceně. Přátelský i pro non-developery.

Kdy je kombinovat: prozkoumávejte ve Stitch, generujte produkční komponenty v v0, stavte kompletní aplikace v Lovable. Každý nástroj vlastní jinou fázi pipeline. Doplňují se, nekonkurují si. Doporučený workflow pro rok 2026 je používat Stitch pro designový průzkum a finalizované návrhy pak předávat do v0 pro čisté, production-ready React komponenty v shadcn/ui.

Pro freelancery je Stitch vstupní bod. Zdarma a rychle – není důvod nezačít tady. Pokud koncept u klienta zarezonuje, přesunete se do v0 nebo ho předáte coding agentovi přes MCP.

Indie vývojář Cagatay Ulusoy to shrnul výstižně: „Google Stitch je super užitečný pro indie vývojáře jako jsem já, kteří mají inovativní nápady, zvládnou naprogramovat byznys logiku, ale nevědí, jak to prezentovat uživatelům. Nepotřebujeme pixel-perfect řešení, stačí nám dostatečně dobrý základ, na kterém můžeme iterovat.“

A Figma? Akcie spadly o 8 %, pak o dalších 4 %. Celkově je akcie v roce 2026 dole asi o 35 %, taženě obavami z AI. Google Stitch nenahrazuje Figmu. Ale mění to, k čemu Figmu potřebujete.

Figma zůstává nezbytná pro detailní dolaďování, týmovou spolupráci a design systémy ve velkém měřítku. Fáze průzkumu? Ta se přesouvá k AI designovým nástrojům.

Co nefunguje: limity, na které narazíte

Žádná Google Stitch recenze není upřímná bez limitací. Tady je to, na co jsem narazil, seskupené podle závažnosti.

  • Přístupnost: Nesplňuje základní WCAG požadavky. Problémy s kontrastem barev, příliš malé dotykové cíle. Každý design potřebuje manuální kontrolu přístupnosti před spuštěním.
  • Komplexní layouty: Má problém s admin dashboardy, vnořenými tabulkami, rozhraními s více sidebary. Nejlépe funguje pro jednoduché až středně složité obrazovky.
  • Bez spolupráce: Pouze pro jednoho uživatele. Agent Manager umožňuje paralelní průzkum, ale dva lidé nemohou editovat stejný design současně. Na úroveň Figma teamworku to nemá.
  • Bez animací: Čistě vizuální layout nástroj. Žádné přechody, žádné mikro-interakce, žádná stavová logika.
  • Pouze anglické prompty: České prompty nejsou podporované. UI musíte popisovat v angličtině. Dokumentace explicitně uvádí „describe your UI in plain English“.
  • Háček Experimental Mode: Vyšší kvalita výstupu, ale žádný přímý Figma export, pomalejší generování a občasné nekonzistence. Vizuální téma může mezi generacemi „driftovat“.
  • Riziko uniformity: Vibe design může produkovat „nafouklý průměr“, pokud vašim promptům chybí specifičnost. Bez silného designového vkusu výstupy konvergují ke stejným bezpečným vzorům.

Na bezplatný nástroj z Google Labs? Tyto limity akceptuji. Většina se zlepší s updaty a Google shipuje rychle. Mezera v přístupnosti je nejznepokojivější pro produkční nasazení a je to něco, co by Google měl prioritizovat.

Nicméně designér budoucnosti je méně pixel-pusher a více designový stratég. Nástroje jako Stitch zkracují čas mezi „pojďme prozkoumat“ a „tady je pět směrů, na které můžete reagovat“ z dnů na minuty. Ten posun je reálný, i s těmito omezeními.

Často kladené dotazy ke Google Stitch

Kolik stojí Google Stitch?

Kompletně zdarma. 350 generací měsíčně v Standard Mode, 50 měsíčně v Experimental Mode. Žádné placené plány k březnu 2026.

Nahradí Google Stitch Figmu?

Ne. Stitch je pro rychlý designový průzkum. Figma je pro detailní dolaďování, týmovou spolupráci a design systémy ve velkém měřítku. Doporučený workflow: prozkoumávejte ve Stitch, dolaďujte ve Figmě.

Podporuje Stitch české prompty?

Zatím ne. Prompty musíte psát v angličtině. Dokumentace uvádí „describe your UI in plain English“.

Mohu exportovat návrhy ze Stitch do Figmy?

Návrhy ze Standard Mode se exportují přímo jako editovatelné Figma vrstvy přes tlačítko „Copy to Figma“. Návrhy z Experimental Mode nelze exportovat do Figmy přímo, pouze do HTML/CSS.

Pro koho je Google Stitch nejlepší?

Indie vývojáře, kteří staví UI bez designérských dovedností. Zakladatele startupů, kteří prototypují MVP. Freelancery, kteří rychle tvoří klientské koncepty. Agentury prezentující více vizuálních směrů. Backend vývojáře, kteří staví interní nástroje bez závislosti na designérovi.

Čtěte dále