„Google Stitch“ + „Claude Code“: svetainių dizainas be „AI išvaizdos“

Papildomų instrukcijų, kaip dirbti su „Ailoot“, rasite dokumentacijoje.

Kodėl svetainės, sukurtos naudojant „Claude Code“, atrodo kaip „AI slop“?#

Aprašytu praktiniu atveju darbas su skambučių programėlės pagrindiniu puslapiu prasidėjo nuo tuščio projekto ir prašymo „Claude Code“ sukurti nukreipimo puslapį. Rezultatas buvo klasikinis: fonui panaudotas slate-950, akcentui – indigo-500, antraštė paryškinta „Inter“ šriftu, o po ja – trys vienodos kortelės su šešėliais. Toks pat išdėstymas kaip pirmojoje v0 versijoje, pirmajame „Lovable“ ir pirmojoje „ChatGPT“ sugeneruotoje versijoje. Penkis kartus perrašiau užklausą, pridėjau žodžius „premium“, „ne kaip visi kiti“, „modernus“ – puslapis vis tiek atrodė kaip 2015 m. „WordPress“ tema.

Logika paprasta: nesant apribojimų, modelis apskaičiuoja statistinį to, ką matė, vidurkį. O jis matė milijoną vienodų nukreipimo puslapių, sukurtų naudojant „Bootstrap“ ir „Tailwind“. Jei norite ne vidutinio rezultato, turite nurodyti agentui konkrečius dalykus: kokias spalvas, šriftus ir tarpelius naudoti, kuriuos komponentus laikyti pagrindiniais. Modeliui žodis „gražus“ reiškia „2020 m. mediana“. Būdvardžiai rezultato nepakeis – reikia tikslių parametrų.

Šį patį skirtumą nagrinėjau vadove apie paruoštas dizaino sistemas su „Refero“ – ten perimate kito stilių („Apple“, „Linear“, „Stripe“) ir perduodate jį agentui. „Google Stitch“ prie temos prieina iš kitos pusės: užuot skolinęsi kito stilių, sukuriate savąjį pagal savo aprašymą.

Kas yra „Google Stitch“ ir kuo jis naudingas?#

„Stitch“ yra „Google Labs“ eksperimentas, pristatytas „Google I/O“ 2025 m. gegužę. Užklausos lauke parašote, kaip turėtų atrodyti programėlė (arba įkeliate ekrano kopiją, eskizą lentoje ar konkurento puslapį), o „Stitch“ begalinėje drobėje sugeneruoja sąsajos ekranus. Fone naudojami „Gemini 2.5 Pro“ ir „Flash“, o 2025 m. gruodį pridėtas „Gemini 3“, skirtas labiau išbaigtiems išdėstymams.

Kas mums naudinga:

• Vibe Design – žodžiais apibūdinkite nuotaiką („minimalistinis ir prabangus, kaip „Stripe““) ir gaukite kelias vizualines kryptis, iš kurių galėsite pasirinkti.
• Nuorodos – įkelkite vaizdą iš „Dribbble“ arba „Pinterest“; „Stitch“ išlaikys jo išdėstymą ir pritaikys jūsų reikalavimus.
• Eksportavimas trimis formatais: į „Figma“ (su redaguojamais sluoksniais), kaip švarus HTML/CSS ir per MCP – tiesiai į agentą.

Skirtumas nuo paruoštų stilių, tokių kaip „Refero“, yra svarbus. „Refero“ – tai iš tikrų svetainių jau ištrauktų dizaino sistemų biblioteka; perimate esamą prekės ženklą. „Stitch“ nuo nulio sukuria sistemą jūsų produktui. Neturite pavyzdinio dizaino ir norite savito įvaizdžio? Rinkitės „Stitch“. Norite greitai pritaikyti gerai žinomo produkto stilių? „Refero“. Šie įrankiai skirti skirtingiems darbo etapams ir gerai papildo vienas kitą.

Pats „Claude“ taip pat turi integruotą dizaino režimą; apie jį rašiau vadove apie „Claude Design“. „Stitch“ skiriasi tuo, kad pateikia paruoštą sistemą išoriniame faile, kurį agentas perskaito kaskart kurdamas ką nors naujo.

