Scrollcraft va Claude Code yordamida o‘ziga xos, scroll orqali boshqariladigan veb-saytlar yarating

Scrollcraft nima?

Scrollcraft — dizayn mahoratining izchil standartini ta’minlagan holda, premium va scroll orqali boshqariladigan veb-saytlar yaratish uchun mo‘ljallangan Claude Code ko‘nikmasi. U interaksiya, vizual yo‘nalish, tipografiya, oraliqlar, rang, chuqurlik va tekshiruvni bir xil jarayonning qismlari sifatida ko‘radi.

Tanish ketma-ketlikdagi hero, xususiyatlar kartalari, mijozlar fikrlari va harakatga chaqiruv bo‘limlarini qayta-qayta yaratish o‘rniga, Scrollcraft avval sahifa grammatikasini tanlaydi. Bu grammatika tajribaning qanday harakatlanishini, qanday boshqarilishini va qaysi tanish andozalardan qochish kerakligini belgilaydi.

Ko‘nikma o‘quvchi scroll qilgani sari videoni kadrma-kadr siljitishi, fikr rivojlanayotgan paytda sahnalarni ekranga mahkamlashi, gorizontal yo‘laklarni harakatlantirishi, sarlavhalarni satrma-satr yig‘ishi, sahifa fonini o‘zgartirishi va ko‘rsatkich harakatiga javob berishi mumkin. Har bir loyiha shu saytga xos, maxsus imzo-interaksiyani ham taqdim etishi kerak.

Scrollcraft loyihalarni qanday farqlaydi

Scrollcraft bir-birini istisno qiladigan sakkizta sahifa grammatikasini taklif etadi:

• Kinematografik bir kadrli taqdimot: Uzluksiz, kino uslubidagi taqdimot.
• Boblangan tahririy uslub: Tahririy boblardan tashkil topgan tuzilmali ketma-ketlik.
• Jonli sirt: Interaksiya orqali boshqariladigan, javob beruvchi sirt.
• Uzluksiz olam: Ko‘rinadigan bo‘lim chegaralarisiz bitta mahkamlangan sahna.
• Tipografik poster: Asosan shrift boshqaradigan kompozitsiya.
• Galereya: Vizual asarlar atrofida tashkil etilgan tajriba.
• Bo‘lingan sahna: Muvofiqlashtirilgan kontent sohalariga ega bo‘lingan taqdimot.
• Ritmik montaj ro‘yxati: Ataylab tanlangan vizual kesmalar orqali shakllangan ketma-ketlik.

Bular bir-birining o‘rnini bosuvchi mavzular emas. Har bir grammatika muayyan tuzilmaviy tanlovlarni talab qiladi va boshqalarini taqiqlaydi. Shu tariqa alohida loyihalarning sezdirmay bir xil skeletga yaqinlashish ehtimoli kamayadi.

PERKFORM kinematografik, mahsulotga yo‘naltirilgan yo‘nalishni namoyish etadi. Unda odatiy bo‘limlar ketma-ketligiga tayanish o‘rniga, bir kadrli taqdimot va to‘liq ekranli teskari fonlarga keskin o‘tishlardan foydalaniladi.

Fallowbank xuddi shu ko‘nikma orqali vazmin hujjatli film uslubini qanday yaratish mumkinligini ko‘rsatadi: fotosuratlar ustiga muzey yorlig‘i uslubidagi matn joylashtiriladi va sahifa standart tugma o‘rniga harakatlanuvchi matn bilan yakunlanadi.

«Barmoq izi» nazorati

Birinchi loyihadan keyin har bir yangi loyiha avvalgi ishlaringiz bilan taqqoslanadi. U oltita o‘lchamdan kamida to‘rttasida farq qilishi kerak: grammatika, navigatsiya, hero, akt shakli, yakun va imzo harakati. Agar talab bajarilmasa, qaydni zaiflashtirish yoki qayta yozish o‘rniga reja o‘zgartirilishi kerak.

