Google Stitch + Claude Code: návrh webu bez „vzhledu AI“

Další pokyny pro práci s Ailootem najdete v dokumentaci.

Proč weby vytvořené v Claude Code vypadají jako „AI slop“?#

V popsaném praktickém případě začala práce na domovské stránce aplikace pro volání prázdným projektem a požadavkem, aby Claude Code vytvořil vstupní stránku. Výsledek byl klasický: slate-950 jako pozadí, indigo-500 jako akcent, tučné písmo Inter v nadpisu a pod ním tři stejné karty se stíny. Stejné rozvržení jako v prvním v0, prvním Lovable, první generaci ChatGPT. Přepsal jsem zadání pětkrát, přidal „prémiové“, „ne jako všichni ostatní“, „moderní“ – stránka stále vypadala jako šablona WordPressu z roku 2015.

Logika je jednoduchá: bez omezení model zvolí statistický průměr toho, co viděl. A viděl milion stejných vstupních stránek vytvořených v Bootstrapu a Tailwindu. Chcete-li výsledek, který nebude průměrný, musíte agentovi dát konkrétní údaje: jaké barvy, jaká písma, jaké rozestupy a které komponenty považovat za vzorové. Pro model znamená slovo „krásný“ „medián roku 2020“. Přídavná jména výsledek neposunou; potřebujete přesné parametry.

Stejnou mezeru jsem rozebral v návodu k hotovým designovým systémům s Refero – tam převezmete styl někoho jiného (Apple, Linear, Stripe) a předáte ho agentovi. Google Stitch k tomu přistupuje z druhé strany: místo přebírání cizího stylu si vygenerujete vlastní – podle svého popisu.

Co je Google Stitch a jak pomáhá?#

Stitch je experiment od Google Labs, představený na konferenci Google I/O v květnu 2025. Do pole zadání napíšete, jak má aplikace vypadat (nebo nahrajete snímek obrazovky, náčrt na tabuli či stránku konkurence) a Stitch na nekonečném plátně vygeneruje obrazovky rozhraní. V pozadí používá Gemini 2.5 Pro a Flash a v prosinci 2025 přibyl Gemini 3 pro propracovanější rozvržení.

Co se nám hodí:

• Vibe Design – popište slovy atmosféru („minimalistické a prémiové, jako Stripe“) a získejte několik vizuálních směrů, ze kterých si můžete vybrat.
• Reference – nahrajte obrázek z Dribbble nebo Pinterestu; Stitch zachová jeho rozvržení a uplatní vaše požadavky.
• Export ve třech formátech: do Figmy (s upravitelnými vrstvami), jako čisté HTML/CSS a přes MCP – přímo do agenta.

Rozdíl oproti hotovým stylům, jako je Refero, je důležitý. Refero je knihovna designových systémů, které už byly získány ze skutečných webů; převezmete existující značku. Stitch vytvoří systém pro váš produkt od základu. Nemáte referenční design a chcete vlastní vzhled? To je Stitch. Potřebujete rychle použít styl známého produktu? Refero. Každý řeší jiný krok a dobře se doplňují.

Claude má také vestavěný režim designu; věnoval jsem mu návod na Claude Design. Stitch se liší tím, že poskytuje hotový systém v externím souboru, který agent čte pokaždé, když něco sestavuje.

Požadavky na dostupnost Google Stitch#

Stitch není dostupný ve všech zemích: zástupce Googlu na oficiálním fóru napsal, že služba je dostupná uživatelům starším 18 let ve 212 zemích a že se seznam rozšiřuje. V omezených oblastech se při návštěvě zobrazí právě jedna zpráva: „Je nám líto, Stitch není dostupný.“

Potřebujete účet Google – přihlásit se lze pouze jeho prostřednictvím.

Když autorizace Stitch MCP blokuje postup v Claude Code#

Na internetu je kolem připojování MCP spousta nesmyslů a polovina návodů jednoduše nefunguje. Mnoho příruček například (včetně populárních anglických) doporučuje nainstalovat balíček @google/stitch-mcp příkazem npx -y @google/stitch-mcp@latest. Ten balíček neexistuje – npm vrací 404. Tento příkaz nekopírujte; ztratíte čas. Ze stejného důvodu vybírejte integrace, jejichž instalace a ověření na skutečném úkolu byly potvrzeny.

