Jenga Tovuti za Kipekee Zinazoendeshwa kwa Kusogeza Ukurasa ukitumia Scrollcraft na Claude Code

Scrollcraft ni nini?

Scrollcraft ni ustadi wa Claude Code wa kuunda tovuti za kiwango cha juu zinazoendeshwa na kusogeza ukurasa, huku ukilazimisha kiwango thabiti cha ustadi wa usanifu. Huchukulia mwingiliano, mwelekeo wa kuona, uchapaji, nafasi, rangi, kina, na uthibitishaji kuwa sehemu za mchakato mmoja.

Badala ya kuzalisha tena na tena mfuatano unaojulikana wa sehemu za utangulizi, kadi za vipengele, ushuhuda, na mwito wa kuchukua hatua, Scrollcraft huanza kwa kuchagua sarufi ya ukurasa. Sarufi hiyo huamua jinsi tajriba inavyosonga, jinsi inavyopitiwa, na ni mifumo ipi inayojulikana inapaswa kuepukwa.

Ustadi huu unaweza kufanya video isogezwe fremu kwa fremu msomaji anaposogeza ukurasa, kubandika mandhari wakati hoja ikiendelezwa, kusogeza reli za mlalo, kuunda vichwa vya habari mstari kwa mstari, kubadilisha msingi wa ukurasa, na kuitikia mwendo wa kielekezi. Kila ujenzi lazima pia uanzishe mwingiliano maalum wa kipekee unaouhusu tovuti hiyo.

Jinsi Scrollcraft inavyoweka ujenzi kuwa wa kipekee

Scrollcraft inatoa sarufi nane za kurasa ambazo haziwezi kutumika pamoja:

• Picha-mjongeo ya mkupuo mmoja: Uwasilishaji endelevu wa kisinematiki.
• Uhariri wa sura: Mfuatano uliopangwa wa sura za uhariri.
• Uso hai: Uso unaoitikia unaoendeshwa na mwingiliano.
• Dunia endelevu: Jukwaa moja lisilobadilika lisilo na mipaka ya sehemu inayoonekana.
• Bango la uchapaji: Muundo unaoongozwa hasa na maandishi.
• Jumba la sanaa: Tajriba iliyopangwa kuzunguka kazi za kuona.
• Jukwaa lililogawanywa: Uwasilishaji uliogawanywa wenye maeneo ya maudhui yaliyoratibiwa.
• Orodha ya mikato yenye mdundo: Mfuatano unaoundwa kupitia mikato ya kuona iliyopangwa kwa makusudi.

Hizi si mandhari zinazoweza kubadilishana. Kila sarufi inahitaji chaguo fulani za kimuundo na inakataza nyingine, hivyo kupunguza uwezekano wa miradi tofauti kuishia kimyakimya kwenye mifupa ileile.

PERKFORM inaonyesha mwelekeo wa picha-mjongeo unaomweka bidhaa mbele. Inatumia uwasilishaji wa mkupuo mmoja na mikato mikali kuelekea mandhari kamili yaliyogeuzwa, badala ya kutegemea mrundikano wa kawaida wa sehemu.

Fallowbank inaonyesha jinsi ustadi huohuo unavyoweza kutoa mtindo wa maandishi ya kumbukumbu uliozuiliwa, kwa kutumia maandishi ya aina ya lebo za makumbusho juu ya picha na kumalizia kwa maandishi yanayopita badala ya kitufe cha kawaida.

Lango la alama bainifu

Baada ya mradi wa kwanza, kila ujenzi mpya hulinganishwa na kazi zako za awali. Lazima utofautiane katika angalau vipengele vinne kati ya sita: sarufi, urambazaji, utangulizi, umbo la tendo, hitimisho, na mwendo bainifu. Ukishindwa, mpango lazima ubadilishwe badala ya kudhoofisha au kuandika upya rekodi.

Ujenzi wa kwanza hauhitaji kupita alama bainifu iliyopo kwa sababu sajili huanza ikiwa tupu. Hili limekusudiwa: lango limeundwa kukuzuia kurudia kazi yako mwenyewe.

Viwango vya usanifu na mwingiliano

Kabla ya kufafanua matendo mahususi, Scrollcraft huunda mkondo wa hisia. Kila tendo hupokea hisia inayokusudiwa na sababu inayoonekana kwenye skrini. Ikiwa matendo mawili yaliyo karibu yanazalisha hisia ileile, moja huenda isiwe ya lazima.

