Uizze UI مهارة تساعد وكيل البرمجة على بناء واجهات أقرب إلى هوية منتجك، بدل الاكتفاء بشاشة جميلة لا تعكس طريقة استخدامه. تعمل انطلاقًا من الكود والمكونات والأصول الموجودة في المشروع، وتجمع بين تحديد الاتجاه البصري، وتنفيذ التفاعلات، وفحص النتيجة في المتصفح. ويمكن توسيعها بمراجع ومواد من خدمة Uizze، لكن هذا الاتصال ليس شرطًا للعمل المحلي. وهي مناسبة لتحسين شاشة قائمة أو تنفيذ واجهة جديدة داخل مشروع تستطيع تشغيله ومراجعته.
ابدأ بمهمة واضحة، لا بطلب تجميل عام
قبل تعديل الألوان والمسافات، تحدد المهارة مستخدم الشاشة والمهمة الأساسية والمحتوى والمقاس المستهدف، ثم تفحص المكونات وبنية البيانات المتفق عليها في المشروع. لذلك يفيد أن تقدم طلبًا مثل تحسين صفحة الفواتير لتوضيح الخطة الحالية ووسيلة الدفع والسجل، مع الاحتفاظ بهوية المنتج. حدد أيضًا ما يجب ألا يتغير: تسجيل الدخول، والصلاحيات، ومسار الحفظ، وسلوك النماذج. فالغاية تحسين تجربة حقيقية، لا استبدالها بعرض تصوري يتجاهل وظائفها.
ينص المسار على تنفيذ الحالات الملائمة، مثل التحميل والفراغ والخطأ والنجاح، وعدم اختراع سلوك للخادم. عمليًا، ينبغي أن يعرف الوكيل هل توجد عملية حفظ فعلية أم أن المشروع يحتوي على نموذج أولي فقط. وإذا كانت بعض البيانات تجريبية، فاجعلها واضحة ولا تعرض نجاحًا وهميًا لعملية لم تتصل بالنظام. هذا التفريق مهم خصوصًا في الشاشات المالية أو الإدارية التي قد تبدو مكتملة بصريًا بينما تظل تفاعلاتها ناقصة.
صورة هدف قبل بناء الواجهة
مرجع سير العمل المرفق يتبنى نهجًا يبدأ بالصورة: إذا كانت بيئة الوكيل توفر أداة توليد صور، ينشئ أولًا تصورًا مباشرًا للواجهة، بنصوص مقروءة وعناصر واقعية ومقاس محدد. المطلوب ليس ملصقًا دعائيًا أو هاتفًا مائلًا، بل الشاشة نفسها. يراجع الوكيل الصورة لتصحيح التسلسل البصري والأزرار غير المنطقية، ثم يحتفظ بهدف ثابت أثناء التنفيذ. وإذا قدمت صورة معتمدة مسبقًا، يستخدمها بدل إنشاء بديل يغير اتجاهك.
بعد ذلك تتحول الصورة إلى عناصر واجهة فعلية، لا خلفية مسطحة توهم بوجود منتج. يطابق الوكيل التخطيط والنسب والخطوط والمسافات والألوان، مع الحفاظ على بنية المشروع وسلوكه. وعندما لا تتوافر أداة توليد ولا صورة جاهزة، يستمر من الملخص والأعراف القائمة، ويصرح بهذا القيد. لا يصح عندها وصف النتيجة بأنها مطابقة لصورة لم تُنتج أصلًا، كما يجب الإشارة إلى الخطوط أو الصور الناقصة بدل ادعاء تطابق كامل.
متى تضيف مكتبة Uizze؟
تفيد المراجع عندما تواجه سؤالًا محددًا: كيف تنظم شاشة صلاحيات كثيفة، أو تعرض حالات جدول فواتير، أو توضح خطوة في مسار تسجيل؟ يتيح اتصال MCP المستضاف البحث عن شاشات مرجعية عبر find_ui_references، وعن مواد تصميم عبر find_ui_materials. يحدد المسار عدد النتائج بين واحدة وثلاث، ليبقى البحث مركزًا. أمثلة الشاشات تقدم قرارات يمكن دراستها، لكنها ليست مكونات برمجية جاهزة للتنزيل، ولا مبررًا لنسخ علامة تطبيق آخر داخل منتجك.
تشمل المواد التي تصفها التعليمات الخطوط والأيقونات والأيقونات المتحركة وحزم التصميم. تُختار الموارد بحسب الحاجة، لا لمجرد توفرها. وعند اختيار حزمة، يرتبط جلب ملف DESIGN.md باختيار المستخدم، ويجب طلب الإذن قبل استبدال وثيقة تصميم موجودة. كذلك لا تمنح أسماء الخطوط الواردة في الحزمة ملفاتها أو تراخيصها تلقائيًا. أما الحركة فتحتاج إلى ربطها بحدث مفهوم، مثل نجاح العملية، مع مراعاة تفضيل تقليل الحركة.
المعاينة جزء من العمل وليست خطوة شكلية
تشغّل المهارة الواجهة وتلتقطها بأبعاد الصورة المستهدفة بعد تحميل الخطوط والصور، ثم تقارن النتيجتين جنبًا إلى جنب أو بالتراكب. تبدأ معالجة الفروق من التخطيط والنسب، ثم الكتابة والمسافات والتفاصيل. ويشمل الفحص الأحجام المطلوبة، والوصول بلوحة المفاتيح، ووضوح التركيز، وعدم خروج المحتوى عن مساحته. إن تعذر التشغيل أو الالتقاط، تبقى المطابقة غير متحققة؛ قراءة الكود وحدها لا تثبت أن الشاشة ظهرت كما خُطط لها.
التجهيز والتكلفة والحقوق
للبدء، ثبّت حزمة uizze-ui من المستودع مع مرجعها المرفق، ثم افتح المشروع في وكيل يدعم المهارات ويستطيع قراءة ملفاته وتشغيله. يورد المستودع الأمر npx skills add uizze/uizze –skill uizze-ui. لا تتطلب هذه المرحلة حساب Uizze أو اتصال MCP، لكن تكلفة وكيل البرمجة وأداة توليد الصور، إن استُخدمت، منفصلة. المستوى المناسب متوسط، لأن الاستفادة الكاملة تتطلب مشروعًا قابلًا للتشغيل وفهمًا للمكونات وحالات التفاعل، لا مجرد كتابة وصف.
تعليمات uizze-ui ومرجعها منشوران بترخيص MIT، بينما يتطلب MCP المستضاف حسابًا بوصول مدفوع؛ لم تُثبت الوثائق المقروءة مبلغًا ثابتًا للاشتراك أو حصة استخدام شهرية. توضح خريطة الترخيص أن بقية المستودع ليست كلها تحت الترخيص نفسه، وأن موارد الخدمة لها حقوق مستقلة. احتفظ بإشعارات المواد المستعملة وتحقق من ملفاتها وتراخيصها، ولا تشارك مفاتيح الوصول أو روابط التنزيل الموقعة. وإذا غاب الوصول أو لم تظهر مراجع مناسبة، يستمر العمل اعتمادًا على المشروع مع توضيح ما لم يُتحقق منه.