نحن لا نوصي عملاءنا فقط بالتطوير بمساعدة الذكاء الاصطناعي. بل نستخدمه بأنفسنا.
الموقع الجديد carrilagency.com — الموقع الذي تقرأه الآن — تم تصميمه في Paper وبناؤه بالكامل باستخدام Claude Code. لا تسليم تصميم تقليدي. لا طبقة ترجمة من Figma إلى الكود. لا تنقل بين عشرات الأدوات.
إليكم كيف سارت العملية، وما تعلمناه، ولماذا يهم ذلك لأي شخص يبني موقعاً إلكترونياً جاداً في عام 2026.
ما هو Paper ولماذا استخدمناه
Paper هو أداة تصميم مبنية لسير العمل الأصلي للذكاء الاصطناعي. على عكس Figma — المبني للتصميم الدقيق واليدوي — فإن Paper مبني على فكرة أن الذكاء الاصطناعي يجب أن يتحمل الجزء الأكبر من العمل.
استخدمناه لاستكشاف التوجه البصري للموقع الجديد: الشبكة التحريرية بخطوط القضبان المنقطة، وجمالية الأزرار بأسلوب قسائم التذاكر، ونمط النقاط النصفية في التذييل. سمح لنا Paper بالتكرار السريع على هذه الأفكار، ورؤيتها معروضة في مكونات حقيقية، وتثبيتها قبل كتابة سطر واحد من كود الإنتاج.
كانت النتيجة نظام تصميم محكم: قيم ألوان سداسية محددة، وأزواج خطوط (Outfit للعناوين، Instrument Sans للنص الأساسي، JetBrains Mono للتسميات)، وقواعد تباعد دقيقة، وسلوك المكونات موثق بوضوح كافٍ ليتمكن Claude Code من تنفيذه دون غموض.
ما هو Claude Code وكيف استخدمناه
Claude Code هو أداة سطر الأوامر من Anthropic لهندسة البرمجيات بمساعدة الذكاء الاصطناعي. يعمل في الطرفية الخاصة بك، ويقرأ قاعدة الكود، ويكتب ويحرر ويعيد هيكلة الكود كما يفعل مهندس كبير — متبعاً الأنماط الموجودة، ومحترماً الاتفاقيات، وموضحاً ما يفعله.
استخدمناه لبناء قاعدة كود Astro 6 بالكامل من الصفر. يشمل ذلك:
- 307 صفحة عبر ثلاث لغات (الإنجليزية والعربية والفرنسية) مع دعم كامل لـ hreflang والعلامات الأساسية ودعم RTL للعربية
- 212 مقالة مدونة مترجمة ومنظمة في مجموعة محتوى مع ترقيم الصفحات وتصفية الفئات والتوجيه حسب اللغة
- أكثر من 50 صفحة خدمات مبنية من نظام قوالب مشترك، مع محتوى مترجم وبطاقات أعمال
- نظام إعادة توجيه شامل يغطي كل عنوان URL قديم من Webflow من الموقع السابق، ويحل سلاسل إعادة التوجيه إلى وجهاتها النهائية
كانت العملية تعاونية بحق. كنا نصف ما نحتاجه، وكان Claude Code يكتبه، ونراجعه ونقدم ملاحظاتنا، ثم يكرر. عندما كان شيء غير واضح، كان يسأل. وعندما كان شيء خاطئ، كان يشخص ويصلح.
ما ليست عليه هذه القصة
هذه ليست قصة عن استبدال المطورين بالذكاء الاصطناعي. إنها قصة عن فريق صغير وخبير أطلق موقعاً إلكترونياً متعدد اللغات ومعقداً بشكل أسرع وبأجزاء متحركة أقل.
Claude Code لا يتخذ قرارات. لا يعرف كيف يجب أن تبدو علامتك التجارية، أو ما يجب أن يقوله تموضع خدماتك، أو كيف يجب أن يعمل التنقل في موقعك. تلك القرارات لا تزال تتطلب بشراً. ما أزاله هو المسافة بين القرار وتنفيذه.
عندما قررنا أن محول اللغة يجب أن يظهر فقط في الصفحات التي تحتوي على ترجمات فعلية — وليس في كل صفحة — استغرق تنفيذ هذا المنطق دقائق. عندما وجدنا فجوة في تغطية إعادة التوجيه، كان الإصلاح فورياً. عندما كان تفصيل تصميمي يختلف ببضعة بكسلات، اكتشفناه في نفس الجلسة وصححناه.
النتائج
- الانتقال من Webflow إلى Astro دون فقدان أي رصيد SEO (جميع إعادات التوجيه 301 مُعيّنة ومُهيّأة)
- موقع بثلاث لغات أُطلق في وقت واحد، وليس بالتتابع
- أوقات تحميل أقل من ثانية على بناء Astro ثابت دون عبء التوجيه من جانب العميل
- نظام محتوى قابل للترجمة بالكامل حيث إضافة لغة جديدة لاحقاً يتطلب جهداً أدنى
ماذا يعني ذلك إذا كنت تبني شيئاً
مزيج Paper و Claude Code يغير اقتصاديات مشروع ويب جاد. ليس لأنه أرخص بالمعنى الواضح — فهو لا يزال يتطلب بشراً مهرة بذوق جيد وتفكير واضح — ولكن لأنه يزيل الاحتكاك بين التفكير والبناء.
إذا كانت لديك رؤية واضحة وتحتاج فريقاً يعمل بهذه الطريقة، فهذا ما نفعله. أخبرنا بما تبنيه.
