تصميم موقع ويب باستخدام وكلاء التصميم والبرمجة

مقدمة الفصل

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

---

1. دليل البدء

1. مقدمة الدورة التعليمية

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

• وكيل التصميم: مسؤول عن إنشاء الشعار وتخطيط صفحات الويب ومخطط الألوان والعناصر المرئية الأخرى
• وكيل البرمجة: يكتب الكود الفعلي مثل HTML/CSS/JS بناءً على المتطلبات والتخطيطات التي تحددها في التعليمات، لبناء موقع ويب قابل للتشغيل

2. وكيل التصميم ووكيل البرمجة

• وكيل التصميم: ذكاء اصطناعي يقوم بتوليد الصور ونماذج الصفحات أو أنماط التصميم بناءً على التعليمات التي تقدمها.
• Mastergo
• Lovart
• Figma MCP
• وكيل البرمجة: ذكاء اصطناعي يكتب الكود الفعلي (HTML/CSS/JS وغيرها) بناءً على الوظائف والتخطيطات التي تطلبها في التعليمات.
• Z.AI
• Trae
• Cursor
• Lovable

---

2. إنشاء شعار باستخدام وكيل التصميم

1. العناصر الرئيسية التي يجب مراعاتها عند تصميم الشعار

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

1. اسم العلامة التجارية / النص

• النص الذي يجب أن يظهر في الشعار (مثل: عنوان الموقع، اسم العلامة التجارية، إلخ).

2. النمط (المزاج / الأجواء)

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

3. مخطط الألوان (اختياري)

• من الأفضل أن تتوافق ألوان الشعار مع الطابع العام للموقع بأكمله.
• يمكنك تحديد رموز ألوان سداسية عشرية محددة، أو درجات ألوان عامة (ألوان باردة، دافئة، إلخ).
• أمثلة: #171721 (أسود)، #FF7130 (برتقالي).

4. الشكل (الهيئة / البنية)

• حدد ما إذا كان الشعار يحتاج إلى شكل أو تكوين معين.
• أمثلة: نص داخل دائرة، مجموعة أيقونة + نص، شعار يعتمد بشكل أساسي على الأيقونة، إلخ.

5. عناصر الأيقونة / الرمز (اختياري)

• الرسومات أو الرموز التي ترغب في ظهورها في الشعار.
• أمثلة: أيقونة كتاب، رمز برق، رسومات متعلقة بالذكاء الاصطناعي، أشكال هندسية مجردة، إلخ.

2. كتابة تعليمات تصميم الشعار

نموذج تعليمات