Birinchi loyiha mavjud «barmoq izi» talabini bajarishi shart emas, chunki reyestr bo‘sh holatda boshlanadi. Bu ataylab qilingan: nazorat o‘z ishlaringizni takrorlashga yo‘l qo‘ymaslik uchun mo‘ljallangan.

Dizayn va interaksiya standartlari

Alohida aktlarni belgilashdan oldin Scrollcraft hissiyotlar egri chizig‘ini yaratadi. Har bir aktga mo‘ljallangan hissiyot va ekrandagi sabab beriladi. Agar yonma-yon turgan ikkita akt bir xil hissiyotni uyg‘otsa, ulardan biri keraksiz bo‘lishi mumkin.

Keyin sahifa bitta puxta ishlangan cho‘qqi atrofida tashkil etiladi. Bu lahzaga eng katta media budjeti, undan oldin yetarli sukut va yetarli scroll masofasi ajratiladi. Bu har bir bo‘limni birdek dramatik ko‘rish o‘rniga, cho‘qqi-yakun qoidasini bevosita qo‘llaydi.

Ma horat qoidalari

• Tipografiya: Ko‘pi bilan ikkita shrift oilasi, boshqariladigan harf oralig‘i, 45–75 belgidan iborat satr uzunligi va satr balandligining satr uzunligiga moslashtirilishi.
• Oraliqlar: 4px asosiy shkala, sarlavhalar ostidagidan ko‘ra ustida ko‘proq bo‘sh joy va kichik ekranlarga moslashuvchi suyuq bo‘lim ichki oraliqlari.
• Rang: Oltita rol va bitta aksent rang, ikkilamchi matnning tuslangan ko‘rinishi, sof qora rangdan foydalanmaslik hamda och va to‘q fonlar o‘rtasida ataylab keskin o‘tishlarni qo‘llab-quvvatlash.
• Chuqurlik: Siljitilgan soyalar, chekka yorug‘lik, masshtab va xiralashtirish, ustma-ust joylashuv hamda donadorlik alohida vositalar sifatida qaraladi.
• Brendga muvofiqlik: Taqdim etilgan brend qo‘llanmasidagi qoidalar Scrollcraft standartlaridan ustun turadi. Bunga ko‘nikma aks holda tanlashi mumkin bo‘lgan usullarni taqiqlovchi cheklovlar ham kiradi.

Ko‘nikma, shuningdek, sun’iy intellekt yaratadigan keng tarqalgan dizayn qisqartmalarini ham rad etadi. Jumladan, bir xil xususiyatlar kartalari panjaralari, bezak hisoblagichlari, umumiy scroll ko‘rsatmalari, gradientli matn, o‘ylab topilgan statistika, soxta boshqaruv panellari, AI-binafsha gradientlar va odatiy krem va jez ranglaridagi hunarmandchilik brendi palitrasi.

Claude Code plaginini o‘rnatish

Avval plaginlar bozorini qo‘shing, so‘ng dizayn plaginini o‘rnating:

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Agar Claude Code Run /reload-plugins to activate. xabarini ko‘rsatsa, davom etishdan oldin shu buyruqni bajaring.

Scrollcraft’ni quyidagi buyruq bilan bevosita ishga tushirishingiz mumkin:

/nateherk-design:scrollcraft

Shuningdek, Claude Code’da kerakli scroll orqali boshqariladigan saytni tasvirlab, ko‘nikmadan foydalanishingiz mumkin. Bevosita buyruq uning jarayonini aniq boshlamoqchi bo‘lganingizda foydalidir.

O‘rnatmasdan ishlab chiqish

Ko‘nikma reyestrini plagin sifatida o‘rnatmasdan mahalliy tarzda ko‘rish yoki o‘zgartirish uchun Claude Code’ni plagin katalogi bilan ishga tushiring:

claude --plugin-dir ./plugins/nateherk-design

Talablarni tekshirish

