Google Stitch + Claude Code: oblikovanje spletnih mest brez »videza AI«

Dodatna navodila za delo z Ailoot so v dokumentaciji.

Zakaj so spletna mesta, zgrajena s Claude Code, videti kot »AI-smeti«?#

V opisanem praktičnem primeru se je delo na domači strani klicne aplikacije začelo s praznim projektom in zahtevo, naj Claude Code izdela ciljno stran. Rezultat je bil klasičen: slate-950 za ozadje, indigo-500 za poudarek, krepka pisava Inter v naslovu in tri enake kartice s sencami pod njim. Enaka postavitev kot pri prvem v0, prvem Lovable in prvem izhodu ChatGPT. Poziv sem petkrat prepisal in dodal »premium«, »ne kot vsi drugi«, »moderno« – stran je še vedno spominjala na temo WordPress iz leta 2015.

Vijoličen preliv ni naključje.

Logika je preprosta: brez omejitev model uporabi statistično povprečje tega, kar je videl. Videl pa je milijon enakih ciljnih strani, zgrajenih z Bootstrapom in Tailwindom. Če želiš rezultat, ki ne bo povprečen, moraš agentu dati konkretne podrobnosti: katere barve, katere pisave, kateri razmiki in katere komponente naj uporabi kot kanonične. Za model »lepo« pomeni »mediana iz leta 2020«. Pridevniki rezultata ne bodo spremenili; potrebuješ natančne parametre.

O isti vrzeli sem pisal v vodniku o vnaprej pripravljenih sistemih oblikovanja z Refero – tam prevzameš slog nekoga drugega (Apple, Linear, Stripe) in ga posreduješ agentu. Google Stitch pristopa z druge strani: namesto da bi si sposodil slog nekoga drugega, ustvariš svojega na podlagi lastnega opisa.

Kaj je Google Stitch in kako pomaga?#

Stitch je eksperimentalno orodje Google Labs, predstavljeno na konferenci Google I/O maja 2025. V polje za poziv napišeš, kako naj bo videti aplikacija (ali naložiš posnetek zaslona, skico na beli tabli ali stran konkurenta), Stitch pa na neskončnem platnu ustvari zaslone vmesnika. V ozadju uporablja Gemini 2.5 Pro in Flash, decembra 2025 pa so dodali Gemini 3 za bolj izpiljene postavitve.

Kaj nam je koristno:

• Vibe Design – z besedami opiši občutek (»minimalistično in premium, kot Stripe«) in prejmi več vizualnih smeri, med katerimi lahko izbiraš.
• Reference – naloži sliko z Dribbble ali Pinteresta; Stitch ohrani njeno postavitev in uporabi tvoje zahteve.
• Izvoz v treh oblikah: v Figma (z urejevalnimi plastmi), kot čisti HTML/CSS in prek MCP – neposredno agentu.

Pomembno je, kako se razlikuje od že pripravljenih slogov, kot je Refero. Refero je knjižnica sistemov oblikovanja, izluščenih iz resničnih spletnih mest; prevzameš obstoječo blagovno znamko. Stitch ustvari sistem za tvoj izdelek od začetka. Nimaš referenčne zasnove in želiš svoj videz? Uporabi Stitch. Želiš hitro uporabiti slog znanega izdelka? Uporabi Refero. Pokrivata različni stopnji in se dobro dopolnjujeta.

Tudi Claude ima vgrajen način za oblikovanje; obravnaval sem ga v vodniku o Claude Design. Stitch se razlikuje po tem, da zagotovi pripravljen sistem v zunanji datoteki, ki jo agent prebere vsakič, ko kaj zgradi.

Zahteve za dostopnost Google Stitch#

Stitch ni na voljo v vseh državah: predstavnik Googla je na uradnem forumu zapisal, da je storitev na voljo uporabnikom, starim najmanj 18 let, v 212 državah, seznam pa se širi. V regijah z omejenim dostopom se ob obisku prikaže natanko eno sporočilo: »Oprostite, Stitch ni na voljo.«

Potrebuješ Google Račun – prijava je mogoča samo z njim.

Ko overjanje Stitch MCP ustavi potek dela Claude Code#

Na spletu je veliko napačnih informacij o povezovanju MCP, polovica navodil pa preprosto ne deluje. Številni vodniki, tudi priljubljeni v angleščini, na primer priporočajo namestitev paketa @google/stitch-mcp z ukazom npx -y @google/stitch-mcp@latest. Ta paket ne obstaja – npm vrne 404. Tega ukaza ne kopiraj, ker boš izgubljal čas. Iz istega razloga izberi integracije, katerih namestitev in preverjanje pri resnični nalogi sta potrjena.