Popsaný pokus se vzdáleným MCP skončil v Claude Code chybou Incompatible auth server. Pozorovaná chyba není funkčním receptem ani důkazem selhání všech současných konfigurací. Nepokračujte neurčeným krokem „připojit MCP“: do ověření přesné kompatibilní konfigurace použijte ruční export HTML/CSS níže. Jde o registrovanou chybu Claude Code, uzavřenou se stavem „not planned“.

Funkční nastavení pro Claude Code používá místní proxy od Davida Easta (je v týmu Google DevRel). Proxy běží na vašem počítači a obchází problém s autorizací.

Nejprve vytvořte klíč. Ve Stitch klikněte na svůj avatar → Stitch settings → část API key → Create key → zkopírujte ho.

Potom přidejte proxy do Claude Code jedním příkazem:

bash

Vložte klíč do proměnné prostředí (nejjednodušší způsob – bez trápení s konzolí Googlu a tokeny, které vyprší):

export STITCH_API_KEY="your-key-from-stitch-settings"

Pokud dáváte přednost ručnímu nastavení, vypadá takto (v souboru ~/.claude.json nebo .mcp.json v kořenovém adresáři projektu):

json

Restartujte Claude Code a ověřte, že připojení funguje:

claude mcp list

Postup se Stitch a DESIGN.md je kontextové inženýrství v nejčistší podobě: do kontextu Claude předem vložíte přesné tokeny a on podle nich sestavuje vše bez „odhadování, co jsem myslel“. Celá metodika spojuje všechny tři pilíře – klon AI, Druhý mozek a kontextové inženýrství. Právě tato kombinace mění Claude z „asistenta, který hádá“ na nástroj produkující předvídatelné výsledky.

Co je DESIGN.md a proč je lepší než snímek obrazovky?#

Tady je důležitý detail, který většina návodů uvádí špatně: ve Stitch není tlačítko „Export DESIGN.md“. Soubor sestaví sám agent. Podle oficiálního codelabu Googlu zní zadání zhruba takto: „projdi přes Stitch MCP projekt, vytáhni paletu a typografii a sestav z nich DESIGN.md“. Codelab předpokládá funkční připojení MCP. Ve zde uvedené ruční cestě Claude Code místo toho přečte exportované HTML/CSS a vytvoří strukturovaný soubor v kořeni; chybějící tokeny musí označit místo odhadování z obrázku.

DESIGN.md obsahuje konkrétní údaje místo přídavných jmen:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Aby Claude Code soubor používal, odkažte na něj v CLAUDE.md (například řádkem „Use the design of all components from DESIGN.md“) – agent pak v každé relaci načte stejné tokeny. Tlačítko z pondělí a karta z pátku budou ve stejném stylu, protože existuje jediný zdroj pravdy.

V této sestavě spolupracují dvě místní reference. DESIGN.md uchovává pravidla barev, typografie, rozestupů a komponent. Exportované HTML/CSS Stitch a podklady dodávají konkrétní rozvržení obrazovky. MCP je volitelné a není předpokladem této cesty.

Jak vytvořit web: úplná cesta od textu k designu?#

Tady je celý postup v pořadí:

1. Otevřete Stitch. Ověřte dostupnost ve své zemi a přihlaste se vlastním účtem Google na stitch.withgoogle.com.
2. Popište produkt. Uveďte obrazovky a cestu uživatele; navržený seznam potvrďte nebo upravte.
3. Přidejte referenci. Nahrajte zamýšlený snímek a určete barvy, typografii a rozvržení k zachování.
4. Vygenerujte a dolaďte. Vyberte jednu obrazovku a před rozšířením ji upravte.
5. Vybranou obrazovku exportujte jako HTML/CSS. Export a potřebné podklady uložte do referenční složky projektu. Místně otevřete HTML a ověřte vybranou obrazovku; samotný snímek přesné hodnoty CSS nenese.
6. Sestavte DESIGN.md z místního exportu. Nechte Claude Code přečíst HTML/CSS a zaznamenat skutečné barvy, písma, rozestupy, rozvržení a komponenty. Chybějící hodnoty vypište k rozhodnutí. Tato cesta nepotřebuje API klíč Stitch ani autorizaci MCP.
7. Vytvořte a ověřte jednu stránku. Zadejte následující pokyny se skutečnou cestou exportu:

Přečti export HTML/CSS Stitch v refs/stitch-export/. Vytvoř DESIGN.md
v kořeni projektu z hodnot přítomných v těchto souborech.
Chybějící hodnoty označ, nevymýšlej je.

Vytvoř jednu stránku podle DESIGN.md a místního exportu Stitch.
Komponenty ponech modulární. Vykreslenou stránku porovnej s exportem
v šířce počítače i mobilu, pak zvlášť ověř navigaci a interaktivní stavy.

