كيفية إنشاء موقع ويب متحرك باستخدام Claude Code في أمسية واحدة

تعرّف أكثر على العمل مع النماذج في وثائق Ailoot.

لماذا يبدو الموقع الذي أنشأه الذكاء الاصطناعي واضحًا من الشاشة الأولى؟#

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

السبب آلي. دُرّب النموذج على مجموعة هائلة من الصفحات الجاهزة، وكانت تلك المجموعة منحازة بشدة.

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

تغيّر «مظهر الذكاء الاصطناعي» منذ ذلك الحين. تصف Anthropic الآن مظاهر مختلفة في وثائق مهارة frontend-design.

المشكلة الأساسية: يظهر slop عندما لا يكون هناك شيء محدد يمكن نسخه، فيأخذ النموذج ببساطة متوسط أساليب الويب كلها.

يعني «slop» هنا عملًا مولّدًا آليًا جرى دمج ملامحه في نتيجة عامة بلا أسلوب مميز.

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

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

ما الذي تحتاج إليه لإنشاء موقع ويب متحرك باستخدام Claude Code؟#

مجموعة الأدوات كاملة مجانية. تحتاج إلى Claude Code نفسه، ومكتبة الرسوم المتحركة GSAP (فهي مجانية بالكامل منذ أواخر أبريل 2025، بما في ذلك إضافاتها التي كانت مدفوعة سابقًا مثل SplitText وMorphSVG)، ومهارة frontend-design من Anthropic، ومكتبة للاتجاهات البصرية الجاهزة. وتحتاج أيضًا إلى خدمة استضافة مجانية للنشر. أنت تدفع فقط مقابل عمل الوكيل.

لنستعرض الأدوات واحدة تلو الأخرى، لأن هناك الكثير من الالتباس حول الأسعار.

GSAP هي مكتبة الرسوم المتحركة التي تقف وراء نسبة ملحوظة من مواقع الويب الحائزة على جوائز. اشترتها Webflow في أكتوبر 2024، وبدأت الشائعات بأن كل شيء أصبح مجانيًا على الفور تقريبًا. وهذا ليس صحيحًا تمامًا: فقد أكدت Webflow آنذاك أن الأسعار الحالية ستظل سارية. أصبحت المكتبة مجانية في أواخر أبريل 2025 مع الإصدار 3.13.

يذكر إصدار 3.13 تحديدًا أن الإضافات التي كانت مدفوعة، مثل SplitText وMorphSVG، أصبحت مجانية أيضًا، بما في ذلك للاستخدام التجاري. الإصدار الحالي اعتبارًا من يوليو 2026 هو gsap@3.15.0.

لكن المجانية لا تعني أنها مفتوحة المصدر. ما زال الترخيص مملوكًا ويحظر إنشاء محرر مرئي للرسوم المتحركة باستخدام GSAP ينافس Webflow. ولا توجد قيود على مواقع الويب أو مشاريع العملاء أو الأعمال التجارية.

مهارة frontend-design من Anthropic مجموعة من التعليمات التي تغيّر طريقة عمل الوكيل على واجهة. ويقول وصفها في المستودع:

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

يذكر المنشور 75 مهارة، ويورد وصف المستودع 78، بينما يضم شجر الملفات اليوم 91. والمؤلف صريح بشأن ذلك: ابحث في المستودع باستخدام أمر بحث، لأن الوصف قديم.

كيف تجعل Claude Code يتوقف عن إنتاج القوالب؟#

لنبدأ بملف القواعد، لأنه يسري على كل طلب ولا يكلّف شيئًا.

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

## 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).

كُتبت الكتلة بالإنجليزية عمدًا: يتبع النموذج التعليمات التقنية القصيرة بدقة أكبر بلغة الوثائق.

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

بعد ذلك، المهارة. يمكن تثبيت مهارات Anthropic الرسمية عبر الإضافة:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

ثمة تفصيل: لا يمكن تثبيت مهارات التصميم كل واحدة على حدة؛ إذ تثبّت إضافة example-skills المهارات الاثنتي عشرة كلها دفعة واحدة. وإذا أردت واحدة فقط، فانْسخ المجلد يدويًا—سيعثر عليه Claude Code من دون إعادة تشغيل الجلسة:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

