بنِ مواقع ويب مميّزة كتتفاعل مع التمرير باستعمال Scrollcraft وClaude Code

شنو هو Scrollcraft؟

Scrollcraft هي مهارة ديال Claude Code لبناء مواقع فاخرة كتتحرك مع السكرول، مع فرض مستوى موحّد من الحرفية فالتصميم. كتتعامل مع التفاعل، والتوجّه البصري، والطباعة، والمسافات، والألوان، والعمق، والتحقّق باعتبارهم أجزاء من نفس العملية.

بلا ما تعاود تولّد نفس السلسلة المألوفة ديال الهيرو، وبطاقات المزايا، وشهادات المستخدمين، وأقسام الدعوة لاتخاذ إجراء، كتبدأ Scrollcraft باختيار قواعد الصفحة. هاد القواعد كتحدّد كيفاش كتتحرك التجربة، وكيفاش كيتنقّل فيها المستخدم، وشنوما الأنماط المألوفة اللي خاصها تتفادى.

تقدر المهارة تخلي الفيديو يتقدّم فالإطارات مع كل سكرول، وتثبّت المشاهد بينما كتتطوّر الفكرة، وتحرك المسارات الأفقية، وتركّب العناوين سطر بسطر، وتبدّل أرضية الصفحة، وتتفاعل مع حركة المؤشر. وكل بناء خاصو يقدّم حتى تفاعلاً مميّزاً ومصمماً خصيصاً للموقع ديالو.

كيفاش كتخلي Scrollcraft كل بناء مختلف

كتقدّم Scrollcraft ثمانية ديال قواعد الصفحات اللي ما كيتجمعوش:

• لقطة سينمائية واحدة: عرض سينمائي متواصل.
• تحرير على شكل فصول: سلسلة منظّمة من الفصول التحريرية.
• سطح حي: سطح متجاوب كيتحرّك بالتفاعل.
• عالم متواصل: مسرح واحد ثابت بلا فواصل ظاهرة بين الأقسام.
• ملصق طباعي: تكوين كيقودو الخط أساساً.
• معرض: تجربة منظّمة حول الأعمال البصرية.
• مسرح منقسم: عرض مقسوم لمناطق محتوى منسّقة.
• لائحة تقطيعات إيقاعية: سلسلة مصاغة بتقطيعات بصرية مقصودة.

هادشي ماشي مجرد ثيمات قابلة للتبديل. كل قاعدة كتفرض اختيارات بنيوية معيّنة وكتمنع اختيارات أخرى، وبهذا كتقلّل احتمال أن مشاريع مختلفة تتقارب تدريجياً لنفس الهيكل.

PERKFORM كيبين التوجّه السينمائي اللي كيركّز على المنتج. كيستعمل عرضاً بلقطة واحدة وتقطيعات حادّة نحو خلفيات مقلوبة بملء الشاشة، بلا اعتماد على تكديس تقليدي ديال الأقسام.

Fallowbank كيبين كيفاش تقدر نفس المهارة تنتج معالجة وثائقية هادئة، باستعمال نصوص بحال بطاقات المتاحف فوق الصور، وكتسالي بنص جاري بدل زر عادي.

بوابة البصمة

من بعد المشروع الأول، كيتقارن كل بناء جديد مع الأعمال السابقة ديالك. خاصو يختلف ف至少 أربعة من أصل ستة أبعاد: القاعدة، والتنقّل، والهيرو، وشكل الفصول، والخاتمة، والحركة المميّزة. إلا فشل، خاص الخطة تتبدّل بلا ما يضعف السجل أو يتعاود يتكتب.

البناء الأول ما خاصوش يجتاز بصمة موجودة، حيث السجل كيبدا خاوي. هادشي مقصود: البوابة مصمّمة باش توقفك على تكرار نفس الأعمال ديالك.

معايير التصميم والتفاعل

قبل ما تحدّد الفصول الفردية، كتخلق Scrollcraft منحنى للإحساس. كل فصل كياخذ إحساساً مقصوداً وسبباً ظاهراً على الشاشة. إلا عطاو جوج فصول متجاورين نفس الإحساس، يمكن يكون واحد منهم ما ضروريش.

من بعد كتتنظّم الصفحة حول ذروة واحدة مصمّمة بعناية. هاد اللحظة كتاخذ أكبر ميزانية للأصول، ووقتاً كافياً من الهدوء قبلها، ومسافة سكرول كافية. هكذا كتطبّق قاعدة النهاية والذروة بشكل مباشر، بلا ما تعامل كل قسم على أنه درامي بنفس الدرجة.

