قد لا تكون الشاشة التي ستطرحها في عام ٢٠٢٦ موجودة حتى يطلبها المستخدم. هذا هو الرهان وراء واجهات المستخدم التوليدية، وهو يُغيّر مفهوم التصميم نفسه.

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

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

ما هي واجهة المستخدم التوليدية؟

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

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

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

لماذا يحدث هذا في عام 2026 وليس 2022؟

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

بحلول أوائل عام ٢٠٢٦، أصبحت جميعها حقيقية. يُضمّن الإصدار v0 مكونات في قاعدة بياناتك البرمجية تتوافق بالفعل مع shadcn ورموزك. Vercel تتيح لك حزمة تطوير البرمجيات للذكاء الاصطناعي بثّ مكونات React من مسار الخادم أثناء إنتاجها بواسطة النموذج. Claude تُنشئ Artifacts برنامجًا تفاعليًا متكاملًا داخل نافذة محادثة.

ChatGPT تتعامل Canvas مع المستند وواجهة المستخدم المحيطة به كسطح واحد قابل للتحرير. يُنتج كل من Bolt وSame.new تطبيقات قابلة للتشغيل من موجه الأوامر. تُمكّن الأدوات من Anthropic وCursor's composer الوكلاء من الوصول إلى الأنظمة المهيكلة وإنشاء واجهات تفاعلية معها.

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

البنى الأربع المستخدمة في الإنتاج

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

1. المكونات المُعالجة بواسطة LLM: يختار النموذج من مجموعة ثابتة من المكونات في قاعدة التعليمات البرمجية الخاصة بك، ويُنتج شجرة مُصنّفة. هذا هو نمط Vercel في حزمة تطوير البرمجيات للذكاء الاصطناعي. يتميز هذا النمط بسهولة التنبؤ به، وتوافقه مع العلامة التجارية، وسهولة تقييمه، ولكنه محدود بمدى ثراء مكتبتك البرمجية.

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

٣. توليد الكود عند الطلب: يكتب النموذج كودًا يُنتج واجهة المستخدم، وفقًا لأنماط مثل Claude Artifacts، وv0، وBolt، وSame.new، وChatGPT Canvas في وضع الكود. أقصى نطاق، وأقصى مخاطرة، والأصعب في الحفاظ على هوية العلامة التجارية وسهولة الوصول.

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

إذا كنت لا تعرف أي بنية تستخدم، فأنت تستخدم البنية الخاطئة.

كيفية الاختيار بينها

ثلاثة أسئلة تُحدد البنية.

| السؤال | مُصمم بتقنية LLM | استدعاءات الأدوات | توليد الكود | هجين |

|---|---|---|---|---|

| هل يُعد اتساق العلامة التجارية عاملًا أساسيًا؟ | قوي | الأقوى | الأضعف | القوي |

| هل تحتاج واجهة المستخدم إلى تصميمات جديدة؟ | أحيانًا | نادرًا جدًا | نعم | نعم |

| هل يمكنك تحمل تأخير ثوانٍ في عملية التوليد؟ | لا | لا | غالبًا نعم | مختلط |

| ما أول ما يتعطل في حال حدوث خطأ؟ | أخطاء في التركيب | محتوى خاطئ | كود معطوب | أخطاء في الحدود |

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

لغة الأنماط: ما يُصممه المصممون فعليًا

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

تتكون مُفردات العمل من خمس طبقات.

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

٢. خانات النوايا: مناطق مُسماة يملؤها النموذج بناءً على نية المستخدم. "ملخص"، "دليل"، "إجراء"، "متابعة". تُقيّد الخانات عملية التركيب دون تجميدها.

٣. حالات التراجع: يحتاج كل عنصر أساسي إلى حالة فارغة، وحالة تحميل، وحالة جزئية، وحالة رفض. سيُنتج النموذج الحالات الأربع باستمرار. صممها كعناصر أساسية.

٤. إمكانيات الاسترداد: التحرير المباشر، إعادة التوليد، "عرض نسخة مختلفة"، التراجع. واجهات البرمجة التوليدية عبارة عن حوارات، والحوارات تحتاج إلى زر الرجوع.

٥. واجهة المستخدم للاستشهاد والمصدر: مصدر البيانات، وقت جلبها، ومدى موثوقية النظام. بدون ذلك، تبدو واجهة المستخدم التوليدية ككاذب واثق من نفسه. ومع وجودها، تبدو النتيجة صادقة.

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

خانات النوايا، عمليًا

خانات النوايا هي الجزء الذي تتجاهله معظم الفرق ثم تندم عليه. تعامل معها كإطارات أولية جديدة.

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

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

النتيجة هي واجهة مصممة تتغير خصائصها تلقائيًا، وليست مجرد فوضى مُولّدة تُعرض بالصدفة. هذا الفرق هو جوهر التحدي.

أنماط الفشل التي ستواجهها وكيفية التغلب عليها في التصميم

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

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

• مشكلة التأخير: يُحدق المستخدم في مؤشر التحميل بينما يُفكّر النموذج. اعرض النتائج الجزئية، واحجز مساحة تخطيط قبل المحتوى، واعرض هدف النموذج ("إنشاء جدول مقارنة") قبل وصول البيانات.

• فخ المساحة اللانهائية: تبدو واجهات المستخدم المُولّدة برمجيًا بلا حدود، وينتهي بها الأمر غير قابلة للاستخدام. قيّد مساحة العمل. اعرض للمستخدم أنواع المخرجات الممكنة مُسبقًا. شبكة من التوجيهات الأولية أفضل بكثير من حقل نص فارغ.

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