Ukurasa hupangwa kisha kuzunguka kilele kimoja kilichobuniwa. Muda huo hupokea bajeti kubwa zaidi ya rasilimali, ukimya wa kutosha kabla yake, na umbali wa kutosha wa kusogeza ukurasa. Hii hutumia moja kwa moja kanuni ya kilele na mwisho badala ya kuchukulia kila sehemu kuwa ya kusisimua kwa kiwango sawa.

Kanuni za ustadi

• Uchapaji: Si zaidi ya familia mbili za fonti, nafasi kati ya herufi inayodhibitiwa, kipimo cha kati ya herufi 45 na 75, na urefu wa mistari unaorekebishwa kulingana na kipimo.
• Nafasi: Kiwango msingi cha 4px, nafasi kubwa zaidi juu ya vichwa kuliko chini yake, na nafasi ya sehemu inayobadilika kulingana na skrini ndogo.
• Rangi: Majukumu sita na rangi moja ya kusisitiza, maandishi ya pili yenye tint, hakuna nyeusi halisi, na usaidizi wa mikato iliyokusudiwa kati ya mandhari angavu na nyeusi.
• Kina: Vivuli vilivyohamishwa, mwanga wa ukingoni, ukubwa na ukungu, mwingiliano wa tabaka, na chembechembe huchukuliwa kama zana tofauti.
• Kuzingatia chapa: Kanuni kutoka kwenye kifurushi cha chapa kilichotolewa hutanguliza chaguo-msingi za Scrollcraft, ikiwemo vizuizi vinavyokataza mbinu ambazo ustadi unaweza kuchagua vinginevyo.

Ustadi huu pia hukataa njia za mkato za usanifu zinazozalishwa mara kwa mara na AI, zikiwemo gridi zinazofanana za kadi za vipengele, vihesabu vya mapambo, vidokezo vya jumla vya kusogeza ukurasa, maandishi yenye gradient, takwimu zilizobuniwa, dashibodi bandia, gradienti za zambarau za AI, na rangi chaguo-msingi ya krimu na shaba ya chapa za ufundi.

Sakinisha programu-jalizi ya Claude Code

Ongeza soko la programu-jalizi, kisha sakinisha programu-jalizi ya usanifu:

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

Ikiwa Claude Code itaripoti Run /reload-plugins to activate., endesha amri hiyo kabla ya kuendelea.

Unaweza kuita Scrollcraft moja kwa moja kwa:

/nateherk-design:scrollcraft

Pia unaweza kutumia ustadi huu kwa kueleza tovuti inayoendeshwa na kusogeza ukurasa unayoitaka katika Claude Code. Amri ya moja kwa moja ni muhimu unapotaka kuanzisha utaratibu wake waziwazi.

Kuendeleza bila kusakinisha

Kuangalia au kurekebisha hazina ya ustadi ndani ya kompyuta bila kuisakinisha kama programu-jalizi, anzisha Claude Code ukitumia saraka ya programu-jalizi:

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

Kagua mahitaji

Scrollcraft inategemea zana kadhaa za ndani. Thibitisha hizi kabla ya kuanza ujenzi:

• Node.js 18 au mpya zaidi: Inahitajika na hati zote zilizojumuishwa.
• Muundo kamili wa ffmpeg: Hutumika kusimba klipu ili zisogezwe kwa usahihi badala ya kuchezwa kawaida. Miundo iliyopunguzwa inaweza kukosa vichujio muhimu kama vile scale.
• playwright-core na Chrome: Hutumiwa na hatua ya uthibitishaji inayotegemea kivinjari.
• KIE_AI_API_KEY: Ni ya hiari na inahitajika tu wakati wa kutengeneza rasilimali. Miradi iliyoundwa kwa kutumia picha au video zako haihitaji ufunguo huu.

Sakinisha playwright-core ndani ya folda ya build ili utafutaji wa moduli uanze kutoka eneo sahihi:

npm i playwright-core

Ikiwa Scrollcraft haiwezi kupata vitekelezo sahihi, SCROLLCRAFT_FFMPEG na SCROLLCRAFT_CHROME vinaweza kubatilisha maeneo inayotafuta.

Scrollcraft imetumika tu kwenye builds zilizokamilika za Windows. Hati zake hutafuta maeneo ya kawaida ya Windows, macOS na Linux, lakini README haisemi kwamba build imekamilishwa kwenye macOS.

Endesha ukaguzi wa awali na uunde workspace

Endesha hati ya uchunguzi kabla ya kufanya jambo jingine. Inaripoti utegemezi unaokosekana au usiooana ambao vinginevyo unaweza kusababisha hitilafu zinazopotosha baadaye.

