تصميم مواقع بالذكاء الاصطناعي مع Webflow: دليل عملي

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

في 5 فبراير 2026، أعاد Webflow بناء أداة إنشاء المواقع ليجمع فيها هيكلًا متعدد الصفحات، وأنماطًا بصرية، وحركات، ونظام تصميم أساسيًا ضمن مسار إنشاء الموقع. تتاح الأداة لمختلف فئات العملاء، بما فيها Enterprise، عبر خيار New site في لوحة التحكم. لكن إتاحة الأداة لا تلغي حدود عدد الصفحات في خطتك. إعلان التحديث من Webflow.

تصميم مواقع بالذكاء الاصطناعي: أي أداة تختار؟

يمكن النظر إلى Webflow AI بوصفه ورشة تضم أدوات لمهام مختلفة. أداة إنشاء المواقع تضع الهيكل الأولي، والأدوات داخل المحرر تساعدك على ضبط أجزائه. أما MCP، اختصار Model Context Protocol، فهو بروتوكول الربط الذي يتيح لمساعد ذكاء اصطناعي خارجي تشغيل أدوات داخل موقعك على Webflow.

هذه مداخل مختلفة للعمل، رغم أن Webflow يجمع ميزاته المدمجة تحت اسم Webflow AI. نظرة عامة على أدوات الذكاء الاصطناعي، متطلبات أداة إنشاء المواقع، نظرة عامة على MCP.

تفعيل Webflow AI من إعدادات مساحة العمل

على مالك مساحة العمل (Owner) أو مسؤولها (Admin) فتح مساحة العمل المعنية، ثم الانتقال إلى Workspace settings → General وتفعيل Enable Webflow AI. وفي Enterprise، يمكن أيضًا التحكم في صلاحية Use Webflow AI من خلال الأدوار المخصصة. إذا لم يظهر الخيار لأحد أعضاء الفريق، فتحقق من إعداد التفعيل في مساحة العمل ومن صلاحيات دوره. تعليمات الإدارة من Webflow.

لا يستهلك إنشاء المواقع أو تصميم الأقسام أو الحصول على المساعدة السياقية أرصدة Webflow AI. أما إنشاء النصوص وعناصر CMS والمكونات البرمجية وأعمال تحسين محركات البحث بالذكاء الاصطناعي، فتستهلك أرصدة؛ وهي مشتركة على مستوى مساحة العمل، ويختلف استهلاكها بحسب المهمة. الإضافة المدفوعة المنفصلة المعروضة حاليًا في صفحة أسعار Webflow توفر 2,000 رصيد شهريًا مقابل $20 شهريًا، مع الفوترة السنوية. قواعد استخدام الأرصدة، أسعار Webflow.

من الوصف إلى النشر: إنشاء موقع من ثلاث صفحات

ابدأ بنشاط خدمي صغير له هدف تحويل واضح واحد. مثالنا هو Cedar Studio، استوديو افتراضي لتصميم العلامات التجارية يريد تلقي استفسارات عن مشاريع، عبر صفحات الرئيسية والخدمات والتواصل.

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

1. اختر خطة تتيح ثلاث صفحات

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

2. قدّم وصفًا واضحًا للنشاط

من New site، اختر AI Site Builder وأدخل طلبًا مثل هذا:

أنشئ موقعًا لـ Cedar Studio، وهو استوديو صغير لتصميم العلامات التجارية يخدم منشآت الضيافة المستقلة. الهدف هو تلقي استفسارات عن مشاريع. اجعل الموقع من ثلاث صفحات: الرئيسية والخدمات والتواصل. ينبغي أن توضح الرئيسية العرض وتعرّف بطريقة العمل. وينبغي أن تشرح صفحة الخدمات استراتيجية العلامة التجارية والهوية البصرية وتصميم المواقع. أما صفحة التواصل، فتدعو الزائر إلى إرسال نبذة عن مشروعه. استخدم ألوانًا محايدة دافئة، ونصًا داكنًا سهل القراءة، وحركات محدودة. لا تختلق عملاء أو شهادات أو جوائز أو أسعارًا أو نتائج. استخدم «ناقش مشروعك» للدعوة الرئيسية إلى اتخاذ إجراء.

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

3. اعتمد الهيكل قبل توليد التصميم

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

بعد ذلك، ولّد الموقع، واضبط المظهر المشترك، ثم تابع العمل داخل Webflow. تربط الأداة الخطوط والألوان المطلوبة بنظام المظهر الخاص بها، لذا تحتاج المطابقة الدقيقة لهوية العلامة إلى مراجعتك. خطوات الإنشاء وضبط المظهر.

4. استكمل ما يجعل الموقع معبّرًا عن نشاطك

