← العودة إلى المدونة

المدونة

كيف يقوم الذكاء الاصطناعي بإنشاء موقع ووردبريس كامل في دقيقتين

نظرة معمقة على نظام تفويض التصميم، وتوليد الألوان، وتجميع كتل جوتنبرج التي تشغل أداة بناء المواقع من PAGEnza.

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

مشكلة القوالب

تعمل معظم أدوات بناء المواقع بالذكاء الاصطناعي بهذه الطريقة: تختار قالبًا، وتستبدل النص الخاص بك، وتسميه "تم إنشاؤه بواسطة الذكاء الاصطناعي". النتيجة تبدو مثل أي موقع آخر تم بناؤه على تلك المنصة.

تعمل PAGEnza بشكل مختلف. لا توجد قوالب. يبدأ كل موقع من لوحة جوتنبرج فارغة ويتم بناؤه خوارزميًا من مجموعة من قواعد التصميم التي نسميها تفويض التصميم.

ما هو تفويض التصميم؟

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

يحتوي على ستة أجزاء:

الجزء أ - هوية العلامة التجارية: الصناعة، اسم العمل، النبرة (مثل "احترافي" مقابل "مرح")، الجمهور المستهدف.

الجزء ب - نظام الألوان: لوحة ألوان من 4 ألوان (حبر، خلفية1، خلفية2، مميز) تم إنشاؤها خوارزميًا وتم التحقق منها مقابل قواعد تباين WCAG AA. يتم فحص كل لوحة ألوان باستخدام حسابات الإضاءة الفعلية - وليس تخمينات.

الجزء ج - الطباعة: ثلاثي خطوط (عنوان / نص أساسي / مميز) تم اختياره من أكثر من 80 خطًا من Google Fonts، وتم تصفيته حسب النموذج الصناعي والتحقق منه ليشمل دعم أحرف latin-ext.

الجزء د - مخطط التخطيط: هيكل الصفحة - أي الأقسام تظهر، وبأي ترتيب، وبأي متغير (مثل البطل بصورة بعرض كامل مقابل البطل بتخطيط مقسم).

الجزء هـ - قيود التصميم: نمط نصف قطر الحدود (حاد / ناعم / مستدير)، أشكال فواصل الأقسام، معالجة الصور، نظام المسافات.

الجزء و - قواعد المحتوى: ما هو النص الذي يذهب إلى أين، وكيف يتم هيكلة العناوين، وما هي عبارات الحث على اتخاذ إجراء التي تظهر.

كيف يتم إنشاء لوحات الألوان

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

نحن نتبع نهجًا مختلفًا. يعمل نظام لوحة الألوان لدينا على النحو التالي:

  1. بناءً على صناعتك ونموذجك (مثل "فاخر"، "جريء"، "ترابي")، نختار من 20 مجموعة لوحات ألوان مدققة مسبقًا
  2. ضمن كل مجموعة، نختار لوحة ألوان حيث يكون الحبر لديه تباين ≥4.5:1 مقابل جميع الخلفيات
  3. نتحقق من أن المميز لديه تباين ≥3.0:1 مقابل خلفية1 و خلفية2
  4. نتأكد من أن لوني الخلفية لهما درجات حرارة ألوان متباينة (واحد دافئ، واحد بارد) حتى تبدو الأقسام مميزة

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

كيف يتم تجميع كتل جوتنبرج

بمجرد أن يصبح تفويض التصميم جاهزًا، يتم إرساله إلى Gemini Flash مع موجه صارم يحدد:

  • أي الكتل مسموح بها (قائمة بيضاء تضم حوالي 40 نوعًا من كتل جوتنبرج)
  • السمات المطلوبة لكل نوع كتلة
  • تنسيق JSON الدقيق للمخرجات

يعيد الذكاء الاصطناعي كتل جوتنبرج بتنسيق JSON خام - ليس HTML، وليس React، بل ترميز كتل ووردبريس الفعلي. ثم يمر هذا JSON عبر عدة مراحل تحقق:

  1. التحقق من المخطط - السمات المطلوبة موجودة، ولا توجد أنواع كتل غير معروفة
  2. تنقية فئات CSS - يتم تجريد أسماء الفئات المخترعة، واستبدالها بفئات نظام التصميم الخاص بنا
  3. مراحل المعالجة - تتم مزامنة سمات المسافات، وتطبيع تدرجات كتلة الغلاف، وحقن فواصل الأشكال

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

ما الذي يجعل كل موقع فريدًا

تختلف عدة أشياء بين كل عملية إنشاء، حتى لنفس الصناعة:

  • لوحة الألوان: 20+ مجموعة، كل منها يحتوي على لوحات متعددة
  • ثلاثي الخطوط: 6+ مجموعات لكل نموذج
  • ترتيب الأقسام والمتغيرات: تخطيط البطل، نمط الإحصائيات، ترتيب بطاقات الميزات
  • فواصل الأشكال: عضوية مقابل هندسية، اختلافات في السعة/التردد
  • أشكال الفقاعات: للصناعات العضوية، يتم عشوائية فقاعات الصور والبطاقات من 12 متغيرًا

النتيجة هي أن مطعمي بيتزا تم إنشاؤهما في نفس اليوم سيكون لهما ألوان مختلفة، وخطوط مختلفة، وتخطيطات مختلفة - وكلاهما سيكون متوافقًا مع WCAG AA.

ما هو التالي

نحن نعمل حاليًا على:

  • إنشاء صفحات متعددة - إنشاء صفحات /about و /services و /contact من نفس التفويض
  • معاينة مباشرة - رؤية الموقع قبل نشره على ووردبريس
  • نقل الأنماط - تحميل لقطة شاشة لموقع يعجبك واستخراج الحمض النووي لتصميمه

إذا كنت ترغب في رؤية النظام أثناء العمل، فإن أداة الإنشاء مجانية للتجربة - لا يلزم حساب للموقع الأول.