النظام المتكامل: كيف أعدت بناء موقعي الشخصي مقابل 87 سنتاً في ظهيرة واحدة

1. ظهيرة واحدة مقابل ثلاثة أيام

في سبتمبر 2025، قمت ببناء موقعي الشخصي ومدونتي التقنية hfares.com في ثلاثة أيام بتكلفة 15 دولاراً. استخدمت وكيل الذكاء الاصطناعي (Agent) الخاص بـ Replit، و60 محادثة، وChatGPT لكتابة المتطلبات، وCloudflare Pages للاستضافة. أعطتني أداة Lighthouse تقييم 97 للأداء، و92 لتحسين محركات البحث (SEO). كتبت مقالاً حول ذلك واعتبرت أن العمل قد انتهى.

في الأسبوع الماضي، أعدت بناء الموقع. استغرق الأمر ظهيرة واحدة. 37 مليون توكن. 87 سنتاً.

هذه ليست قصة عن ذكاء اصطناعي أفضل. إنها قصة عن نظام متكامل (Harness) أفضل.

2. كيف كان يبدو مصطلح "مكتمل" في الواقع

كنت فخوراً بالإصدار الأول. كان الموقع سريعاً، ثنائي اللغة، ومتجاوباً. كان يؤدي الغرض تماماً. وانتقلت لأشياء أخرى.

ثم حدث أمران. الأول، واجهت مشاكل في الفهرسة. بعض الصفحات لم تكن تظهر على Google بالشكل الذي توقعته. الثاني، بدأت مهارات (Skills) جديدة بالظهور لأداة Claude Code مثل Claude SEO و UI/UX pro max.

قررت اختبار هذه المهارات على موقعي. ماذا سأخسر؟

أظهرت المراجعة علامات حمراء تحذيرية. أعطتني مراجعة SEO تقييماً 60 من 100. ووجدت مراجعة واجهة/تجربة المستخدم (UI/UX) 12 مشكلة.

موقع حصل على تقييم 97 في أداء Lighthouse و92 في SEO، لم يكن يحتوي على أي بيانات منظمة (Structured data). كانت الأرقام تبدو جيدة. لكن الموقع في الواقع لم يكن كذلك.

3. الوصفة

لم أبدأ في إصلاح الأشياء واحدة تلو الأخرى. بل قمت ببناء خط أنابيب (Pipeline).

الخطوة الأولى: النقل (Migrate).

كان لدي ملف replit.md من مشروع Replit الأصلي. طلبت من Claude Code تهيئة المشروع محلياً وإنشاء ملف CLAUDE.md منه. استغرق ذلك بضع دقائق. خرج المشروع من بيئة Replit إلى بيئة محلية تتيح للوكيل (Agent) الوصول الكامل.

الخطوة الثانية: المراجعة بالتوازي (Audit in parallel).

قمت بتحميل كلتا المهارتين. مهارة مراجعة SEO من Daniel Agrici على GitHub، ومهارة UI/UX Pro Max من NextLevelBuilder. قمت بتشغيلهما في نفس الوقت. أصدرت كل أداة تقريراً كاملاً يحتوي على مسارات الملفات، وأرقام الأسطر، وملاحظات محددة.

الخطوة الثالثة: المواصفات (Spec).

طلبت من كلتا المهارتين تحويل ملاحظاتهما إلى ملفات مواصفات للتنفيذ. ليست مجرد توصيات غامضة. بل تعليمات دقيقة. أسماء المكونات (Components)، بدائل فئات CSS، ومقاطع من الأكواد. المواصفات التي تراها مرفقة بهذا المقال. لا شيء يُترك للاجتهاد الشخصي.

الخطوة الرابعة: التنفيذ (Execute).

غذّيت Claude Code بملفات المواصفات، لكنني لم أستخدم نماذج Claude الخاصة به. قمت بربطه بـ DeepSeek V4 Pro باستخدام طبقة التوافق الخاصة بـ Anthropic API. إذا كنت ترغب في القيام بنفس الشيء، فالتعليمات موجودة هنا. عمل الوكيل على ملفات المواصفات بدءاً من الأهم وحتى الأمور البسيطة. لم يتجاوز أي خطوة. لم يرتجل. قرأ المواصفات ونفذها.