من المهارات الأخرى في هذه المجموعة التي قد تكون مفيدة: theme-factory التي تضم عشرة سمات جاهزة وتتطلب تأكيدًا بشريًا قبل تطبيقها، وweb-artifacts-builder للبناء باستخدام React ومكونات جاهزة، وalgorithmic-art للرسوم التوليدية. يشرح مقال منفصل بالتفصيل كيفية اختيار المهارات لمهمة ما: كيفية اختيار مهارات Claude Code.

تعمل القواعد والمهارة معًا: تحظر القواعد الخيارات السيئة، وتفرض المهارة سير عمل—النظام أولًا، ثم النقد، فالشفرة أخيرًا.

كل ما هو مهم هنا يحدث قبل إرسال الطلب. تضع مسبقًا في سياق الوكيل القيود التي سيبني وفقًا لها، وعندئذ لا تعود صياغة الطلب نفسه مهمة إلا قليلًا. يُسمى هذا النهج هندسة السياق، وملف CLAUDE.md هو أول لبنة فيه. ويساعد الجمع بين استنساخ الذكاء الاصطناعي + Second Brain + هندسة السياق على تحويل Claude من مولّد للنتائج المتوسطة إلى أداة تلتزم بأسلوبك.

أين تجد اتجاهات بصرية جاهزة ومطالبات للرسوم المتحركة؟#

تقنيات الحركة التي تضمها هي: 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.

بصفتك غير مبرمج، ما يهمك أكثر هو الاتجاهات البصرية الجاهزة. بدلًا من الطلب المبهم «اجعله عصريًا»، اختر واحدًا من هذه الاتجاهات وامنح النموذج القواعد المحددة التي كانت تنقصه:

• clean-minimal-beige-light-mode - بساطة بيجاء فاتحة
• dark-glass-clean-layout - زجاج داكن
• documentary-brutalist-agency - أسلوب وثائقي وحشي
• editorial-portfolio-chapters - ملف أعمال مقسّم إلى فصول، مثل مجلة
• orange-clean-paper-saas - موقع خدمة بأسلوب ورقي ولمسة برتقالية
• solar-duotone-bold - معالجة جريئة بلونين
• tech-green-dark-mode-modern - أسلوب تقني داكن مع الأخضر
• light-mode-paper-technical - ورق تقني فاتح

هناك أيضًا مهارات تقنية للرسوم والمؤثرات ثلاثية الأبعاد: threejs، matterjs، globe-gl، vantajs، unicorn-studio، progressive-blur، beautiful-shadows، css-border-gradient.

لا يتضمن المستودع أمر تثبيت—ويقول المؤلف صراحةً في خارطة الطريق إنه سيضيف واحدًا بعد استقرار طريقة التكامل. والتعليمات الوحيدة لـ Claude Code هي:

فيما يلي خيار واحد للتثبيت. هذا الأمر غير موجود في المستودع؛ إنه توصية للتثبيت:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

وبإيجاز، عن مكتبات المطالبات المدفوعة، لأن السؤال يُطرح كثيرًا. تبيع خدمة motionsites.ai مجموعة من المطالبات الجاهزة للأقسام: اعتبارًا من يوليو 2026، يبلغ سعرها 239 دولارًا سنويًا أو سعرًا ترويجيًا لمرة واحدة قدره 349 دولارًا بدلًا من 759، من دون خطة شهرية. لم يُذكر اسم المؤلف، ولا توجد صفحة «نبذة عنا». وهناك موقع آخر يحمل اسمًا قريبًا جدًا بصيغة المفرد، ولا يرد ذكر التوافق مع Claude Code إلا على ذلك الموقع. لا أوصي بالشراء، لكن من المفيد معرفة هذا الخيار.

كيف تزوّد الوكيل بوثائق GSAP الحديثة في سطر واحد؟#

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

الحل هو أن تضع الوثائق في السياق بنفسك. توفرها GSAP بتنسيق ملائم للآلات:

https://gsap.com/llms.txt

حجم الملف نحو 25 كيلوبايت في الوقت الحالي. كما تتوفر كل صفحة توثيق بصيغة markdown—فأضف .md إلى عنوان URL فحسب.

عمليًا، يبدو الأمر هكذا:

اقرأ https://gsap.com/llms.txt و https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