تعامل مع المسودة بوصفها مادة قابلة للتحرير. وهذه تعديلات يدوية ينبغي إجراؤها كلما قصرت النتيجة عن المطلوب:

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

5. راجع معلومات الظهور في البحث وإمكانية الوصول

افتح لوحة Audit وراجع الموقع كاملًا. يمكنها اكتشاف أوصاف الصور وعناوين الصفحات وأوصاف البحث وبيانات schema الناقصة؛ والأخيرة هي معلومات منظمة عن الصفحة. ومع ذلك، يجب مطابقة اقتراحات الذكاء الاصطناعي مع واقع النشاط. وتحتاج الصور داخل المكونات ومعارض lightbox ونظام CMS إلى فحص يدوي منفصل للنصوص البديلة، لأن لوحة Audit لا تشملها. تعليمات التدقيق وحدوده.

في مثال Cedar Studio، النتيجة المفيدة هي معلومات دقيقة عن الصفحات ومسار يعمل لإرسال الاستفسارات. لا تضف خدمات أو مواقع جغرافية أو تقييمات لمجرد ملء حقل اقترحته الأداة.

6. انشر في البيئة التجريبية، ثم على نطاقك

افتح Publish، وحدد عنوان البيئة التجريبية webflow.io وحده، ثم انشر في الوجهة المحددة. تصفح الرئيسية والخدمات والتواصل كما يفعل الزائر، وأعد اختبار إرسال الاستفسار. أصلح أي خلل، ثم أعد النشر في البيئة التجريبية.

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

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

استخدم Assistant داخل المحرر لمهام محددة

أكثر الطلبات فائدة هي التي تستهدف جزءًا صغيرًا وتحدد بوضوح شروط قبول النتيجة.

للحصول على مساعدة، افتح Assistant من الشريط العلوي واطرح سؤالًا محددًا عن Webflow. يستمد هذا الوضع إجاباته من مركز المساعدة، ويدعم الإنجليزية حاليًا، ويتيح 100 سؤال كل 31 يومًا. تعامل مع الإجابة بوصفها إرشادًا يحتاج إلى التحقق. دليل المساعدة السياقية.

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

لتحرير النصوص، يمكن للمصمم النقر بزر الفأرة الأيمن على عنصر نصي مدعوم واختيار Modify copy. جرّب مثلًا: «اختصر هذه الفقرة مع الحفاظ على المخرجات المذكورة وتجنب إضافة ادعاءات جديدة». راجع كل تغيير في المعلومات قبل قبوله. وتتطلب هذه الميزة خطة Site أو Workspace مدفوعة. أدوات تحرير النصوص.

مع نمو الموقع، تبرز ميزتان إضافيتان. يستطيع الذكاء الاصطناعي توليد عناصر نموذجية لمجموعات CMS، أي إدخالات في قائمة محتوى منظّم، ضمن خطة Site تتيح الوصول إلى CMS. كما يستطيع إنشاء مكونات برمجية قابلة لإعادة الاستخدام، مثل الآلات الحاسبة، عبر Assistant. تتطلب هذه المكونات دور Designer أو Site Manager؛ ولنشرها متطلبات إضافية تتعلق بخطتي Site وWorkspace. وهي لا توفر قواعد بيانات أو مصادقة أو إدارة للمفاتيح السرية. أبقها خارج هذا الشرح الأساسي للموقع التعريفي، ما لم يحتج إليها المشروع. شروط إتاحة ميزات CMS، متطلبات المكونات البرمجية.

اربط Claude عندما تشمل المهمة أجزاء متعددة من الموقع

يفيد MCP عندما تمتد المهمة عبر صفحات أو سجلات محتوى متعددة. توثق Webflow دعمه لتحرير الصفحات والتخطيطات والأنماط والمكونات، وإدارة CMS، والنشر. وهو متاح في جميع خطط Site، بما فيها Starter؛ لكن أصحاب دور Reviewer لا يمكنهم الاتصال به. إمكانات MCP.

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

يمكن أن يكون الطلب الأول المفيد لمثالنا كالتالي:

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

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

يمكن الآن تنفيذ معظم إجراءات MCP دون إبقاء جلسة Webflow مفتوحة. أما الإجراءات المرتبطة بما تحدده في مساحة التصميم، فلا تزال تحتاج إلى MCP Bridge App. ويُحتسب استخدام MCP المعتاد ضمن خطة أداة الذكاء الاصطناعي الخارجية أو أرصدتها، بدلًا من أرصدة Webflow AI. طريقة عمل MCP الحالية وحدوده.

ستة استخدامات مرتبة بحسب فائدتها العملية

تبدأ أقوى الاستخدامات بوصف واضح ومسؤول قادر على تقييم النتيجة. وما يلي مسارات عمل مقترحة، وليست نتائج مقاسة لدى عملاء.

