Google Stitch + Claude Code: návrh webových stránok bez „vzhľadu AI“

Ďalšie pokyny na prácu s Ailootom nájdete v dokumentácii.

Prečo webové stránky vytvorené v Claude Code vyzerajú ako „AI slop“?#

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 — 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?#

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. 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#

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ší):

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:

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?#

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:

# 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?#

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ť?#

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ť?#

Nástroje som porovnal podľa toho, na čom pri vibe codingu s obmedzeným rozpočtom skutočne záleží:

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.

Kde Google Stitch naráža na svoje limity?#

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?#

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.

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.