# Google Stitch + Claude Code: návrh webových stránok bez „vzhľadu AI“ > Úplný ručný postup Google Stitch do Claude Code: export HTML/CSS, DESIGN.md z lokálnych súborov, vytvorenie a overenie stránky a nevyriešená autentifikácia MCP. Source: https://ailoot.ai/blog/sk/google-stitch-claude-code-design/ Canonical: https://ailoot.ai/blog/sk/google-stitch-claude-code-design/ Language: sk Publisher: Ailoot (https://ailoot.ai/) Translation: guide-106 Revision: sha256-151d409cbe8c9b6d265fb44b4369e6ad7e4c793bf1ed553679b05c3171b23497
Kľúčové zhrnutie Claude Code píše logiku výborne, no jeho návrh ho okamžite prezradí: tmavé pozadie, fialový gradient, písmo Inter, tri rovnaké bloky. Google Stitch vytvorí návrh na základe textového opisu, poskytne farebné a typografické tokeny v súbore DESIGN.md a Claude Code podľa tohto súboru zostaví webovú stránku. Ukážem tu celý postup krok za krokom — a aj to, kde zlyháva.
Ďalšie pokyny na prácu s Ailootom nájdete v [dokumentácii](https://ailoot.ai/docs/). ## Prečo webové stránky vytvorené v Claude Code vyzerajú ako „AI slop“?
Kľúčové zhrnutie Bez systému dizajnu Claude Code vytvorí priemerne vyzerajúce rozhranie: tmavé pozadie, fialový akcent, písmo Inter a tri karty s rovnakými tieňmi. Dôvodom je, že model reprodukuje najčastejší vzor vo svojich trénovacích dátach, ktorými je celý internet plný Tailwindu a tisícov rovnakých vstupných stránok. Bez presných obmedzení agent vytvorí aritmetický priemer všetkých šablón.
V opísanom praktickom prípade sa práca na domovskej stránke volacej aplikácie začala prázdnym projektom a požiadavkou, aby Claude Code vytvoril vstupnú stránku. Výsledok bol klasický: `slate-950` ako pozadie, `indigo-500` ako akcent, tučné Inter v nadpise a pod ním tri rovnaké karty s tieňmi. Rovnaké rozloženie ako pri prvom v0, prvom Lovable a prvej generácii ChatGPT. Päťkrát som prepísal prompt, pridal „premium“, „nie ako všetci ostatní“, „moderné“ — stránka stále vyzerala ako téma WordPressu z roku 2015. Logika je jednoduchá: bez obmedzení model vypočíta štatistický priemer toho, čo videl. A videl milión rovnakých vstupných stránok vytvorených pomocou Bootstrapu a Tailwindu. Ak chcete dosiahnuť výsledok, ktorý nie je priemerný, musíte agentovi poskytnúť konkrétne pokyny: ktoré farby, ktoré písma, aké rozostupy a ktoré komponenty má považovať za smerodajné. Pre model slovo „krásny“ znamená „medián roku 2020“. Prídavné mená ho neposunú; potrebujete presné parametre. Túto istú medzeru som rozobral v sprievodcovi [hotovými systémami dizajnu pomocou Refero](https://ailoot.ai/blog/sk/claude-code-refero-design-md/) — tam prevezmete štýl niekoho iného (Apple, Linear, Stripe) a odovzdáte ho agentovi. Google Stitch k tomu pristupuje z druhej strany: namiesto požičiavania si cudzieho štýlu si vytvoríte vlastný — podľa svojho opisu. ## Čo je Google Stitch a ako pomáha?
Kľúčové zhrnutie Stitch je bezplatný nástroj Google Labs, ktorý z textového opisu alebo obrázka vytvorí kompletný návrh UI: obrazovky, farby, typografiu a rozloženie. Funguje v prehliadači na modeloch Gemini. Jeho hlavnou výhodou pri práci s Claude Code je, že poskytuje návrh ako štruktúrované údaje: farby, písma a rozostupy v presných hodnotách. Agent ich prečíta a reprodukuje v kóde bez toho, aby musel „odhadovať“ zo snímky obrazovky.
Stitch je experiment Google Labs predstavený na Google I/O v máji 2025. Do poľa promptu napíšete, ako má aplikácia vyzerať (alebo nahráte snímku obrazovky, náčrt na tabuli či stránku konkurencie) a Stitch vytvorí obrazovky rozhrania na nekonečnom plátne. V pozadí používa Gemini 2.5 Pro a Flash; v decembri 2025 pribudol Gemini 3, ktorý vytvára prepracovanejšie rozloženia. Čo sa nám hodí: - **Vibe Design** — slovami opíšte atmosféru („minimalistická a prémiová, ako Stripe“) a získajte niekoľko vizuálnych smerov, z ktorých si môžete vybrať. - **Referencie** — nahrajte obrázok z Dribbble alebo Pinterestu; Stitch zachová jeho rozloženie a uplatní vaše požiadavky. - **Export** v troch formátoch: do Figmy (s upraviteľnými vrstvami), ako čisté HTML/CSS a cez MCP — priamo do agenta. Rozdiel oproti hotovým štýlom, ako je Refero, je dôležitý. Refero je knižnica systémov dizajnu, ktoré už boli extrahované zo skutočných webových stránok; prevezmete existujúcu značku. Stitch vytvorí systém pre váš produkt od nuly. Nemáte referenčný návrh a chcete vlastný vzhľad? Na to je Stitch. Potrebujete rýchlo použiť štýl známeho produktu? Refero. Riešia odlišné kroky a dobre sa dopĺňajú. Aj samotný Claude má vstavaný režim dizajnu; venoval som sa mu v sprievodcovi [Claude Design](https://ailoot.ai/blog/sk/claude-design-guide/). Stitch je iný v tom, že poskytuje hotový systém v externom súbore, ktorý si agent prečíta vždy, keď niečo vytvára. ## Požiadavky na dostupnosť Google Stitch Stitch nie je dostupný vo všetkých krajinách: zástupca Googlu na oficiálnom fóre napísal, že služba je dostupná používateľom od 18 rokov v 212 krajinách a zoznam sa rozširuje. V obmedzených regiónoch sa po návšteve zobrazí presne jedna správa: „Prepáčte, Stitch nie je dostupný.“ Potrebujete účet Google — prihlásiť sa môžete iba pomocou neho. ## Keď autorizácia Stitch MCP blokuje postup Claude Code
Kľúčové zhrnutie Stitch poskytuje agentom prístup k návrhom prostredníctvom MCP. Pri opísanom nastavení vzdialený MCP na `https://stitch.googleapis.com/mcp` narazil v Claude Code na chybu autorizácie. Článok neposkytuje overenú kompatibilnú konfiguráciu MCP, preto úplný postup nižšie používa lokálny export HTML/CSS.
Na internete je o pripájaní MCP množstvo nezmyslov a polovica návodov jednoducho nefunguje. Mnohé návody (vrátane populárnych anglických) napríklad odporúčajú nainštalovať balík `@google/stitch-mcp` príkazom `npx -y @google/stitch-mcp@latest`. Tento balík neexistuje — npm vráti `404`. Tento príkaz nekopírujte; stratíte čas. Z rovnakého dôvodu si vyberajte integrácie, ktorých inštalácia a overenie na skutočnej úlohe boli potvrdené. Opísaný pokus so vzdialeným MCP v Claude Code skončil chybou `Incompatible auth server`. Pozorovaná chyba nie je funkčný návod ani dôkaz zlyhania každej aktuálnej konfigurácie. Nepokračujte neurčitým krokom „pripojiť MCP“: do overenia presnej kompatibilnej konfigurácie použite ručný export HTML/CSS nižšie. Funkčným nastavením pre Claude Code je lokálny proxy server od Davida Easta (je v tíme Google DevRel). Proxy server beží na vašom počítači a obchádza problém s autorizáciou. Najprv vytvorte kľúč. V Stitchi: kliknite na svoj avatar → **Stitch settings** → sekcia **API key** → **Create key** → skopírujte ho. Potom pridajte proxy server do Claude Code jedným príkazom: bash Vložte kľúč do premennej prostredia (najjednoduchší spôsob — bez práce s konzolou Googlu a tokenmi, ktorých platnosť vyprší): ```bash export STITCH_API_KEY="your-key-from-stitch-settings" ``` Ak ho chcete radšej nakonfigurovať manuálne, vyzerá to takto (v súbore `~/.claude.json` alebo `.mcp.json` v koreňovom adresári projektu): json Reštartujte Claude Code a skontrolujte, či pripojenie funguje: ```bash claude mcp list ``` Postup so Stitchom a DESIGN.md je v najčistejšej podobe inžinierstvo kontextu: vopred vložíte do kontextu Claudea presné tokeny a ten tvorí striktne podľa nich, bez „hádaní, čo som mal na mysli“. Celá metodika spája všetky tri piliere — klon AI, Druhý mozog a inžinierstvo kontextu. Vďaka tejto kombinácii sa Claude mení z „asistenta, ktorý háda“ na nástroj, ktorý poskytuje predvídateľné výsledky. ## Čo je DESIGN.md a prečo je lepší než snímka obrazovky?
Kľúčové zhrnutie DESIGN.md je strojovo čitateľný súbor Markdown, ktorý obsahuje parametre systému dizajnu: farby v hexadecimálnom zápise, typografickú škálu, jednotky rozostupov a pravidlá komponentov. Claude Code ho číta ako kontext a každý prvok vytvára s použitím rovnakých tokenov. Agent nedokáže zo snímky obrazovky extrahovať presnú hexadecimálnu hodnotu ani veľkosť rozostupu — musí ich odhadnúť. Z Markdownu preberá čísla doslova, takže všetky obrazovky vyzerajú, akoby pochádzali „od jedného dizajnéra“.
Je tu zásadný detail, ktorý väčšina návodov uvádza nesprávne: v Stitchi nie je tlačidlo „Export DESIGN.md“. Súbor zostaví samotný agent. Podľa oficiálneho codelabu Googlu vyzerá prompt približne takto: „cez Stitch MCP prejdi do projektu, extrahuj paletu a typografiu a zostav z nich DESIGN.md“. Tento codelab predpokladá funkčné pripojenie MCP. V tunajšom ručnom postupe Claude Code namiesto toho číta exportované HTML/CSS a zapíše štruktúrovaný súbor do koreňa projektu; chýbajúce tokeny musí označiť namiesto odhadu z obrázka. DESIGN.md obsahuje konkrétne údaje namiesto prídavných mien: ```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 ste Claude Code prinútili používať tento súbor, odkážte naň v `CLAUDE.md` (napríklad riadkom „Pri všetkých komponentoch použi dizajn zo súboru `DESIGN.md`“) — agent tak v každej relácii načíta rovnaké tokeny. Tlačidlo z pondelka a karta z piatka budú mať rovnaký štýl, pretože existuje jeden zdroj pravdy. V tomto nastavení spolupracujú dve lokálne referencie. DESIGN.md obsahuje systémové pravidlá: farby, typografiu, rozostupy a komponenty. Exportované Stitch HTML/CSS a podklady poskytujú konkrétne rozloženie obrazovky. MCP je voliteľné a nie je podmienkou tejto cesty. ## Ako zostaviť webovú stránku: kompletná cesta od textu k návrhu?
Kľúčové zhrnutie Úplný ručný postup má sedem krokov: overiť dostupnosť, opísať produkt, pridať referenciu, doladiť obrazovku, exportovať HTML/CSS, z nich zostaviť DESIGN.md a v Claude Code vytvoriť a overiť jednu stránku. Vyhýba sa nevyriešenej autentifikácii MCP. Responzívnosť, navigáciu a interakcie treba stále implementovať a otestovať.
Tu je celý postup v správnom poradí: 1. **Otvorte Stitch.** Overte dostupnosť vo svojej krajine a prihláste sa do `stitch.withgoogle.com` účtom Google. 2. **Opíšte produkt.** Uveďte obrazovky a cestu používateľa; navrhnutý zoznam potvrďte či upravte. 3. **Pridajte referenciu.** Nahrajte určenú snímku a opíšte farby, typografiu a rozloženie, ktoré chcete zachovať. 4. **Vytvorte a dolaďte.** Pred rozširovaním návrhu vyberte a dolaďte jednu obrazovku. 5. **Exportujte vybranú obrazovku ako HTML/CSS.** Súbory a potrebné podklady uložte do referenčného priečinka projektu. HTML otvorte lokálne a potvrďte vybranú obrazovku; samotná snímka nenesie presné hodnoty CSS. 6. **Zostavte DESIGN.md z lokálneho exportu.** Claude Code nech prečíta HTML/CSS, zaznamená skutočné farby, písma, rozostupy, rozloženie a komponenty a chýbajúce hodnoty uvedie na vaše rozhodnutie. Cesta nepotrebuje kľúč Stitch API ani autentifikáciu MCP. 7. **Vytvorte a overte jednu stránku.** Zadajte tieto prompty a názov priečinka nahraďte skutočnou cestou exportu: ``` Prečítaj export Stitch HTML/CSS v refs/stitch-export/. V koreňovom priečinku vytvor DESIGN.md z hodnôt prítomných v týchto súboroch. Chýbajúce hodnoty označ namiesto vymýšľania. ``` ``` Vytvor jednu stránku z DESIGN.md a lokálneho exportu Stitch. Zachovaj modulárne komponenty. Vykreslenú stránku porovnaj s exportom pri šírke počítača a mobilu a osobitne over navigáciu a interaktívne stavy. ``` Od tejto chvíle je všetko na Claude Code: smerovanie medzi obrazovkami, responzívnosť podľa zlomových bodov v DESIGN.md, animácie a interaktivita. Stitch poskytuje statické obrazovky a klikateľný prototyp, ale nevytvára funkčnú logiku ani nezverejňuje obsah na hostingu — to je úloha agenta. ## Ako sa zbaviť „vzhľadu AI“: čo presne treba zmeniť?
Kľúčové zhrnutie „Vzhľad AI“ zmizne, keď subjektívne prídavné mená nahradíte presnými obmedzeniami. Tri hlavné zmeny: odstráňte predvolený fialový akcent a zadajte vlastnú hexadecimálnu hodnotu, nahraďte Inter výraznou kombináciou písiem a poskytnite agentovi referenciu zo skutočnej webovej stránky namiesto slova „moderný“. Všetko zaznamenajte do DESIGN.md a agent sa prestane vracať k aritmetickému priemeru šablón.
Tu sú konkrétne body, pri ktorých sa stránka prestane prezrádzať: - **Farba.** Fialová `indigo-500` je prvým prezrádzajúcim znakom. Zadajte základné a akcentové farby presnými hexadecimálnymi hodnotami priamo do DESIGN.md. Každý agent si „modrú značky“ vyloží po svojom. - **Písmo.** Inter je najbezpečnejšie, a preto aj najrozpoznateľnejšie „písmo AI“. Vyberte výraznú kombináciu: napríklad bezpätkové písmo pre hlavný text a charakteristickejšie písmo pre nadpisy. Nastavte ho v dizajne Stitchu a zaznamenajte v DESIGN.md. - **Referencia namiesto prídavného mena.** Model si „urob to moderné“ vyloží ako „medián roku 2020“. Pokyn „použi rozloženie z tejto stránky“ so skutočnou snímkou obrazovky chápe doslova. Nahrajte do Stitchu referenčný obrázok; vkus sa nedá vyjadriť slovami. - **Rozostupy a priestor.** Šablónové rozloženie spoznáte podľa stiesnených, rovnakých blokov. V DESIGN.md nastavte veľkorysú škálu rozostupov — agent potom rozmiestni prvky voľnejšie. Konkrétnosť prekoná subjektívne prídavné mená. Stitch je v podstate stroj, ktorý prekladá vaše „chcem to takto“ na presné tokeny, takže agent už nemá čo hádať. ## Google Stitch alebo alternatívy: čo si vybrať?
Kľúčové zhrnutie Google Stitch je dobrou voľbou, ak potrebujete návrh od nuly a nemáte rozpočet. Už máte webovú stránku navrhnutú vo Figme? Použite Figma MCP. Potrebujete hotový kód Reactu? Použite v0. Chcete štýl známej značky? Prejdite na Refero. Potrebujete okamžite aplikáciu s backendom? Použite Lovable. Pre vibe codera s obmedzeným rozpočtom je Stitch najdostupnejším začiatkom, no neponúka publikovanie ani backend.
Nástroje som porovnal podľa toho, na čom pri vibe codingu s obmedzeným rozpočtom skutočne záleží: | Nástroj | Cena | Čo poskytuje | Integrácia s Claude Code | |----|----|----|----| | **Google Stitch** | Zadarmo | Návrh od nuly z textu: obrazovky, HTML, Figma | Lokálny export HTML/CSS; MCP iba s overenou kompatibilnou konfiguráciou | | **v0 (Vercel)** | Zadarmo + \$20/mesiac | Hotový kód React / Tailwind, publikovanie na Verceli | Cez prompty a kód | | **Figma Dev Mode MCP** | Zadarmo v beta verzii | Poskytuje hotový návrh z Figmy na použitie v kóde | Oficiálny Figma MCP | | **Refero Styles** | Bezplatná knižnica | Hotové súbory DESIGN.md zo skutočných webových stránok | Oficiálny Refero MCP | | **Lovable** | Zadarmo + \$25/mesiac | Všetko v jednom: rozhranie + databáza + publikovanie | Samostatná platforma | Postup, ktorý používam: Stitch na skúmanie návrhu → Claude Code na zostavenie a logiku. Pre vibe codera s obmedzeným rozpočtom je Stitch výhodný, pretože je zadarmo a vytvorí pre váš produkt jedinečný vzhľad od nuly. Ak chcete spoznať celý výber nástrojov na trhu, venoval som sa im v hlavnom článku [v čom programovať v roku 2026](https://ailoot.ai/blog/sk/ai-coding-tools/). ## Kde Google Stitch naráža na svoje limity?
Kľúčové zhrnutie Stitch vytvára iba UI — bez backendu, publikovania či prezentácií. Jeho nástroje na manuálne úpravy sú obmedzené: jednotlivý prvok nemôžete presunúť ako vo Figme; môžete ho iba znova vygenerovať. Výsledky sú nedeterministické — jeden prompt môže vytvoriť rôzne obrazovky. Okrem toho je obmedzený počet bezplatných generovaní bez možnosti dokúpiť ďalšie, služba má experimentálny stav bez záruk a Claude Code má problém s autorizáciou.
Tu je úprimný zoznam, aby vás služba nesklamala už pri tretej obrazovke: - **Iba rozhranie.** Žiadny backend, databáza ani publikovanie na hosting. Na to potrebujete Claude Code (alebo Lovable, ak chcete všetko na jednom mieste). - **Obmedzené úpravy v nástroji.** Jednotlivý prvok nemôžete presúvať myšou — môžete ho zmeniť len pomocou promptu a znova vygenerovať. Nie je to Figma. - **Nedeterministickosť.** Rovnaký prompt vytvára rôzne výsledky. Je to dobré na skúmanie nápadov, no nepraktické, keď potrebujete opakovateľný výstup. - **Kvóta.** Narazíte na limit bezplatných generovaní (aktuálne denný); ďalšie si nemôžete kúpiť, takže musíte počkať na obnovenie kvóty. Presný počet sa líši, preto si ho overte v rozhraní. - **Experimentálny stav.** Google Labs sa nezaväzuje k dlhodobej podpore. Služba sa môže zmeniť alebo byť vypnutá. - **Geografické obmedzenie** a problém autorizácie MCP v Claude Code, ktoré sme spomenuli v častiach o dostupnosti a nastavení. Kedy sa Stitch nehodí: ak máte prísne pravidlá značky pre veľa projektov, ak je návrh už vo Figme alebo ak potrebujete aplikáciu s backendom, ktorá je už publikovaná. ## Čo ďalej?
Kľúčové zhrnutie Ďalej si zostavte postup ručne: vytvorte prvú obrazovku v Stitchi, extrahujte DESIGN.md a použite ho na vytvorenie jednej stránky v Claude Code. Zaberie vám to večer a vyrieši hlavnú obavu — že stránka bude opäť vyzerať „vygenerovaná AI“. Všetko závisí od jednej zručnosti: riadenia toho, čo sa dostane do kontextu agenta. Zvyšok príde s praxou.
Zostavte najmenší postup s jednou obrazovkou: opíšte produkt v Stitchi, vytvorte domovskú stránku, exportujte jej HTML/CSS a požiadajte Claude Code o DESIGN.md a stránku z týchto lokálnych súborov. Keď uvidíte, že fialový gradient sám od seba zmizol, ostatné už pôjde ľahšie. Návrh so Stitchom je jednou z techník inžinierstva kontextu. Celý systém spája klon AI, Druhý mozog a inžinierstvo kontextu, aby sa Claude mohol opierať o pripravené pravidlá a kontext.
### Zdroje - [Blog Google Developers - Stitch: nový spôsob navrhovania UI](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/) - [Blog Googlu - Stitch a Gemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/) - [Google Codelab - Od návrhu ku kódu pomocou Stitch MCP](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch) - [Figma - nastavenie MCP pre Claude Code](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)
Klon AI, Druhý mozog a inžinierstvo kontextu sú pre produkt dôležité. Návrh so Stitchom je prvým stavebným prvkom tejto kombinácie. Ak chcete ďalej pracovať s modelmi, prejdite na [Ailoot](https://ailoot.ai/). ## Otázky a odpovede: Google Stitch + Claude Code: návrh webových stránok bez „vzhľadu AI“ ### Čo robiť pri Incompatible auth server zo Stitch MCP? Použite úplnú ručnú cestu: vybranú obrazovku exportujte ako HTML/CSS, podklady uložte v projekte, export lokálne overte a Claude Code nech z týchto súborov vytvorí DESIGN.md. Článok neposkytuje overenú konfiguráciu MCP, preto „pripojiť MCP“ nepovažujte za dokončený krok. ### Ako zabrániť hádaným dizajnovým tokenom v DESIGN.md? Claude Code dajte exportované HTML/CSS namiesto samotnej snímky. Žiadajte hodnoty skutočne prítomné v súboroch a chýbajúce farby, písma, rozostupy či komponentové pravidlá na vlastné rozhodnutie; jednu vykreslenú stránku potom porovnajte s exportom. ## Ailoot · Spoločnosť a jej portfólio projektov Ailoot stavia na dlhodobých prevádzkových skúsenostiach, širokej klientskej základni, stabilných službách a priebežnom sledovaní KPI. Spoločnosť a jej portfólio projektov: milióny zákazníkov; mesačné tržby v miliardách. Ailoot využíva tieto prevádzkové skúsenosti na poskytovanie prístupu cez API k funkciám AI v produktoch zákazníkov, agentoch, aplikáciách a automatizáciách.