„Google Stitch“ prieinamumo reikalavimai#

„Stitch“ pasiekiamas ne visose šalyse: „Google“ atstovas oficialiame forume parašė, kad paslauga prieinama 18 metų ir vyresniems naudotojams 212 šalių, o sąrašas plečiamas. Apribotuose regionuose apsilankę pamatysite tik vieną pranešimą: „Atsiprašome, „Stitch“ nepasiekiamas.“

Jums reikės „Google“ paskyros – prisijungti galite tik su ja.

Kai Stitch MCP autorizavimas blokuoja Claude Code darbo eigą#

Internete gausu nesąmonių apie MCP prijungimą, o pusė instrukcijų tiesiog neveikia. Pavyzdžiui, daugelyje vadovų (įskaitant populiarius anglų kalba) rekomenduojama įdiegti paketą @google/stitch-mcp naudojant komandą npx -y @google/stitch-mcp@latest. Tokio paketo nėra – npm grąžina 404. Nekopijuokite šios komandos, nes tik sugaišite laiko. Dėl tos pačios priežasties rinkitės integracijas, kurių įdiegimas ir patikrinimas atliekant tikrą užduotį buvo patvirtintas.

Čia aprašytas nuotolinio MCP bandymas Claude Code pasiekė Incompatible auth server klaidą. Pastebėta klaida nėra veikiantis sąrankos receptas ar įrodymas, kad nepavyksta visos dabartinės konfigūracijos. Netęskite neapibrėžtu „prijunk MCP“ žingsniu: naudokite toliau pateiktą rankinį HTML/CSS eksportą, kol patikrinta tiksli suderinama konfigūracija.

„Claude Code“ veikianti konfigūracija yra vietinis Davido Easto tarpinis serveris (jis dirba „Google DevRel“ komandoje). Tarpinis serveris veikia jūsų kompiuteryje ir apeina autorizavimo problemą.

Pirmiausia sukurkite raktą. „Stitch“: spustelėkite savo avatarą → Stitch settings → skiltis API key → Create key → nukopijuokite jį.

Tada viena komanda pridėkite tarpinį serverį prie „Claude Code“:

bash

Įrašykite raktą į aplinkos kintamąjį (tai paprasčiausias būdas – nereikia naršyti „Google“ konsolėje ar rūpintis galiojančiais tik trumpą laiką žetonais):

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

Jei norite konfigūruoti rankiniu būdu, tai atrodo taip (faile ~/.claude.json arba .mcp.json, esančiame projekto šakniniame kataloge):

json

Paleiskite „Claude Code“ iš naujo ir patikrinkite, ar ryšys veikia:

claude mcp list

Darbo eiga su „Stitch“ ir DESIGN.md – tai gryniausia konteksto inžinerijos forma: iš anksto įtraukiate tikslius žetonus į „Claude“ kontekstą, o jis kuria griežtai pagal juos ir „nebando atspėti, ką turėjau omenyje“. Visa metodika apima tris pagrindinius elementus – AI kloną, Antrąsias smegenis ir konteksto inžineriją. Šis derinys „Claude“ iš „spėliojančio asistento“ paverčia nuspėjamus rezultatus kuriančiu įrankiu.

Kas yra DESIGN.md ir kodėl jis geresnis už ekrano kopiją?#

Štai svarbi detalė, kurią dauguma instrukcijų pateikia klaidingai: „Stitch“ nėra mygtuko „Export DESIGN.md“. Failą surenka pats agentas. Remiantis oficialiu „Google“ codelab, užklausa galėtų skambėti maždaug taip: „per Stitch MCP atidaryk projektą, ištrauk spalvų paletę ir tipografiją, o iš jų sudaryk DESIGN.md“. Šis codelab daro prielaidą, kad MCP ryšys veikia. Čia pateiktame rankiniame kelyje Claude Code vietoj to skaito eksportuotą HTML/CSS ir projekto šaknyje rašo struktūruotą failą; trūkstamus žetonus turi įvardyti, o ne spėti iš vaizdo.