قواعد الحرفية

• الطباعة: ما يفوتوش جوج عائلات ديال الخطوط، وتباعد مضبوط بين الحروف، ومقياس سطر بين 45 و75 حرفاً، وارتفاع السطر كيتعدّل حسب المقياس.
• المسافات: مقياس أساسي ديال 4px، ومسافة فوق العناوين أكبر من اللي تحتها، وحواشي مرنة للأقسام كتتكيّف مع الشاشات الصغيرة.
• الألوان: ستة أدوار ولون إبراز واحد، ونص ثانوي ملوّن، بلا أسود خالص، ودعم لتقطيعات مقصودة بين الخلفيات الفاتحة والداكنة.
• العمق: الظلال المزاحة، وإضاءة الحواف، والحجم والضبابية، والتراكب، والحبيبات كيتعاملو معاهم كأدوات مختلفة.
• الالتزام بالهوية: القواعد ديال دليل الهوية الموفّر كتغلب الإعدادات الافتراضية ديال Scrollcraft، بما فيها القيود اللي كتمنع تقنيات كان ممكن للمهارة تختارها.

كتّرفض المهارة حتى الاختصارات الشائعة فالتصاميم المولّدة بالذكاء الاصطناعي، بحال شبكات بطاقات المزايا المتطابقة، والعدادات الزخرفية، ومؤشرات السكرول العامة، والنصوص المتدرجة، والإحصائيات المخترعة، ولوحات البيانات الوهمية، والتدرجات البنفسجية ديال الذكاء الاصطناعي، واللوحة الافتراضية ديال العاج والنحاس الخاصة بالعلامات الحرفية.

ثبّت إضافة Claude Code

زِد سوق الإضافات، ومن بعد ثبّت إضافة التصميم:

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

إلا قال Claude Code Run /reload-plugins to activate.، شغّل داك الأمر قبل ما تكمل.

تقدر تستعمل Scrollcraft مباشرة بهاد الأمر:

/nateherk-design:scrollcraft

وتقدر حتى تستعمل المهارة بوصف الموقع اللي بغيتيه كيتحرّك مع السكرول داخل Claude Code. الأمر المباشر مفيد ملي بغيتي تبدا المسطرة ديالها بشكل صريح.

طوّر بلا تثبيت

باش تفحص أو تبدّل مستودع المهارة محلياً بلا ما تثبّتها كإضافة، شغّل Claude Code مع مجلد الإضافة:

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

تحقّق من المتطلبات

Scrollcraft كتحتاج لعدة أدوات محلية. تأكّد منهم قبل ما تبدا البناء:

• Node.js 18 ولا أحدث: مطلوب من طرف كاع السكريبتات المرفقة.
• نسخة كاملة ديال ffmpeg: كتستعمل لترميز المقاطع باش يقدرو يتقدّمو ويتراجْعو مزيان عوض ما يتشغلو بالطريقة العادية. النسخ المنزوعة ممكن تحيد فلاتر أساسية بحال scale.
• playwright-core وChrome: كيتستعملو فمرحلة التحقّق المعتمدة على المتصفح.
• KIE_AI_API_KEY: اختياري، وما كيحتاج ليه غير ملي كتولّد الأصول. المشاريع اللي معمولة بالتصاور ولا الفيديوهات ديالك ما كتحتاجش هاد المفتاح.

ثبّت playwright-core داخل مجلد البناء باش يتم حلّ الوحدات من المكان الصحيح:

npm i playwright-core

إلا ما قدرش Scrollcraft يلقى الملفات التنفيذية الصحيحة، تقدر تستعمل SCROLLCRAFT_FFMPEG وSCROLLCRAFT_CHROME باش تبدّل مسارات البحث ديالو.

Scrollcraft تستعمل غير فبناءات مكتملة على Windows. السكريبتات ديالها كتقلب فالمواقع الشائعة ديال Windows وmacOS وLinux، ولكن README ما كيدّعيش بلي شي بناء تكمل على macOS.

شغّل الفحص الأوّلي ووجد مساحة الخدمة

شغّل سكريبت التشخيص قبل أي حاجة أخرى. غادي يبيّن التبعيات الناقصة ولا غير المتوافقة اللي تقدر من بعد تسبب فإخفاقات مضللة.

node scripts/doctor.mjs

