الذكاء الاصطناعي في تصميم المواقع

ماذا يفعل الذكاء الاصطناعي فعلا في تصميم المواقع اليوم؟

خمس مهام، وليس فيها «يبني الموقع». فمن وصف يعطيك مسودة أولى لتخطيط. ويكتب الشفرة المتكررة: النماذج والجداول والشبكات وحالات hover. ويقترح نصا أوليا. ويولّد صورا وأيقونات. ويشرح شفرة كتبها غيرك، وهو ما يبدو أقلها شأنا ويعيد أكثرها وقتا عمليا.

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

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

أربع عائلات من الأدوات، وأين تنفع كل منها

العائلة الأولى تبني واجهة استعمال من جملة. وأشهرها v0، وتقول وثائقه إنه ينتج مكوّنات رياكت وكذلك HTML وCSS للنماذج الأولية وصفحات الهبوط؛ وLovable في المجموعة نفسها. وموضعها الصحيح النموذج الأولي: حين تريد أن ترى فكرة لتتكلم عنها. وتصير مشكلة حين يذهب ذلك المخرَج نفسه مباشرة إلى الموقع الحي، لأنك استلمت مشروعا ببنية وتبعيات لم تخترها.

والعائلة الثانية قدرات الذكاء الاصطناعي داخل أدوات التصميم كفيغما. وهي تخدم من يعمل أصلا في تلك الأداة ولا تغير شيئا إلا سرعة الخطوات المتكررة.

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

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

وعن الوصول من إيران لنكن صرحاء: لا صفحة لأي من أداتي المجموعة الأولى في مرجع الذكاء الاصطناعي عندنا، لأننا لا نملك عنهما وقائع مقيسة. وشروط Vercel التي يقع v0 تحتها تشترط ألا يكون المستخدم هدفا لعقوبات الولايات المتحدة أو عدة جهات أخرى، وصفحات Lovable لا تُفتح من هذا الخادم أصلا لنقرأها. فلا ندّعي شيئا عن فتحهما أو الدفع لهما.

لماذا يُعرف مخرَج النموذج من بعيد؟

لأنه تعلم مما هو في كل مكان، فيبني ما هو في كل مكان. والعلامات محددة، ومتى رأيتها لم تعد تستطيع ألا تراها:

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

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

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

وتحذير عن القائمة نفسها: العلامات تتغير. فما يفضح صفحة اليوم قد يصير عاديا العام المقبل ويحل غيره محله. والذي لا يتغير هو السؤال لا القائمة: هل اتخذتُ هذا القرار، أم جاء من تلقائه؟

إلى أي حد تثق بالشفرة التي يكتبها النموذج؟

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

وأربعة مواضع محددة يقصر فيها مخرَج النموذج عادة، وأربعتها أظهر في موقع عربي أو فارسي:

• من اليمين إلى اليسار. فافتراض النموذج الإنجليزية ومن اليسار إلى اليمين، فيكتب margin-left وtext-align: left، فيصح المخرَج بالإنجليزية وينعكس بالعربية. ودرس CSS يعرض الخصائص المنطقية التي تحل هذا.
• الإتاحة. div بـonclick، وزر بلا اسم، وحلقة تركيز محذوفة، ثلاثتها شائعة في المخرجات. ودرس الإتاحة فيه اختبار الخمس دقائق.
• التبعيات. يضيف النموذج مكتبة بسهولة لأنه لا يدفع كلفتها. وكل مكتبة تحديث قادم وثغرة محتملة قادمة؛ وفي عالم ووردبريس تراكم الإضافات هو مصدر أكثر متاعب أمن الموقع.
• ميزانية السرعة. الشفرة تعمل وهي ثقيلة. ومن لا يقرأ الشفرة لا يرى وزنها.

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

فأين يُوفَّر الوقت فعلا؟

في الأعمال الآلية التي لها حجم وليس فيها قرار. وهذه قائمتنا الحقيقية من المهام التي نسلّمها نحن:

• تحويل قائمة رموز التصميم إلى متغيرات CSS بتسمية متسقة.
• كتابة أربعين نصا بديلا بعد أن تكون قلت ما تفعله كل صورة في صفحتها.
• المسودة الأولى لمكوّن تعرف سلفا أنك ستعيد كتابته.
• قراءة وشرح CSS كتبها غيرك قبل ثلاث سنوات.
• ترجمة نصوص الواجهة إلى عدة لغات بعد أن تكون قدّمت مسرد المصطلحات.
• دمج الأنماط المتكررة داخل ملف كبير.

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

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

المسودة بالنموذج والنشر بالحكم: ماذا يعني هذا عمليا؟

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

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

والمرات الأربع معا نحو عشرين دقيقة، والفرق بين فعلها وتركها أنك في الأولى تملك صفحة وفي الثانية تملك صفحة هي لك.

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