# Claude Code’da bir oqshomda animatsiyali veb-saytni qanday yaratish mumkin
> Claude Code’da animatsiyali veb-sayt yaratishda shablonlarga o‘xshash dizayn, vizual yo‘nalishlar, GSAP, maxsus imkoniyatlar va unumdorlikni sinashga oid qoidalar.
Source: https://ailoot.ai/blog/uz/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/uz/animated-website-claude-code/
Language: uz
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-a117c9b02d1bd149ae83b9f6ce50df0a6fbf091110b16992a88af9412a16d591
Asosiy xulosa
Claude Code bir oqshomda animatsiyali veb-sayt yaratishi mumkin, ammo aniq cheklovlar bo‘lmasa, model o‘quv ma’lumotlaridagi o‘rtacha uslubga og‘ib ketgani uchun natija shablonlardagidek ko‘rinadi. Buni uchta narsa tuzatadi: `CLAUDE.md` faylidagi shablonlarga qarshi qoidalar, mavhum so‘rov o‘rniga tayyor vizual yo‘nalish va kontekstning o‘zida animatsiya kutubxonasining yangilangan hujjatlari. Jarayondagi asosiy tuzoq — harakat effektlarini haddan tashqari ko‘paytirish: ortiqcha animatsiya ularning yo‘qligidan ko‘ra ko‘proq generatsiya izini bildiradi va ekran yuqorisidagi kontent yuklanishini sekinlashtiradi.
Modellar bilan ishlash haqida [Ailoot hujjatlaridan](https://ailoot.ai/docs/) ko‘proq bilib oling.
## Sun’iy intellekt yaratgan veb-saytni birinchi ekrandanoq nima fosh qiladi?
Asosiy xulosa
Modelga aniq chegaralar belgilanmasa, u o‘quv ma’lumotlarida ko‘rgan hamma narsani o‘rtachalashtiradi. Ilgari natijada binafsha tugmalar va Inter shrift paydo bo‘lardi; endi esa trend qaymoqrang fon, serif shrift va terakota rangli aksentga o‘zgardi. Anthropic o‘zining skill hujjatlarida shunday uchta standart ko‘rinishni ta’riflab, ularni ochiqchasiga standart xatti-harakat deb atadi.
Agentdan landing sahifa tayyorlashni so‘raysiz. Qirq daqiqadan so‘ng tayyor sayt qo‘lingizda: bo‘limlari joyida, moslashuvchan maketi bor, tugmalari ishlaydi. Ammo deyarli darhol buni qayerdadir avval ham ko‘rgandek his qilasiz.
Sababi mexanik. Model tayyor sahifalarning ulkan to‘plamida o‘qitilgan va bu to‘plamda kuchli og‘ish bor edi.
Minglab qo‘llanma va boshlang‘ich shablonlar shu rangni ko‘chirib, namunalar to‘plamiga og‘ish kiritdi va model tugmalar binafsha bo‘lishini o‘rgandi. Xuddi shu mexanizm shriftlar, yumaloq burchaklar va soyalarga ham taalluqli.
Bu orada “sun’iy intellekt ko‘rinishi” o‘zgardi. Anthropic o‘zining `frontend-design` skilli hujjatlarida endi boshqa ko‘rinishlarni ta’riflaydi.
Sun’iy intellekt yaratgan dizayn endi uch ko‘rinish atrofida to‘planmoqda: qarama-qarshi serif sarlavha va terakota aksentli iliq qaymoqrang fon (taxminan #F4F1EA); bitta yorqin kislota-yashil yoki vermilion aksentli, deyarli qora fon; hamda ingichka chiziqlar, nol burchak radiusi va zich gazeta ustunlariga ega keng gazeta maketi. Uchalasining ham o‘ziga yarasha vazifasi bor, ammo bular ataylab qilingan tanlov emas, standart xatti-harakat va mavzudan qat’i nazar paydo bo‘ladi.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Asosiy muammo: ko‘chirib olish uchun muayyan namuna bo‘lmaganda, model barcha veb-uslublarni o‘rtachalashtirib yuboradi va natijada slop paydo bo‘ladi.
Bu yerda “slop” deganda, o‘ziga xos uslubi bo‘lmagan, o‘rtachalashtirilib, umumiy natijaga aylangan mashina yaratgan ish nazarda tutiladi.
Amaliy xulosa shuki, agentga ochiq topshiriq o‘rniga tor doiradagi dizayn grammatikasi kerak. “Chiroyli qil” desangiz, u o‘rtacha natijani oladi. Muayyan ranglar palitrasi, bir-ikkita shrift va ko‘rinishni belgilovchi bitta vizual usul bersangiz, shular asosida yaratadi.
Bu manzarada eng ko‘zga tashlanadigan belgi — harakat. Hatto mukammal tipografiyali statik sahifa ham shablondek tuyuladi, chunki jonli veb-saytlar nafas oladi: aylantirganingizda elementlar paydo bo‘ladi, kursor o‘zgarishlarga sabab bo‘ladi, ekranlar orasidagi o‘tishlar esa keskin uzilmaydi.
## Claude Code’da animatsiyali veb-sayt yaratish uchun nima kerak?
Asosiy xulosa
Asboblarning butun to‘plami bepul. Sizga Claude Code’ning o‘zi, GSAP animatsiya kutubxonasi (2025-yil aprel oxiridan boshlab u to‘liq bepul, avval pulli bo‘lgan SplitText va MorphSVG kabi plaginlari bilan birga), va Anthropic’ning `frontend-design` skilli kerak. Nashr qilish uchun istalgan bepul hosting xizmati ham kerak bo‘ladi. Faqat agentning ishiga haq to‘laysiz.
Narxlar haqida ko‘p chalkashlik borligi uchun asboblarni birma-bir ko‘rib chiqamiz.
**GSAP** — mukofot olgan mashhur veb-saytlarning salmoqli qismida ishlatiladigan animatsiya kutubxonasi. Webflow uni 2024-yil oktabrda sotib oldi va ko‘p o‘tmay hammasi bepul bo‘lgani haqida mish-mishlar tarqala boshladi. Bu unchalik to‘g‘ri emas: o‘sha paytda Webflow amaldagi narxlar saqlanib qolishini tasdiqlagan. Kutubxona **2025-yil aprel oxirida**, 3.13-versiya bilan bepul bo‘ldi.
Webflow’ning ko‘magi tufayli GSAP endi barcha foydalanuvchilar uchun butunlay bepul.
— GSAP, https://gsap.com/pricing
3.13 versiyasi relizida SplitText va MorphSVG kabi ilgari pulli bo‘lgan plaginlar, jumladan tijoriy foydalanish uchun ham, bepul bo‘lgani alohida aytilgan. 2026-yil iyul holatiga ko‘ra, joriy versiya `gsap@3.15.0`.
Bepul degani ochiq kodli degani emas. Litsenziya xususiyligicha qoladi va Webflow bilan raqobatlashadigan vizual animatsiya muharririni GSAP asosida yaratishni taqiqlaydi. Veb-saytlar, mijozlar loyihalari yoki tijoriy ishlar uchun hech qanday cheklov yo‘q.
**Anthropic’ning `frontend-design` skilli** — interfeys ustida ishlash usulini o‘zgartiradigan ko‘rsatmalar to‘plami. Uning repozitoriy tavsifida shunday deyilgan:
Yangi interfeys yaratish yoki mavjudini qayta ishlashda o‘ziga xos va puxta vizual dizayn uchun ko‘rsatmalar. Estetik yo‘nalish, tipografiya va standart shablondek ko‘rinmaydigan dizayn yechimlarini tanlashga yordam beradi.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Uning ichida ikki bosqichli usul bor. Avval agent tokenlar tizimini tuzadi: nomlangan to‘rtdan oltitagacha rang, kamida ikki vazifaga mo‘ljallangan shriftlar, matnli eskizlarda maket sxemasi va sahifa ko‘rinishini belgilovchi bitta vizual usul. Keyin rejasini topshiriqqa mosligi bo‘yicha tanqidiy baholaydi. Shundan keyingina kod yozadi.
Postda 75 ta skill deyilgan, repozitoriy tavsifida 78 tasi ko‘rsatilgan, bugungi kunda esa fayllar daraxtida 91 tasi bor. Muallif buni yashirmaydi: tavsif eskirgan, shu sababli repozitoriyni qidiruv buyrug‘i bilan tekshirish kerak.
## Claude Code’ni shablonlar yaratishni to‘xtatishga qanday undash mumkin?
Asosiy xulosa
Ikki qadam kerak. Avval `CLAUDE.md` fayliga bir qator taqiqlar kiriting: standart ranglar palitrasidan foydalanmang, sarlavhalar va asosiy matn uchun bitta shriftni qo‘llamang, shuningdek, faqat opacity va transform xususiyatlarini animatsiya qiling. Keyin `frontend-design` skillini o‘rnating; u agentni kod yozishdan oldin tokenlar tizimini tuzish va rejasini tanqidiy baholashga undaydi.
Avval qoidalar faylidan boshlaylik, chunki u har bir so‘rovda kuchga kiradi va hech narsa turmaydi.
Foydali boshlang‘ich nuqta — anti-template guardrails qoidalari bloki. Mantiqi oddiy: model odatda og‘ib boradigan muayyan tanlovlarni sanab, ularni nomma-nom taqiqlash.
```markdown
## Anti-Generic Guardrails
- Colors: Never use default Tailwind palette (indigo-500, blue-600).
Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
with a clean sans. Apply tight tracking (-0.03em) on large headings,
generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).
```
Bu blok ingliz tilida ataylab yozilgan: model qisqa texnik ko‘rsatmalarga hujjatlar tilida aniqroq amal qiladi.
Animatsiya haqidagi qoida ranglar va soyalar yonidagi taqiqlar ro‘yxatiga bejiz kiritilmagan. Birinchi ekrandagi opacity tezlik ko‘rsatkichiga to‘g‘ridan-to‘g‘ri salbiy ta’sir qiladi; bunga quyida qaytamiz.
Keyingi navbatda — skill. Anthropic’ning rasmiy skilllarini plagin orqali o‘rnatish mumkin:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
Bir jihati bor: dizayn skilllarini alohida o‘rnatib bo‘lmaydi; `example-skills` plagini o‘n ikkala skillni birdan olib keladi. Faqat bittasi kerak bo‘lsa, papkani qo‘lda ko‘chiring — Claude Code uni sessiyani qayta boshlamasdan ham topadi:
```bash
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
```
To‘plamdagi boshqa foydali skilllar: tayyor o‘nta mavzuga ega `theme-factory` (ularni qo‘llashdan oldin inson tasdig‘i talab qilinadi), tayyor komponentlar bilan React’da qurish uchun `web-artifacts-builder` va generativ grafika uchun `algorithmic-art`. [Claude Code uchun skillni qanday tanlash](https://ailoot.ai/blog/uz/choose-claude-code-skills/) haqidagi alohida maqolada batafsil tushuntirilgan.
Qoidalar va skill birgalikda ishlaydi: qoidalar yomon tanlovlarni taqiqlaydi, skill esa jarayonni belgilaydi — avval tizim, keyin tanqidiy baholash, oxirida kod.
Bu yerdagi barcha muhim ishlar so‘rov yuborilishidan oldin sodir bo‘ladi. Agent qurishda amal qiladigan cheklovlarni oldindan kontekstiga kiritasiz, shundan so‘ng so‘rov matnining o‘zi deyarli ahamiyatsiz bo‘lib qoladi. Bu yondashuv kontekst muhandisligi deb ataladi, `CLAUDE.md` fayli esa uning dastlabki bo‘g‘inidir. **Sun’iy intellekt kloni + Ikkinchi miya + Kontekst muhandisligi** uyg‘unligi Claude’ni o‘rtacha natija chiqaradigan generatordan uslubingizga amal qiladigan vositaga aylantirishga yordam beradi.
## Tayyor vizual yo‘nalishlar va animatsiya so‘rovlarini qayerdan topish mumkin?
Undagi harakat usullari: `animation-on-scroll`, `gsap`, `gsap-scrolltrigger-storytelling`, `cinematic-gsap-lenis-motion-system`, `cinematic-scroll-storytelling`, `marquee-loop`, `masked-reveal`, `staggered-word-reveal`, `reveal-hover-effect`, `scroll-progress-timeline`, `scroll-scrubbed-visual-sequence`, `scroll-scrubbed-word-reveal`, `scroll-world-storytelling`.
Dasturchi bo‘lmagan kishi uchun tayyor vizual yo‘nalishlar muhimroq. Mavhum “zamonaviy qil” so‘zi o‘rniga quyidagilardan birini tanlab, modelga yetishmayotgan tor doiradagi grammatikani bering:
- `clean-minimal-beige-light-mode` - och bej minimalizmi
- `dark-glass-clean-layout` - qora shisha uslubi
- `documentary-brutalist-agency` - brutalistik hujjatli uslub
- `editorial-portfolio-chapters` - jurnal kabi boblarga bo‘lingan portfolio
- `orange-clean-paper-saas` - to‘q sariq aksentli, qog‘oz uslubidagi servis sayti
- `solar-duotone-bold` - dadil ikki rangli bezak
- `tech-green-dark-mode-modern` - yashil rangdagi qoramtir texnologik uslub
- `light-mode-paper-technical` - och texnik qog‘oz uslubi
3D grafikalar va effektlar uchun texnik skilllar ham bor: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`.
Repozitoriyda o‘rnatish buyrug‘i yo‘q — muallif yo‘l xaritasida integratsiya usuli hal bo‘lgach, uni qo‘shishini ochiq aytadi. Claude Code uchun yagona ko‘rsatma:
Quyida o‘rnatish usullaridan biri keltirilgan. Bu buyruq repozitoriyda yo‘q; u o‘rnatish bo‘yicha tavsiya:
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
## Agentga yangilangan GSAP hujjatlarini bir qatorda qanday berish mumkin?
Asosiy xulosa
GSAP’ning `llms.txt` fayli bor — til modellari uchun maxsus tayyorlangan 25 kilobaytli hujjatlar xulosasi. Agentga uning havolasini bering, shunda u o‘tmishdan eslab qolgan ma’lumotlar o‘rniga yangilangan usullar tavsifiga tayanib ishlaydi. Har bir hujjat sahifasining markdown versiyasi ham mavjud. Motion kutubxonasida ham shunday fayl bor va u bundan ham kattaroq.
Animatsiya kutubxonalari bilan bog‘liq keng tarqalgan muammo shuki, agent ularni ulashning eskirgan usulini eslab qoladi. Eski yo‘ldan import yozadi, plaginni ikki yil oldingi usulda ro‘yxatdan o‘tkazadi va kod ishlamaydi.
Yechimi — hujjatlarni o‘zingiz kontekstga kiritish. GSAP ularni mashinaga qulay formatda taqdim etadi:
```
https://gsap.com/llms.txt
```
Bugungi kunda fayl hajmi taxminan 25 kilobayt. Har bir hujjat sahifasi markdown versiyasida ham mavjud — URL oxiriga `.md` qo‘shish kifoya.
Amalda bu quyidagicha ko‘rinadi:
```
Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md
Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.
```
Motion kutubxonasida (ilgari Framer Motion deb atalgan) ham shunday fayl bor va u bundan ham kattaroq. Motion MIT litsenziyasi ostida tarqatiladi va haqiqatan ham ochiq kodli bo‘lib qolmoqda; joriy versiyasi `motion@12.42.2`. Loyiha React’da bo‘lsa va oddiy paydo bo‘lish effektlari kerak bo‘lsagina Motion’ni tanlashingiz mumkin; murakkab aylantirish sahnalari uchun esa ScrollTrigger plagini bilan GSAP’dan foydalaning.
ScrollTrigger hammaga oz kod bilan hayratlanarli aylantirish animatsiyalarini yaratish imkonini beradi.
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Kutubxonalardan foydalanmaydigan, faqat brauzerda ishlaydigan usullar ham bor. View Transitions API orqali sahifa holatlari o‘rtasidagi o‘tishlar 2025-yil 14-oktabrda baseline qo‘llab-quvvatlashiga kirdi — ammo faqat bitta sahifa ichida; sahifalararo versiya Firefox’da umuman qo‘llab-quvvatlanmaydi. CSS aylantirish animatsiyalari hali baseline qo‘llab-quvvatlashiga kirmagan: Chrome ularni qo‘llaydi, Safari yaqinda o‘rgandi, ammo Firefox’da ularni sozlamalardan qo‘lda yoqish kerak, shu bois oddiy o‘quvchilar uchun ishlamaydi. Agentdan avval brauzer bularni umuman qo‘llab-quvvatlashini tekshirishni so‘rang; qo‘llamasa, odatiy o‘tishni qoldirsin.
## O‘zingizga yoqqan veb-saytni so‘rovga qanday aylantirish mumkin?
Xohlagan narsangizni tushuntirishning eng keng tarqalgan yo‘li — namuna ko‘rsatish. Agent bilan bu bevosita ishlamaydi: u veb-saytni ko‘rmaydi, matnni ko‘radi.
`video-to-superprompt` skilli bu tafovutni bartaraf etadi. Uning repozitoriy tavsifi: videodan olingan namunani qayta yaratish yoki ilhom olish uchun batafsil so‘rovga aylantirish. Skill yozuvni qatlamlar bo‘yicha tahlil qiladi: hikoya, maket, harakat, tipografiya, 3D grafika. Natijada ishlatishga tayyor bitta so‘rov beradi.
Uning asosiy qoidasi qat’iy ifodalangan:
Ikkinchi skill — `html-to-interaction-prompts` — manba kod bilan ishlaydi: harakatlanadigan hamma narsani topadi (kursor reaksiyalari, 3D grafika, aylantirish effektlari, turli tezlikda harakatlanadigan qatlamlar) va sahifani alohida so‘rovlarga ajratadi: har bir bo‘lim, tugma, kursor olib borilgandagi holat yoki effekt uchun bittadan. Uning tamoyili — manba xatti-harakatini haqiqat deb qabul qilish va kod mavjud bo‘lsa, skrinshotga qarab effektlarni to‘qib chiqarmaslik.
Uchinchi skill — `stitched-full-page-capture` — amaliy muammoni hal qiladi. Sust yuklanadigan elementlar va 3D grafikali saytlardagi odatiy to‘liq sahifa skrinshoti kulrang va bo‘sh chiqadi, chunki tasvir olinishi renderlashdan oldin sodir bo‘ladi. Skill sahifani ekranma-ekran aylantirib chiqadi, hammasi o‘z o‘rniga tushguncha kutadi va natijani birlashtiradi.
Ekran yozuvisiz ham yo‘l bor: agentni MCP orqali jonli interfeys namunalari kutubxonasiga ulash. Mobbin’ning rasmiy serverini bitta buyruq bilan o‘rnatish mumkin:
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
Shundan so‘ng yangi sessiya oching, ro‘yxatdan serverni tanlang va brauzerda tizimga kiring. Agent haqiqiy, ishlayotgan ilovalarning skrinshotlariga kira oladi: ro‘yxatda 621 500 dan ortiq ekran bor. Bular tayyor mahsulotlarning skrinshotlari, komponentlar yoki kod emas. Muhim jihat: Mobbin serveri bepul tarifda ishlamaydi, faqat pulli tariflarda mavjud (2026-yil iyul holatiga ko‘ra). [Google Stitch haqidagi alohida maqolada](https://ailoot.ai/blog/uz/google-stitch-claude-code-design/) tashqi xizmatlarni agentga ulash va xuddi shu usulda dizayn tizimini Claude Code’ga olib kirish haqida yozilgan.
## Bosqichma-bosqich: bir oqshomda animatsiyali veb-sayt
Asosiy xulosa
Tartib quyidagicha: shablonga qarshi qoidalar, dizayn skilli, bitta vizual yo‘nalishni tanlash, statik sahifa yaratish va faqat oxirgi bosqichda bitta animatsiyali sahna qo‘shish. Harakatni oxirida, bittadan effekt qo‘shing; aks holda nimadir buzilganda, qayerdan boshlashni bilmaysiz. Hamma narsani birdan animatsiya qilishga urinmasangiz, quyidagi sakkiz qadam bir oqshomda bajariladi.
1. ### Loyiha yarating
Hali loyihangiz bo‘lmasa, bo‘sh papkadan boshlang. Uni yarating, terminalda oching va shu papkada `claude` buyrug‘ini bajaring. Birinchi so‘rovda karkas yaratishni so‘rang: “Biznesim uchun bir sahifali sayt skeletini yarating (nima ekanini tasvirlang), oddiy HTML va CSS’da, kutubxonalarsiz.” Bir nechta fayl paydo bo‘ladi — bu loyiha ildiz papkasi, bundan keyingi barcha ish shu yerda bo‘ladi.
2. ### Qoidalarni CLAUDE.md fayliga kiriting
Anti-Generic Guardrails blokini loyiha ildizidagi `CLAUDE.md` fayliga ko‘chiring. Bunday fayl bo‘lmasa, agentdan uni yaratishni so‘rang. Qoidalar Tailwind uchun yozilgan; karkasingizda oddiy CSS ishlatilsa, agentga “bu tamoyillarni oddiy CSS’ga tatbiq et” deng — qoidalar mazmuni o‘zgarmaydi. Fayl qanday ishlashi va unga yana nimalar kiritish haqida CLAUDE.md uchun to‘rt qoida tahlilini ko‘ring.
3. ### frontend-design skillini o‘rnating
Yuqorida tasvirlanganidek, `example-skills` plaginidan foydalaning yoki `frontend-design` papkasini ko‘chiring. Skill yuklanganini `/doctor` buyrug‘i bilan tekshirishingiz mumkin.
4. ### Bitta vizual yo‘nalishni tanlang
Bitta, ikki-uchta emas. Brutalistik hujjatli uslubni bej minimalizmi bilan aralashtirsangiz, aynan qochmoqchi bo‘lgan o‘rtachalashtirishni olasiz. Papka nomlari tavsiflovchi, ammo ularni vizual tarzda oldindan ko‘rib bo‘lmaydi: yoqqan papkangizdagi `SKILL.md` faylini ochib, ranglar palitrasi va shriftlar tavsifini o‘qing — hammasi yozib qo‘yilgan.
5. ### Statik sahifa yarating
Bitta ham animatsiyasiz. Avval tipografiya, oraliqlar va to‘r bo‘lsin. Agentdan mahalliy ko‘rishni ishga tushirib, bergan manzilini ochishni so‘rang. Telefoningizda ko‘rish uchun “tarmog‘imdagi boshqa qurilmalarda ochiladigan qilib ishga tushir” deng, agent sizga manzil beradi.
6. ### Bitta harakatli sahna qo‘shing
Faqat bitta. Odatda bu birinchi ekran bo‘ladi: sarlavha paydo bo‘ladi, fon qatlami esa oldingi qatlamdan sekinroq harakatlanadi. Agentga kutubxonaning `llms.txt` faylini bering va sahnani aniq tasvirlang — nima qayerda va necha millisekund davomida harakatlanadi. Birinchi ekranda opacity’ga tegmang; buning sababini quyidagi alohida bo‘limda tushuntiramiz.
7. ### Harakatni kamaytirish qoidasini qo‘shing
Maxsus imkoniyatlar bo‘limidagi CSS va JavaScript reduced-motion sozlashini qo‘llang. Nashrdan oldin reduced motion yoqilgan sahifani sinang.
8. ### Nashr qiling va tezlikni tekshiring
Istalgan bepul statik hosting xizmatiga — Vercel, Netlify yoki GitHub Pages’ga — nashr qiling. Agentdan “bu loyihani Vercel’da nashr qilib, menga havolasini ber” deb so‘rang. Faqat nashr qilgandan so‘ng yakuniy URL’ni PageSpeed Insights’da tekshiring: xizmat ochiq URL’lar bilan ishlaydi, mahalliy sahifani ko‘ra olmaydi. “Largest Contentful Paint” ko‘rsatkichiga qarang — eng katta elementni chiqarishga ketadigan vaqt; yashil hudud 2,5 soniyagacha. Nashr qilishdan oldin agent mahalliy versiyani o‘lchashi mumkin: Chrome DevTools MCP uni Chrome’da ochib, xuddi shu ko‘rsatkichni ko‘rsatadi.
Oltinchi qadamda avvalgi besh qadamdagi ishni buzish eng oson.
## Ortiqcha animatsiya veb-saytni nega sun’iy intellekt yaratgandek yanada ko‘rsatadi?
Asosiy xulosa
Anthropic dizayn skillining hujjatlarida buni ochiq aytadi: ortiqcha harakat sahifa generatsiya qilingan degan taassurotni kuchaytiradi. Standart holatda agent navbatma-navbat har bir bo‘limga paydo bo‘lish effektini qo‘shadi; natijada hamma narsa qimirlaydigan va e’tibor hech qayerga yo‘naltirilmaydigan sahifa hosil bo‘ladi. Buning aksi yaxshi ishlaydi: birinchi ekranda bitta ataylab tanlangan sahna, keyin esa vazminlik.
Bu mavzuga kelganlarning deyarli hammasi xato qiladigan joy: animatsiya kam bo‘lsa, arzon ko‘rinadi, demak, ko‘proq qo‘shish kerak.
Ba’zan kamroq — ko‘proq, ortiqcha animatsiya esa dizayn generatsiya qilingandek taassurotni kuchaytiradi.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Bu — dizaynni yaxshilash uchun o‘rnatgan `frontend-design` skillining o‘zida yozilgan. Anthropic sahifani bezashda agent foydalanadigan vositaning o‘zida animatsiyani oshirib yubormaslikdan ogohlantiradi.
Shuningdek, u boshqa tayyor qoliplarni sanaydi: istalgan topshiriqqa beriladigan standart javob sifatida gradientli aksentli, ostida kichik izoh yozilgan katta son; hamda faqat ketma-ketlik mavjud bo‘lgandagina o‘rinli bo‘lgan 01 / 02 / 03 raqamli bloklar.
Amalda ortiqcha qilish shunday ko‘rinadi: agentga “animatsiyalar qo‘sh” topshirig‘i beriladi va u har bir bo‘limga aylantirganda paydo bo‘lish effektini qo‘shadi. Sarlavha sirg‘alib kiradi, uchta karta birin-ketin paydo bo‘ladi, mijozlar fikrlari yon tomondan sirg‘alib keladi, pastki qism esa asta ko‘rinadi. Har bir effekt alohida olganda yaxshi. Birgalikda sahifa tinimsiz harakatlanib, hech narsani alohida ajratmaydi.
Jonli veb-sayt boshqacha ishlaydi: bitta ataylab tanlangan sahna, odatda birinchi ekranda, undan keyin esa vazminlik. Harakat urg‘u berish usulidek — faqat bitta so‘zga tushgandagina ma’no kasb etadi.
Bu so‘rov uchun qoida beradi. Shunday yozing: “birinchi ekranda bitta sahna yarating, qolgan hamma narsani statik qoldiring”. Bu “animatsiyalar qo‘sh” deganidan atigi bir necha so‘zga farq qiladi, ammo natijasi o‘n barobar yaxshiroq.
## Animatsiyalar veb-sayt tezligini qanday o‘ldiradi?
Asosiy xulosa
Asosiy tuzoq: opacity qiymati nol bo‘lgan elementni brauzer Largest Contentful Paint uchun nomzod ham deb hisoblamaydi. “Bo‘limni yashirib, aylantirganda ko‘rsatish” degan standart usul birinchi ekranda qo‘llansa, tezlikning muhim ko‘rsatkichiga bevosita zarar yetkazadi. Bundan tashqari, faqat transform va opacity’ni animatsiya qiling — qolgan hammasi maketni qayta hisoblashga sabab bo‘ladi.
Google sahifani baholashda uchta ko‘rsatkichdan foydalanadi: eng katta elementni chiqarish vaqti — 2,5 soniyadan oshmasligi kerak; o‘zaro ta’sirga javob berish — 200 millisekunddan oshmasligi kerak; maket siljishi — 0,1 dan oshmasligi kerak. Ular haqiqiy tashriflarning 75-persentilida o‘lchanadi.
Keling, bu yerda nega muhimligini ochib beraylik. Standart holatda agent paydo bo‘lish effektini shunday yaratadi: bo‘lim opacity qiymatini nolga o‘rnatadi, keyin bo‘lim ko‘rish oynasiga kirganda bu sozlamani olib tashlaydi. Agar bu effekt birinchi ekranda bo‘lsa, rasm to‘liq yuklangan va dekodlangan bo‘lishi mumkin, ammo renderlash boshlanmaguncha ko‘rsatkich uni hisoblamaydi. Skript yuklangandan keyin opacity’ni olib tashlasa, vaziyat battar: ko‘rsatkich butun skriptni kutadi.
Buni tuzatishning ikki yo‘li bor. Paydo bo‘lish effektini nol o‘rniga kichik, ammo noldan katta opacity qiymatidan boshlang — shunda dastlabki renderlash hisobga olinadi. Yoki birinchi ekranda opacity’ga tegmang va faqat siljishni animatsiya qiling.
Ikkinchi masala — nimani animatsiya qilish arzon, nimani animatsiya qilish qimmatligi.
Iloji bo‘lsa, animatsiyalarni opacity va transform xususiyatlari bilan cheklang, shunda ular renderlash jarayonining kompozitsiya bosqichida qoladi.
— web.dev, https://web.dev/articles/animations-guide
Sodda qilib aytganda: brauzer tasvirni qatlamlar shaklida yig‘adi, joylashuv va opacity o‘zgarishlari esa oxirgi, eng arzon bosqichda yuz beradi. Qolgan hamma o‘zgarish brauzerni sahifani qayta hisoblashga majbur qiladi. Xuddi shu hujjatlardagi o‘lchovlar: `top` va `left` siljishlari bilan animatsiya maket uchun 37 millisekund, renderlash uchun 79 millisekund oladi; transform orqali xuddi shu vizual effekt har ikkalasiga ham nol vaqt oladi.
Yana bir yodda tutishga arziydigan ziddiyat bor: opacity’ni kompozitsiyalash arzon, ammo bu xususiyat elementni tezlik ko‘rsatkichiga nomzod bo‘lishdan chiqaradi. Demak, brauzer uchun arzon animatsiya bilan unumdorlik uchun xavfsiz animatsiya — ikki xil narsa.
Agentlar “optimallashtirish uchun” atrofga sochishni yaxshi ko‘radigan `will-change` xususiyati haqida yana bir gap. MDN hujjatlarida buning aksi aytilgan:
will-change’dan ortiqcha foydalanish xotirani haddan tashqari sarflaydi va ehtimoliy o‘zgarishlarga tayyorlanayotganda brauzerni murakkabroq renderlashga majbur qiladi. Bu unumdorlikni pasaytiradi.
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Shuningdek, unda bu xususiyat mavjud unumdorlik muammolarida oxirgi chora sifatida ishlatilishi ko‘zda tutilgani aytiladi. Oldini olish vositasi sifatida ishlamaydi. Ellikta elementga `will-change: transform, opacity` yozib chiqish — generatsiya qilingan kodning odatiy alomati.
Maket siljishi masalasi oddiyroq. Google hujjatlarida animatsiyalar ayblanmaydi; aksincha, puxta o‘tishlar o‘quvchini cho‘chitmasdan kontentni yangilashga yordam beradi. Usul o‘sha: width va height o‘rniga transform bilan masshtabni o‘zgartiring, koordinatalar o‘rniga siljishlardan foydalaning.
## Harakatdan jismonan zarar ko‘radigan odamlar-chi?
Asosiy xulosa
AQShda qirq yoshdan oshgan kattalarning 35 foizigacha vestibulyar buzilishlarni boshdan kechirgan. Ular uchun aylantirish animatsiyasi ko‘ngil aynishi va migren bilan tugashi mumkin. Tizimdagi “reduce motion” sozlamasini barcha brauzerlar besh yildan ortiq vaqtdan beri qo‘llab-quvvatlaydi, ammo agentdan so‘ramasangiz, u buni qo‘shmaydi. CSS qoidalari ham, JavaScript animatsiya setup’ida aniq tarmoq ham kerak. Sozlamani o‘qishning o‘zi timeline’ni to‘xtatmaydi.
Bu bo‘lim shunchaki xushmuomalalik masalasi emas. Biznes egasidan xarid qiladigan auditoriyaning o‘zi aynan qirq yosh va undan katta odamlardan iborat.
W3C konsorsiumi oqibatlarni yumshatmasdan tasvirlaydi: ko‘ngil aynishi va migren, ba’zan yotib olishni talab qiladigan darajada kuchli.
CSS qismi quyidagicha; JavaScript boshqaruvi ham alohida qo‘llanadi:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
Yodda tutish kerak bo‘lgan uchta jihat bor.
Animatsiyani odatiy xatti-harakat qilib yozing va shu qoida ichida o‘chiring — shunda sahifa buning aksini qilgandagiga qaraganda xavfsizroq tarzda soddalashadi.
Spetsifikatsiyada “olib tashlaydi, kamaytiradi yoki almashtiradi” deyilgan — to‘liq olib tashlash hatto birinchi variant ham emas. Keskin sirg‘alib kirishni qisqa so‘nishga almashtirish uni butunlay uzib qo‘yishdan yaxshiroq: barcha animatsiyalarni o‘chirish yuklanish indikatorlari va jarayon chiziqlarini buzadi.
JavaScript animatsiyalariga alohida sozlama boshqaruvi kerak: CSS davomiylikni o‘zgartirgani GSAP timeline’ni bekor qilmaydi. `matchMedia(...).matches` qiymatini o‘zgaruvchiga olishning o‘zi yetmaydi; sozlash undan kelib chiqib tarmoqlanishi kerak. GSAP’da oddiy HTML/CSS elementni ko‘rinadigan saqlang, harakatni faqat ruxsat berilganda yarating:
```js
// Run after GSAP and the page elements have loaded.
function mountMotion() {
const mm = gsap.matchMedia();
mm.add('(prefers-reduced-motion: no-preference)', () => {
gsap.from('.hero-title', { y: 24, duration: 0.35 });
});
return () => mm.revert();
}
const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.
```
Sarlavhaning asosiy uslubi yashirin yoki siljitilgan bo‘lmasin. Reduced motion yoqilganda u ko‘rinadigan va statik qoladi. Sahifa ochiq paytda sozlama o‘zgarsa, query mos kelmay qolganda GSAP animatsiyani qaytaradi. `mm.revert()` teardown’da yig‘ilgan animatsiyani ham olib tashlaydi. Motion’da shu kutubxona setup’ida teng tarmoqni yozing: CSS’ning o‘zi yetarli emas. [GSAP matchMedia lifecycle va cleanup hujjatiga](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/) qarang.
Yana bir rasmiy maxsus imkoniyatlar mezonini yodda tutish kerak. WCAG 2.2.2, A darajali mezon, agar biror narsa avtomatik harakatlansa, miltillasa yoki aylansa, besh soniyadan ortiq davom etsa va boshqa kontent bilan birga ko‘rsatilsa, foydalanuvchi uni to‘xtata olishini talab qiladi. Bu agentlar ko‘pincha qo‘shadigan avtomatik aylanuvchi karusellar va cheksiz satrlarga taalluqli.
## Ish buziladigan yetti joy
Asosiy xulosa
Deyarli barcha xatolar uchta sababga borib taqaladi: birinchi ekran animatsiya qilinadi, harakat haddan tashqari ko‘p yoki noto‘g‘ri xususiyatlar animatsiya qilinadi. Scrolljacking alohida muammo — qulaylik bo‘yicha tadqiqotlar uning zararli ekanini bevosita ko‘rsatadi. Foydali animatsiya davomiyligi 100 dan 400 millisekundgacha, agentlar esa odatda to‘liq bir soniyani tanlaydi.
**1. Birinchi ekran so‘nib chiqmaguncha yashirin turadi.** Opacity qiymati nol bo‘lgan element renderlash ko‘rsatkichi uchun nomzod hisoblanmaydi. Bu eng qimmat xato, chunki u qidiruv reytingiga ta’sir qiladigan ko‘rsatkichga zarar yetkazadi.
**2. Hamma narsa animatsiya qilinadi.** Har bir bo‘lim sirg‘alib kiradi, har bir karta chiqib keladi. Anthropic bunday yondashuv generatsiya qilingan dizayn taassurotini kuchaytirishini ochiq aytadi.
**3. Scrolljacking.** Veb-sayt sichqoncha g‘ildiragining odatiy xatti-harakatini o‘zining “kinematografik” mantiqi bilan almashtiradi.
Xuddi shu tadqiqotda ishtirokchilarning aksariyati kamida yengil darajada dovdirashni boshdan kechirgan.
**4. Maket xususiyatlari animatsiya qilinadi.** Transform o‘rniga koordinatalar va o‘lchamlar o‘zgartiriladi. 37 va 79 millisekundga qarshi nol.
**5. Animatsiyalar juda uzun.** Foydali oraliq 100 dan 400 millisekundgacha; 400 millisekund allaqachon juda sekin bo‘lib, faqat katta harakatlar uchun mos. Agentlar odatda sukut bo‘yicha to‘liq bir soniyani ishlatadi.
Uning xulosalariga ko‘ra, foydali oraliq 100 dan 400 millisekundgacha; 400 millisekundning o‘ziyoq juda sekin va faqat katta harakatlar uchun mos. Agentlar odatda to‘liq bir soniyani tanlaydi.
**6. Harakatni kamaytirish qoidasi yo‘q.** Agent uni o‘zi qo‘shmaydi.
**7. Har bir o‘zaro ta’sir bilan veb-sayt sekinlashadi.** Bu React’ga xos: elementga havolasiz va tozalashsiz yaratilgan animatsiya komponent yangilanganida ko‘payib boradi. Sahifa asta-sekin, hech qanday sababsiz sekinlasha boshlaydi.
Sakkizinchi tuzoq ham bor. “Agent skrinshot oladi va ko‘rganini tuzatadi” degan yondashuv statik sahifalarda juda yaxshi ishlaydi, ammo animatsiyali elementlarda agentni tugamaydigan tahrirlash sikliga tushiradi: u oraliq kadrni ko‘rib, xato deb o‘ylaydi va tuzatadi, so‘ng yana boshqa oraliq kadrni ko‘radi. Bundan tashqari, har bir skrinshot kontekstni sarflaydi.
## Bu qancha turadi va bitta veb-sayt uchun oylik limitni sarflab yuborishdan qanday saqlanish mumkin?
Asosiy xulosa
Ushbu sozlamadagi barcha asboblar bepul; faqat agentning ishiga haq to‘laysiz. Animatsiya oddiy maket ishiga qaraganda limitni tezroq sarflaydi, chunki natijani kodni o‘qib tekshirib bo‘lmaydi: har bir tahrirdan so‘ng fayllarni qayta o‘qish va yana takrorlash kerak. Bir vaqtning o‘zida bitta sahna yaratish, `CLAUDE.md` faylini qisqa tutish va animatsiyali elementlarda skrinshot siklini o‘chirish yordam beradi.
Ingliz tilidagi vibe-coding jamoalarida uchraydigan odatiy voqea: kimdir fazo bo‘ylab aylantirish effekti bor ko‘zga tashlanadigan sahifa yaratib, natijani joylaydi; muhokamada esa bitta sayt butun oylik limitni ishlatib yuborgani ma’lum bo‘ladi.
Buni kutish mumkin. Animatsiyalar bir necha sababga ko‘ra oddiy maket ishidan qimmatroq. Natijani koddan tekshirib bo‘lmaydi, shu bois takrorlashga to‘g‘ri keladi. Har bir tahrir fayllarni qayta o‘qishni talab qiladi. Harakatlanuvchi elementlarda skrinshot siklini qo‘llash esa keraksiz urinishlar qo‘shadi.
Nima yordam beradi:
Bir vaqtda bitta sahna yarating va natijani o‘zgarmas holga keltiring. Butun sayt bo‘ylab animatsiyalar qo‘shish haqidagi bir martalik so‘rov ortiqcha sarfga olib kelishi aniq. Animatsiyali elementlarda skrinshot orqali tekshirishni o‘chirib, ularni o‘zingiz ko‘zdan kechirishingiz mumkin. Har bir so‘rovda qoidalar kontekstni egallamasligi uchun `CLAUDE.md` faylini qisqa tuting. Agentga kutubxonaning `llms.txt` faylini oldindan bering, aks holda u eskirgan ulash usulini to‘qib chiqaradi va keyin o‘z uydirmasini tuzatishga kirishadi.
[Loyihada ishlaganda Claude Code nega butun loyihani qayta o‘qishi](https://ailoot.ai/blog/uz/claude-code-rereads-project/) haqidagi maqolada tokenlar qayerga ketishi tushuntirilgan; [Claude Code limitlarini sarflab yubormaslik](https://ailoot.ai/blog/uz/claude-code-token-limits-saving/) haqidagi maqolada foydalanishni nazorat qilish usullari keltirilgan.
## Keyin nima qilish kerak?
Asosiy xulosa
Bu yondashuv ishlaydi: shablonlarga qarshi qoidalar, bitta vizual yo‘nalish, bitta harakatli sahna, tezlikni tekshirish va o‘quvchining sozlamalarini hurmat qilish. Murakkab joyi — agent qurish uchun tayanchga ega bo‘lishi uchun kerakli ma’lumotni oldindan kontekstiga kiritish. Animatsiyalarning o‘zi ishning eng oson qismi.
Sakkiz qadamni bajarib, birinchi sahifangizni yarating. Bitta vizual yo‘nalishni tanlang, birinchi ekranda bitta sahna yarating va tezlikni tekshiring.
### Manbalar
- [anthropics/skills](https://github.com/anthropics/skills) - rasmiy Anthropic skilllari, jumladan frontend-design
- [GSAP: Narxlar](https://gsap.com/pricing) - bepul ekanini tasdiqlaydi
- [GSAP 3.13 relizi](https://gsap.com/blog/3-13) - 2025-yil aprel oxirida nimalar bepul bo‘lgani
- [GSAP: llms.txt](https://gsap.com/llms.txt) - til modellari uchun hujjatlar
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - aylantirish animatsiyasi plagini
- [Motion](https://motion.dev/) - ochiq kodli MIT muqobili
- [web.dev: Animatsiyalar qo‘llanmasi](https://web.dev/articles/animations-guide) - qaysi xususiyatlarni animatsiya qilish haqida
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - nega uni oldindan o‘rnatmaslik kerakligi haqida
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - harakatni kamaytirish sozlamasi
- [WCAG 2.2.2: To‘xtatish, to‘xtab turish, yashirish](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - maxsus imkoniyatlar mezoni
- [W3C: O‘zaro ta’sirlardan kelib chiqadigan animatsiya](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - vestibulyar buzilishlarga ta’siri
- [Mobbin MCP](https://mobbin.com/mcp) - agentlar uchun interfeys namunalari kutubxonasi
Keyingi qadamlar uchun — [Ailoot](https://ailoot.ai/).
## Ko‘p beriladigan savollar
### Nega reduced-motion CSS qoidasi GSAP animatsiyasini to‘xtatmaydi?
CSS davomiylik sozlamasi JavaScript timeline’ni bekor qilmaydi. GSAP animatsiyasini matchMedia no-preference tarmog‘ida yarating va asosiy elementni ko‘rinadigan tuting. Reduced motion’da sahifa statik qoladi.
### Navigatsiyadan keyin animatsiyalar yig‘ilishini qanday to‘xtataman?
Sahifa yoki komponent olib tashlanganda setup qaytargan cleanup’ni chaqiring. Misoldagi mm.revert() uslublarni tiklab, shu matchMedia nusxasi yig‘gan animatsiyalarni olib tashlaydi.
## Ailoot · Kompaniya va uning loyihalar portfeli
Ailoot to‘plangan faoliyat tajribasi, keng mijozlar bazasi, barqaror xizmat va doimiy KPI nazoratiga tayanadi.
Kompaniya va uning loyihalar portfeli: millionlab mijozlar; oylik sotuvlar hajmi milliardlarda.
Ailoot bu faoliyat tajribasini mijozlar mahsulotlari, agentlar, ilovalar va avtomatlashtirishlarda AI imkoniyatlariga API orqali kirishni ta’minlashda qo‘llaydi.