استخدم AI لتحسين تصميم الويب وتجربة الهاتف
ابدأ بـweb-design-guidelines لتحديد مشاكل الأزرار والنماذج ولوحة المفاتيح وتخطيط الهاتف. استخدم review-animations عندما تكون المشكلة المتبقية حركة.
ابدأ بمهارة web-design-guidelines
لصفحة بأزرار صعبة أو نماذج مربكة أو هاتف غير مريح، اختر web-design-guidelines من Vercel Agent Skills. توفر Skill تعليمات، وتقرأ هذه الملفات المحددة وتقارنها بقواعد الواجهات الحالية.
تغطي المراجعة لوحة المفاتيح وتسميات العناصر وتعليقات النماذج واللمس والتخطيط. قدم ملفات صفحة واطلب مواضع المشاكل ثم حدد التعديلات. التوصية لغرض Skill، لا نجوم الحزمة كلها.
جهّز قبل البدء
تساعد اللقطة في مناقشة الشكل، لكن Skill تراجع الشفرة أساسًا. اطلب النتائج قبل تعديلات محددة. لا يقدم المستخدم كلمات مرور أو مفاتيح للموقع، ولا تتطلب الخطة خدمة مدفوعة جديدة.
- ملفات صفحة أو مجلدها، والجمهور ومهمته والتفاعل المطلوب تحسينه.
- مساعد يدعم Skills. اتبع README لـVercel واختر web-design-guidelines بدل تثبيت كل المهارات.
- معاينة محلية متاحة والهاتف إن أمكن. بعد مراجعة الشفرة افحص المتصفح والهاتف؛ مشاهدة الصفحة تحتاج أداة متصفح متاحة.
انسخ هذا الطلب الأول
استخدم web-design-guidelines لمراجعة [ملفات الصفحة أو مجلدها]. تخدم الصفحة [المستخدمين] لإتمام [المهمة]. اجلب أحدث القواعد وافحص الأزرار والنماذج ولوحة المفاتيح وتخطيط الهاتف. رتّب المشاكل حسب الأثر مع الملف والسطر ومشكلة المستخدم وأصغر تعديل. قدّم التقرير دون تغيير الشفرة. إن فتحت المتصفح اذكر العنوان والعرض؛ ضع ما لم تلاحظه ضمن ما يحتاج التحقق.كيف تتحقق من التحسين؟
- يجب أن يرتبط كل اكتشاف بالشفرة وعمل المستخدم، مثل إظهار تركيز Tab أو توضيح الخطوة التالية في خطأ النموذج.
- بعد التعديل، افحص المتصفح وعرض الهاتف للتجاوز النصي والأزرار والحقول والأخطاء. ولتأكيد الجهاز أعد المسار على هاتف فعلي.
- للحركة، كرر العمليات بسرعة وراجع إعداد تقليل الحركة. احتفظ بسجل قبل وبعد، وافصل مراجعة الشفرة ومعاينة المتصفح والتحقق من الجهاز.
مثال فعلي
متى تنتقل إلى review-animations؟
لنافذة بطيئة أو استجابة نقر مزعجة أو انتقال متقطع، اختر review-animations من Emil Kowalski Skills. تراجع الشفرة من حيث الهدف والتوقيت والمقاطعة وتقليل الحركة.
قدّم شفرة المكوّن وسؤالًا محددًا. الناتج مراجعة حركة، لا إثبات أن الصفحة كلها مناسبة للهاتف. أكمل مراجعة الصفحة لمشاكل النماذج والتخطيط.
المصادر والخطوة التالية
راجَعنا المصادر في 2026-10-13. توصي الخطة بمهارتين محددتين وتوفر طلبًا أوليًا. احكم على التعديلات من نتائجك وفحوصك الفعلية.