Scrollcraft bir nechta mahalliy vositalarga bog‘liq. Loyiha boshlanishidan oldin ularni tasdiqlang:

• Node.js 18 yoki undan yangiroq: Barcha kiritilgan skriptlar uchun talab qilinadi.
• To‘liq ffmpeg yig‘ilmasi: Kliplarni odatdagidek ijro etish o‘rniga ularni to‘g‘ri surib ko‘rish mumkin bo‘ladigan tarzda kodlash uchun ishlatiladi. Qisqartirilgan yig‘ilmalar scale kabi muhim filtrlarni o‘z ichiga olmasligi mumkin.
• playwright-core va Chrome: Brauzer asosidagi tekshiruv bosqichida ishlatiladi.
• KIE_AI_API_KEY: Ixtiyoriy; faqat assetlar yaratishda kerak bo‘ladi. O‘zingizning fotosurat yoki videolaringiz bilan yaratilgan loyihalar uchun kalit talab qilinmaydi.

Modullar to‘g‘ri joylashuvdan topilishi uchun playwright-core ni build papkasi ichiga o‘rnating:

npm i playwright-core

Agar Scrollcraft kerakli bajariluvchi fayllarni topa olmasa, SCROLLCRAFT_FFMPEG va SCROLLCRAFT_CHROME uning qidiruvlarini almashtirishi mumkin.

Scrollcraft hozirgacha faqat Windows tizimida yakunlangan buildlar uchun ishlatilgan. Uning skriptlari Windows, macOS va Linux tizimlaridagi odatiy joylarni qidiradi, ammo README macOS tizimida build yakunlanganini da’vo qilmaydi.

Preflight tekshiruvini ishga tushiring va ish maydoni yarating

Avval diagnostika skriptini ishga tushiring. U keyinchalik chalg‘ituvchi xatolarga sabab bo‘lishi mumkin bo‘lgan yetishmayotgan yoki mos kelmaydigan bog‘liqliklar haqida xabar beradi.

node scripts/doctor.mjs

Bu tekshiruv ayniqsa muhim, chunki qisqartirilgan ffmpeg binar fayli yetishmayotgan filtrni sintaksis xatosi sifatida ko‘rsatishi, WebP muxerining yo‘qligi fayl nomi muammosiga o‘xshashi, playwright-core esa noto‘g‘ri katalogdan topilishi mumkin.

Preflight tekshiruvi muvaffaqiyatli o‘tgach, ish maydoni va uning bo‘sh fingerprint reyestrini yarating:

node scripts/workspace.mjs --ensure

Ish maydoni qanday tanlanadi

Scrollcraft ish maydonini quyidagi tartibda aniqlaydi va birinchi mos keladigan joyda to‘xtaydi:

1. SCROLLCRAFT_HOME da saqlangan yo‘l.
2. Joriy katalogdan yuqoriga qarab qidirilganda topilgan eng yaqin .scrollcraft.json faylida ko‘rsatilgan ish maydoni.
3. Loyiha ildizidagi scrollcraft katalogi.

Ish maydoni konfiguratsiya fayli quyidagi ko‘rinishga ega:

{ "workspace": "path/to/builds" }

Buildlar <workspace>/builds/<name>/ ichiga yoziladi, fingerprint reyestri esa <workspace>/FINGERPRINTS.md da saqlanadi.

Birinchi loyihangizni yarating

Plugin faol bo‘lib, ish maydoni mavjud bo‘lgach, Scrollcraft’ni ishga tushiring:

/nateherk-design:scrollcraft

Sayt, uning mavzusi, sizda mavjud assetlar va qo‘llaniladigan brend qoidalarini tasvirlab bering. KIE_AI_API_KEY sozlangan bo‘lsa, yaratilgan assetlar yo‘lini tanlashingiz mumkin; aks holda o‘zingizning fotosurat va videolaringizdan generatsiya xarajatisiz foydalaning. Mavjud assetlardan foydalanish zaxira variant emas, balki asosiy ish jarayonidir.