ثم أنشئ مشهدًا واحدًا على الصفحة الرئيسية: يظهر العنوان أثناء تمريرك عبر الشاشة الأولى، وتتحرك الصورة على اليمين ببطء أكبر من النص.
استخدم transform وopacity فقط. لا تستخدم transition-all.

لدى مكتبة Motion (المعروفة سابقًا باسم Framer Motion) الملف نفسه، وهو أكبر حجمًا. تُوزّع Motion بموجب ترخيص MIT وتظل مفتوحة المصدر فعلًا؛ الإصدار الحالي هو motion@12.42.2. إذا كان المشروع مبنيًا باستخدام React ولا يحتاج إلا إلى تأثيرات إظهار بسيطة، فيمكنك اختيار Motion؛ أما لمشاهد التمرير المعقدة، فاستخدم GSAP مع إضافة ScrollTrigger.

توجد أيضًا خيارات تعمل في المتصفح وحده ولا تستخدم مكتبات. دخلت انتقالات حالة الصفحة عبر View Transitions API ضمن دعم baseline في 14 أكتوبر 2025—لكن ذلك يقتصر على الصفحة الواحدة؛ أما النسخة العابرة للصفحات فلا يدعمها Firefox إطلاقًا. ولم تدخل رسوم التمرير المتحركة باستخدام CSS دعم baseline بعد: يدعمها Chrome، وتعلمها Safari مؤخرًا، لكن يجب تفعيلها يدويًا في إعدادات Firefox، لذا لن تعمل ببساطة لدى القراء العاديين. اطلب من الوكيل أن يتحقق أولًا مما إذا كان المتصفح يدعمها أصلًا، وإلا فليُبقِ الانتقال القياسي.

كيف تحوّل موقع ويب يعجبك إلى مطالبة؟#

الطريقة الأكثر شيوعًا لشرح ما تريده هي عرض مثال. لكن ذلك لا يعمل مباشرةً مع الوكيل: فهو لا يرى موقع الويب، بل يرى نصًا.

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

قاعدتها الرئيسية مصاغة بلهجة حازمة:

أما المهارة الثانية، html-to-interaction-prompts، فتعمل مع الشفرة المصدرية: تعثر على كل ما يتحرك—تفاعلات المؤشر، والرسوم ثلاثية الأبعاد، وتأثيرات التمرير، والطبقات التي تتحرك بسرعات مختلفة—ثم تقسّم الصفحة إلى مطالبات منفصلة، واحدة لكل قسم أو زر أو حالة تحويم أو تأثير. ومبدؤها هو اعتبار سلوك المصدر هو الحقيقة، وعدم اختراع تأثيرات انطلاقًا من لقطة شاشة حين تكون الشفرة متاحة.

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

ثمة طريقة أيضًا من دون تسجيل للشاشة: صِل الوكيل بمكتبة أمثلة حية للواجهات عبر MCP. يمكن تثبيت خادم Mobbin الرسمي بأمر واحد:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

بعد ذلك، افتح جلسة جديدة، واختر الخادم من القائمة، وسجّل الدخول في المتصفح. سيحصل الوكيل على إمكانية الوصول إلى لقطات شاشة لتطبيقات حقيقية تعمل؛ إذ تسرد المكتبة أكثر من 621,500 شاشة. هذه لقطات للمنتجات المكتملة، لا للمكونات أو الشفرة. تنبيه مهم: لا يعمل خادم Mobbin في الخطة المجانية؛ فهو متاح في الخطط المدفوعة (اعتبارًا من يوليو 2026). وهناك مقال منفصل عن Google Stitch يتناول ربط الخدمات الخارجية بوكيل، باستخدام الطريقة نفسها لإدخال نظام تصميم إلى Claude Code.

خطوة بخطوة: إنشاء موقع ويب متحرك في أمسية واحدة#

1. أعدّ مشروعًا

   إذا لم يكن لديك مشروع بعد، فابدأ بمجلد فارغ. أنشئه، وافتحه في طرفية، وشغّل claude فيه. اطلب في أول مطالبة هيكلًا أوليًا: «أنشئ هيكل موقع ويب من صفحة واحدة لنشاطي التجاري (اشرح ما هو)، باستخدام HTML وCSS عاديين، من دون مكتبات.» ستظهر مجموعة من الملفات—وهذا هو جذر المشروع، حيث سيجري كل شيء من الآن فصاعدًا.

