Google Stitch + Claude Code: «AI келбетінсіз» сайт дизайны

Ailoot-пен жұмыс істеуге арналған қосымша нұсқаулар құжаттамада берілген.

Claude Code-пен жасалған сайттар неге «AI слопқа» ұқсайды?#

Мұнда сипатталған нақты жағдайда қоңырау шалуға арналған қолданбаның басты бетін әзірлеу бос жобадан және Claude Code-тан лендинг жасауды сұраудан басталды. Нәтижесі таныс еді: фонға slate-950, акцентке indigo-500, тақырыпқа қалың Inter және астына көлеңкесі бар бірдей үш карточка. Алғашқы v0, алғашқы Lovable, алғашқы ChatGPT жасаған нұсқамен бірдей құрылым. Сұрау мәтінін бес рет қайта жазып, «премиум», «басқаларға ұқсамайтын», «заманауи» деген сөздерді қостым — бет бәрібір 2015 жылғы WordPress тақырыбына ұқсап тұрды.

Логикасы қарапайым: шектеулер болмаса, модель көрген дүниесінің статистикалық орташасын алады. Ал көргені — Bootstrap пен Tailwind арқылы жасалған миллион бірдей лендинг. Орташа емес нәтиже алу үшін агентке нақты деректерді беру керек: қандай түстер, қандай қаріптер, қандай аралықтар және қандай компоненттер негізгі үлгі болуы тиіс. Модель үшін «әдемі» деген сөз «2020 жылдың медианасы» дегенді білдіреді. Сын есімдер нәтижені өзгертпейді; нақты параметрлер қажет.

Осы алшақтықты Refero арқылы дайын дизайн жүйелері туралы нұсқаулықта да қарастырдым — онда басқа біреудің стилін (Apple, Linear, Stripe) алып, агентке бересіз. Google Stitch бұған керісінше жолмен келеді: басқа біреудің стилін алудың орнына, өз сипаттамаңыздан өзіңіздікін жасайсыз.

Google Stitch деген не және ол қалай көмектеседі?#

Stitch — Google Labs-тың 2025 жылғы мамырда Google I/O көрмесінде таныстырылған эксперименті. Сұрау өрісіне қолданбаның қандай болғанын қалайтыныңызды жазасыз (немесе скриншот, тақтадағы нобай не бәсекелес сайттың бетін жүктейсіз), ал Stitch шексіз кенепте интерфейс экрандарын жасайды. Ішінде Gemini 2.5 Pro және Flash қолданылады, ал 2025 жылғы желтоқсанда өңделгенірек орналасулар үшін Gemini 3 қосылды.

Бізге пайдалы тұстары:

• Vibe Design — сезімді сөзбен сипаттаңыз («минималистік әрі премиум, Stripe сияқты») да, таңдау үшін бірнеше визуал бағыт алыңыз.
• Анықтамалар — Dribbble немесе Pinterest-тен сурет жүктеңіз; Stitch оның орналасуын сақтап, талаптарыңызды қолданады.
• Экспорт үш пішімде: Figma-ға (өңделетін қабаттарымен), таза HTML/CSS ретінде және MCP арқылы — тікелей агентке.

Refero сияқты дайын стильдерден айырмашылығы маңызды. Refero — нақты сайттардан алынған дизайн жүйелерінің кітапханасы; онда бар брендті таңдайсыз. Stitch өніміңізге арнап жүйені нөлден жасайды. Дизайн үлгісі жоқ және өз келбетіңіз керек пе? Stitch таңдаңыз. Танымал өнімнің стилін тез қолдану керек пе? Refero қолайлы. Бұлар әртүрлі кезеңдерді қамтиды және бірін-бірі жақсы толықтырады.

Claude-тың өзінде де кіріктірілген дизайн режимі бар; ол туралы Claude Design жөніндегі нұсқаулықта жаздым. Stitch-тің айырмашылығы — агент әр құрастырған сайын оқитын дайын жүйені сыртқы файл ретінде беруі.