Ko‘nikma intervyu o‘tkazish, grammatikani tanlash, konsepsiyani baholash, sahifani yaratish va natijani tekshirishni qamrab oladigan tartibga amal qiladi. Uning ma’lumotnomalarida, shuningdek, hissiyot egri chiziqlari, scroll qurilmalari, uzluksiz olam konstruksiyasi, badiiy yo‘nalish, assetlarni tayyorlash va dizayn standartlari belgilangan.

Tanlangan grammatikaga amal qiling

Tanlangan grammatikani shunchaki vizual preset sifatida qabul qilmang. Masalan, uzluksiz olam loyihasi bo‘limlar orasida choklarsiz, bitta qat’iy sahnadek ishlashi kerak. Boblarga bo‘lingan editorial loyiha esa boshqa tuzilma va navigatsiya modeliga amal qiladi. Ularning majburiy naqshlarini aralashtirish loyihalarni bir-biridan ajratib turadigan mexanizmni zaiflashtiradi.

Bitta o‘ziga xos harakatni rejalashtiring

Har bir sayt faqat shu loyihaga xos bo‘lgan maxsus interaksiyani o‘z ichiga olishi kerak. Spotlight rangini oddiygina o‘zgartirish bunga kirmaydi. Bu harakat umumiy bezak sifatida qo‘shilmasdan, mavzu va tajribadan kelib chiqishi kerak.

Mexanizmdan to‘g‘ri foydalaning

Eng muhim amalga oshirish qoidasi shuki, mexanizm har bir loyiha uchun alohida tahrirlanmaydi. U sozlanadigan sahifa generatori emas, balki buildlar o‘rtasida ulashiladigan mexanizmni taqdim etadi.

Har bir loyiha uchun:

1. Mexanizmni oltita rang tokeni va ko‘pi bilan ikkita shrift yordamida mavzulashtiring.
2. Sayt uchun maxsus semantik HTML yozing.
3. Maxsus xatti-harakatni boshqarish uchun mexanizm e’lon qiladigan --sc-p maxsus xususiyatidan foydalaning.
4. Loyihaga xos joylashuv va interaksiyalarni umumiy mexanizmdan tashqarida saqlang.

Butun sahifani runtime vaqtida konfiguratsiya obyektidan yaratishdan saqlaning. Scrollcraft dizayn falsafasiga ko‘ra, aynan shu abstraksiya bitta tizim yordamida yaratilgan saytlarning bir-biriga o‘xshab qolishiga sabab bo‘ladi.

Tekshiruv bosqichini tushuning

Scrollcraft yakunlangan sahifani har bir scroll holatida tekshirish uchun headless brauzerdan foydalanadi. Videoga asoslangan tajribalar uchun u kadrni baholashdan oldin playhead barqarorlashishini kutadi.

Tekshiruv jarayoni quyidagilar haqida xabar beradi:

• Bo‘sh scroll: Ekrandagi ko‘rinadigan hech narsani o‘zgartirmaydigan scroll masofasi.
• Tugallanmagan signallar: Hech qachon to‘liq shaffoflikka yetmaydigan matn yoki boshqa signallar.
• Kompozitsiyalangan kontrast xatolari: Kontrast har bir satr uchun uning ostidan o‘tadigan eng yorqin kadrga nisbatan tekshiriladi; yo‘nalish och fondagi to‘q yoki to‘q fondagi och matnga mos ravishda tanlanadi.
• Dekodlanmagan kliplar: Poster kadrida qotib qoladigan va aks holda ataylab pauza qilingan filmga o‘xshab ko‘rinishi mumkin bo‘lgan video.

Jarayon inson tomonidan ko‘rib chiqish uchun kontaktlar jadvalini ham yaratadi. Avtomatlashtirilgan tekshiruvlar sahifa ishlashini tasdiqlashi mumkin, ammo tajriba mazmunli yoki hissiy jihatdan samarali ekanini aniqlay olmaydi.

Ilg‘or ish jarayoni bo‘yicha maslahatlar