2. ضع القواعد في CLAUDE.md

   انسخ كتلة Anti-Generic Guardrails إلى ملف CLAUDE.md في جذر المشروع. وإذا لم يكن الملف موجودًا، فاطلب من الوكيل إنشاءه. كُتبت القواعد لـ Tailwind؛ وإذا كان الهيكل الأولي يستخدم CSS عاديًا، فقل للوكيل: «طبّق هذه المبادئ على CSS العادي»—فمعنى القواعد لا يتغير. راجع شرح أربع قواعد لـ CLAUDE.md لمعرفة طريقة عمل الملف نفسه وما الذي يمكن إضافته إليه.

3. ثبّت مهارة frontend-design

   استخدم إضافة example-skills أو انسخ مجلد frontend-design كما ورد أعلاه. يمكنك التحقق من تحميل المهارة باستخدام الأمر /doctor.

4. اختر اتجاهًا بصريًا واحدًا

   واحدًا، لا اثنين أو ثلاثة. فمزج الأسلوب الوثائقي الوحشي بالبساطة البيجاء يمنحك بالضبط ذلك المتوسط الذي تحاول تجنبه. أسماء المجلدات وصفية، لكن لا يمكنك معاينتها بصريًا: افتح SKILL.md داخل المجلد الذي يعجبك، واقرأ وصف لوحة الألوان والخطوط—فكل شيء موضح فيه.

5. أنشئ صفحة ثابتة

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

6. أضف مشهد حركة واحدًا

   واحدًا فقط. غالبًا ما يكون على الشاشة الأولى: يظهر العنوان، وتتحرك طبقة الخلفية ببطء أكبر من المقدمة. أعط الوكيل ملف llms.txt الخاص بالمكتبة، واشرح المشهد بوضوح—ما الذي يتحرك، وأين، وعلى مدى كم ملي ثانية. اترك opacity كما هي في الشاشة الأولى؛ فهناك قسم منفصل أدناه يشرح السبب.

7. أضف قاعدة للحركة المخفّضة

   طبق قاعدة CSS وإعداد JavaScript لتقليل الحركة من قسم إمكانية الوصول. افحص الصفحة مع تفعيل تقليل الحركة قبل النشر.

8. انشر وتحقق من السرعة

   انشر على أي خدمة استضافة ثابتة مجانية—Vercel أو Netlify أو GitHub Pages. اطلب من الوكيل: «انشر هذا المشروع على Vercel وأعطني الرابط.» وبعد النشر فقط، اختبر عنوان URL الناتج عبر PageSpeed Insights: تعمل الخدمة مع عناوين URL العامة ولا تستطيع رؤية صفحة محلية. انظر إلى «Largest Contentful Paint»—الوقت اللازم لعرض أكبر عنصر؛ والمنطقة الخضراء هي حتى 2.5 ثانية. يستطيع الوكيل قياس النسخة المحلية قبل النشر: سيفتحها Chrome DevTools MCP في Chrome ويعرض القياس نفسه.

الخطوة السادسة هي الموضع الأسهل لإفساد العمل الذي أنجزته في الخطوات الخمس السابقة.

لماذا تجعل الرسوم المتحركة المفرطة الموقع يبدو أكثر توليدًا بالذكاء الاصطناعي؟#

هنا ينهار تفكير معظم من يتناولون الموضوع: تبدو الرسوم المتحركة القليلة رخيصة، لذا يجب إضافة المزيد.

هذا مكتوب في مهارة frontend-design نفسها التي ثبتّها لتحسين التصميم. تحذر Anthropic من الإفراط في الأداة التي يستخدمها الوكيل لتزيين الصفحة.

وتسرد أيضًا تقنيات نمطية أخرى: رقم كبير مع تعليق صغير ولمسة متدرجة باعتبارها استجابة قياسية لأي مهمة؛ وكتل مرقمة مثل 01 / 02 / 03، لا تلائم إلا وجود تسلسل فعلي.

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

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

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

كيف تقتل الرسوم المتحركة سرعة الموقع؟#

المقاييس الثلاثة التي تستخدمها Google لتقييم الصفحة هي: وقت عرض أكبر عنصر—لا يتجاوز 2.5 ثانية؛ والاستجابة للتفاعل—لا تتجاوز 200 ملي ثانية؛ وتغيّر التخطيط—لا يتجاوز 0.1. ويجري قياسها عند الشريحة المئوية الخامسة والسبعين من الزيارات الفعلية.

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

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

