frontend-design
أنشئ واجهات أمامية مميزة بتصميم جريء
Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
تساعدك هذه المهارة على بناء واجهات ويب بجودة إنتاجية وبجماليات لا تُنسى. إنها تُوجّه الاختيارات الإبداعية في الطباعة والألوان والحركة والتخطيط لتجنّب التصاميم العامة المُولَّدة بالذكاء الاصطناعي.
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". Create a settings panel with dark mode toggle
Résultat attendu:
- مكوّن React كامل مع مفتاح تبديل متحرك
- انتقال سلس للسمة باستخدام خصائص CSS المخصّصة
- سمات إمكانية الوصول للتنقّل عبر لوحة المفاتيح وقارئات الشاشة
- حفظ الإعدادات باستخدام التخزين المحلي
- تخطيط متجاوب للهاتف المحمول وسطح المكتب
Utilisation de "frontend-design". Build a hero section for a tech startup landing page
Résultat attendu:
- طباعة جريئة مع اقتران خطوط مميز
- خلفية تدرّج متحركة بحركة دقيقة
- كشف نص متدرّج عند تحميل الصفحة
- أزرار دعوة لاتخاذ إجراء مع تأثيرات تمرير
- تخطيط شبكي متجاوب مع عدم تماثل إبداعي
Utilisation de "frontend-design". Design a card component for a product gallery
Résultat attendu:
- تخطيط بطاقة مع صورة وعنوان ووصف وسعر
- حركة تمرير مع رفع الظل وتأثير التكبير
- وسوم ملوّنة مع تنسيق مخصّص
- انتقالات سلسة بين الحالات
- نظام شبكة لتخطيط معرض متجاوب
Audit de sécurité
SûrThis is a prompt-based skill containing design guidelines and documentation. Static analysis flagged 66 findings, all of which are false positives from pattern matching in documentation text. The JavaScript plugin file contains only basic logging template code with no network, filesystem, or command execution capabilities. No actual security risks identified.
Facteurs de risque
⚙️ Commandes externes (1)
🌐 Accès réseau (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
بناء مكوّنات واجهة إنتاجية بسرعة
توليد مكوّنات React أو Vue مصقولة بجماليات مميزة ورسوم متحركة ودعم كامل لإمكانية الوصول
نمذجة مفاهيم بصرية بسرعة
إنشاء نماذج عالية الدقة باتجاهات تصميم جريئة وعناصر تفاعلية لاختبار الأفكار
إنشاء صفحات هبوط وواجهات
بناء صفحات هبوط كاملة أو واجهات تطبيقات بتخطيطات متجاوبة من أوصاف باللغة الطبيعية
Essayez ces prompts
Create a button component with hover animation, focus states, and ripple effect on click
Build a landing page for a sustainable coffee shop with warm earth tones, smooth scroll animations, and organic shapes
Create a dark-mode analytics dashboard with animated charts, real-time data filters, hover tooltips, and staggered reveal animations
Build a music streaming player with album art carousel, playback controls, playlist management, drag-and-drop sorting, and synchronized animations matching audio playback
Bonnes pratiques
- قدّم سياقًا واضحًا حول الغرض والجمهور المستهدف والقيود التقنية لاتخاذ قرارات تصميم أفضل
- حدّد الاتجاه الجمالي المطلوب مثل البسيط أو الوحشي أو الرجعي أو العضوي أو الفاخر
- اذكر أطرًا محددة مثل React أو Vue وأي مكتبات مطلوبة للحصول على كود مُحسّن
Éviter
- طلب مكوّنات عامة دون تحديد اتجاه التصميم أو شخصية العلامة التجارية
- طلب تصاميم معقّدة جدًا تحتوي على العديد من الرسوم المتحركة دون مراعاة تأثير الأداء
- تجاهل متطلبات إمكانية الوصول للعناصر التفاعلية مثل النماذج والأزرار والتنقّل
Foire aux questions
ما الأطر التي تدعمها هذه المهارة؟
هل يمكنها إنشاء تطبيقات ويب كاملة؟
هل تتعامل مع التصميم المتجاوب تلقائيًا؟
هل يبقى كودي وبيانات مشروعي آمنين؟
لماذا يبدو تصميمي مختلفًا في كل مرة؟
كيف تختلف عن توليد الكود القياسي؟
Détails du développeur
Structure de fichiers