Google Stitch қолжетімді болу талаптары#

Stitch барлық елде қолжетімді емес: Google өкілі ресми форумда сервис 18 жастан асқан пайдаланушыларға 212 елде қолжетімді екенін және тізімнің кеңейіп жатқанын жазған. Қолжетімділігі шектелген аймақтарда сайтқа кіргенде бір ғана хабарлама көресіз: “Sorry, Stitch is unavailable.”

Google аккаунты қажет — тек сонымен ғана кіре аласыз.

Stitch MCP авторизациясы Claude Code жұмысына кедергі болса#

MCP қосуға қатысты интернетте жарамсыз ақпарат көп, нұсқаулардың жартысы жұмыс істемейді. Мысалы, көптеген нұсқаулық (соның ішінде ағылшын тіліндегі танымалдары) npx -y @google/stitch-mcp@latest пәрменімен @google/stitch-mcp пакетін орнатуды ұсынады. Ондай пакет жоқ — npm 404 қайтарады. Бұл пәрменді көшірмеңіз, уақытыңыз кетеді. Сол себепті нақты тапсырмада орнатылып, тексерілген интеграцияларды таңдаңыз.

Мұнда сипатталған қашықтағы MCP әрекеті Claude Code-та Incompatible auth server қатесіне жеткен. Байқалған қате жұмыс істейтін рецепт те, барлық қазіргі конфигурация істемейді деген дәлел де емес. Анықталмаған «MCP қос» қадамымен жалғастырмаңыз: нақты үйлесімді баптау тексерілгенше төмендегі қолмен HTML/CSS экспорт жолын қолданыңыз. Бұл тіркелген Claude Code қатесі, ол “not planned” мәртебесімен жабылған.

Алдымен кілт жасаңыз. Stitch ішінде: аватарыңызды басыңыз → Stitch settings → API key бөлімі → Create key → кілтті көшіріңіз.

Содан кейін проксиді Claude Code-қа бір пәрменмен қосыңыз:

bash

Кілтті орта айнымалысына енгізіңіз (ең оңай әдіс — Google консолі мен мерзімі бітетін токендерді әуре қылмайсыз):

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

Қолмен баптауды қаласаңыз, ол мынадай болады (~/.claude.json ішінде немесе жобаның түбіріндегі .mcp.json ішінде):

json

Claude Code-ты қайта іске қосып, қосылымның жұмыс істеп тұрғанын тексеріңіз:

claude mcp list

Stitch және DESIGN.md жұмыс барысы — контекст инженериясының ең таза үлгісі: нақты токендерді Claude контекстіне алдын ала енгізесіз, сонда ол «не айтқым келгенін болжауға» тырыспай, соларға қатаң сай құрастырады. Толық әдістеме үш тіректі біріктіреді — AI клон, Екінші ми және контекст инженериясы. Осы үйлесім Claude-ты «болжағыш көмекшіден» болжамды нәтиже беретін құралға айналдырады.

DESIGN.md деген не және ол скриншоттан несімен жақсы?#

Көптеген нұсқаулық қате түсіндіретін маңызды жайт: Stitch ішінде «Export DESIGN.md» батырмасы жоқ. Файлды агенттің өзі құрастырады. Google-дың ресми codelab нұсқаулығына сәйкес, сұрау шамамен мынадай болады: “go through Stitch MCP to the project, extract the palette and typography, and assemble a DESIGN.md from them.” Ол codelab жұмыс істейтін MCP қосылымын болжайды. Мұндағы қолмен жолда Claude Code экспортталған HTML/CSS-ті оқып, жоба түбіріне құрылымды файл жазады; жетіспейтін токендерді суреттен жорамалдаудың орнына белгілеуі керек.

DESIGN.md сын есімдердің орнына нақты деректерді қамтиды:

# 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 оны қолдануы үшін CLAUDE.md файлында осы файлға сілтеме жасаңыз (мысалы, “Use the design of all components from DESIGN.md” деген жолмен) — сонда агент әр сессияда бірдей токендерді енгізеді. Дүйсенбідегі батырма мен жұмадағы карточка бір стильде шығады, өйткені жалғыз негізгі дереккөз бар.

Бұл баптауда екі жергілікті үлгі бірге жұмыс істейді. DESIGN.md жүйе ережелерін — түс, типография, аралық және компоненттерді — сақтайды. Экспортталған Stitch HTML/CSS пен материалдар нақты экран макетін береді. MCP қосымша ғана және бұл жолдың алғышарты емес.

Сайтты қалай құрастыруға болады: мәтіннен дизайнға дейінгі толық жол#

Міне, бүкіл үдерістің реті:

1. Stitch-ті ашыңыз. Еліңіздегі қолжетімділікті тексеріп, Google аккаунтыңызбен stitch.withgoogle.com сайтына кіріңіз.
2. Өнімді сипаттаңыз. Экрандар мен пайдаланушы жолын көрсетіп, ұсынылған тізімді растаңыз не өзгертіңіз.
3. Үлгі қосыңыз. Қажетті скриншотты жүктеп, сақталатын түстерді, типографияны және орналасуды атаңыз.
4. Жасап, өңдеңіз. Бір экранды таңдап, дизайнды кеңейтпес бұрын соны жетілдіріңіз.
5. Таңдалған экранды HTML/CSS ретінде экспорттаңыз. Файлдар мен қажетті материалдарды жобаның үлгі қалтасына сақтаңыз. Экспортталған HTML-ді жергілікті ашып, таңдаған экран екенін тексеріңіз; жалғыз скриншотта дәл CSS мәндері жоқ.
6. DESIGN.md файлын жергілікті экспорттан жасаңыз. Claude Code-тан экспортталған HTML/CSS-ті оқып, нақты түс, қаріп, аралық, макет пен компонент мәндерін жазуды және жетіспейтіндерін шешіміңізге тізуді сұраңыз. Бұл жолға Stitch API кілті не MCP авторизациясы қажет емес.
7. Бір бет жасап, тексеріңіз. Қалта атауын нақты экспорт жолымен алмастырып, мына сұрауларды беріңіз:

refs/stitch-export/ ішіндегі Stitch HTML/CSS экспортын оқы. Сол файлдардағы
мәндермен жоба түбірінде DESIGN.md жаса. Жетіспейтін мәндерді ойдан шығармай ата.

DESIGN.md және жергілікті Stitch экспортынан бір бет жаса. Компоненттер
модульді болсын. Көрсетілген бетті компьютер мен телефон ендерінде экспортпен
салыстырып, навигация мен интерактивті күйлерді бөлек тексер.

Одан кейін бәрін Claude Code атқарады: экрандар арасында бағыттау, DESIGN.md-тегі шекара нүктелеріне сай бейімделгіштік, анимациялар мен интерактивтілік. Stitch статикалық экрандар мен басуға болатын прототип береді, бірақ жұмыс істейтін логика жасамайды да, хостингке жарияламайды — бұл агенттің міндеті.

«AI келбетінен» қалай арылуға болады: нақты нені өзгерту керек?#

Сайттың өзін аңғартпайтын болуына әсер ететін нақты тұстар:

• Түс. Күлгін indigo-500 — ең алғашқы белгі. Негізгі және акцент түстерін DESIGN.md ішінде дәл hex мәндерімен көрсетіңіз. «Бренд көгі» дегенді әр агент әртүрлі түсінеді.
• Қаріп. Inter — ең қауіпсіз, сондықтан ең танымал «AI қарпі». Мәнерлі жұп таңдаңыз: мысалы, негізгі мәтінге sans serif, ал тақырыптарға өзіндік сипаты бар қаріп. Оны Stitch дизайнында белгілеп, DESIGN.md файлына жазыңыз.
• Сын есімнің орнына анықтама. Модель «заманауи етіп жаса» дегенді «2020 жылдың медианасы» деп түсінеді. Ал нақты скриншотпен бірге «мына беттің орналасуын қолдан» десеңіз, тура қабылдайды. Stitch-ке анықтамалық сурет жүктеңіз; талғамды сөзбен жеткізе алмайсыз.
• Аралықтар мен кең тыныс. Шаблондық орналасу тар, бірдей блоктардан танылады. DESIGN.md файлына кең аралық шкаласын орнатыңыз — сонда агент элементтерді еркінірек орналастырады.