المسألة الثانية هي ما الذي يمكن تحريكه بتكلفة منخفضة، وما الذي ترتفع كلفته.

بعبارات بسيطة: يركّب المتصفح الصورة في طبقات، وتحدث تغييرات الموضع وopacity في المرحلة الأخيرة والأقل كلفة. أما كل شيء آخر فيجعله يعيد حساب الصفحة. ووفق القياسات الواردة في الوثائق نفسها: يستغرق التحريك باستخدام إزاحتي top وleft مدة 37 ملي ثانية للتخطيط و79 للعرض؛ بينما يستغرق التأثير البصري نفسه باستخدام transform صفرًا في الحالتين.

وهناك تناقض يجدر تذكره: تركيب opacity منخفض التكلفة، لكنها تجعل العنصر غير مؤهل لمقياس السرعة. لذا فإن الرسوم المتحركة منخفضة التكلفة على المتصفح والآمنة للأداء أمران مختلفان.

وثمة أمر آخر بشأن الخاصية will-change التي يحب الوكلاء نثرها «لتحسين الأداء». تقول وثائق MDN العكس:

وتذكر أيضًا أن هذه الخاصية مخصصة كملاذ أخير لمشكلات أداء قائمة. ولا تعمل بوصفها إجراءً وقائيًا. فوجود سطر مثل will-change: transform, opacity على خمسين عنصرًا علامة شائعة على أن الشفرة مولّدة.

أما تغيّر التخطيط فقصته أبسط. لا تلقي وثائق Google اللوم على الرسوم المتحركة؛ بل على العكس، تساعد الانتقالات المدروسة على تحديث المحتوى من دون مفاجأة القارئ. والوصفة هي نفسها: غيّر الحجم باستخدام transform بدلًا من width وheight، وحرّك العناصر بالإزاحات بدلًا من الإحداثيات.

ماذا عن الأشخاص الذين يتضررون جسديًا من الحركة؟#

هذا القسم مهم لأكثر من مجرد المجاملة. فالجمهور الذي يشتري من صاحب النشاط التجاري هو تحديدًا من يبلغون الأربعين فأكثر.

وتصف هيئة W3C العواقب من دون تلطيف: الغثيان والصداع النصفي، وقد يبلغان أحيانًا حدًا يستدعي الاستلقاء.

يمكنك معالجة ذلك بثلاثة أسطر من الأنماط:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

ثلاث نقاط ينبغي وضعها في الحسبان.

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

تقول المواصفة «يزيل أو يقلل أو يستبدل»—فالإزالة الكاملة ليست الخيار الأول حتى. ويعمل استبدال انزلاق حاد بتلاشي وجيز أفضل من إيقافه تمامًا: إذ يؤدي تعطيل جميع الرسوم المتحركة إلى تعطل مؤشرات التحميل وأشرطة التقدم.

تحتاج الرسوم المتحركة المدارة بـ JavaScript إلى معالجة مستقلة للتفضيل؛ فلا يلغي تعديل مدة CSS مخطط GSAP الزمني. مجرد حفظ قيمة matchMedia(...).matches في متغير لا يفعل شيئًا ما لم يتفرع الإعداد بناء عليها. مع GSAP، أبق العنصر ظاهرًا في HTML/CSS العاديين، وأنشئ الحركة فقط عندما يسمح بها المستخدم:

// 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.

يجب ألا يكون للعنوان نمط أساسي يخفيه أو يزيحه. مع تفعيل تقليل الحركة، يبقى ظاهرًا وثابتًا. إذا تغير التفضيل والصفحة مفتوحة، يعكس GSAP الحركة عندما يتوقف الاستعلام عن المطابقة. وتزيل mm.revert() الحركة المجمعة عند التنظيف أيضًا. في Motion، نفّذ الفرع المكافئ في إعداد المكتبة؛ فلا تكفي قاعدة CSS وحدها. راجع توثيق دورة حياة GSAP matchMedia والتنظيف.

وهناك أيضًا معيار رسمي لإمكانية الوصول ينبغي مراعاته. يتطلب WCAG 2.2.2، وهو معيار من المستوى A، أن يتمكن المستخدم من إيقاف أي شيء يتحرك أو يومض أو يمرر تلقائيًا إذا استمر لأكثر من خمس ثوانٍ وعُرض إلى جانب محتوى آخر. وينطبق هذا على الدوّارات التي تدور تلقائيًا وأشرطة العرض المتحركة بلا نهاية، وهي عناصر يسهل على الوكلاء إضافتها.

