Google Stitch + Claude Code: saytdagi “AI ko‘rinishi”siz dizayn

Ailoot bilan ishlash bo‘yicha qo‘shimcha ko‘rsatmalar hujjatlarda berilgan.

Nega Claude Code’da yaratilgan saytlar “AI chiqindisi”ga o‘xshaydi?#

Amaliy misolda qo‘ng‘iroq ilovasining bosh sahifasi ustidagi ish bo‘sh loyihadan va Claude Code’dan landing sahifa yaratishni so‘rashdan boshlandi. Natija klassik edi: fon uchun slate-950, aksent uchun indigo-500, sarlavhada qalin Inter va ostida soyali uchta bir xil karta. Birinchi v0, birinchi Lovable, birinchi ChatGPT generatsiyasidagi ayni maket. So‘rov matnini besh marta qayta yozdim, “premium”, “boshqalarga o‘xshamasin”, “zamonaviy” deb qo‘shdim — sahifa baribir 2015-yildagi WordPress mavzusiga o‘xshardi.

Mantiq oddiy: cheklovlarsiz model ko‘rgan narsalarining statistik o‘rtachasini oladi. U esa Bootstrap va Tailwind’da yaratilgan millionta bir xil landing sahifani ko‘rgan. O‘rtacha bo‘lmagan natija olish uchun agentga aniq ma’lumotlarni berish kerak: qaysi ranglar, qaysi shriftlar, qaysi oraliqlar, qaysi komponentlar asosiy deb olinishi. Model uchun “chiroyli” so‘zi “2020-yil medianasi” degani. Sifatlar buni o‘zgartirmaydi; aniq parametrlar kerak.

Aynan shu tafovutni Refero bilan tayyor dizayn tizimlari haqidagi qo‘llanmada ham ko‘rib chiqqanman — u yerda birovning uslubini (Apple, Linear, Stripe) olib, agentga berasiz. Google Stitch bunga boshqa tomondan yondashadi: birovning uslubini olish o‘rniga, o‘zingiznikini — tavsifingiz asosida — yaratasiz.

Google Stitch nima va u qanday yordam beradi?#

Stitch — Google Labs tajribasi bo‘lib, 2025-yil mayida Google I/O’da taqdim etilgan. So‘rov maydonida ilova qanday ko‘rinishda bo‘lishini yozasiz (yoki skrinshot, doska eskizi yoxud raqobatchi sahifasini yuklaysiz), Stitch esa cheksiz kanvasda interfeys ekranlarini yaratadi. Ichkarida Gemini 2.5 Pro va Flash’dan foydalanadi; yanada sayqallangan maketlar uchun 2025-yil dekabrida Gemini 3 qo‘shilgan.

Biz uchun foydali jihatlari:

• Vibe Design — hissiyotini so‘z bilan tasvirlang (“minimalist va premium, Stripe kabi”) va tanlash uchun bir nechta vizual yo‘nalish oling.
• Namunalar — Dribbble yoki Pinterest’dan tasvir yuklang; Stitch uning maketini saqlab, talablaringizni qo‘llaydi.
• Eksport uch formatda: Figma’ga (tahrirlanadigan qatlamlar bilan), toza HTML/CSS sifatida va MCP orqali — to‘g‘ridan-to‘g‘ri agentga.

Refero kabi tayyor uslublardan farqi muhim. Refero — haqiqiy saytlardan avvaldan ajratib olingan dizayn tizimlari kutubxonasi; mavjud brendni olasiz. Stitch esa mahsulotingiz uchun tizimni noldan yaratadi. Namunaviy dizayn yo‘q va o‘z ko‘rinishingizni xohlaysizmi? Stitch. Taniqli mahsulot uslubini tez qo‘llash kerakmi? Refero. Ular turli bosqichlarni qamrab oladi va bir-birini yaxshi to‘ldiradi.

Claude’ning o‘zida ham o‘rnatilgan dizayn rejimi bor; bu haqda Claude Design qo‘llanmasida yozganman. Stitch’ning farqi shundaki, u tashqi faylda tayyor tizimni beradi va agent har safar nimadir yaratganda shu faylni o‘qiydi.

Google Stitch’dan foydalanish talablari#