Нақтылық субъективті сын есімдерден басым. Stitch — «осындай болсын» деген қалауыңызды дәл токендерге аударатын машина сияқты; сонда агентке болжайтын ештеңе қалмайды.

Google Stitch пе, әлде баламалары ма: қайсысын таңдау керек?#

Бюджетпен vibe coding жасағанда маңызды өлшемдер бойынша құралдарды салыстырдым:

Өзім қолданатын жұмыс барысы: дизайнды зерттеу үшін Stitch → құрастыру мен логика үшін Claude Code. Бюджеті шектеулі vibe coder үшін Stitch тиімді, себебі ол тегін және өніміңізге арнап қайталанбас келбетті нөлден сызады. Нарықтағы құралдардың толық жиынын білгіңіз келсе, 2026 жылы немен кодтауға болады деген негізгі мақалада қарастырдым.

Google Stitch қай тұста шектеулі: оның қандай кемшіліктері бар?#

Үшінші экранға жеткенде көңіліңіз қалмас үшін, шектеулерін ашық айтайын:

• Тек интерфейс. Backend, дерекқор немесе хостингке жариялау жоқ. Бұған Claude Code қажет (немесе бәрін бір жерде істегіңіз келсе, Lovable).
• Құрал ішіндегі өңдеу шектеулі. Жеке элементті тінтуірмен жылжыта алмайсыз — тек сұрау арқылы өзгертіп, қайта жасайсыз. Бұл Figma емес.
• Детерминдік емес нәтиже. Бірдей сұрау әртүрлі нәтижелер береді. Идея зерттеуге жақсы, қайталанатын нәтиже керек болғанда қолайсыз.
• Квота. Тегін генерация шегіне (қазір күн сайын) жетесіз; қосымша сатып ала алмайсыз, квота қайта орнағанша күту керек. Нақты саны өзгеріп тұрады, сондықтан интерфейстен тексеріңіз.
• Эксперимент мәртебесі. Google Labs ұзақ мерзімді қолдауға міндеттеме алмайды. Сервис өзгеруі немесе жабылуы мүмкін.
• Географиялық шектеу және Claude Code-тағы MCP авторизация мәселесі; олар қолжетімділік пен баптау бөлімдерінде айтылды.

Stitch қолайсыз болатын жағдайлар: көптеген жобаға арналған қатаң бренд нұсқаулығы болса, дизайн Figma-да дайын тұрса немесе backend-і бар әрі жарияланған қолданба қажет болса.

Әрі қарай не істеу керек?#

Бір экраннан тұратын ең шағын жұмыс барысын құрыңыз: Stitch-ке өнімді сипаттап, басты бетін жасатып, HTML/CSS экспорттаңыз, сосын Claude Code-тан сол жергілікті файлдардан DESIGN.md құрастырып, бетті жасауды сұраңыз. Күлгін градиент өздігінен жоғалғанын көрген соң, қалғаны оңайырақ болады.

Stitch-пен жобалау — контекст инженериясының бір тәсілі. Толық жүйе Claude дайын ережелер мен контекске сүйене алуы үшін AI клонды, Екінші миды және контекст инженериясын біріктіреді.

AI клон, Екінші ми және контекст инженериясы өнім үшін маңызды. Stitch-пен жобалау — осы үйлесімнің алғашқы құраушы бөлігі.

Модельдермен әрі қарай жұмыс істеу үшін Ailoot сайтына өтуге болады.