frontend-design
تصميم واجهات أمامية مميزة جاهزة للإنتاج
Également disponible depuis: 7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
تفتقر واجهات المستخدم التي يولدها الذكاء الاصطناعي بشكل عام إلى الهوية البصرية والقدرة على البقاء في الذاكرة. تطبق هذه المهارة إطار DFII لإنشاء واجهات عالية الجودة ذات مقاصد تصميمية واضحة مع جماليات متماسكة تبرز عن غيرها.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "frontend-design". صمم قسم بطل بجماليات مستقبلي ريترو لشركة ناشئة في مجال السياحة الفضائية
Résultat attendu:
قسم بطل يتميز بـ: خلفية شبكة تدرجات مع انتقال من البنفسجي العميق إلى الأزرق المخضر، خط عرض مخصص (Orbitron) للعنوان، تخطيط نص غير متماثل مع عناصر متداخلة، قوام تراكب محبب، حركة طفو عالية التأثير واحدة على زر CTA، تأثير جزيئات حقول النجوم باستخدام CSS فقط. درجة DFII: 13 (تنفيذ ممتاز مع تماسك جمالي قوي).
Utilisation de "frontend-design". أنشئ مكون بطاقة تسعير بجماليات فخمة بسيطة
Résultat attendu:
بطاقات تسعير ثلاثية المستويات مع: مساحات بيضاء سخية (وحدة أساسية 48px)، خط عرض سيريف راقٍ (Playfair Display) مقترن بسنس هندسي (Jost)، قاعدة أحادية اللون مع لمسة ذهبية على CTA الأساسي فقط، ظل صندوق خفيف مع شفافية 20%، تحويل تكبير سلس عند التمرير، أيقونات علامات التحقق كـ SVG. تتجنب تدرجات البنفسجي العامة والتخطيطات المتماثلة.
Audit de sécurité
SûrAll 36 static analysis findings are false positives. The skill contains only markdown documentation describing a frontend design methodology (DFII framework). No executable code, network calls, or command execution present. The LICENSE.txt is standard Apache 2.0 text. Safe for publication.
Score de qualité
Ce que vous pouvez construire
تصميم صفحة هبوط
إنشاء صفحة هبوط لا تُنسى بجماليات Brutalism التحريرية، بما في ذلك تسلسل خط مخصص، وتخطيط غير متماثل، ورسوم دخول عالية التأثير.
مكتبة مكونات لوحة التحكم
بناء مجموعة متماسكة من مكونات لوحة التحكم بجماليات فخمة بسيطة، باستخدام لوحة ألوان مقيدة، وتباعد دقيق، وتفاعلات مصغرة راقية.
إعادة تصميم موقع العلامة التجارية
إعادة تصميم موقع ويب حالي باتجاه جماليات مستقبلي ريترو، مع تنفيذ شبكات تدرجات مخصصة، وشفافية طبقية، وأنماط حركة مميزة.
Essayez ces prompts
صمم مكون نموذج تسجيل باستخدام جماليات فخمة بسيطة. ضمّن خيارات خطوط مقصودة، وقصة ألوان مهيمنة مع لمسة واحدة، ومساحات بيضاء هادفة. قدّم كود HTML وCSS كاملاً.
أنشئ صفحة هبوط لمنتج. أولاً، قيّم اتجاه التصميم باستخدام إطار DFII عبر الأبعاد الخمسة جميعها. استهدف درجة 12 أو أعلى. استخدم جماليات صناعية نفعية مع تكوين غير متماثل مقصود.
عرّف نظام تصميم كامل للوحة تحكم Fintech. حدّد: أزواج خطوط العرض والجسم مع المبررات، ونظام متغيرات CSS للألوان مع لون مهيمن واحد ولمسة واحدة، وإيقاع التباعد، وفلسفة الحركة. ثم نفّذ مكون بطاقة نموذجية.
حوّل مكون زر عام إلى شيء لا يُنسى باستخدام جماليات Brutalism التحريرية. اشرح ما يجعله مميزاً عن واجهات المستخدم التي يولدها الذكاء الاصطناعي النموذجية. ضمّن حالات التمرير وأنماط التركيز لإمكانية الوصول.
Bonnes pratiques
- اذكر دائماً اتجاه الجمالي بشكل صريح قبل كتابة الكود
- استخدم إطار DFII للتحقق من أن قرارات التصميم تحقق درجة 8 أو أعلى
- ضمّن عنصراً تصميمياً واحداً على الأقل لا يُنسى يميّز عن القوالب العامة
Éviter
- استخدام خطوط النظام أو الإعدادات الافتراضية للذكاء الاصطناعي مثل Inter أو Roboto أو Arial دون مبرر مقصود
- تطبيق تدرجات SaaS العامة من البنفسجي إلى الأبيض دون مبرر جمالي
- إنشاء تخطيطات أقسام متماثلة ومتوقعة يمكن أن تكون أي قالب