Stitch barcha mamlakatlarda mavjud emas: Google vakili rasmiy forumda xizmat 18 yoshdan katta foydalanuvchilar uchun 212 mamlakatda mavjudligini va ro‘yxat kengayib borayotganini yozgan. Cheklangan hududlarda saytga kirganingizda aynan bitta xabarni ko‘rasiz: “Kechirasiz, Stitch mavjud emas.”

Google hisobi kerak — faqat u bilan tizimga kirish mumkin.

Stitch MCP avtorizatsiyasi Claude Code jarayonini to‘ssa, nima qilish kerak?#

MCP’ni ulash haqida internetda juda ko‘p bema’ni ko‘rsatmalar bor va ularning yarmi shunchaki ishlamaydi. Masalan, ko‘plab qo‘llanmalar (jumladan, ingliz tilidagilari orasida mashhurlari) @google/stitch-mcp paketini npx -y @google/stitch-mcp@latest buyrug‘i bilan o‘rnatishni tavsiya qiladi. Bunday paket mavjud emas — npm 404 qaytaradi. Bu buyruqni ko‘chirmang; vaqtingiz ketadi. Xuddi shu sababli, o‘rnatilishi va haqiqiy vazifada tekshirilgani tasdiqlangan integratsiyalarni tanlang.

Tasvirlangan masofaviy MCP urinishida Claude Code Incompatible auth server xatosiga yetgan. Bu ishlaydigan retsept ham, barcha joriy konfiguratsiya ishlamasligi isboti ham emas. Noaniq «MCP’ni ulang» bilan davom etmang; aniq mos konfiguratsiya sinalguncha quyidagi HTML/CSS eksport yo‘lini ishlating.

Quyidagi MCP parchasida yetishmagan buyruq va konfiguratsiya bor; bu sinalgan ulanish retsepti emas. Uni bajarilgan yo‘l deb olmang. Ushbu maqoladagi to‘liq ish yo‘li HTML/CSS eksporti bo‘lib, kalit yoki MCP talab qilmaydi. MCP kaliti menyusi haqidagi ma’lumot: Stitch’da avatarni bosing → Stitch settings → API key bo‘limi → Create key → nusxa oling.

Keyin proksini Claude Code’ga bitta buyruq bilan qo‘shing:

bash

Kalitni muhit o‘zgaruvchisiga joylang (eng oson usul — Google konsoli va muddati tugaydigan tokenlar bilan ovora bo‘lmaysiz):

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

Agar qo‘lda sozlashni ma’qul ko‘rsangiz, u quyidagicha ko‘rinadi (loyiha ildizidagi ~/.claude.json yoki .mcp.json ichida):

json

Claude Code’ni qayta ishga tushiring va ulanish ishlayotganini tekshiring:

claude mcp list

Stitch va DESIGN.md jarayoni — kontekst muhandisligining eng sof ko‘rinishi: aniq tokenlarni Claude kontekstiga oldindan joylaysiz, u esa “nimani nazarda tutganimni taxmin qilmasdan” ularga qat’iy amal qilib yaratadi. To‘liq metodologiya uchala ustunni — AI klonini, Ikkinchi Miyani va Kontekst muhandisligini — birlashtiradi. Aynan shu uyg‘unlik Claude’ni “taxmin qiladigan yordamchi”dan oldindan aytish mumkin bo‘lgan natija beruvchi vositaga aylantiradi.

DESIGN.md nima va u nega skrinshotdan yaxshiroq?#

Ko‘rsatmalarning aksariyati xato beradigan muhim jihat mana bu: Stitch’da “Export DESIGN.md” tugmasi yo‘q. Faylni agentning o‘zi yig‘adi. Google’ning rasmiy codelab’iga ko‘ra, so‘rov taxminan shunday: “Stitch MCP orqali loyihaga kir, ranglar palitrasi va tipografiyani ajratib ol, ulardan DESIGN.md tuz.” O‘sha codelab ishlaydigan MCP’ni faraz qiladi. Bu qo‘lda yo‘lda Claude Code eksport HTML/CSS’ini o‘qib, tuzilgan faylni loyiha ildiziga yozadi. Yetishmagan tokenni rasmdan taxmin qilmay, belgilashi kerak.