هاد الفحص مهم بزاف، حيث نسخة ffmpeg منزوعة ممكن تبلّغ على الفلتر الناقص بحال إلا كان خطأ فالصياغة، وغياب WebP muxer يقدر يبان بحال مشكل فاسم الملف، وplaywright-core يقدر يتحلّ من المجلد الغلط.

من بعد ما يدوز الفحص الأوّلي، وجد مساحة الخدمة وسجلّ البصمات الفارغ ديالها:

node scripts/workspace.mjs --ensure

كيفاش كتتحدّد مساحة الخدمة

Scrollcraft كتحدّد مساحة الخدمة بالترتيب التالي، وكتحبس عند أول تطابق:

1. المسار المخزّن فـ SCROLLCRAFT_HOME.
2. مساحة الخدمة المسماة فـ أقرب .scrollcraft.json كيتلقاها البرنامج وهو كيطلع من المجلد الحالي للفوق.
3. مجلد scrollcraft داخل جذر المشروع.

ملف إعدادات مساحة الخدمة كيكون بهاد الشكل:

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

البناءات كتتكتب فـ <workspace>/builds/<name>/، بينما سجلّ البصمات كيتخزّن فـ <workspace>/FINGERPRINTS.md.

وجد أول مشروع ديالك

منين تكون الإضافة خدامة ومساحة الخدمة موجودة، عيّط لـ Scrollcraft:

/nateherk-design:scrollcraft

شرح الموقع، الموضوع ديالو، الأصول المتاحة عندك، وأي قواعد خاصة بالعلامة التجارية. تقدر تختار مسار الأصول المولّدة إلا كان KIE_AI_API_KEY مهيّأ، ولا تستعمل التصاور والفيديوهات ديالك بلا مصاريف التوليد. استعمال الأصول الموجودة هو طريقة عمل أساسية، وماشي حل احتياطي.

المهارة كتتبع مسطرة كتشمل طرح الأسئلة، اختيار القواعد، تنقيط الفكرة، بناء الصفحة، والتحقّق من النتيجة. والمراجع ديالها كتحدّد حتى منحنيات الإحساس، وأدوات التمرير، وبناء العوالم المتواصلة، والتوجيه الفني، وتحضير الأصول، ومعايير التصميم.

احترم القاعدة المختارة

ما تتعاملش مع القاعدة المختارة بحال إلا كانت إعداد بصري جاهز. فمشروع العالم المتواصل، مثلا، خاص التجربة تتصرف بحال خشبة وحدة ثابتة بلا فواصل بين الأقسام. أما المشروع التحريري المقسّم لفصول فكيحتاج بنية ونموذج تنقّل مختلفين. خلط الأنماط المطلوبة ديالهم غادي يضعف الآلية اللي كتخلي المشاريع مختلفة على بعضها.

خطّط لحركة مميّزة وحدة

كل موقع خاصو يتضمن تفاعلا مصمما خصيصا ليه وما كاينش فحتى مشروع آخر. مجرد تبديل لون ضوء مركّز ما كافيش. خاص هاد الحركة تنبع من الموضوع والتجربة، وماشي تزيد كزخرفة عامة.

استعمل المحرّك بالطريقة الصحيحة

أهم قاعدة فالتنفيذ هي أن المحرّك ما كيتعدّلش لكل مشروع. هو كيوفّر الآلية المشتركة بين البناءات، وماشي مولّد صفحات قابل للإعداد.

فكل مشروع:

1. بدّل مظهر المحرّك باستعمال ستة رموز للألوان وما يفوتوش جوج ديال الخطوط.
2. كتب HTML دلالي مخصّص للموقع.
3. استعمل الخاصية المخصّصة --sc-p اللي كينشرها المحرّك باش تسوق السلوك المصمّم خصيصا.
4. خلي التخطيط والتفاعلات الخاصة بالمشروع خارج المحرّك المشترك.

تجنّب بناء الصفحة كاملة وقت التشغيل انطلاقا من كائن إعدادات. حسب فلسفة التصميم ديال Scrollcraft، هاد التجريد بالضبط هو اللي كيخلّي المواقع المصنوعة بنفس النظام تشبه لبعضياتها.

فهم مرحلة التحقّق

Scrollcraft كتستعمل متصفحا بلا واجهة باش تفحص الصفحة المكتملة فكل موضع ديال التمرير. فالتجارب اللي كتعتمد على الفيديو، كتسنى حتى يستقرّ مؤشر التشغيل قبل ما تقيّم الإطار.

