المشكلة التي يحلها هذا البرومبت
حين تشعر أن منتجك غير احترافي رغم أن ألوانه وخطوطه سليمة، فالسبب غالباً بنيوي لا جمالي. الشريط الجانبي يبدو ملتصقاً بمساحة بيضاء غير منضبطة، والعناوين لا تتحاذى مع الجداول، والبطاقات تحمل حشواً مختلفاً في كل صفحة، والمحتوى يطفو داخل فراغ أفقي هائل على الشاشات الكبيرة. كل عنصر بمفرده مقبول، لكن الاجتماع بينها يفتقر إلى قانون واحد يحكمها. ولأن معظم فرق المنتجات اليوم تبني بمساعدة وكلاء برمجيين، صارت المشكلة تتضاعف: الوكيل يحل كل صفحة على حدة بقيم CSS مخصّصة، فيزداد التشتّت مع كل جلسة.
الفارق بين لوحة SaaS ناضجة ولوحة تبدو مشروعاً ليس مهارة رسم، بل انضباط: خطوط محاذاة ثابتة، سلّم مسافات محترم، هندسة موحّدة للمكونات المتشابهة، وعرض محتوى محكوم. هذه أمور يمكن وصفها بدقة، وبالتالي يمكن تفويضها لوكيل ذكي إذا أعطيته النظام كاملاً بدل أن تعطيه شكوى عامة مثل: اجعل الواجهة أجمل.
مهندس الانضباط البنيوي لواجهات المنتجات الرقمية
هذا البرومبت يحوّل الوكيل من مصمّم شاشات إلى مهندس نظام واجهات. يعطيه سياق المشروع، ثم قيوداً مطلقة تمنعه من إعادة تصميم الهوية، ثم أربع عشرة قاعدة بنيوية، ثم خطة عمل من أربع مراحل، وينتهي بسبعة أسئلة قبول تمنعه من الاكتفاء بتغييرات تجميلية. مخرجاته محدّدة: تقرير تدقيق بالأسباب الجذرية، جدول بالبدائيات البنيوية، تغييرات كود مقسّمة على مراحل قابلة للمراجعة، وقائمة بالترقيعات التي أُزيلت.
جرّب البرومبت الآن: مهندس الانضباط البنيوي لواجهات المنتجات الرقمية
القيود التي تسبق أي تعديل
أهم ما في البرومبت ليس ما يسمح به، بل ما يمنعه. القيد الأول: لا تُعِد تصميم الهوية ولا تُعِد تعريف التوكنز — الألوان والخطوط والشعار ومكتبة المكونات تبقى كما هي إلا لإصلاح تناقض صريح. القيد الثاني: ممنوع حل مشاكل التسلسل الهرمي بإدخال ألوان جديدة، لأن اللون أسهل مخرج أمام النموذج وأسوأ حل طويل الأمد. القيد الثالث: ممنوع التدرجات والظلال القوية والتأثيرات الزجاجية والخلفيات الزخرفية والحركات المفرطة؛ العمق يُبنى من الأسطح والحدود والمسافات والمحاذاة فقط. هذه القيود الثلاثة تحمي منتجك من أكثر سلوك متوقّع لدى الوكلاء: تجميل السطح بدل إصلاح البنية.
ماذا تفعل كل قاعدة من قواعد البرومبت؟
الهيكل والشبكة وعرض المحتوى (القواعد 1–3). تقوية الـ App Shell تجعل الشريط الجانبي والهيدر والمحتوى وأشرطة الأدوات أجزاءً من إطار واحد بحدود واضحة، فتختفي صورة القائمة المعلّقة على صفحة بيضاء. انضباط الشبكة يفرض خطوط محاذاة مرجعية تتكرر في كل الصفحة، فتتحاذى العناوين مع التبويبات مع الجداول مع الفلاتر بدل أن يبدأ كل عنصر من مكان مختلف. التحكم في العرض يمنع المحتوى من التمدد داخل فراغ أفقي هائل، فتبدو الشاشة العريضة مؤلَّفة لا فارغة.
الإيقاع وطبقات التسلسل (القواعد 4–5). تطبيع المسافات يستبدل كل قيمة عشوائية بقيمة من سلّم المسافات القائم، والقاعدة الحاكمة أن العلاقات المتكررة تأخذ مسافات متكررة — وهذا وحده يزيل معظم الإحساس بالترهّل. أما تقليل طبقات التسلسل فيعالج مرضاً شائعاً: تكديس ثلاثة أو أربعة صفوف ضوابط مستقلة قبل أن يبدأ المحتوى الفعلي. البرومبت يفرض تسلسلاً واحداً: رأس صفحة، ثم شريط أدوات أو تنقّل قسم، ثم مساحة العمل.
هندسة المكونات والبطاقات (القواعد 6–7). توحيد الهندسة يدقّق ارتفاعات الأزرار والحقول والتبويبات والشرائح ويجعل المكونات ذات الدور المتشابه متطابقة في الأبعاد والحشو والحدود والزوايا، فتختفي التنويعات العَرَضية التي تراكمت عبر الشهور. وقاعدة البطاقات تجعلها نسخاً من عائلة مكوّن واحدة برأس وجسم وبيانات وصفية وتذييل موحّد، مع منع تكديس إجراءات كثيرة متساوية الوزن على البطاقة: إجراء أساسي ظاهر، والباقي في قائمة سياقية.
التجميع والضجيج والشريط الجانبي (القواعد 8–10). التجميع البصري يستخدم الأسطح والفواصل والمسافات لجعل الضوابط المترابطة تبدو منتمية لبعضها، دون حاويات زخرفية لا توضّح شيئاً. تقليل الضجيج يرتّب الوزن البصري في ثلاث درجات — أساسي وثانوي وثالثي — بحيث لا تنافس البيانات الوصفية والأيقونات والنصوص المساعدة المحتوى الأصلي. وتهذيب الشريط الجانبي يحتفظ بكل الوظائف لكنه ينظّم إيقاع الصفوف ومحاذاة الأيقونات ومسافات الأقسام، ويجعل حالة العنصر النشط واضحة دون أن تطغى على مساحة العمل.
الكثافة والكائن الأساسي والحالات الفارغة والاستجابة (القواعد 11–14). رفع الكثافة يجعل الواجهة مضغوطة بما يليق بأداة عمل يومية، بلا صفوف متضخمة ولا حالات فارغة عملاقة. تثبيت الكائن الأساسي يضمن أن لكل شاشة بطلاً واحداً — جدول أو شبكة أو محرر — وأن باقي الضوابط تخدمه لا تنافسه. التعامل مع الحالات الفارغة يمنع بطاقة الإنشاء الجديد من الهيمنة على صفحة ممتلئة بمحتوى المستخدم. وأخيراً يمنع شرط الاستجابة الوكيل من تحسين لقطة الشاشة الحالية فقط بدل النظام كله.
لماذا البدائيات المشتركة هي جوهر البرومبت؟
المبدأ التنفيذي الأهم في البرومبت هو منع ترقيع الصفحات فرادى. الوكيل مطالَب أولاً بفحص بدائيات التخطيط والمكونات المشتركة الموجودة، ثم بتحسينها أو إنشاء ما ينقص منها: AppShell وPageContainer وPageHeader وSectionHeader وToolbar وContentGrid وPanel وCard وEmptyState وبدائيات التنقّل. الفرق عملي وليس نظرياً: حين يعيش قرار العرض والمحاذاة داخل مكوّن واحد، فإن أي شاشة جديدة تبنيها لاحقاً ترث الانضباط مجاناً، بينما القيم المخصّصة داخل كل صفحة تعني أن كل شاشة جديدة ستبدأ الانحراف من الصفر.
كيف تستخدم هذا البرومبت؟
املأ معطيات المشروع في أول البرومبت: اسم المنتج، نوعه، التقنيات، مكتبة المكونات ونظام التوكنز، والشاشات المستهدفة. ثم شغّله في جلسة مع وكيل يملك صلاحية قراءة مستودعك، واطلب منه المرحلة الأولى فقط: التدقيق وهندسة التطبيق. راجع نتيجتها بلقطات قبل وبعد، ثم انتقل للمرحلة الثانية، وهكذا حتى الرابعة. تقسيم العمل على مراحل ليس تفصيلاً تنظيمياً، بل هو ما يجعل المراجعة ممكنة ويمنع تغييرات ضخمة يستحيل تدقيقها.
اختبار القبول: سبعة أسئلة تمنع التجميل السطحي
بعد كل مرحلة، اطلب من الوكيل أن يجيب صراحةً: هل تلتصق العناصر بشبكة متوقعة؟ هل قلّت المساحات البيضاء العشوائية؟ هل المكونات المتكررة متطابقة هندسياً؟ هل المحتوى الأساسي واضح فوراً؟ هل تبدو الشاشة مهندَسة لا مجمَّعة؟ هل صار التطبيق أكثر كثافة ونضجاً دون ازدحام؟ وهل يمكن فهم التسلسل الهرمي دون الاعتماد على اللون؟ السؤال الأخير هو الأقسى والأكثر فائدة، لأنه يكشف فوراً ما إذا كان الوكيل قد أصلح البنية أم اكتفى بتلوينها.
نصائح للحصول على أفضل النتائج
أرفق لقطات شاشة للصفحات الأسوأ حالة إن كان النموذج يدعم الصور، فالتدقيق البصري أدق بكثير من التدقيق النصي وحده. الصق نظام التوكنز الموثّق — سلّم المسافات وأحجام الخطوط وأنصاف الأقطار — وأخبر الوكيل أنه المصدر الوحيد للقيم المسموحة. اطلب في نهاية كل مرحلة قائمة صريحة بالترقيعات المفردة التي أُزيلت ومكان استبدالها، فهذه القائمة هي مقياس التقدّم الحقيقي. وأخيراً، خصّص المرحلة الرابعة لصفحة واحدة أولاً كنموذج مرجعي، ثم اطلب تعميم النموذج على البقية.
جرّب وشارك نتائجك
البرومبت يعمل مع Claude وChatGPT وGemini، ونتائجه أوضح مع الوكلاء الذين يملكون وصولاً مباشراً للمستودع. طبّقه على منتج واحد من منتجاتك، واحتفظ بلقطات قبل وبعد لكل مرحلة، ثم شاركها معنا — أكثر ما يفيد المجتمع هنا ليس النتيجة النهائية، بل رؤية أي قاعدة من الأربع عشرة أحدثت أكبر فرق في منتجك.