Opisani poskus oddaljenega MCP je v Claude Code vrnil Incompatible auth server. Opažena napaka ni delujoč recept nastavitve ali dokaz, da odpove vsaka trenutna konfiguracija. Ne nadaljuj z neopredeljenim korakom »poveži MCP«: uporabljaj spodnji ročni izvoz HTML/CSS, dokler ni preverjena natančna združljiva konfiguracija.

Delujoča nastavitev za Claude Code je lokalni posredniški strežnik Davida Easta (je član Googlove ekipe DevRel). Posredniški strežnik deluje na tvojem računalniku in zaobide težavo z avtentikacijo.

Najprej ustvari ključ. V Stitch: klikni avatar → Nastavitve Stitch → razdelek Ključ API → Ustvari ključ → kopiraj ga.

Nato z enim ukazom dodaj posredniški strežnik v Claude Code:

bash

Ključ nastavi kot spremenljivko okolja (najpreprostejši način – brez ukvarjanja z Googlovo konzolo in žetoni, ki potečejo):

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

Če ga raje nastaviš ročno, je videti takole (v datoteki ~/.claude.json ali .mcp.json v korenski mapi projekta):

json

Znova zaženi Claude Code in preveri, ali povezava deluje:

claude mcp list

Delovni postopek Stitch in DESIGN.md je kontekstni inženiring v najčistejši obliki: natančne tokene vnaprej dodaš v kontekst Claude, ta pa gradi strogo po njih, ne da bi »ugibal, kaj sem mislil«. Celotna metodologija združuje vse tri stebre – klon AI, Drugi možgani in kontekstni inženiring. Prav ta kombinacija Claude iz »pomočnika, ki ugiba« spremeni v orodje za predvidljive rezultate.

Kaj je DESIGN.md in zakaj je boljši od posnetka zaslona?#

Tukaj je pomembna podrobnost, ki jo večina navodil navaja napačno: v Stitch ni gumba »Izvozi DESIGN.md«. Datoteko sestavi agent. Po uradnem Googlovem codelabu se poziv glasi približno takole: »prek Stitch MCP odpri projekt, izlušči barvno paleto in tipografijo ter iz njiju sestavi DESIGN.md«. Ta codelab predpostavlja delujočo povezavo MCP. Pri tukajšnji ročni poti Claude Code namesto tega prebere izvoženi HTML/CSS in strukturirano datoteko zapiše v koren projekta; manjkajoče tokene mora označiti, ne ugibati iz slike.

DESIGN.md vsebuje konkretne podatke namesto pridevnikov:

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

Da bo Claude Code uporabljal to datoteko, jo omeni v CLAUDE.md (na primer z vrstico »Za oblikovanje vseh komponent uporabi DESIGN.md«) – agent bo nato v vsaki seji uporabil iste tokene. Gumb, narejen v ponedeljek, in kartica, narejena v petek, bosta imela enak slog, ker obstaja en sam vir resnice.

V tej nastavitvi sodelujeta dve lokalni referenci. DESIGN.md vsebuje sistemska pravila: barve, tipografijo, razmike in komponente. Izvoženi Stitch HTML/CSS in sredstva zagotavljajo konkretno postavitev zaslona. MCP je izbiren in ni predpogoj te poti.

Kako zgraditi spletno mesto: celotna pot od besedila do zasnove?#

Tukaj je celoten postopek po vrsti:

1. Odpri Stitch. Preveri razpoložljivost v svoji državi in se z Googlovim računom prijavi v stitch.withgoogle.com.
2. Opiši izdelek. Navedi zaslone in uporabniško pot; predlagani seznam zaslonov potrdi ali uredi.
3. Dodaj referenco. Naloži predvideni posnetek zaslona in določi barve, tipografijo ter postavitev, ki jih želiš ohraniti.
4. Ustvari in izboljšaj. Pred širitvijo zasnove izberi en zaslon in ga izboljšaj.
5. Izbrani zaslon izvozi kot HTML/CSS. Izvožene datoteke in potrebna sredstva shrani v referenčno mapo projekta. Izvoženi HTML odpri lokalno in preveri, da gre za izbrani zaslon; sam posnetek zaslona ne vsebuje natančnih vrednosti CSS.
6. Iz lokalnega izvoza sestavi DESIGN.md. Claude Code naj prebere izvoženi HTML/CSS, zabeleži dejanske vrednosti barv, pisav, razmikov, postavitve in komponent ter manjkajoče vrednosti našteje za tvojo odločitev. Pot ne potrebuje ključa API Stitch ali overjanja MCP.
7. Zgradi in preveri eno stran. Claude Code podaj ta poziva, ime mape pa nadomesti z dejansko lokalno potjo izvoza:

Preberi izvoz Stitch HTML/CSS v refs/stitch-export/. V korenu projekta ustvari DESIGN.md z vrednostmi iz teh datotek. Manjkajoče vrednosti označi, ne izmišljaj si jih.

