هندسة 80/20: كيف أعدت بناء موقعي في عطلة نهاية الأسبوع

دعني أخبرك سراً: لم أعِد كتابة موقعي الشخصي خلال عطلة نهاية الأسبوع لأنني بارع في الترميز. فعلت ذلك لأنني بالكاد كتبت أي كود على الإطلاق.

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

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

لماذا إعادة كتابة الموقع؟

كان موقعي يعمل على Qwik الإصدار 3. تقنية صلبة وأجواء جيدة، لكنني أردت المزيد من المرونة — خصوصًا في التوجيه. انتقلت إلى React Router في وضع الإطار. إعادة بناء كاملة، ليست مجرد إعادة هيكلة. بنية جديدة، هيكل ملفات نظيف، تنسيقات محدثة (مرحبًا Tailwind الإصدار 4)، وصفحة فارغة.

لكن ما فاجأني: كان الترميز الفعلي يستغرق حوالي ساعتين إلى ثلاث ساعات فقط. من البداية للنهاية. ونجح في المحاولة الأولى.

فماذا حدث في الساعات الخمس الأخرى؟

الـ 80%: تحضير Codex كما يجهز المستشار عرض تقديمي

ذهب معظم الجهد لبناء "نظام أوامر ضخم" — ليس في واجهة مستخدم فاخرة، بل في مجلد مشروعي. هذا ما فعلته قبل أن أطلب من Codex كتابة أول مكون:

• حملت كامل وثائق React Router وخزنتها في دليل /guides.

• فعلت الشيء نفسه مع Tailwind CSS الإصدار 4، محولاً أهم الصفحات إلى صيغة Markdown باستخدام Firecrawl.

• كتبت ملف PROMPT.md يحتوي على نظرة عامة عن المشروع:

  • "الكود القديم يعيش في /، والكود الجديد في /app."
  • "واجهة المستخدم بحد أدنى، التركيز على منطق العمل."
  • "استخدم Tailwind الإصدار 4. التزم بوضع الإطار في React Router."
  • وهكذا.

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

عندما كتبت أخيرًا:

"اقرأ PROMPT.md. أولاً، انقل جميع المسارات إلى التطبيق الجديد."

رد Codex كما لو كان ينتظر هذه المهمة طوال حياته.

الأوامر الضخمة، هلوسات أقل

كانت النتائج مذهلة. التزم Codex بالتعليمات. لم يهلوس. لم يحاول اختراع أشياء. احترم توجيه "لا تركز على واجهة المستخدم". نُقل منطق الخادم بدقة. بدا تكوين المسارات كما لو كنت قد كتبته بنفسي — لو كنت أملك صبر المُجمّع.

لم يكن الأمر مجرد "هندسة أوامر". كان عن تأصيل Codex في المواصفات الحقيقية والحالية. ليس قائمة مهام غامضة. ولا قائمة أمنيات ميزات. بل مدخلات منظمة، أمثلة واضحة، ووصول محلي إلى الوثائق التي يحتاجها.

ما الذي استغرق وقتًا؟ ليس الكود

بعد وضع الأساس، انقسم العمل إلى مرحلتين مميزتين:

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

كان التباطؤ الحقيقي الوحيد من صعوبة تحديد كيف أريد أن يبدو شيء ما — وليس كيف يعمل.

الرؤية الحقيقية: Codex جيد بقدر تحضيرك له

عززت هذه العطلة الأسبوعية النقلة التي ألاحظها في عملي:

الترميز أصبح الجزء السهل. التخطيط هو الجزء الصعب — والأكثر أهمية.

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

يزدهر Codex بهذا النوع من الهيكلية. إذا قدمت له غموضًا، سيعطيك غموضًا. لكن إذا بنيت بيئتك بقصد — وثائق، قيود، أوصاف واضحة — فإنه يؤدي كأنه مطور كبير يتمتع بذاكرة مثالية بلا غرور.

التوجه القادم: عامل الذكاء الاصطناعي كزميل لا كجني

الدرس بسيط: عامل أدوات الترميز بالذكاء الاصطناعي كمساعدين. قدم لهم نفس المواد التي تعطيها لمهندس حقيقي. حضر السياق. كن محددًا. كن شاملًا.

في المرة القادمة، لمشروع أكبر، سأذهب أبعد من ذلك:

• وثيقة خطة رئيسية لتعريف نطاق المشروع الكامل.
• مواصفات مهام منفصلة لكل نظام فرعي أو مكون.
• مجموعة من مستندات Markdown وملفات أمثلة كمرجع محلي يعمل.

Codex لا يحتاج كلمات سحرية — يحتاج هيكلية.

هل تريد البناء أسرع؟ ابدأ بـ عدم البناء. خطط أولاً. ثم أطلب كما لو كنت جادًا.

تطور التصميم: رحلة بصرية

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

الإصدار 1: نقطة البداية

الإصدار 2: صوت أكثر تحديدًا

الإصدار 2.1: التعديلات والتنقيح

الإصدار 3: عصر Qwik

الإصدار 4: البساطة المركزة مع Remix

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