frontend-design
Concevoir des interfaces frontend Distinctives prêtes pour la production
متاح أيضًا من: Azeem-2,1bertogit,1bertogit,92Bilal26,AdamAugustinsky,AJV009,AgentWorkforce,DennisLiuCk,anthropics,ZhanlinCui,anthropics,YYH211,7Spade,7Spade,92Bilal26,CesarAugustusGroB,davila7,AI-Vibe-Prompts
Les interfaces utilisateur génériques générées par l'IA manquent d'identité visuelle et de mémorabilité. Cette compétence applique le cadre DFII pour créer des interfaces intentionnelles de haute qualité avec une esthétique cohérente qui se démarquent.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-design". Design a hero section with retro-futurist aesthetic for a space tourism startup
النتيجة المتوقعة:
Hero section featuring: gradient mesh background with deep purple to teal transition, custom display font (Orbitron) for headline, asymmetric text layout with overlapping elements, grain overlay texture, single high-impact floating animation on CTA button, starfield particle effect using CSS only. DFII Score: 13 (Excellent execution with strong aesthetic cohesion).
استخدام "frontend-design". Create a pricing card component with luxury minimal aesthetic
النتيجة المتوقعة:
Three-tier pricing cards with: generous whitespace (48px base unit), refined serif display font (Playfair Display) paired with geometric sans (Jost), monochromatic base with gold accent only on primary CTA, subtle box-shadow with 20% opacity, smooth scale transform on hover, checkmark icons as SVG. Avoids generic purple gradients and symmetrical layouts.
التدقيق الأمني
آمنAll 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.
درجة الجودة
ماذا يمكنك بناءه
Conception de page d'accueil
Créer une page d'accueil mémorable avec une esthétique de brutalisme éditorial, incluant une hiérarchie typographique personnalisée, une mise en page asymétrique et des animations d'entrée à fort impact.
Bibliothèque de composants de tableau de bord
Construire un ensemble cohérent de composants de tableau de bord avec une esthétique de minimalisme de luxe, utilisant une palette de couleurs restreinte, un espacement précis et des micro-interactions raffinées.
Refonte de site de marque
Refonte d'un site existant avec une direction esthétique rétro-futuriste, impliquant des maillages de dégradés personnalisés, une translucidité en couches et des motifs de mouvement distinctifs.
جرّب هذه الموجهات
Concevoir un composant de formulaire d'inscription utilisant une esthétique de minimalisme de luxe. Incluire des choix typographiques intentionnels, une histoire de couleur dominante avec une accentuation, et un espacement intentionnel. Fournir le HTML et CSS complet.
Créer une page d'accueil de produit. Tout d'abord, évaluer la direction de conception en utilisant le cadre DFII sur les cinq dimensions. Viser un score de 12 ou plus. Utiliser une esthétique utilitaire industrielle avec une composition asymétrique intentionnelle.
Définir un système de conception complet pour un tableau de bord fintech. Spécifier : les associations de polices d'affichage et de corps avec leur raisonnement, le système de couleur en variables CSS avec une tonalité dominante et un accent, le rythme d'espacement et la philosophie de mouvement. Implémenter ensuite un composant de carte exemple.
Transformer ce composant de bouton générique en quelque chose de mémorable en utilisant l'esthétique du brutalisme éditorial. Expliquer ce qui le distingue des interfaces utilisateur générées par l'IA typiques. Inclure les états au survol et les styles de focus pour l'accessibilité.
أفضل الممارسات
- Toujours déclarer explicitement la direction esthétique avant d'écrire le code
- Utiliser le cadre DFII pour valider que les décisions de conception atteignent un score de 8 ou plus
- Inclure au moins un ancrage de conception mémorable qui différencie des modèles génériques
تجنب
- Utiliser des polices système ou des valeurs par défaut de l'IA comme Inter, Roboto ou Arial sans raisonnement intentionnel
- Appliquer des dégradés SaaS génériques du violet au blanc sans justification esthétique
- Créer des mises en page de section symétriques et prévisibles qui pourraient être n'importe quel modèle