الخطوة الخامسة: التدقيق (Grill).

نفذت أمر grill me. جعلت Claude Code ينتقد الكود الخاص بالمشروع. طلبت منه تحديد المكونات غير المستخدمة والتبعيات (Dependencies) الميتة، ثم صياغة خطة تنفيذية لتنظيفها.

4. الأرقام

ظهيرة واحدة. 37 مليون توكن. 87 سنتاً.

محور التكلفة: 87 سنتاً. للتوضيح، تشغيل نفس الحجم من التوكنز باستخدام Claude Sonnet كان سيكلف ما بين 50 إلى 80 دولاراً. DeepSeek V4 Pro ليس أرخص فحسب. بل هو أرخص بمرتبتين عشريتين (Two orders of magnitude). وهو قادر بما يكفي لإنجاز عمل جاهز للإنتاج.

محور الوقت: ظهيرة واحدة. ليس ثلاثة أيام. ليس عطلة نهاية الأسبوع كاملة. جلسة واحدة ممتدة من خطوة النقل (Migration) إلى التدقيق (Grill).

محور التأثير: اكتشفت المراجعات مشاكل لم أكن أعلم بوجودها. وقام الوكيل بإصلاحها جميعاً. بما في ذلك تلك التي جعلتني أقول "كيف غاب عني ذلك؟".

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

5. ما تم إطلاقه فعلياً

ليست مجرد لقطات مختارة. إليك كل ما قام الوكيل بإطلاقه بناءً على المواصفات.

تحسين محركات البحث (SEO):

• إضافة بيانات منظمة (JSON-LD) في كل صفحة. مخططات للشخص (Person)، والموقع (WebSite)، والمقال (Article)، ومسار التصفح (BreadcrumbList).
• علامات Hreflang في الـ HTML head، وليس فقط في خريطة الموقع (Sitemap).
• صور OG بأبعاد صحيحة في كل صفحة.
• ترويسة HSTS لفرض استخدام HTTPS.
• قواعد التخزين المؤقت (Caching) للأصول الثابتة، صفحات HTML، وخريطة الموقع.
• ملفات llms.txt و llms-full.txt لتمكين زواحف الذكاء الاصطناعي من فهرسة الموقع بشكل صحيح.
• إصلاح مسارات خريطة الموقع (Sitemap slugs). تحولت sanwitch إلى sandwich. و sue إلى use.
• توجيهات الشرطة المائلة (Trailing slash redirects) تتوافق الآن مع الروابط الأساسية (Canonical URLs).

إمكانية الوصول (Accessibility):

• الوضع الداكن (Dark mode). وضع داكن حقيقي، وليس مجرد مكون ThemeProvider شكلي. استخدام متغيرات CSS (CSS custom properties)، والتبديل المعتمد على الفئات (class-based)، واكتشاف تفضيلات النظام، مع زر تبديل يدوي في شريط التنقل.
• احترام خيار prefers-reduced-motion في جميع مكونات Framer Motion. لا توجد رسوم متحركة إجبارية للمستخدمين الذين يعانون من مشاكل في الجهاز الدهليزي.
• رابط "تخطي إلى المحتوى" (Skip-to-content) كأول عنصر قابل للتركيز (Focusable) في كل صفحة.
• إضافة سمات aria-label المناسبة لجميع الأزرار التي تحتوي على أيقونات فقط. تم التخلص من حيلة <span className="sr-only">.
• حلقات تركيز (Focus rings) مرئية على كل مكون تفاعلي مخصص. كبسولات التصفية، بطاقات المدونة، بطاقات المشاريع، والأزرار المغناطيسية.
• تكبير أهداف اللمس (Touch targets) للهواتف المحمولة لتصبح 44px كحد أدنى.
• إزالة maximum-scale=1 من علامة meta الخاصة بالـ viewport. الآن يعمل التكبير بالقرص (Pinch-zoom).

واجهة وتجربة المستخدم (UI/UX):

