frontend-design
Concevoir des interfaces frontend de qualité production
متاح أيضًا من: davila7,92Bilal26,YYH211,7Spade,sickn33,92Bilal26,DennisLiuCk,7Spade,am-will,anthropics,AI-Vibe-Prompts,1bertogit,1bertogit,anthropics,ZhanlinCui,Azeem-2,AdamAugustinsky,pbakaus,AgentWorkforce,AJV009
Créez des composants web et des pages distinctifs avec une esthétique soignée. Évitez les visuels génériques générés par IA et créez des interfaces utilisateur mémorables et de haute qualité.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-design". Créer une page de connexion avec une esthétique distinctive
النتيجة المتوقعة:
- Un formulaire de connexion soigné avec association de polices personnalisées (titre + corps)
- Thème sombre avec couleurs d'accentuation et dégradés subtils
- Transitions de focus fluides et animations de validation des entrées
- Mise en page responsive qui fonctionne sur toutes les tailles d'écran
- Étiquettes de formulaire accessibles et navigation au clavier
استخدام "frontend-design". Concevoir une section de cartes de tarification avec un style moderne
النتيجة المتوقعة:
- Trois niveaux de tarification avec hiérarchie visuelle audacieuse
- Effets de survol qui mettent en évidence la carte sélectionnée
- Animations de mise à l'échelle fluides et transitions de bordure
- Typographie épurée avec police d'affichage distinctive
- Grille responsive s'adaptant à la taille de l'écran
استخدام "frontend-design". Créer un menu de navigation avec des interactions créatives
النتيجة المتوقعة:
- Menu horizontal avec animation de révélation échelonnée
- États de survol avec effets de soulignement personnalisés
- Menu hamburger responsive pour mobile avec animation de glissement
- Indicateur d'état actif avec transition fluide
- Prise en charge de la navigation au clavier accessible
التدقيق الأمني
آمنThis is a pure documentation skill containing only design guidance and metadata. No executable code, scripts, network calls, filesystem access, or external command execution capabilities exist. All static findings are false positives from documentation files being incorrectly scanned for code patterns.
عوامل الخطر
🌐 الوصول إلى الشبكة (2)
📁 الوصول إلى نظام الملفات (1)
درجة الجودة
ماذا يمكنك بناءه
Créer des composants UI soignés
Créez des composants React ou Vue distinctifs avec une esthétique raffinée et des animations fluides.
Prototyper des concepts visuels
Transformez des concepts de conception en code fonctionnel avec des directions visuelles audacieuses et mémorables.
Concevoir des interfaces cohérentes
Créez des pages frontend complètes avec typographie cohérente, thèmes de couleurs et design de mouvement.
جرّب هذه الموجهات
Créez un composant bouton distinctif avec un style unique, des effets de survol et des transitions fluides.
Concevez une page d'accueil avec une direction esthétique audacieuse, une typographie personnalisée et des animations de révélation échelonnées.
Créez une interface de tableau de bord avec graphiques, filtres et transitions d'état fluides en utilisant une esthétique de design brutaliste.
Créez une interface SaaS complète avec navigation, formulaires, tableaux de données et boîtes de dialogue modales présentant un langage de design de luxe cohérent avec effets de mouvement.
أفضل الممارسات
- Choisissez une direction esthétique audacieuse avant de coder et engagez-vous pleinement
- Utilisez des variables CSS pour un thème cohérent à travers les composants
- Priorisez les animations à fort impact plutôt que les micro-interactions dispersées
تجنب
- Utiliser des polices génériques comme Arial, Inter ou Roboto pour tous les projets
- Opter par défaut pour des dégradés violets et des palettes de couleurs prévisibles
- Créer des mises en page sans vision conceptuelle claire ou intention de design
الأسئلة المتكررة
Quels frameworks cette compétence prend-elle en charge ?
Cette compétence peut-elle créer des applications complètes ?
En quoi cette compétence diffère-t-elle de la génération de code standard ?
Cette compétence accède-t-elle à des ressources de conception externes ?
Que faire si le design généré ne correspond pas à mes attentes ?
Comment cela se compare-t-il à l'embauche d'un designer professionnel ?
تفاصيل المطور
بنية الملفات
📄 SKILL.md