عملية التحقّق كتبلّغ على:

• التمرير الميت: مسافة تمرير ما كتبدّل حتى حاجة باينة فالشاشة.
• الإشارات غير المكتملة: نصوص ولا إشارات أخرى ما كتوصلش أبدا للشفافية الكاملة.
• إخفاقات التباين بعد التركيب: كيتفحص التباين لكل سطر مقابل أسطع إطار كيدوز من تحته، مع اختيار الاتجاه حسب واش النص فاتح فوق خلفية غامقة ولا غامق فوق خلفية فاتحة.
• المقاطع غير المفكوكة: فيديو كيبقى عالق فإطار الملصق، وقد يبان بحال فيلم متوقف عمدا.

العملية كتوجد حتى ورقة تواصلات للمراجعة البشرية. الفحوصات الآلية تقدر تثبت بلي الصفحة خدامة، ولكن ما تقدرش تحدّد واش التجربة عندها معنى ولا مؤثرة عاطفيا.

نصائح متقدمة لسير العمل

خلي سجلّ البصمات نزيها

ما تعمّرش الريجستري من الأمثلة المرفقة. ملف EXAMPLES.md ديال الريبو كيوضّح كيفاش كيبان الريجستري ملي كيكون عامر، وشنو الأشكال اللي كتقدر تتصادم، ولكن ماشي مجموعة ديال القيود. سجّل المشاريع ديالك، وعاود صمّم أي مفهوم جديد ما كيحققش شرط التفرّد ديال أربعة من أصل ستة.

خصّص الموارد لقمة وحدة

قاوم الرغبة باش تخلي كل مشهد بنفس القوة. خلّي أقوى أصل، وأطول مدة ديال التمرير، وأوضح تمهيد لقمة وحدة. القمم المتنافسة كتضعّف المنحنى العام.

صمّم الإيقاع المتجاوب بوعي

استعمل أساس التباعد ديال 4px، بلا ما تنقل الفجوات الكبيرة ديال سطح المكتب مباشرة للتليفون. خلّي العلاقات بين العناوين واضحة، وحافظ على طول أسطر ساهل للقراءة، وعوّض النص الفاتح فوق الخلفيات الغامقة بأكثر من غير تعديل واحد فاللون.

فضّل التجاوزات التشخيصية على التخمين

إلا تكتاشف تثبيتة غالطة ديال ffmpeg ولا Chrome، حدّد SCROLLCRAFT_FFMPEG ولا SCROLLCRAFT_CHROME بشكل صريح. من بعد عاود شغّل doctor.mjs عوض ما تبقى تديباغي أخطاء الترميز ولا المتصفح من بعد كل واحد بوحدو.

قرا تاريخ المشروع

ملف CHANGELOG.md ديال الريبو كيسجّل شنو فشل فالبنيات، وشنو هي قاعدة التصميم ولا الهندسة اللي تخلقات كردّ على داك الشي. كيعاون كمصدر للدروس التشغيلية، ماشي غير كسجل ديال المزايا.

قيود خاصك تاخدها بعين الاعتبار

• البنيات اللي كملات تجرّبات غير فـ Windows، رغم أن السكريبتات كتقلب على المسارات الشائعة فأنظمة أخرى.
• الفيديو المولّد يقدر يكلّف بزاف، خصوصاً فحالة رحلة طيران فـعالم متواصل وفيها بزاف ديال المراحل.
• هاد المهارة عندها رأي واضح عن قصد، وقد ترفض تخطيطات ولا لوحات ألوان مألوفة، ولا قمة ما محدداش مزيان.
• التحقق الآلي ما يقدرش يحكم واش الصفحة النهائية عندها معنى، وهادي علاش ورقة الاتصال باقية محتاجة لمراجعة بشرية.

الخلاصة

Scrollcraft كيجمع بين محرّك ديال التفاعل بالتمرير ومسطر تصميم منضبط. بدا بتثبيت إضافة Claude Code، وتشغيل الفحص القبلي، وإنشاء مساحة عمل. من بعد اختار قواعد تركيب، وحدّد منحنى الإحساس وقمة وحدة، وابتكر حركة مميّزة وفريدة، وخلي مرحلة التحقق تكشف المشاكل الميكانيكية. خلّي المحرّك المشترك بلا تغيير باش يبقى الهيكل الدلالي والتوجيه الفني ديال كل مشروع مختلفين فعلاً.