node scripts/doctor.mjs

Ukaguzi huu ni muhimu hasa kwa sababu binary ya ffmpeg iliyopunguzwa inaweza kuripoti kichujio kinachokosekana kama hitilafu ya sintaksia, muxer ya WebP inayokosekana inaweza kuonekana kama tatizo la jina la faili, na playwright-core inaweza kutafutwa kutoka saraka isiyo sahihi.

Baada ya ukaguzi wa awali kufaulu, uunde workspace na sajili yake tupu ya alama za utambulisho:

node scripts/workspace.mjs --ensure

Jinsi workspace huchaguliwa

Scrollcraft hutatua workspace kwa mpangilio ufuatao, na husimama inapopata inayolingana kwanza:

1. Njia iliyohifadhiwa katika SCROLLCRAFT_HOME.
2. Workspace iliyopewa jina na .scrollcraft.json iliyo karibu zaidi, inayopatikana wakati wa kupanda kutoka saraka ya sasa.
3. Saraka ya scrollcraft iliyo chini ya mzizi wa mradi.

Faili ya usanidi wa workspace huwa na muundo huu:

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

Builds huandikwa chini ya <workspace>/builds/<name>/, huku sajili ya alama za utambulisho ikihifadhiwa kwenye <workspace>/FINGERPRINTS.md.

Unda mradi wako wa kwanza

Baada ya programu-jalizi kuwashwa na workspace kuwepo, iite Scrollcraft:

/nateherk-design:scrollcraft

Eleza tovuti, mada yake, rasilimali ulizo nazo, na kanuni zozote zinazotumika za chapa. Unaweza kutumia njia ya rasilimali zinazozalishwa wakati KIE_AI_API_KEY imesanidiwa, au kutumia picha na video zako bila gharama za uzalishaji. Kutumia rasilimali zilizopo ni mtiririko kamili wa kazi, si chaguo la mwisho.

Ujuzi huu hufuata utaratibu unaojumuisha kuhoji, kuchagua sarufi, kutathmini dhana, kujenga ukurasa, na kuthibitisha matokeo. Marejeleo yake pia yanafafanua mikunjo ya hisia, mbinu za kusogeza, ujenzi wa ulimwengu endelevu, mwelekeo wa sanaa, utayarishaji wa rasilimali, na viwango vya usanifu.

Heshimu sarufi iliyochaguliwa

Usichukulie sarufi iliyochaguliwa kama mpangilio wa mwonekano. Mradi wa ulimwengu endelevu, kwa mfano, unapaswa kujiendesha kama jukwaa moja lisilobadilika bila mipaka ya sehemu. Mradi wa uhariri wa sura hufuata muundo na modeli tofauti ya usogezaji. Kuchanganya mifumo yao inayohitajika kungeharibu utaratibu unaotumiwa kuzifanya miradi ibaki tofauti.

Panga hatua moja ya kipekee

Kila tovuti lazima iwe na mwingiliano maalum unaopatikana kwenye mradi huo pekee. Kubadilisha tu rangi ya mwangaza hakutoshi. Hatua hiyo inapaswa kutokana na mada na uzoefu, badala ya kuongezwa kama mapambo ya jumla.

Tumia injini kwa usahihi

Sheria muhimu zaidi ya utekelezaji ni kwamba injini haibadilishwi kwa kila mradi. Inatoa utaratibu unaoshirikiwa na builds, si jenereta ya kurasa inayoweza kusanidiwa.

Kwa kila mradi:

1. Badilisha mandhari ya injini kwa tokeni sita za rangi na si zaidi ya fonti mbili.
2. Andika HTML ya kisemantiki mahsusi kwa tovuti.
3. Tumia sifa maalum ya --sc-p iliyochapishwa na injini kuendesha tabia maalum.
4. Weka mpangilio na mwingiliano mahususi wa mradi nje ya injini inayoshirikiwa.

Epuka kujenga ukurasa mzima wakati wa utekelezaji kutoka kwenye kitu cha usanidi. Kulingana na falsafa ya usanifu ya Scrollcraft, ufupisho huo ndio hasa husababisha tovuti zilizoundwa kwa mfumo mmoja zifanane.

Elewa hatua ya uthibitishaji

Scrollcraft hutumia kivinjari kisicho na kiolesura kuchunguza ukurasa uliokamilika katika kila nafasi ya usogezaji. Kwa uzoefu unaoendeshwa na video, husubiri kichwa cha uchezaji kitulie kabla ya kutathmini fremu.

Mchakato wa uthibitishaji huripoti:

• Usogezaji uliokufa: Umbali wa kusogeza ambao haubadilishi chochote kinachoonekana kwenye skrini.
• Vidokezo visivyokamilika: Maandishi au vidokezo vingine ambavyo havifikii uwazi kamili.
• Hitilafu za utofautishaji wa mchanganyiko: Utofautishaji hukaguliwa kwa kila mstari dhidi ya fremu angavu zaidi inayopita chini yake, huku mwelekeo ukichaguliwa kwa maandishi mepesi kwenye mandharinyuma meusi au maandishi meusi kwenye mandharinyuma mepesi.
• Klipu zisizofasiriwa: Video inayokwama kwenye fremu ya bango na ambayo vinginevyo inaweza kuonekana kama filamu iliyositishwa kimakusudi.

Mchakato huu pia huunda laha ya picha kwa ajili ya ukaguzi wa binadamu. Ukaguzi wa kiotomatiki unaweza kuthibitisha kwamba ukurasa unafanya kazi, lakini hauwezi kubaini ikiwa uzoefu una maana au una athari ya kihisia.

Vidokezo vya mtiririko wa kazi wa kina

Weka sajili ya alama za utambulisho ikiwa sahihi

Usijaze sajili mapema kwa kutumia mifano iliyojumuishwa. Faili ya EXAMPLES.md katika hazina inaonyesha sajili iliyojaa inaonekanaje na ni miundo ipi huwa inagongana, lakini si orodha ya masharti. Rekodi miradi yako mwenyewe na uunde upya dhana yoyote mpya inayoshindwa kukidhi hitaji la upekee la vipengele vinne kati ya sita.

Panga rasilimali kwa kilele kimoja

Pinga msukumo wa kufanya kila mandhari iwe na msisimko sawa. Hifadhi nyenzo bora zaidi, muda mrefu zaidi wa kusogeza, na utangulizi ulio wazi zaidi kwa kilele kimoja. Vilele vingi vinavyoshindana hudhoofisha mkondo wa jumla.

Unda mdundo unaobadilika kwa makusudi

Tumia msingi wa nafasi wa 4px bila kuhamisha mapengo makubwa ya kompyuta moja kwa moja hadi kwenye simu. Dumisha uhusiano ulio wazi kati ya vichwa, mistari yenye urefu unaosomeka, na boresha maandishi mepesi kwenye mandharinyuma meusi kwa zaidi ya kurekebisha rangi moja pekee.

Pendelea marekebisho ya uchunguzi kuliko kubahatisha

Ikiwa usakinishaji usio sahihi wa ffmpeg au Chrome umetambuliwa, weka SCROLLCRAFT_FFMPEG au SCROLLCRAFT_CHROME kwa uwazi. Kisha endesha tena doctor.mjs badala ya kuchunguza baadaye makosa ya usimbaji au kivinjari moja moja.

Soma historia ya mradi

Faili ya CHANGELOG.md katika hazina inaandika yaliyoshindikana wakati wa miundo na kanuni ya usanifu au uhandisi iliyoundwa kutokana na hilo. Ni muhimu kama chanzo cha mafunzo ya uendeshaji, si historia ya vipengele pekee.

Vikwazo vya kuzingatia

• Miundo iliyokamilika imeendeshwa kwenye Windows pekee, licha ya hati kutafuta maeneo ya kawaida kwenye mifumo mingine.
• Video inayozalishwa inaweza kugharimu kiasi kikubwa, hasa kwa safari ya ndege katika ulimwengu endelevu yenye miguu mingi.
• Ujuzi huu una msimamo maalum kimakusudi na unaweza kukataa mipangilio, rangi, au kilele kilichofafanuliwa kwa udhaifu vinavyozoeleka.
• Uthibitishaji wa kiotomatiki hauwezi kutathmini kama ukurasa uliokamilika una maana, hivyo laha ya mawasiliano bado inahitaji mapitio ya kibinadamu.

Hitimisho

Scrollcraft inachanganya injini ya mwingiliano wa kusogeza na utaratibu wa usanifu wenye nidhamu. Anza kwa kusakinisha programu-jalizi ya Claude Code, kuendesha ukaguzi wa awali, na kuunda nafasi ya kazi. Kisha chagua sarufi, fafanua mkondo wa hisia na kilele kimoja, unda hatua ya kipekee ya utambulisho, na uruhusu hatua ya uthibitishaji ifichue matatizo ya kiufundi. Iache injini ya pamoja bila kuguswa ili muundo wa kimaana na mwelekeo wa kisanii wa kila mradi ubaki tofauti kwa dhati.