"يرجى تصميم شعار بأسلوب بسيط، اسم العلامة التجارية هو 'My First Website'.
استخدم اللون الأسود (#171721) والبرتقالي (#FF7130)، وضع النص داخل دائرة."

"يرجى تصميم شعار باسم العلامة التجارية 'AIID'.
يجب أن يكون الأسلوب العام مستقبليًا ونظيفًا وبسيطًا، مع اللون الأزرق والأبيض كلون رئيسي.
ادمج رسومًا مجردة ترمز للذكاء الاصطناعي مع النص، وصدّره كملف PNG بخلفية شفافة."

3. طلب التصميم من الوكيل

• أدخل التعليمات المذكورة أعلاه → قارن بين التصميمات المتعددة التي أنشأها الوكيل.

4. تحديد الشعار النهائي

• اختر النسخة المفضلة لديك من المسودات وقم بتنزيلها.

---

3. تخطيط هيكل موقعك

1. فهم الأقسام الأساسية

قبل البدء الفعلي في إنشاء الموقع، من المهم جدًا التخطيط للأقسام (القوائم) التي تريد تضمينها. يعتمد تصميم القائمة على ما تريد أن يراه الزوار وما تريد منهم القيام به. بشكل عام، يتكون الموقع عادةً من أقسام أساسية مثل الرئيسية / حول / اتصل بنا.

2. ارسم مخططًا هيكليًا بنفسك (اختياري)

يمكنك أولاً كتابة مخطط قائمة بسيط بناءً على أهداف موقعك.

القائمة الأساسية

1. الرئيسية (Home)
   1. الصفحة الرئيسية التي يراها الزوار أولاً عند دخول الموقع
   2. تتضمن عادةً الشعار ومنطقة الصورة الرئيسية وشعارًا قصيرًا أو مقدمة موجزة
2. حول (About)
   1. تعريف من أنت، أو غرض المشروع / الخدمة
   2. معرض أعمال شخصية: مقدمة ذاتية + سيرة موجزة
   3. مواقع الخدمات: الرؤية والأهداف والوظائف الأساسية
3. اتصل بنا (Contact)
   1. معلومات الاتصال، مثل البريد الإلكتروني ورقم الهاتف وروابط وسائل التواصل الاجتماعي
   2. يمكن أيضًا إضافة نموذج اتصال بسيط

القوائم الاختيارية

4. الخدمات / المشاريع (Services / Projects)

   1. عرض الخدمات التي تقدمها، أو مشاريعك / معرض أعمالك
   2. عادةً يتم عرضها في شكل قائمة أو بطاقات

5. المعرض (Gallery)

   1. لعرض الصور والصور الفوتوغرافية أو أعمال التصميم

6. المدونة / الأخبار (Blog / News)

   1. لنشر المقالات والتحديثات أو السجلات

7. الأسئلة الشائعة (FAQ)

   1. تجميع الأسئلة والأجوبة التي يطرحها الزوار بشكل متكرر

3. اختيار مخطط الألوان (اختياري)

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

مثال: #171721, #872B97, #FF7130, #FF3C68

حتى إذا لم تتمكن من التفكير في مخطط ألوان في الوقت الحالي، يمكنك العثور على الإلهام من خلال مواقع الألوان أو البحث بالكلمات المفتاحية.

• مواقع مرجعية للألوان
  • https://colorhunt.co/
  • https://coolors.co/

• البحث عن الألوان عبر الكلمات المفتاحية على Google

4. كتابة تعليمات تصميم الموقع

نموذج تعليمات

"يرجى تصميم موقع ويب من صفحة واحدة يتكون من ثلاثة أقسام: الرئيسية وحول واتصل بنا.
استخدم الألوان #171721 و #FF7130 و #FF3C68.
يجب أن يكون الأسلوب العام حديثًا وبسيطًا."

---

4. تصميم الموقع باستخدام وكيل التصميم

1. إدخال التعليمات → إنشاء التصميم

• اكتب الهيكل الذي خططت له والألوان المختارة في التعليمات.

نموذج تعليمات Mastergo

2. مراجعة التصميم وتقديم ملاحظات التعديل

يمكنك تقديم ملاحظاتك إلى الوكيل بناءً على احتياجاتك، على سبيل المثال:

• "إنه مبالغ فيه، اجعل الأسلوب العام أبسط."
• "غيّر نوع الخط."
• "عدّل مجموعة الألوان."
• "احذف هذا القسم هنا."

3. تحديد التصميم النهائي

بعد إجراء تعديلات متعددة على التصميم والرضا عنه، يمكنك تحويل هذا التصميم إلى كود، بحيث يتمكن وكيل البرمجة من فهمه ومتابعة العمل.

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

مثال Mastergo

1. افتح موقع إضافات Mastergo، وابحث عن seal.

2. عد إلى صفحة التصميم، وانقر على أيقونة المربع (الإضافات).

3. حدد منطقة التصميم التي تريد تحويلها إلى كود، وانقر على زر Generate لإنشاء الكود.

---

5. بناء الموقع باستخدام وكيل البرمجة

1. فهم المفاهيم الأساسية لـ HTML/CSS/JS

يتكون الموقع بشكل أساسي من ثلاث لغات:

• HTML (لغة ترميز النص الفائق) → البنية (الهيكل العظمي)
• CSS (أوراق الأنماط المتتالية) → الأنماط (المظهر)
• JavaScript (JS) → الوظائف (التفاعل)

هذه الثلاثة تعمل معًا لتشكيل صفحة الويب الكاملة التي نراها.

1. 🏗️ HTML (البنية)

• يحدد "ما يتم عرضه" في الصفحة
• يُستخدم لوضع النصوص والصور والأزرار والروابط والعناصر الأخرى
• يشبه الجدران والإطار في المبنى

مثال

<h1>مرحبًا!</h1>
<p>هذا هو موقعي الأول.</p>
<a href="contact.html">اتصل بنا</a>

2. 🎨 CSS (الأنماط)

• يحدد "كيف يتم عرض المحتوى"
• يتحكم في حجم النص واللون والمسافات والخلفية وشكل الأزرار وغيرها
• يمنح HTML "ملابس" وأسلوبًا بصريًا

مثال

h1 {
  color: #FF7130;   /* لون النص */
  font-size: 36px;  /* حجم الخط */
  text-align: center; /* محاذاة في المنتصف */
}

body {
  background-color: #171721; /* لون الخلفية */
  color: white; /* لون النص الافتراضي */
}

3. ⚙️ JavaScript (JS) (الوظائف)

• يمكّن صفحة الويب من التفاعل مع المستخدم
• يمكنه تنفيذ تأثيرات ديناميكية مثل نقر الأزرار وفتح القوائم وعرض شرائح الصور وإرسال النماذج
• إذا كان HTML/CSS هو الهيكل العظمي والمظهر الثابت، فإن JS هو العقل الذي "يحيي" صفحة الويب

مثال

function showAlert() {
  alert("تم النقر على الزر!");
}

<button onclick="showAlert()">انقر هنا</button>

2. جعل وكيل البرمجة يولد الكود

نموذج تعليمات

"يرجى كتابة HTML و CSS لموقع ويب من صفحة واحدة يحتوي على أقسام الرئيسية وحول واتصل بنا.
استخدم الألوان #171721 و #FF7130 و #FF3C68.
الخلفية سوداء والنص أبيض."

3. تشغيل الموقع

عند إنشاء كود المسودة، يقوم الوكيل عادةً بتشغيل المشروع تلقائيًا وعرض صفحة الموقع المُنشأة.

إذا قمت بإعادة تشغيل الوكيل، أو لم تظهر صفحة الموقع، يمكنك إدخال تعليمات مشابهة لهذه:

"يرجى تفعيل المشروع"

لجعل الوكيل يعيد تشغيل المشروع وفتح صفحة المعاينة، حتى تتمكن من viewing التأثير الحالي.

4. إجراء تعديلات بسيطة

يمكنك الاستمرار في إجراء تعديلات دقيقة على المسودة من خلال اللغة الطبيعية، على سبيل المثال:

• "اجعل الزر أكبر."
• "اجعل الخط أكثر سمكًا."

5. تعديل محتوى نصوص الموقع

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

مثال تطبيقي: تحديث صفحة "حول" في موقع AIID

1. اكتب أولاً المحتوى الذي تريد عرضه في صفحة "حول". لتسهيل فهم الوكيل، يمكنك حفظ المحتوى بتنسيق Markdown.

2. ثم أخبر الوكيل في المحادثة بتطبيق المحتوى من هذا الملف على الصفحة المحددة.

3. تحقق من النسخة المحدثة بعد تطبيق المحتوى.

6. إدراج الصور

إذا كنت تريد إضافة صور معينة (مثل الشعار، صورة الخلفية، إلخ)، يمكنك أولاً تحميل الصور إلى مجلد المشروع، ثم توضيح في التعليمات المكان الذي تريد استخدام هذه الصور فيه على الصفحة.

• مثال:

• النتيجة:

---

6. دمج التصميم مع الكود

1. دمج ملفات التصميم مع كود الموقع (اختياري)

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

• مثال:

• النتيجة:

title: 'Build A Website With Design + Coding Agents' description: 'From idea to launch: coordinate a design agent to produce visuals, then use a coding agent to turn it into a working website with a reusable workflow.'