01ما الذي يميّز هذا عن منتقي القوالب
تعرض لك معارض القوالب تصميمًا جاهزًا وتطلب منك أن يعجبك أو لا. هذه الأداة تذهب طبقة أعمق: كل اتجاه من الاتجاهات الستة أدناه مبني على معرض أعمال حقيقي يعمل لمصور فعلي جرى فحصه فعلًا (لقطات شاشة، وتخطيط حي، وألوان محسوبة، وخطوط محسوبة)، وليس لوحة ألوان اختلقها أحدهم لتبدو جميلة في عينة. اتجاه Editorial مثلًا يستخدم EB Garamond لأنه حرفيًا الخط الذي صُمم به موقع مصور أزياء حقيقي، وقد طابقناه بفحص الصفحة مباشرة.
ظهر نمطان تقريبًا في كل المواقع الحقيقية التي بُنيت منها هذه الأداة، وهما مدمجان في كل اتجاه هنا: قائمة تنقل مخفية خلف أيقونة همبرغر واحدة دون قائمة روابط ظاهرة، حتى على سطح المكتب، وصورة كبيرة واحدة في كل مرة بدل شبكة. ويبقى لون الواجهة قريبًا من الصفر طوال الوقت: التصوير هو من يمنح اللون، لا الواجهة.
02ما تحصل عليه في النهاية
أمر واحد منظّم يغطي الاتجاه العام، وألوان hex الدقيقة، وأسماء الخطوط وزوجها، وقائمة الصفحات، وسلوك التنقل، وتخطيط المعرض وتأطير الصور، والميزات التي تُضمَّن، وتوصية بالاستضافة مع مفاضلات الكلفة الحقيقية، ومجموعة ثابتة من متطلبات جودة البناء (نص بديل مناسب للوصول، ونقاط توقف متجاوبة، ولا أسرار مكتوبة في الشيفرة، وتحميل الصور عند الحاجة). الصقه في تطبيق البرمجة بالذكاء الاصطناعي الذي تفضله فيجد كل ما يحتاجه ليبدأ.
03من الأمر إلى موقع حي: الشرح الكامل
الأمر هو موجز التصميم، وليس خط النهاية. إليك كل خطوة بين نسخه وامتلاك رابط حقيقي تضعه على بطاقة عملك، مجانًا أو بما يقارب ذلك.
انسخ الأمر وافتح تطبيق برمجة بالذكاء الاصطناعي
يصلح Claude أو Cursor أو Claude Code أو Windsurf أو وكيل Replit للذكاء الاصطناعي، أي شيء يستطيع كتابة الملفات وحفظها لك، وليس مجرد محادثة. وإن لم تستخدم أحدها من قبل، فخيار يعمل في المتصفح مثل claude.ai أو Replit لا يحتاج إلى تثبيت: الصق الأمر كأول رسالة.
دعه يبني، ثم انظر فعلًا إلى ما صنعه
اطلب منه بناء الموقع بصيغة HTML/CSS/JS ثابتة (أو أي شيء حدده قسم الاستضافة في الأمر) وأن يعرض لك معاينة. افحص الأمور الستة التي طلبها الأمر (الألوان والخطوط وسلوك المعرض والتنقل والتأطير والصفحات) قبل أن تنتقل. إصلاح لون مميز خاطئ الآن أرخص بكثير من إصلاحه بعد ربط الصور.
استبدل بصورك الحقيقية ونبذتك وتفاصيل التواصل
استبدل كل صورة نائبة وكل سطر نص حشو. اطلب من تطبيق الذكاء الاصطناعي أن يكتب خاصية alt حقيقية ومحددة لكل صورة أثناء العمل، لا «image1.jpg» بل وصفًا فعليًا، فهذا متطلب للوصول وفي الوقت نفسه دفعة صغيرة لتحسين محركات البحث. وهذه أيضًا هي اللحظة المناسبة للتأكد من أن نموذج التواصل يشير فعلًا إلى عنوان بريد تراجعه.
انشره على استضافة مجانية
إذا اخترت فئة «ثابت ومجاني»، فاطلب من تطبيق الذكاء الاصطناعي أن يرشدك إلى ربط مجلد المشروع أو مستودع GitHub بإحدى الاستضافات المذكورة في صفحة الاستضافة من القائمة أعلاه. كلها تبني وتنشر تلقائيًا كلما دفعت تغييرًا؛ ولا خطوة رفع يدوية بعد الربط.
اربط نطاقًا مخصصًا (اختياري، لكنه يستحق)
نطاق فرعي مجاني (مثل yourname.netlify.app) يكفي للبداية. وحين تصبح جاهزًا لـ yourname.com، فالأمر شراء نطاق وتغيير واحد في DNS، وسنشرحه بالتفصيل أدناه.
04أي استضافة مجانية تستخدم؟
أي واحدة منها ستنشر موقعًا ثابتًا دون كلفة، مع HTTPS مجاني وفئة مجانية تكفي بسهولة لزيارات معرض أعمال شخصي. حدود الفئات المجانية تتغير كثيرًا، لذا تعامل مع الأرقام في صفحة الاستضافة على أنها صورة عامة لا أرقام حالية دقيقة، وراجع صفحة الأسعار لدى كل مزوّد قبل أن تلتزم.
اطلب من تطبيق البرمجة بالذكاء الاصطناعي أن ينفّذ معك خطوات النشر الفعلية: «اربط هذا المشروع بـ Netlify» طلب عادي تمامًا، وغالبًا يستطيع أن يرشدك خلال إنشاء الحساب وأول نشر في دقيقتين.
05ربط نطاق مخصص
النطاق رسم سنوي صغير (عادةً من $10 إلى 20 في السنة بحسب الامتداد)، منفصل عن الاستضافة التي تبقى مجانية. والقطع الثلاث:
- اشترِ النطاق. Namecheap أو Cloudflare Registrar أو خليفة Google Domains (Squarespace Domains).
- أضف سجل DNS. سجل CNAME (أو سجل A) يوجّه نطاقك إلى استضافتك، يُضاف في لوحة مسجّل النطاقات. وهو سطران في جدول المسجّل: سجل
CNAMEللنطاقwwwيشير إلى العنوان الذي تعطيك إياه استضافتك، مثلyour-portfolio.netlify.app، وسجلAللنطاق المجرد يشير إلى عنوان IP الخاص بالاستضافة. - أضفه في استضافتك. الصق النطاق نفسه في إعدادات «النطاق المخصص» لدى استضافتك؛ ويُفعَّل HTTPS تلقائيًا.
لدى كل استضافة في صفحة الاستضافة تبويب «النطاق المخصص» أو «النطاقات» يعطيك السجل الدقيق الذي تضيفه، انسخه وأضفه لدى المسجّل وانتظر. تستغرق تغييرات DNS عادةً من دقائق إلى بضع ساعات لتسري، وأحيانًا حتى 24 إلى 48 ساعة. يستطيع تطبيق البرمجة بالذكاء الاصطناعي إرشادك عبر لوحة المسجّل الخاص بك إن تعثرت؛ صوّر شاشة صفحة الإعدادات واسأله على ماذا تضغط. ظهور القفل وغياب تحذير «غير آمن»: هذا هو خط النهاية.
06قائمة فحص ما قبل الإطلاق
خمس دقائق مع هذه القائمة تكشف معظم ما يجعل معرض الأعمال يبدو غير مكتمل. الفحوص هي صفحة «قبل الإطلاق» في القائمة أعلاه؛ ضع علامة على كل بند وأنت تمضي.
07الأسئلة الشائعة
لا. أنت تتخذ خيارات بصرية، وتكتب الأداة أمرًا مفصّلًا بلغة عادية، ويحوّله تطبيق البرمجة بالذكاء الاصطناعي إلى الموقع الفعلي.
يستند كل اتجاه إلى معرض أعمال حقيقي يعمل لمصور فعلي جرى فحصه مباشرة، وليس مخترعًا من الصفر، حتى مطابقة خط دقيق من موقع حقيقي.
لا حساب ولا تسجيل ولا شيء تدفعه. الصور التي تسقطها على فهرس التشغيل تُرسم على لوحة في متصفحك ولا تغادره أبدًا.
من 8 إلى 20 من أفضل صورك مصدّرة بصيغة JPG أو WEBP محسّنة، ونبذة قصيرة، وشعار إن كان لديك. تُدرجه الحواشي تحت الجدار.