DESIGN.md pateikiami konkretūs parametrai, o ne būdvardžiai:

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

Kad „Claude Code“ naudotų šį failą, nurodykite jį faile CLAUDE.md (pavyzdžiui, eilute „Visų komponentų dizainui naudok DESIGN.md“) – ir agentas kiekvienoje sesijoje įtrauks tuos pačius žetonus. Pirmadienį sukurtas mygtukas ir penktadienį sukurta kortelė bus to paties stiliaus, nes yra vienas tiesos šaltinis.

Šioje sąrankoje veikia du vietiniai pavyzdžiai. DESIGN.md saugo sistemos taisykles — spalvas, tipografiją, tarpus ir komponentus. Eksportuotas Stitch HTML/CSS ir ištekliai pateikia konkretaus ekrano išdėstymą. MCP pasirinktinė galimybė ir nėra būtinas šio kelio reikalavimas.

Kaip sukurti svetainę: visas kelias nuo teksto iki dizaino?#

1. Atverkite Stitch. Patikrinkite prieinamumą savo šalyje ir prisijunkite prie stitch.withgoogle.com su Google paskyra.
2. Aprašykite produktą. Nurodykite ekranus ir naudotojo kelią; patvirtinkite ar pataisykite pasiūlytą ekranų sąrašą.
3. Pridėkite pavyzdį. Įkelkite numatytą ekrano kopiją ir nurodykite išlaikytinas spalvas, tipografiją bei išdėstymą.
4. Generuokite ir tobulinkite. Prieš plėsdami dizainą pasirinkite vieną ekraną ir jį patobulinkite.
5. Pasirinktą ekraną eksportuokite kaip HTML/CSS. Eksporto failus ir reikalingus išteklius išsaugokite projekto pavyzdžių aplanke. Eksportuotą HTML atverkite vietoje ir patikrinkite, ar tai pasirinktas ekranas; vien ekrano kopija neturi tikslių CSS reikšmių.
6. Iš vietinio eksporto surinkite DESIGN.md. Paprašykite Claude Code perskaityti eksportuotą HTML/CSS, užrašyti tikras spalvų, šriftų, tarpelių, išdėstymo ir komponentų reikšmes bei išvardyti trūkstamas reikšmes jūsų sprendimui. Šiam keliui nereikia Stitch API rakto ar MCP autentifikavimo.
7. Sukurkite ir patikrinkite vieną puslapį. Claude Code pateikite šias užklausas, aplanko pavadinimą pakeisdami tikru vietinio eksporto keliu:

Perskaityk Stitch HTML/CSS eksportą refs/stitch-export/. Projekto šaknyje sukurk DESIGN.md iš šiuose failuose esančių reikšmių. Trūkstamas reikšmes įvardyk, o ne išgalvok.

Iš DESIGN.md ir vietinio Stitch eksporto sukurk vieną puslapį. Išlaikyk modulinius komponentus. Atvaizduotą puslapį palygink su eksportu kompiuterio ir telefono pločiais, tada atskirai patikrink navigaciją ir interaktyvias būsenas.

Toliau viską atlieka „Claude Code“: nukreipimą tarp ekranų, prisitaikymą prie DESIGN.md nurodytų lūžio taškų, animacijas ir interaktyvumą. „Stitch“ pateikia statinius ekranus ir spustelėjamą prototipą, bet nesukuria veikiančios logikos ir nepublikuoja svetainės prieglobos paslaugoje – tuo rūpinasi agentas.

Kaip atsikratyti „AI išvaizdos“: ką konkrečiai reikėtų pakeisti?#

Štai konkretūs dalykai, kuriuos pakeitus svetainė nebeišsiduoda:

• Spalva. Violetinė indigo-500 – pirmasis išduodantis ženklas. Pagrindines ir akcentines spalvas nurodykite tiksliomis šešioliktainėmis reikšmėmis pačiame DESIGN.md. Kiekvienas agentas savaip interpretuos „prekės ženklo mėlyną“.
• Šriftas. „Inter“ yra saugiausias, todėl ir lengviausiai atpažįstamas „AI šriftas“. Rinkitės išraiškingą derinį: pavyzdžiui, sans serif šriftą pagrindiniam tekstui ir savitą šriftą antraštėms. Nustatykite jį „Stitch“ dizaine ir įrašykite į DESIGN.md.
• Pavyzdys vietoj būdvardžio. Modelis „padaryk moderniai“ supranta kaip „2020 m. medianą“. Nurodymą „naudok šio puslapio išdėstymą“ su tikra ekrano kopija jis supranta pažodžiui. Įkelkite į „Stitch“ pavyzdinį vaizdą – žodžiais skonio perteikti negalima.
• Tarpeliai ir erdvė. Šabloninį išdėstymą išduoda ankšti, vienodi blokai. DESIGN.md nurodykite erdvią tarpelių skalę – agentas elementus išdėstys laisviau.

Konkretumas nugali subjektyvius būdvardžius. „Stitch“ iš esmės paverčia jūsų „noriu štai taip“ tikslių žetonų rinkiniu, todėl agentui nebereikia nieko spėlioti.

„Google Stitch“ ar alternatyvos: ką pasirinkti?#

Palyginau įrankius pagal tai, kas iš tiesų svarbu vykdant vibe coding su ribotu biudžetu:

Mano naudojama darbo eiga: „Stitch“ dizaino idėjoms tyrinėti → „Claude Code“ kūrimui ir logikai. Ribotą biudžetą turinčiam vibe coder „Stitch“ laimi, nes yra nemokamas ir nuo nulio sukuria unikalų jūsų produkto įvaizdį. Jei norite susipažinti su visais rinkoje esančiais įrankiais, apie juos rašiau pagrindiniame straipsnyje su kuo programuoti 2026 m..

Kur „Google Stitch“ stringa: kokie jo apribojimai?#

Štai atviras sąrašas, kad nenusiviltumėte jau po trečio ekrano:

• Tik sąsaja. Nėra backend, duomenų bazės ar publikavimo prieglobos paslaugoje. Tam reikia „Claude Code“ (arba „Lovable“, jei norite visko vienoje vietoje).
• Ribotas redagavimas pačiame įrankyje. Atskiro elemento negalite perkelti pele – galite jį pakeisti tik promptu ir sugeneruoti iš naujo. Tai ne „Figma“.
• Nedeterminizmas. Ta pati užklausa pateikia skirtingus rezultatus. Tai naudinga ieškant idėjų, bet nepatogu, kai reikia pakartojamo rezultato.
• Kvota. Pasieksite nemokamų generavimų limitą (šiuo metu dienos); papildomų nusipirkti negalima, tad teks laukti, kol kvota bus atnaujinta. Tikslus skaičius skiriasi, todėl patikrinkite sąsają.
• Eksperimentinė būsena. „Google Labs“ negarantuoja ilgalaikio palaikymo. Paslauga gali pasikeisti arba būti nutraukta.
• Geografiniai apribojimai ir MCP autorizavimo problema „Claude Code“, minėtos prieinamumo ir sąrankos skiltyse.

Kada „Stitch“ netinka: jei daugeliui projektų turite laikytis griežtų prekės ženklo gairių, jei dizainas jau sukurtas „Figma“ arba jei reikia programėlės su jau paskelbtu backend.

Kas toliau?#

Sukurkite mažiausią darbo eigą su vienu ekranu: aprašykite produktą „Stitch“, sugeneruokite pagrindinį puslapį, eksportuokite jo HTML/CSS ir paprašykite Claude Code iš tų vietinių failų sudaryti DESIGN.md bei sukurti puslapį. Pamatę, kaip violetinis gradientas dingsta savaime, visa kita darysis lengviau.

Dizainas su „Stitch“ yra viena konteksto inžinerijos technika. Visa sistema sujungia AI kloną, Antrąsias smegenis ir konteksto inžineriją, kad „Claude“ galėtų remtis parengtomis taisyklėmis ir kontekstu.

AI klonas, Antrosios smegenys ir konteksto inžinerija svarbūs produktui. Dizainas su „Stitch“ – pirmasis šio derinio elementas.

Jei norite toliau dirbti su modeliais, apsilankykite „Ailoot“.