كيفية استخدام Claude Code لبناء موقع إلكتروني وتأثيرات رسوم متحركة بمستوى 10,000 دولار

من مهارات التثبيت والتصميم، وجمع المواد المرجعية، وكتابة تلميحات البناء، إلى تنفيذ رسوم متحركة لمؤشر التركيز، ومراجعة وإصلاح كل جولة، ثم الصقل والتحسين، هذا الدليل الكامل يأخذك من الصفر في البرمجة إلى الإتقان. هذه المقالة مأخوذة ومترجمة من منشور monokern على X.
(مقدمة: Claude Code يطرح أمرًا جديدًا /goals: فصل التنفيذ عن التقييم لتجنب كسل وكذب وكلاء AI)
(خلفية إضافية: عمليًا: دليل خطوة بخطوة لاستخدام 7 وكلاء لترقية Vibe Coding إلى عملية تطوير بمستوى خبير)

فهرس المحتوى

Toggle

• الخطوة الأولى: تثبيت مهارات التصميم
• الخطوة الثانية: البحث عن مواد مرجعية
• الخطوة الثالثة: كتابة تلميحات البناء
• الخطوة الرابعة: رسوم متحركة للقسم البطولي
• الخطوة الخامسة: المراجعة والإصلاح
• الخطوة السادسة: الصقل والتحسين
• النتيجة

الوكلاء يتقاضون 5000 دولار لبناء موقع محفظة يبدو بهذا المستوى الرائع.

لقد أنجزت موقعي الخاص في ساعتين. إليك العملية الكاملة.

هذا سجل عملي حقيقي، وليس دليل قالب عام.

أستخدم محفظتي كمثال: المواد المرجعية التي استخدمتها فعليًا، والتلميحات التي أرسلتها فعليًا، والأخطاء التي واجهتها وأصلحتها فعليًا.

لا حاجة لأي خبرة برمجية.

الخطوة الأولى: تثبيت مهارات التصميم

بشكل افتراضي، مخرجات تصميم Claude متوسطة. نفس الخطوط، نفس التنسيق، نفس المظهر المسطح. مهارتان تحلان هذه المشكلة.

• Frontend Design — تم تطويره بواسطة Anthropic، يعمل في الخلفية، يمنع الخطوط المفرطة في الاستخدام مثل Inter، ويدفع نحو تنسيق أكثر جرأة، ويحسن جودة النص.

الصق هذا في Claude Code:

Install this skill: github.com/anthropics/skills/tree/main/frontend-design

عند ظهور المطالبة، اسمح بالتغييرات، وقم بالتثبيت بشكل عام.

• UI/UX Pro Max — 57 نمط واجهة، 95 نظام ألوان، 56 مجموعة خطوط، يمكنك استدعاؤها مباشرة عند البناء.

الصق هذا في Claude Code:

Install this plugin using NPM: github.com/nextlevelbuilder/ui-ux-pro-max

قم بتبديل محدد الوضع إلى وضع Auto، حتى لا يسألك Claude في كل خطوة عما إذا كان مسموحًا.

الخطوة الثانية: البحث عن مواد مرجعية

لا تصف موقع أحلامك من العدم، بل اجعل Claude يرى ما تريده.

محفظتي استخدمت "Il Capo Production" من Awwwards كمرجع رئيسي.

awwwards.com/sites/il-capo-production

هذا النمط الداكن والسينمائي هو ما أردته.

إليك كيف استخدمته فعليًا:

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

• 1.png — القسم البطولي
• 2.png — القسم أسفل البطولي (الأعمال تظهر كفيديو + عنوان/وصف)
• 6.png — التذييل وأسفل الموقع
• 11.png — صفحة مشروع واحد
• 12.png — شاشة التحميل

أما بالنسبة لصفحة المحفظة (الصفحة التي تعرض جميع الأعمال)، فلم يكن للموقع المرجعي تخطيط مطابق. ذهبت إلى Pinterest ووجدت تخطيطًا مختلفًا بنمط مشابه، وأخذت لقطة شاشة منفصلة وأسميتها 11.png.

لا تحاول نسخ موقع بالكامل، بل استعير أجزاء جيدة من كل موقع.

ضع جميع المواد داخل مجلد /reference في المشروع.

الخطوة الثالثة: كتابة تلميحات البناء

استخدم /ui-ux-pro-max في بداية التلميحة لتفعيل مهارات التصميم.

هذه هي التلميحة الدقيقة التي استخدمتها للمحفظة:

تلميحة للنسخ:

/ui-ux-pro-max
أنشئ موقع محفظة شخصية راقي لمطور واجهات أمامية. يجب أن يبدو باهظ الثمن، وعصريًا، ومثيرًا للإعجاب تقنيًا،
مع رسوم متحركة أنيقة تُحمّل بسلاسة على أي جهاز.
استخدم المراجع التصميمية في مجلد reference: 1.png هو القسم البطولي، 2.png هو القسم أسفل البطولي
(يعرض الأعمال بتنسيق فيديو + عنوان/وصف)، 6.png هو التذييل/أسفل الموقع، 7.png هو صفحة المحفظة
التي تعرض جميع الأعمال، 11.png هو نموذج لصفحة مشروع واحد عند النقر على أي عمل من المحفظة، 12.png هو شاشة التحميل.
في منتصف القسم البطولي، استخدم me.png لوضع صورتي.
جميع العناصر النائبة للصور/الأعمال استخدم example.png.

قبل البدء في البناء، اسألني أي أسئلة تحتاج إلى توضيح.

السطر الأخير أساسي
سيتوقف Claude ليسأل 4-6 أسئلة حول الأسلوب، والخطوط، والتخطيط، ودرجة الرسوم المتحركة، ونبرة المحتوى، وإجاباتك ستكون أساس الموقع بأكمله.

كن محددًا في إجاباتك، فكلما كنت دقيقًا هنا، قلّت الحاجة إلى التنقل ذهابًا وإيابًا لاحقًا.

بعد إجابتك، سيستغرق Claude حوالي 5 دقائق للتخطيط، ثم حوالي 10 دقائق للبناء، وسيكون الإخراج الأول قويًا بالفعل.

الخطوة الرابعة: رسوم متحركة للقسم البطولي

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

فكرت في فكرة التركيز لمحفظتي:

• القسم بأكمله داكن
• صورتي غير مرئية تقريبًا بشكل افتراضي
• المؤشر يعمل مثل مصباح يدوي — "يُضيء" صورتي
• الطبقة الثانية هي مجرد نسخة أكثر إشراقًا ودفئًا من نفس الصورة

وصفت المفهوم لـ Claude وطلبت منه تطويره:

"في القسم البطولي، أريد تأثير مؤشر يشبه مصباح يدوي/بقعة ضوء. خلفية داكنة. صورتي غير مرئية تقريبًا بشكل افتراضي. عندما يتحرك المؤشر فوق القسم، يعمل كبقعة ضوء — تكشف عن نسخة أكثر إشراقًا ودفئًا من الصورة تحتها من خلال قناع دائري ناعم الحواف يتبع المؤشر. نصف القطر 100-150px، حواف مموهة ناعمة. من فضلك قم بتنفيذ هذا التأثير."

قام Claude بذلك من المرة الأولى. التأثير كما هو موصوف تمامًا — يحرك المستخدم المؤشر، وتتوهج الصورة في المكان الذي يشير إليه.

الخطوة الخامسة: المراجعة والإصلاح

قبل إجراء فحص الجودة الرسمي، قم بالتمرير عبر الموقع بنفسك ولاحظ كل ما يبدو غير صحيح.

قائمتي بعد البناء الأول:

• الانتقال بين صفحات التوجيه يبدو مفاجئًا — يحتاج إلى تلاشي سلس
• تأثير البقعة الضوئية يعاني من تأخير ملحوظ ولا يواكب المؤشر
• بعض العناصر تتجاوز الشاشة ولا تتناسب معها
• الخطوط لا تتطابق مع الموقع المرجعي — تبدو أكثر عمومية مقارنة بجمالية Il Capo

دوّن جميع المشكلات، ثم أرسلها مرة واحدة:

"إليك بعض المشكلات التي تحتاج إلى إصلاح، يرجى معالجتها جميعًا:\

2. [وصف المشكلة 1]\
3. [وصف المشكلة 2]\
4. [وصف المشكلة 3]"

إرسال جميع المشكلات مرة واحدة مهم جدًا.

الخطوة السادسة: الصقل والتحسين

بعد إصلاح الأخطاء الواضحة، قم بفحص جودة منظم. الصق هذا في Claude:

"من فضلك راجع هذا الموقع وفقًا للمعايير التالية، وأخبرني بصدق ما الذي يحتاج إلى تحسين:
— التنسيق (هل نستخدم خطوط AI مفرطة الاستخدام مثل Inter؟)
— الألوان (هل نظام الألوان مقيد أم فوضوي؟)
— التسلسل الهرمي (هل أحجام النص توجه العين بشكل صحيح؟)
— الرسوم المتحركة (سلسة وذات نية أم متقطعة وعشوائية؟)
— النسخة المحمولة (هل هي مصممة حقًا للهاتف أم مجرد نسخة مصغرة من سطح المكتب؟)
— النص (مقيد ومحدد أم مليء بملء AI عام؟)"

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

لا تجعله يصلح النقاط التي لا توافق عليها. أنت تعرف موقعك أفضل منه.

النتيجة

ستحصل في النهاية على موقع متين. ليس مثاليًا — لكنه جيد بما يكفي.

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

من هنا ابدأ التكرار. ابحث عن شيء واحد لتحسينه كل يوم وأصلحه.