Agentic Canvas: صمّم مع وكلاء الذكاء الاصطناعي2 min read

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

لهذا أنشأنا Agentic Canvas من AgentGrid.io. إنها مساحة تصميم مجانية بالذكاء الاصطناعي تعمل فيها أنت ووكيل يدعم MCP على صفحة حقيقية مبنية بـ HTML وCSS. استورد HTML، أو ابدأ بتصميم أو صورة، أو اطلب من وكيلك إنشاء صفحة. ثم حدّد ما أنشأه وحرّكه وغيّر حجمه وعدّله. يمكنك فتح Agentic Canvas من دون إنشاء حساب.

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

ما هو Agentic Canvas؟

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

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

لماذا كنا بحاجة إلى لوحة لوكلاء الذكاء الاصطناعي

1. تعاون بصري من دون سلسلة جديدة من الأوامر النصية

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

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

2. مكان لجمع السياق البصري

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

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

3. لماذا تستخدم اللوحة HTML وCSS حقيقيين

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

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

كيف يختلف هذا عن لوحة التصميم التقليدية؟

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

كيف تصمم موقعًا باستخدام Claude أو ChatGPT في Agentic Canvas

1. ابدأ بما لديك. افتح اللوحة والصق HTML، أو انسخ عناصر من Figma والصقها، أو أضف صورًا أو تصاميم، أو ابدأ بصفحة أنشأها وكيل. يسرد دليل الاستيراد نقاط البداية المدعومة.
2. صِل وكيلك. اختر وكلاء الذكاء الاصطناعي، ثم إضافة وكيل داخل اللوحة. اتبع دليل الاتصال لتوصيل Claude أو ChatGPT أو أي عميل آخر يدعم MCP. اترك تبويب اللوحة مفتوحًا أثناء عمل الوكيل.
3. أنجزا النسخة الأولى معًا. اطلب تخطيطًا أو تفاعلًا، ثم افحص النتيجة الحية على اللوحة.
4. تولَّ التحكم بصريًا. حرّك العناصر وغيّر الألوان وحجم الإطار واضبط التخطيط يدويًا. ثم اطلب من الوكيل المتابعة من أحدث نسخة.
5. صدّر أو شارك عندما تصبح جاهزًا. صدّر HTML أو صيغة أخرى مدعومة من دون نشر. وإذا أردت رابطًا مستضافًا، يمكنك المشاركة أو النشر عبر AgentGrid.io. هذه الخطوة السحابية اختيارية وتتطلب حسابًا.

ما الذي يبقى محليا، وما الذي يتطلب حسابا؟

يمكنك البدء بالتصميم مجانًا في متصفحك من دون تسجيل. تُحفظ ملفاتك في ذلك المتصفح وعلى ذلك الجهاز، ولا تُنسخ تلقائيًا احتياطيًا بين الأجهزة. صدّر نسخة من العمل الذي تريد الاحتفاظ به خارج المتصفح. اتصال الوكيل الخارجي يتيح له قراءة اللوحة ويستخدم الشبكة، لذا لا تعني كلمة «محلي» أنه يعمل بلا إنترنت. المشاركة أو النشر عبر AgentGrid.io اختياريان ويتطلبان حسابًا.

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

افتح Agentic Canvas وجرّب التصميم مع وكيلك. ولإلقاء نظرة سريعة على سير العمل، شاهد عرض الإطلاق واستكشف الميزات.

أسئلة حول Agentic Canvas

هل Agentic Canvas مجاني، وهل أحتاج إلى حساب؟

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

أي وكلاء ذكاء اصطناعي يعملون مع Agentic Canvas؟

يمكن لـ Claude وChatGPT وClaude Code وCodex وCursor وغيرهم من الوكلاء الذين يدعمون MCP قراءة اللوحة المفتوحة وتعديلها. اختر وكلاء الذكاء الاصطناعي ثم إضافة وكيل لاتباع خطوات الاتصال. اترك تبويب اللوحة مفتوحًا أثناء عمل وكيلك.

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

نعم. استورد صفحة HTML أو مجلد موقع، ثم حرّك العناصر وغيّر أحجامها وحسّنها على اللوحة. الإطارات مبنية على HTML وCSS حقيقيين، لذا يستطيع الوكيل المتابعة بعد تعديلاتك البصرية بدل إعادة بناء نموذج ثابت.

هل يمكنني استيراد صفحة HTML أو موقع إلكتروني موجود؟

نعم. الصق HTML في اللوحة، أو اسحب مجلد الموقع أو ملف ZIP الخاص به إلى Home. ويمكنك أيضًا البدء بعناصر مختارة من Figma أو بصورة.

أين تُحفظ ملفات اللوحة؟ وهل توجد نسخة احتياطية منها؟

تُحفظ محليًا في المتصفح وعلى الجهاز الذي تستخدمه، من دون نسخ احتياطي سحابي تلقائي. لن تظهر في متصفح أو جهاز آخر. صدّر نسخة من عملك المهم، أو اختر مشاركة AgentGrid.io إذا أردت نسخًا احتياطيًا سحابيًا وسجلًا للإصدارات.

هل يمكن لوكيل الذكاء الاصطناعي الخاص بي العمل على اللوحة بعد إغلاق التبويب؟

لا. يجب إبقاء تبويب اللوحة مفتوحًا بينما يقرأ الوكيل المتصل التصميم أو يغيّره. ويمكنك العودة لاحقًا إلى ملفاتك المحفوظة محليًا في المتصفح نفسه.

هل توصيل وكيل يمنحه أيضا الوصول إلى مساحة العمل AgentGrid.io الخاصة بي؟

لا. اتصال الوكيل باللوحة يمنحه إمكانية العمل على ملفات اللوحة المفتوحة. وربط الوكيل بمستندات AgentGrid.io خطوة منفصلة.

هل يمكنني التصدير بدون نشر؟

نعم. صدّر HTML أو PNG أو SVG أو PDF من دون مشاركة أو نشر. ويمكنك تسليم HTML لوكيل برمجة ليواصل البناء في مكان آخر.

هل المشاركة هي نفسها النشر؟

لا. تتيح المشاركة عبر AgentGrid.io الوصول للأشخاص والوكلاء الذين تختارهم، أما النشر فيضع التصميم على عنوان ويب عام. كلاهما اختياري ويتطلب حساب AgentGrid.io.