Iz DESIGN.md in lokalnega izvoza Stitch zgradi eno stran. Komponente naj bodo modularne. Upodobljeno stran primerjaj z izvozom pri namizni in mobilni širini, nato posebej preveri navigacijo ter interaktivna stanja.

Nato je vse v rokah Claude Code: usmerjanje med zasloni, odzivnost pri mejnih točkah iz DESIGN.md, animacije in interaktivnost. Stitch zagotovi statične zaslone in klikljiv prototip, ne zgradi pa delujoče logike in ne objavi spletnega mesta na gostovanju – za to poskrbi agent.

Kako se znebiti »videza AI«: kaj natančno spremeniti?#

Tukaj so konkretne točke, zaradi katerih se spletno mesto neha izdajati:

• Barva. Vijolična indigo-500 je prvi očiten znak. Glavno barvo in poudarek določi z natančnima šestnajstiškima vrednostma neposredno v DESIGN.md. Vsak agent bo »modro barvo znamke« razumel po svoje.
• Pisava. Inter je najvarnejša izbira in zato najbolj prepoznavna »pisava AI«. Izberi izrazit par: na primer pisavo brez serifov za osnovno besedilo in značajsko pisavo za naslove. Nastavi ju v zasnovi Stitch in zapiši v DESIGN.md.
• Referenca namesto pridevnika. Model »naj bo moderno« razume kot »mediana iz leta 2020«. Navodilo »uporabi postavitev s te strani« z dejanskim posnetkom zaslona vzame dobesedno. V Stitch naloži referenčno sliko; okusa ne moreš izraziti z besedami.
• Razmiki in zračnost. Predlogo prepoznaš po utesnjenih in enakih blokih. V DESIGN.md določi velikodušno lestvico razmikov – agent bo elemente razporedil svobodneje.

Natančnost je boljša od subjektivnih pridevnikov. Stitch je v bistvu naprava, ki tvoje »želim, da je videti tako« prevede v natančne tokene, zato agentu ni treba več ugibati.

Google Stitch ali alternative: kaj izbrati?#

Orodja sem primerjal po merilih, ki so dejansko pomembna pri vibe codingu z omejenim proračunom:

Moj lastni postopek: Stitch za raziskovanje zasnove → Claude Code za izdelavo in logiko. Za vibe coderja z omejenim proračunom je Stitch najboljša izbira, ker je brezplačen in za tvoj izdelek od začetka ustvari edinstven videz. Če želiš razumeti celoten nabor orodij na trgu, sem jih obravnaval v glavnem članku kaj uporabljati za kodiranje leta 2026.

Kje Google Stitch odpove: kakšne so njegove omejitve?#

Tukaj je pošten seznam, da ne boš razočaran že pri tretjem zaslonu:

• Samo vmesnik. Ni zalednega sistema, podatkovne zbirke ali objave na gostovanju. Za to potrebuješ Claude Code (ali Lovable, če želiš vse na enem mestu).
• Omejeno urejanje znotraj orodja. Posameznega elementa ne moreš premakniti z miško – spremeniš ga lahko le s pozivom in ga znova ustvariš. To ni Figma.
• Nedeterminističnost. Isti poziv daje različne rezultate. Dobro za raziskovanje zamisli, neprijetno, ko potrebuješ ponovljive rezultate.
• Kvota. Dosegel boš omejitev brezplačnih generiranj (trenutno dnevno); dodatnih ne moreš kupiti, zato moraš počakati, da se kvota ponastavi. Natančno število se spreminja, zato preveri vmesnik.
• Eksperimentalni status. Google Labs ne zagotavlja dolgoročne podpore. Storitev se lahko spremeni ali zapre.
• Geografska omejitev in težava z avtentikacijo MCP v Claude Code, omenjeni v razdelkih o dostopnosti in nastavitvi.

Stitch ni primeren, če imaš stroga navodila za znamko za več projektov, če je zasnova že v Figmi ali če potrebuješ že objavljeno aplikacijo z zalednim sistemom.

Kaj sledi?#

Sestavi najmanjši delovni postopek z enim zaslonom: v Stitch opiši izdelek, ustvari domačo stran, izvozi njen HTML/CSS in prosi Claude Code, naj iz teh lokalnih datotek sestavi DESIGN.md ter zgradi stran. Ko boš videl, da vijolični preliv izgine sam od sebe, bo šlo naprej lažje.

Oblikovanje s Stitch je ena od tehnik kontekstnega inženiringa. Celoten sistem združuje klon AI, Druge možgane in kontekstni inženiring, tako da se Claude lahko zanese na pripravljena pravila in kontekst.

Klon AI, Drugi možgani in kontekstni inženiring so pomembni za izdelek. Oblikovanje s Stitch je prvi gradnik te kombinacije.

Za nadaljnje delo z modeli lahko obiščeš Ailoot.