# Google Stitch + Claude Code: návrh webu bez „vzhledu AI“ > Úplný ruční postup Google Stitch a Claude Code: export HTML/CSS, DESIGN.md z místních souborů, vytvoření a ověření stránky i řešení neověřené autorizace MCP. Source: https://ailoot.ai/blog/cs/google-stitch-claude-code-design/ Canonical: https://ailoot.ai/blog/cs/google-stitch-claude-code-design/ Language: cs Publisher: Ailoot (https://ailoot.ai/) Translation: guide-106 Revision: sha256-6f4488b77a26ed5b9e662326e2db84d56e3827749c645c828fb59ec7a5987b40
Hlavní poznatek Claude Code píše logiku výborně, ale jeho design ho prozradí na první pohled: tmavé pozadí, fialový gradient, písmo Inter, tři stejné bloky. Google Stitch vytvoří design z textového popisu, poskytne barevné a typografické tokeny v souboru DESIGN.md a Claude Code z tohoto souboru sestaví web. Tady ukazuji celý postup krok za krokem – a kde selhává.
Další pokyny pro práci s Ailootem najdete v [dokumentaci](https://ailoot.ai/docs/). ## Proč weby vytvořené v Claude Code vypadají jako „AI slop“?
Hlavní poznatek Bez designového systému Claude Code vykreslí průměrně vypadající rozhraní: tmavé pozadí, fialový akcent, písmo Inter a tři karty se stejnými stíny. Důvodem je, že model reprodukuje nejběžnější vzor ve svých trénovacích datech, který tvoří celý internet s Tailwindem a tisíce stejných vstupních stránek. Bez přesných omezení agent vytvoří aritmetický průměr všech šablon.
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](https://ailoot.ai/blog/cs/claude-code-refero-design-md/) – 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á?
Hlavní poznatek Stitch je bezplatný nástroj Google Labs, který převádí textový popis nebo obrázek na kompletní návrh UI: obrazovky, barvy, typografii a rozvržení. Běží přímo v prohlížeči na modelech Gemini. Jeho hlavní přínos při práci s Claude Code spočívá v tom, že Stitch poskytuje design jako strukturovaná data: barvy, písma a rozestupy v přesných hodnotách. Agent je přečte a převede do kódu, aniž by „odhadoval podle obrázku“.
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](https://ailoot.ai/blog/cs/claude-design-guide/). 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
Hlavní poznatek Stitch poskytuje agentům své návrhy prostřednictvím MCP. Popsaná sestava v Claude Code narazila na chybu autorizace vzdáleného MCP `https://stitch.googleapis.com/mcp`. Článek neposkytuje prokázanou kompatibilní konfiguraci, proto úplná cesta níže používá místní export HTML/CSS.
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ší): ```bash 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: ```bash 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?
Hlavní poznatek DESIGN.md je strojově čitelný soubor Markdown s parametry designového systému: barvami v hexadecimálním zápisu, typografickou škálou, jednotkami rozestupů a pravidly pro komponenty. Claude Code ho čte jako kontext a každý prvek sestavuje pomocí stejných tokenů. Agent nedokáže ze snímku obrazovky získat přesnou hexadecimální hodnotu ani velikost rozestupu – musí je odhadnout. Z Markdownu převezme čísla doslova, takže všechny obrazovky vypadají, jako by je navrhl „jeden designér“.
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: ```markdown # 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?
Hlavní poznatek Úplná ruční cesta má sedm kroků: ověřit dostupnost, popsat produkt, přidat referenci, doladit obrazovku, exportovat HTML/CSS, z místních souborů sestavit DESIGN.md a v Claude Code vytvořit a ověřit jednu stránku. Vyhýbá se nevyřešené autorizaci MCP. Responzivitu, navigaci a interakce je stále nutné implementovat a testovat.
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?
Hlavní poznatek „Vzhled AI“ zmizí, když subjektivní přídavná jména nahradíte přesnými omezeními. Tři hlavní změny: odstraňte výchozí fialový akcent a určete vlastní hexadecimální hodnotu, místo Interu zvolte výraznou kombinaci písem a dejte agentovi referenci ze skutečného webu místo slova „moderní“. To vše zaznamenejte do DESIGN.md a agent se přestane vracet k aritmetickému průměru šablon.
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?
Hlavní poznatek Google Stitch je dobrá volba, když potřebujete design od základu a nemáte rozpočet. Máte web už nakreslený ve Figmě? Použijte Figma MCP. Potřebujete hotový kód Reactu? Použijte v0. Chcete styl známé značky? Zvolte Refero. Potřebujete hned aplikaci s backendem? Použijte Lovable. Pro vibe codera s omezeným rozpočtem je Stitch nejdostupnějším začátkem, ale nenabízí publikování ani backend.
Porovnal jsem nástroje podle hledisek, která jsou při vibe codingu s omezeným rozpočtem skutečně důležitá: | Nástroj | Cena | Co poskytuje | Integrace s Claude Code | |----|----|----|----| | **Google Stitch** | Zdarma | Design od základu z textu: obrazovky, HTML, Figma | Místní export HTML/CSS; MCP jen s ověřenou kompatibilní sestavou | | **v0 (Vercel)** | Zdarma + \$20/měsíc | Hotový kód Reactu / Tailwindu, publikování na Vercel | Přes zadání a kód | | **Figma Dev Mode MCP** | Zdarma v beta verzi | Poskytuje hotový design z Figmy pro kód | Oficiální Figma MCP | | **Refero Styles** | Bezplatná knihovna | Hotové soubory DESIGN.md ze skutečných webů | Oficiální Refero MCP | | **Lovable** | Zdarma + \$25/měsíc | Vše v jednom: rozhraní + databáze + publikování | Samostatná platforma | 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](https://ailoot.ai/blog/cs/ai-coding-tools/). ## Kde Google Stitch selhává: jaká jsou jeho omezení?
Hlavní poznatek Stitch dělá pouze UI – žádný backend, publikování ani prezentace. Jeho nástroje pro ruční úpravy jsou omezené: jednotlivý prvek nelze přesunout jako ve Figmě, lze ho pouze znovu vygenerovat. Výsledky nejsou deterministické – jedno zadání může vytvořit různé obrazovky. K tomu je tu limit bezplatných generování bez možnosti dokoupit další, experimentální status bez záruk a problém s autorizací v Claude Code.
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?
Hlavní poznatek Dál si pracovní postup sestavte ručně: vygenerujte první obrazovku ve Stitch, získejte DESIGN.md a použijte ho k vytvoření jedné stránky v Claude Code. Zabere to jeden večer a vyřeší hlavní obavu – že web bude znovu vypadat jako „vygenerovaný AI“. Vše závisí na jedné dovednosti: řízení toho, co se dostane do kontextu agenta. Zbytek přijde praxí.
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.
### Zdroje - [Google Developers Blog - Stitch: a new way to design UIs](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/) - [Google Blog - Stitch and Gemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/) - [Google Codelab - Design-to-Code with Stitch MCP](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch) - [Figma - setting up MCP for Claude Code](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)
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](https://ailoot.ai/). ## Časté otázky ### Co dělat při chybě Stitch MCP Incompatible auth server? Použijte úplný ruční postup: exportujte vybranou obrazovku jako HTML/CSS, její podklady uložte do projektu, export místně ověřte a nechte Claude Code vytvořit DESIGN.md z těchto souborů. Článek neposkytuje ověřenou konfiguraci MCP; „připojit MCP“ není dokončený krok. ### Jak zabránit odhadovaným tokenům v DESIGN.md? Dejte Claude Code exportované HTML/CSS, nikoli pouze snímek. Požadujte skutečné hodnoty souborů a seznam chybějících barev, písem, rozestupů či pravidel komponent pro vlastní rozhodnutí. Jednu vykreslenou stránku pak porovnejte s exportem. ## Ailoot · Společnost a její portfolio projektů Ailoot staví na dlouhodobých provozních zkušenostech, široké klientské základně, stabilních službách a průběžném sledování KPI. Společnost a její portfolio projektů: miliony zákazníků; měsíční tržby v miliardách. Ailoot využívá tyto provozní zkušenosti k poskytování přístupu přes API k funkcím AI v produktech zákazníků, agentech, aplikacích a automatizacích.