DESIGN.md sifatlar o‘rniga aniq ma’lumotlarni saqlaydi:

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

Claude Code’dan foydalanishi uchun CLAUDE.md ichida faylga havola bering (masalan, “Barcha komponentlar dizaynini DESIGN.md dan oling” degan qator bilan) — shunda agent har bir sessiyada ayni tokenlarni yuklaydi. Dushanbadagi tugma va juma kungi karta bir xil uslubda chiqadi, chunki yagona haqiqat manbai bor.

Bu yo‘lda ikki mahalliy namuna ishlaydi. DESIGN.md rang, tipografiya, oraliq va komponent qoidalarini, eksport HTML/CSS va asset’lar esa ekran maketini beradi. MCP ixtiyoriy, bu yo‘l uchun shart emas.

Saytni qanday yaratish mumkin: matndan dizayngacha bo‘lgan to‘liq yo‘l#

Mana butun jarayonning tartibi:

1. Stitch’ni oching. Mamlakatingizdagi mavjudlikni tekshirib, Google hisobingiz bilan stitch.withgoogle.com ga kiring.
2. Mahsulotni tavsiflang. Ekran va foydalanuvchi yo‘lini yozib, taklif ro‘yxatini tasdiqlang yoki tahrirlang.
3. Namuna qo‘shing. Kerakli skrinshotni yuklab, saqlanadigan rang, tipografiya va maketni belgilang.
4. Yarating va sayqal bering. Kengaytirishdan oldin bitta ekranni tanlab takomillashtiring.
5. HTML/CSS eksporti. Tanlangan ekran fayllari va asset’larni loyiha refs papkasiga saqlang. HTML’ni mahalliy ochib, tanlangan ekran ekanini tekshiring. Skrinshot aniq CSS qiymatini bermaydi.
6. Mahalliy fayldan DESIGN.md. Claude Code’dan HTML/CSS’dagi haqiqiy rang, shrift, oraliq, maket va komponent qiymatini yozishni, yetishmaganlarini qaroringiz uchun sanashni so‘rang. Stitch kaliti yoki MCP kerak emas.
7. Bir sahifa yaratib tekshiring. Papkani haqiqiy eksport yo‘liga almashtirib so‘rang:

refs/stitch-export/ ichidagi Stitch HTML/CSS eksportini o‘qing. Fayllardagi
qiymatlardan loyiha ildizida DESIGN.md yarating. Yetishmaganini to‘qimay sanang.

DESIGN.md va mahalliy Stitch eksportidan bitta sahifa yarating. Komponentlar
modulli bo‘lsin. Desktop va mobil kenglikda eksport bilan solishtiring;
navigatsiya va interaktiv holatlarni alohida tekshiring.

Shundan keyin hammasini Claude Code bajaradi: ekranlar orasida yo‘naltirish, DESIGN.md’dagi uzilish nuqtalariga moslashuvchanlik, animatsiyalar va interaktivlik. Stitch statik ekranlar va bosiladigan prototip beradi, ammo ishlaydigan mantiqni yaratmaydi va hostingga nashr etmaydi — bu agentning vazifasi.

“AI ko‘rinishi”dan qanday qutulish mumkin: aynan nimani o‘zgartirish kerak?#

Sayt o‘zini oshkor qilishdan to‘xtaydigan aniq nuqtalar:

• Rang. Binafsha indigo-500 — birinchi belgi. Asosiy va aksent ranglarni bevosita DESIGN.md’da aniq hex qiymatlarida belgilang. Har bir agent “brend ko‘ki”ni o‘zicha talqin qiladi.
• Shrift. Inter eng xavfsiz va shuning uchun eng taniqli “AI shrifti”. Ifodali juftlikni tanlang: masalan, asosiy matn uchun sans serif, sarlavhalar uchun esa o‘ziga xos shrift. Uni Stitch dizaynida belgilang va DESIGN.md’da qayd eting.
• Sifat o‘rniga namuna. Model “zamonaviy qil”ni “2020-yil medianasi” deb talqin qiladi. “Mana bu sahifaning maketidan foydalan” degan ko‘rsatmani haqiqiy skrinshot bilan aynan bajaradi. Stitch’ga namunaviy tasvir yuklang; didni so‘z bilan yetkaza olmaysiz.
• Oraliq va kenglik. Shablon maketi siqiq, bir xil bloklaridan bilinadi. DESIGN.md’da keng oraliqlar shkalasini belgilang — agent elementlarni erkinroq joylashtiradi.

