21st.dev Magic

التصميم

إنشاء مكونات واجهة مستخدم احترافية فورًا من خلال Neotask على OpenClaw

ما يمكنك فعله

يتصل Neotask بـ 21st.dev Magic من خلال OpenClaw، مما يمنحك وصولاً فوريًا إلى مكتبة ضخمة من مكونات واجهة المستخدم الجاهزة للإنتاج وإنشاء المكونات المدعوم بالذكاء الاصطناعي — كل ذلك من خلال المحادثة.

إنشاء المكونات

  • الإنشاء من الأوصاف — صف واجهة المستخدم التي تحتاجها بلغة بسيطة واحصل على مكونات React كاملة ومنسقة مع Tailwind CSS أو shadcn/ui أو مكتبتك المفضلة
  • التكرار بالملاحظات — قل "اجعلها أكثر إحكامًا" أو "أضف حالة تحميل" وسيطبق Neotask ملاحظاتك فورًا مع مخرجات كود جديدة
  • إنشاء متعدد المتغيرات — اطلب عدة تنويعات تصميم في وقت واحد حتى تتمكن من اختيار الأنسب لمشروعك
  • إمكانية الوصول مدمجة — تتبع المكونات المُنشأة أفضل ممارسات ARIA وأنماط التنقل بلوحة المفاتيح من البداية

    • البحث في مكتبة المكونات

  • البحث حسب النمط — اعثر على مكونات تطابق حالة استخدامك: "جدول أسعار مع تبديل للفوترة الشهرية/السنوية" أو "درج إشعارات مع عداد غير المقروءة"
  • التصفح حسب الفئة — استكشف المكونات حسب النوع: أشرطة التنقل، النوافذ المنبثقة، النماذج، البطاقات، جداول البيانات، لوحات المعلومات، والمزيد
  • التصفية حسب حزمة التقنيات — البحث عن مكونات خاصة بحزمة التقنيات الخاصة بك (React، Vue، Tailwind، shadcn، Radix UI)
  • مقتطفات جاهزة للنسخ — كل مكون من المكتبة منسق للاستخدام الفوري في قاعدة الكود الخاصة بك

    • تكامل نظام التصميم

  • مطابقة أسلوبك الحالي — قدّم رموز الألوان الخاصة بك أو تكوين Tailwind وسيُنشئ Neotask مكونات تطابق نظام التصميم الخاص بك
  • تركيب المكونات — اطلب تخطيط صفحة كامل عن طريق تركيب مقتطفات مكونات متعددة معًا
  • متغيرات الوضع الداكن — اطلب إصدارات الوضع الداكن لأي مكون مع استخدام متسق للرموز

    • جرّب أن تسأل

  • "أنشئ مكون بطاقة أسعار مع شارة شائع وقائمة ميزات وزر دعوة للعمل باستخدام Tailwind"
  • "أحتاج شريط تنقل متجاوب مع شعار على اليسار وروابط تنقل في المنتصف وزر تسجيل الدخول على اليمين"
  • "ابحث في 21st.dev عن مكون جدول بيانات مع الفرز والتصفية وترقيم الصفحات"
  • "أنشئ قسم بطل مع عنوان كبير وعنوان فرعي وزرين للدعوة للعمل وصورة نموذج على اليمين"
  • "اجعل المكون أكثر إحكامًا وأضف حالة تحميل هيكلية"
  • "اعثر على مكون نافذة حوار ينزلق من اليمين كدرج"
  • "أنشئ خطوات تهيئة من 4 خطوات مع مؤشر تقدم"
  • "أحتاج نظام إشعارات منبثقة يكدّس الإشعارات في الزاوية السفلية اليمنى"

    • نصائح احترافية

  • كن محددًا بشأن نية التصميم — "أسلوب SaaS للمؤسسات مع حدود دقيقة" أو "تطبيق استهلاكي بزوايا مستديرة وظلال ناعمة" ينتج نتائج مختلفة بشكل كبير
  • اطلب من Neotask تكييف مكون 21st.dev الذي وجدته مع لوحة الألوان الحالية الخاصة بك عن طريق تقديم قيم الألوان الأساسية/الثانوية
  • استخدم إنشاء المكونات مبكرًا في عملية التصميم لعمل نماذج أولية سريعة للتخطيطات قبل الالتزام بنظام تصميم كامل
  • ادمج مع سير عمل محرر الكود الخاص بك من خلال OpenClaw — أنشئ مكونًا وحسّنه حواريًا وأخرج الملف النهائي مباشرة إلى مشروعك

    • Works Well With