Od této chvíle se o vše postará Claude Code: přecházení mezi obrazovkami, responzivita podle hraničních bodů v DESIGN.md, animace a interaktivita. Stitch poskytuje statické obrazovky a klikací prototyp, ale nevytváří funkční logiku ani nezveřejňuje web na hostingu – to je úkol agenta.

Jak se zbavit „vzhledu AI“: co přesně změnit?#

Tady jsou konkrétní místa, kde se web přestane prozrazovat:

• Barva. Fialová indigo-500 je první prozrazující znak. Nastavte primární a akcentní barvy jako přesné hexadecimální hodnoty přímo v DESIGN.md. Každý agent si „modrou značky“ vyloží po svém.
• Písmo. Inter je nejbezpečnější, a proto nejrozpoznatelnější „písmo AI“. Vyberte výraznou kombinaci: například bezpatkové písmo pro běžný text a osobité písmo pro nadpisy. Nastavte ji v designu Stitch a zaznamenejte v DESIGN.md.
• Reference místo přídavného jména. Model si „udělej to moderní“ vyloží jako „medián roku 2020“. Pokyn „použij rozvržení z této stránky“ se skutečným snímkem obrazovky bere doslova. Nahrajte do Stitch referenční obrázek; slovy nelze předat vkus.
• Rozestupy a vzdušnost. Šablonové rozvržení prozrazují stísněné, stejné bloky. Nastavte v DESIGN.md velkorysou škálu rozestupů – agent uspořádá prvky volněji.

Konkrétnost vítězí nad subjektivními přídavnými jmény. Stitch je v podstatě stroj, který převádí vaše „chci to takhle“ na přesné tokeny, takže agent už nemusí nic odhadovat.

Google Stitch nebo alternativy: co si vybrat?#

Porovnal jsem nástroje podle hledisek, která jsou při vibe codingu s omezeným rozpočtem skutečně důležitá:

Pracovní postup, který používám já: Stitch k objevování designu → Claude Code k tvorbě a logice. Pro vibe codera s omezeným rozpočtem vítězí Stitch, protože je zdarma a vytvoří pro váš produkt jedinečný vzhled od základu. Chcete-li porozumět celé nabídce nástrojů na trhu, popsal jsem je v hlavním článku co používat ke kódování v roce 2026.

Kde Google Stitch selhává: jaká jsou jeho omezení?#

Tady je upřímný seznam, aby vás nezklamal už třetí obrazovkou:

• Pouze rozhraní. Žádný backend, databáze ani publikování na hosting. K tomu potřebujete Claude Code (nebo Lovable, pokud chcete mít vše na jednom místě).
• Omezené úpravy přímo v nástroji. Jednotlivý prvek nelze přesunout myší – lze ho změnit pouze pomocí zadání a znovu vygenerovat. Není to Figma.
• Nedeterministické výsledky. Stejné zadání vytváří různé výsledky. Hodí se to k prozkoumávání nápadů, ale překáží, když potřebujete opakovatelné výstupy.
• Kvóta. Dosáhnete limitu bezplatných generování (aktuálně denního); další si nemůžete koupit, takže musíte počkat na obnovení kvóty. Přesný počet se liší, proto zkontrolujte rozhraní.
• Experimentální status. Google Labs nezaručuje dlouhodobou podporu. Služba se může změnit nebo skončit.
• Geografické omezení a problém s autorizací MCP v Claude Code, zmíněné v částech o dostupnosti a nastavení.

Stitch se nehodí, pokud máte přísný průvodce značkou pro mnoho projektů, pokud už je design ve Figmě nebo pokud potřebujete aplikaci s backendem, která je již zveřejněná.

Co dál?#

Sestavte co nejmenší pracovní postup s jednou obrazovkou: popište produkt ve Stitch, vygenerujte domovskou stránku, exportujte HTML/CSS a požádejte Claude Code o DESIGN.md i stránku z těchto místních souborů. Jakmile uvidíte, že fialový gradient sám zmizel, půjde to dál snáz.

Navrhování se Stitch je jednou z technik kontextového inženýrství. Celý systém spojuje klon AI, Druhý mozek a kontextové inženýrství, aby Claude mohl vycházet z připravených pravidel a kontextu.

Klon AI, Druhý mozek a kontextové inženýrství jsou pro produkt důležité. Navrhování se Stitch je prvním stavebním kamenem této kombinace.

Další práci s modely můžete zkusit na Ailoot.