Aniqlik subyektiv sifatlardan ustun. Stitch mohiyatan “menga mana bunday kerak” degan istagingizni aniq tokenlarga tarjima qiladigan mashina, shuning uchun agentda taxmin qiladigan narsa qolmaydi.

Google Stitch yoki muqobillar: qaysi birini tanlash kerak?#

Byudjeti cheklangan holda vibe coding qilishda haqiqatan muhim bo‘lgan jihatlar bo‘yicha vositalarni taqqosladim:

O‘zim foydalanadigan jarayon: dizaynni o‘rganish uchun Stitch → sayt va mantiqni yaratish uchun Claude Code. Byudjeti cheklangan vibe coder uchun Stitch yutadi, chunki u bepul va mahsulotingiz uchun o‘ziga xos ko‘rinishni noldan chizadi. Bozordagi barcha vositalarni tushunmoqchi bo‘lsangiz, 2026-yilda nimalar bilan kod yozish mumkinligi haqidagi asosiy maqolada ularni yoritganman.

Google Stitch qayerda ojiz: uning cheklovlari qanday?#

Uchinchi ekranga yetmasdan hafsalangiz pir bo‘lmasligi uchun cheklovlarning xolis ro‘yxati:

• Faqat interfeys. Backend, ma’lumotlar bazasi yoki hostingga nashr qilish yo‘q. Buning uchun Claude Code kerak (yoki hammasi bir joyda bo‘lishini istasangiz Lovable).
• Vosita ichida tahrirlash cheklangan. Alohida elementni sichqoncha bilan siljita olmaysiz — faqat so‘rov orqali o‘zgartirib, qayta generatsiya qilasiz. Bu Figma emas.
• Nodeterministiklik. Bir xil so‘rov turli natija beradi. G‘oyalarni o‘rganishda yaxshi, takrorlanadigan natija kerak bo‘lganda noqulay.
• Kvota. Bepul generatsiya limitiga yetasiz (hozirda kunlik); qo‘shimchasini sotib ololmaysiz, kvota yangilanishini kutishingiz kerak. Aniq son o‘zgaradi, shuning uchun interfeysni tekshiring.
• Tajriba maqomi. Google Labs uzoq muddatli qo‘llab-quvvatlash majburiyatini olmaydi. Xizmat o‘zgarishi yoki yopilishi mumkin.
• Geografik cheklov va Claude Code’dagi MCP avtorizatsiya muammosi; ular mavjudlik va sozlash bo‘limlarida aytilgan.

Stitch mos kelmaydigan holatlar: ko‘plab loyihalarda qat’iy brend qo‘llanmasi bo‘lsa, dizayn Figma’da allaqachon mavjud bo‘lsa yoki backend’i bor va allaqachon nashr qilingan ilova kerak bo‘lsa.

Keyin nima qilamiz?#

Bitta ekrandan iborat eng kichik jarayonni yarating: Stitch’da mahsulotni tavsiflang, bosh sahifani hosil qiling, HTML/CSS’ini eksport qiling va Claude Code’dan shu mahalliy fayllardan DESIGN.md hamda sahifani yaratishni so‘rang. Binafsha gradient o‘z-o‘zidan yo‘qolganini ko‘rganingizdan keyin, qolganlari osonlashadi.

Stitch bilan dizayn qilish — kontekst muhandisligining bir usuli. To‘liq tizim AI kloni, Ikkinchi Miya va kontekst muhandisligini birlashtiradi, shunda Claude tayyorlangan qoidalar va kontekstga tayanadi.

AI kloni, Ikkinchi Miya va kontekst muhandisligi mahsulot uchun muhim. Stitch bilan dizayn qilish — bu uyg‘unlikning birinchi qurilish bloki.

Modellar bilan keyingi ishlar uchun Ailoot saytiga o‘tishingiz mumkin.