سبعة مواضع تنهار عندها الأمور#

1. تُخفى الشاشة الأولى إلى أن تتلاشى للظهور. لا يُحتسب العنصر الذي تبلغ قيمة opacity فيه صفرًا مرشحًا لمقياس زمن العرض. وهذا أكثر الأخطاء كلفة لأنه يضر بمقياس يؤثر في ترتيب نتائج البحث.

2. تتحرك جميع العناصر. ينزلق كل قسم إلى الظهور، وتنبثق كل بطاقة. تقول Anthropic صراحةً إن ذلك يزيد الانطباع بأن التصميم مولّد.

3. Scrolljacking. يحدث عندما يستبدل موقع ويب السلوك الطبيعي لعجلة الفأرة بمنطقه «السينمائي» الخاص. وتقول دراسة لمجموعة Nielsen Norman بوضوح:

وفي الدراسة نفسها، عانى معظم المشاركين قدرًا خفيفًا على الأقل من التشوش.

4. تُحرّك خصائص التخطيط. تُستخدم الإحداثيات والأبعاد بدلًا من transforms. 37 و79 ملي ثانية مقابل صفر.

5. الرسوم المتحركة طويلة أكثر من اللازم. النطاق المفيد هو 100 إلى 400 مللي ثانية، وتُعد 400 بطيئة جدًا ولا تناسب إلا الحركات الكبيرة. تميل الوكلاء إلى استخدام ثانية كاملة افتراضيًا.

وفقًا لنتائجه، يتراوح النطاق المفيد بين 100 و400 ملي ثانية؛ ومدة 400 ملي ثانية بطيئة جدًا بالفعل، ولا تلائم إلا الحركات الكبيرة. أما الوكلاء فيستخدمون ثانية كاملة افتراضيًا.

6. لا توجد قاعدة للحركة المخفّضة. لن يضيفها الوكيل من تلقاء نفسه.

7. يتباطأ الموقع مع كل تفاعل. وهذا خاص بـ React: فالرسوم المتحركة التي تُنشأ من دون مرجع إلى العنصر ومن دون تنظيف تتضاعف مع كل تحديث للمكوّن. وتبدأ الصفحة بالتباطؤ تدريجيًا من دون سبب واضح.

ثمة فخ ثامن. إن أسلوب «يأخذ الوكيل لقطة شاشة ويصلح ما يراه» ينجح على الصفحات الثابتة، لكنه يوقع الوكيل في حلقة تعديل لا تنتهي مع العناصر المتحركة: يرى إطارًا وسيطًا، ويظن أنه خطأ، فيصلحه، ثم يرى إطارًا وسيطًا آخر. كما أن كل لقطة شاشة تستهلك من السياق.

كم تبلغ التكلفة، وكيف تتجنب استهلاك حصة شهر كامل على موقع واحد؟#

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

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

ما يساعد:

أنشئ مشهدًا واحدًا في كل مرة، وثبّت النتيجة. إن طلبًا واحدًا لإضافة «رسوم متحركة إلى الموقع كله» يضمن الإفراط في الإنفاق. يمكنك تعطيل التحقق بلقطات الشاشة للعناصر المتحركة وفحصها بصريًا بنفسك. أبقِ CLAUDE.md موجزًا حتى لا تستهلك القواعد السياق في كل طلب. وأعط الوكيل ملف llms.txt الخاص بالمكتبة مسبقًا، وإلا فسيخترع طريقة ربط قديمة ثم يصحح اختراعه بنفسه.

يشرح المقال لماذا يعيد Claude Code قراءة المشروع كله أين تذهب الرموز أثناء العمل على مشروع؛ ويتناول مقال كيف لا تستنفد حدود Claude Code طرق ضبط الاستهلاك.

ماذا بعد؟#

أنشئ صفحتك الأولى باتباع الخطوات الثماني. اختر اتجاهًا بصريًا واحدًا، وأنشئ مشهدًا واحدًا على الشاشة الأولى، وأجرِ فحصًا للسرعة.

لخطواتك التالية—Ailoot.