• توحيد نظام الألوان. دمج ثلاثة أنظمة متضاربة في طبقة رموز دلالية (Semantic token) واحدة.
• حل تعارضات الخطوط. تقليص ثلاث مجموعات متداخلة من الخطوط إلى مجموعة واحدة مستهدفة.
• تبسيط النمط البصري. إزالة فئات ارتفاع Material التي تعارضت مع التصميم القائم على الحركة (Motion-Driven design).
• صفحة 404 ثنائية اللغة. باللغتين الإنجليزية والعربية، مع روابط تنقل.
• استبدال الرسوم المتحركة ذات الارتداد اللانهائي بدخول لمرة واحدة. مؤشر التمرير لا يزال يعمل، ولكنه لم يعد يرتد إلى الأبد.
• أيقونات الإحصائيات أصبحت تتكبر عند التمرير عليها بدلاً من الدوران بمقدار 360 درجة.

الأداء (Performance):

• تقليل التبعيات وحجم حزمة جافا سكريبت بنسبة 40٪.
• تحديد المكونات غير المستخدمة وإزالتها.
• تنظيف مسارات الأكواد الميتة (Dead code) بشكل أنيق.

6. النظام المتكامل (The Harness)

إليك ما تعلمته حقاً.

نموذج DeepSeek V4 Pro رخيص وذو قدرات عالية. يمكن لأي شخص الوصول إليه. وClaude Code هو واجهة جيدة يمكن لأي شخص تثبيتها. ومهارات المراجعة متاحة للجميع ويمكن لأي شخص تحميلها.

نموذج اللغات الكبير (LLM) أصبح سلعة متوفرة للجميع.

القيمة الحقيقية تكمن في النظام المتكامل (The harness). معرفة المهارات التي يجب تحميلها. وكيفية تشغيلها بالتوازي. وكيفية تحويل مخرجات المراجعة إلى مواصفات قابلة للتنفيذ. وكيفية ربط Claude Code بـ DeepSeek لخفض التكاليف بمقدار 50 ضعفاً. متى تطلب منه التنفيذ (Execute) ومتى تطلب منه التدقيق (Grill).

الأدوات مجانية أو شبه مجانية. التنظيم وإدارة هذه الأدوات هي المهارة الحقيقية.

قم ببناء نظامك المتكامل. فالمحرك (الذكاء الاصطناعي) سيستمر في أن يصبح أرخص.

7. العقبة الوحيدة

اتخاذ القرارات الصحيحة لا يزال يقع على عاتقك.

العثور على مهارات المراجعة المناسبة. ربط Claude Code بـ DeepSeek دون كسر التكامل. معرفة متى تكون المواصفات دقيقة بما يكفي لتسليمها للوكيل ومتى تحتاج إلى مزيد من التفاصيل. وتحديد النموذج الأنسب لتوجيه كل مهمة إليه. الآلة تنفذ. وأنت من يصمم.

الأدوات رخيصة. لكن الحكم الصائب والقرارات الذكية ليست كذلك.

8. التوقيت

هذا النظام المتكامل لم يكن موجوداً قبل بضعة أشهر.

في سبتمبر 2025، عندما قمت ببناء الإصدار الأول (V1)، كان مشهد الوكلاء الذكية مختلفاً. كان وكيل Replit مثيراً للإعجاب لما كان يستطيع فعله داخل المتصفح. لكن لم يكن بإمكانك ربطه بنماذج خارجية. ولم يكن بإمكانك تحميل مهارات مخصصة. ولم يكن بإمكانك طلب منه أن يراجع وينتقد الكود الخاص بك بشكل شامل.

بحلول مايو 2026، أصبح Claude Code منصة متكاملة، وليس مجرد أداة. وأصدرت DeepSeek طبقة التوافق مع Anthropic API. ونضجت مهارات المراجعة المجتمعية بما يكفي لإنتاج مواصفات جاهزة للتنفيذ. وأخيراً ترابطت الأجزاء معاً.

الإصدار الأول (V1) كان مثيراً للإعجاب في وقته. أما الإصدار الثاني (V2) فهو ما يحدث عندما تلحق الأدوات بركب الطموح.

الفجوة بين "يبدو مكتملاً" و "مكتمل فعلياً" لم تصبح قابلة للردم إلا مؤخراً. وبتكلفة رخيصة جداً. هذا هو الجزء الذي يستحق الاهتمام.