تعتمد هذه المسارات على إمكانات موثقة في أدوات الأقسام ولوحة Audit وإجراءات MCP لدى Webflow. أما الفوائد المقترحة، فتتوقف على طريقة مراجعتك للنتائج.

خدمتان يمكن بناؤهما حول هذه الإمكانات

هناك طلب على إنشاء المواقع وعلى الحصول على المساعدة بشأنها. وتُظهر تقديرات DataForSEO لعمليات البحث بالإنجليزية في الولايات المتحدة، التي جرى جلبها في 22 أكتوبر 2026، 33,100 عملية بحث شهرية عن «ai website builder». يعكس ذلك اهتمامًا بالفئة عمومًا، ولا يثبت وجود طلب على أداة عامة أخرى لتوليد المواقع.

الخيار الأقوى: خدمة الإطلاق والتسليم

ابنِ خدمة قابلة للتكرار للمؤسسين الذين يريدون موقع Webflow قابلًا للتعديل، بمحتوى معتمد ومسار جرى التحقق منه لإرسال الاستفسارات. وتقدّر DataForSEO حجم البحث عن «webflow agency» في الولايات المتحدة بـ 480 عملية بحث شهريًا. يقيس هذا الاهتمام بالاستعانة بجهة تقدم المساعدة، لكنه لا يحدد عدد من يريدون هذه الباقة بعينها.

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

التحدي: يسهل على المنافسين توليد مسودة مشابهة. أما ما يمنح الخدمة ميزة يصعب تقليدها، فهو فهم المجال، واعتماد المواد، وتحمل مسؤولية تسليم منظم. كذلك، راجع قيود Webflow على مشاركة Libraries من المواقع المنشأة بأداة الذكاء الاصطناعي قبل بناء نظام عمل قابل لإعادة الاستخدام في الوكالة يعتمد عليها. قيود أداة إنشاء المواقع.

الخيار الثاني: خدمة صيانة تبدأ بالتدقيق وتنتهي بالإصلاح

ابنِ خدمة تنقل مالك الموقع من اكتشاف النواقص إلى تصحيحات خضعت للمراجعة. وتقدّر DataForSEO حجم البحث عن «website seo audit» في الولايات المتحدة بـ 320 عملية بحث شهريًا. هذه إشارة إلى سوق أوسع، وليست إحصاءً لمشترين يستخدمون Webflow تحديدًا.

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

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

أين تنتهي فائدة Webflow AI؟

استخدم أداة الإنشاء حين تريد أساسًا جديدًا لموقع Webflow، وتستطيع تخصيص الجهد اللازم لاستكماله. أما الموقع المخصص القائم، فابدأ فيه بالأدوات المدعومة داخل المحرر أو بـ MCP. ولا يمنح أي منهما الوكيل تحكمًا بلا حدود: لا يزال MCP يفتقر إلى بعض إعدادات العناصر وربطها بـ CMS، كما أن توليد الأقسام لا يستطيع إعادة كتابة الفئات القائمة. حدود MCP، حدود Assistant.

كذلك، لا تجعل App Gen أساسًا لمشروع جديد: فقد أوقفت Webflow تطويره مؤقتًا، وتقول إنها تخطط لإنهاء دعمه. النظرة العامة الحالية على أدوات الذكاء الاصطناعي.

إذا كنت لا تزال تختار المنصة، فارجع إلى مقارنة Webflow وFramer لاتخاذ قرار المنصة، وإلى Framer AI لفهم طريقة العمل بأدواته الذكية، وإلى مقارنة أدوات إنشاء المواقع بالذكاء الاصطناعي للاطلاع على قائمة أوسع من الخيارات.

هل Webflow أداة ذكاء اصطناعي؟

Webflow منصة لإنشاء المواقع تضم أدوات ذكاء اصطناعي. تُنشئ أداة بناء المواقع نسخة أولية، وتساعد الميزات الأخرى في النصوص والأقسام والمحتوى والأعمال المستمرة. ويربط MCP مساعدًا خارجيًا بموقع مُنح الإذن للوصول إليه. نظرة عامة على Webflow AI.

هل يمكن إنشاء موقع بالذكاء الاصطناعي؟

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

هل Webflow مجاني فعلًا؟

توجد خطة Starter مجانية تتيح Webflow AI والوصول عبر MCP، لكنها تقتصر على صفحتين ثابتتين. ويتطلب مثال الموقع ذي الصفحات الثلاث على نطاق خاص خطة Site مدفوعة. أما الأرصدة الإضافية للذكاء الاصطناعي، فهي عملية شراء منفصلة واختيارية. أسعار Webflow.

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

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