• فقدان ذاكرة المحادثة: تنسى الواجهة ما تم إنشاؤه للتو. احتفظ بالنتائج المُنشأة ككائنات أساسية يُمكن للمستخدمين تسميتها وحفظها ومشاركتها والعودة إليها. ChatGPT أحسنت Canvas في هذا الجانب. معظم المنتجات التي تعتمد على الدردشة فقط تُخطئ فيه.

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

كيفية تقييم واجهة مستخدم توليدية

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

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

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

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

تابع النتيجة بمرور الوقت. في اليوم الذي تنخفض فيه النتيجة، فهذا يعني وجود تراجع. في اليوم الذي ترتفع فيه، فهذا يعني أن أحد التغييرات التي أجريتها قد نجح، وعليك معرفة ماهيته.

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

كيفية تحديد نطاق مشروع واجهة مستخدم توليدية

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

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

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

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

مهمة المصمم الجديدة: المصطلحات، والتقييمات، والغرض

يُعيد تصميم واجهة المستخدم التوليدية صياغة وصف وظيفة المصمم أكثر من أي تغيير آخر منذ ظهور التصميم المتجاوب.

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

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

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

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

ما هو شكل الجودة في المنتجات النهائية

بعض الأمثلة لتوضيح المبادئ، وليست بمثابة توصيات.

يتعامل عنصر واجهة المستخدم التوليدية في Vercel AI SDK مع المكونات كمفردات مُصنّفة، حيث يُمرّرها النموذج إلى مسار مُقدّم من الخادم. والنتيجة هي اتساق العلامة التجارية وإمكانية التنبؤ بها. أما التكلفة، فتُحدّدها المكتبة التي قمتَ بتطويرها.

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

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

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

يوضح Same.new ما يحدث عند التعامل مع التطبيق بأكمله كعنصر مُولّد. مفيد للنماذج الأولية، ولكنه خطير لأي شيء يتحمل ضغطًا كبيرًا. تُشير أدوات Anthropic وCursor's Composer إلى المرحلة التالية، حيث يقوم الوكلاء بربط واجهات المستخدم المُولّدة بأنظمة خلفية مُهيكلة.

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

كيفية البدء هذا الربع

خطوات عملية، بالترتيب، يُمكن لأي فريق منتج تطبيقها فورًا.

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

٢. جرد المصطلحات: اذكر كل عنصر أساسي في نظام التصميم الخاص بك يحتوي على خصائص مُحددة النوع وحالة مُختبرة (فارغة/تحميل/خطأ). إذا كانت القائمة تحتوي على أقل من عشرة عناصر، فقم بتصحيح ذلك قبل إنشاء أي شيء.

٣. حدد ثلاثة خانات للغرض: أبسط تصميم عملي هو "الإجابة، الدليل، الخطوة التالية". استخدمه حتى تجد سببًا لتغييره.

٤. اكتب مُوجِّهًا للنظام يُحدد المصطلحات: ليس المقصود هنا العبارات العامة. بل أسماء المكونات، وأنواع الخصائص، وقواعد الخانات، والقيود الصريحة على ما يُمنع النموذج من إنتاجه.

٥. أنشئ تقييمات قبل بناء الميزة: من خمسة إلى عشرة مُوجِّهات اختبار مع معيار تقييم لكل منها. قم بتشغيلها عند كل تغيير في المُوجِّه، أو المكونات، أو النموذج.

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

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

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

ماذا يعني هذا للسنوات الثلاث القادمة؟

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

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

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

الرهان الأعمق أبسط. لم تعد الواجهات غاية التصميم، بل أصبحت نتاجه. ترتقي مهارة المصمم إلى مستوى أعلى، لتشمل الأنظمة والمعايير والمصطلحات التي تُنتج الواجهات. يصبح العمل أصعب، ويتسع نطاق تأثيره، والمصممون الذين يتعلمونه الآن سيقودون هذا المجال بحلول عام ٢٠٢٩.

هذه هي المهمة. اختر سطحًا واحدًا هذا الأسبوع، وأصدر مصطلحات، واكتب التقييمات، وابدأ.

hero: key: hero prompt: "Voxel illustration, isometric, soft pastel palette aligned with Brainy ink/paper aesthetic. Composition: a building made of components assembling itself in mid-air, with floating UI fragments (cards, charts, forms) snapping into a layout grid below. Editorial, calm, precise. The composition does not include any human figures." alt: "Voxel building made of UI components assembling itself mid-air" width: 1600 height: 900 inline-1: key: gen-ui-architectures prompt: "Voxel illustration showing four distinct architectures as four floating panels arranged in a 2x2 grid: LLM-rendered components, structured tool calls, code-gen-on-demand, and a hybrid panel showing parts of all three. Soft pastel palette. The composition does not include any human figures." alt: "Four floating voxel panels showing the four generative UI architectures" width: 1400 height: 900 inline-2: key: pattern-vocabulary prompt: "Voxel grid of UI primitives like card, table, chart, form, list, arranged neatly with subtle arrows showing how an LLM picks among them. Soft pastel palette, editorial. The composition does not include any human figures." alt: "Voxel grid of UI primitives with arrows showing model selection" width: 1400 height: 900 inline-3: key: failure-modes prompt: "Voxel illustration of broken or glitching UI: hallucinated buttons floating with no labels, a loading spinner stretched into infinity, an infinite scroll collapsing into a tangle. Soft pastel palette with a hint of chaos. The composition does not include any human figures." alt: "Voxel scene of broken generative UI with hallucinated and stuck states" width: 1400 height: 900 inline-4: key: how-to-start prompt: "Voxel illustration of a designer's desk: a small library of labeled components on a shelf, an eval rubric printed on a tablet, and a model card pinned to a board. Soft pastel palette, calm and methodical. The composition does not include any human figures." alt: "Voxel desk with component library, eval rubric, and model card" width: 1400 height: 900