Fingerprint reyestrini halol saqlang

Reyestrni kiritilgan misollar asosida oldindan to‘ldirmang. Repozitoriyning EXAMPLES.md fayli to‘ldirilgan reyestr qanday ko‘rinishini va qaysi shakllar to‘qnashishga moyilligini ko‘rsatadi, ammo u cheklovlar to‘plami emas. O‘z loyihalaringizni qayd eting va oltita mezondan to‘rttasi bo‘yicha o‘ziga xoslik talabiga javob bermaydigan har qanday yangi konsepsiyani qayta ishlab chiqing.

Resurslarni bitta cho‘qqiga yo‘naltiring

Har bir sahnani birdek kuchli qilish istagiga qarshi turing. Eng kuchli aktiv, eng uzun aylantirish oralig‘i va eng aniq kirish qismidan bitta cho‘qqi uchun foydalaning. Bir-biri bilan raqobatlashadigan bir nechta cho‘qqi umumiy dinamikani susaytiradi.

Moslashuvchan ritmni ataylab loyihalang

4px oraliq asosidan foydalaning, ammo ish stoli uchun mo‘ljallangan katta bo‘shliqlarni telefonga to‘g‘ridan-to‘g‘ri ko‘chirmang. Sarlavhalar o‘rtasidagi munosabatlarni aniq saqlang, satr uzunliklarini o‘qishga qulay qiling va to‘q fondagi och rangli matnni faqat bitta rangni o‘zgartirish bilan cheklanmaydigan usulda muvozanatlashtiring.

Tahmin o‘rniga diagnostik sozlamalarni afzal ko‘ring

Agar noto‘g‘ri ffmpeg yoki Chrome o‘rnatilgani aniqlansa, SCROLLCRAFT_FFMPEG yoki SCROLLCRAFT_CHROME ni aniq belgilang. So‘ng keyingi kodlash yoki brauzer xatolarini alohida-alohida tekshirishdan oldin doctor.mjs ni qayta ishga tushiring.

Loyiha tarixini o‘qing

Repozitoriyning CHANGELOG.md faylida yig‘ishlar vaqtida nimalar ishlamagani va bunga javoban yaratilgan dizayn yoki muhandislik qoidasi qayd etilgan. U shunchaki funksiyalar tarixi emas, balki amaliy saboqlar manbai sifatida foydalidir.

Hisobga olinishi kerak bo‘lgan cheklovlar

• Tayyor yig‘ilmalar faqat Windows’da ishga tushirilgan, garchi skriptlar boshqa platformalardagi odatiy manzillarni ham qidirsada.
• Yaratiladigan video sezilarli xarajatlarga olib kelishi mumkin, ayniqsa ko‘plab bosqichlardan iborat uzluksiz dunyo bo‘ylab parvozda.
• Ushbu ko‘nikma ataylab muayyan qarashga asoslangan va tanish maketlar, rang palitralari yoki kuchsiz belgilangan cho‘qqini rad etishi mumkin.
• Avtomatlashtirilgan tekshiruv tayyor sahifada mazmun bor-yo‘qligini baholay olmaydi, shuning uchun kontaktlar jadvali hamon inson tomonidan ko‘rib chiqilishi kerak.

Xulosa

Scrollcraft aylantirish orqali o‘zaro ta’sir mexanizmini intizomli dizayn jarayoni bilan birlashtiradi. Avval Claude Code plaginini o‘rnating, dastlabki tekshiruvni ishga tushiring va ish maydoni yarating. Keyin grammatika tanlang, hissiyotlar egri chizig‘i va bitta cho‘qqini belgilang, o‘ziga xos imzo harakatini yarating hamda tekshiruv jarayoni mexanik muammolarni aniqlashiga imkon bering. Umumiy mexanizmga tegmang, shunda har bir loyihaning semantik tuzilishi va badiiy yo‘nalishi chinakamiga o‘ziga xos bo‘lib qoladi.