Améliorer l'esthétique de l'interface utilisateur
Police de caractères unique, esthétique cyberpunk sombre et distinctive, mise en page dynamique asymétrique, animations de chargement méticuleusement chorégraphiées et atmosphère immersive.
Instructions
<frontend_aesthetics>
Évitez l'esthétique médiocre et superficielle de l'IA et créez une interface utilisateur étonnamment unique.
## Cinq dimensions fondamentales
**1. Typographie**
- ❌ Polices interdites : Inter, Roboto, Arial, polices système
- ✅ Choisissez : des polices uniques et distinctives
- ✅ Combinaison : Police de présentation + Police du corps, contraste élevé
- ✅ Conseils : Contraste extrême de graisse de police (100 contre 900), large gamme de tailles de police (3x+)
**2. Couleur et thème**
- ✅ Maintenir une esthétique cohérente grâce aux variables CSS.
- ✅ Couleur dominante + couleur d'accent vibrante
- ❌ À éviter : Dégradé violet + fond blanc
- ✅ Inspiration : Thèmes d'IDE, esthétique culturelle
**3. Mouvement**
- ✅ Les animations CSS sont prioritaires (HTML)
- ✅ Bibliothèque de mouvements
- ✅ Priorité à l'impact maximal : chargement de page soigneusement optimisé > micro-interactions dispersées
- ✅ Déclencheur de défilement, surprise au survol
**4. Aménagement spatial**
- ✅ Flux asymétrique, superposé et diagonal
- ✅ Brisez la grille, utilisez l'espace blanc de manière audacieuse OU contrôlez la densité
**5. Informations générales**
- ✅ Créer une ambiance et de la profondeur
- ✅ Maillage dégradé, bruit, motifs géométriques
- ✅ Transparence superposée, ombres dramatiques, bordures décoratives
## Principes clés
- Chaque conception doit être différente afin d'éviter une convergence répétitive.
- Parvenir à une vision esthétique adaptée à la complexité
L'extrême complexité exige une conception méticuleuse, tandis que le minimalisme requiert retenue et précision.
- Libérez-vous des idées reçues et faites des choix véritablement uniques
</frontend_aesthetics>
⚡ Résumé en une ligne
Police unique + palette de couleurs audacieuse + animation soignée + mise en page innovante + arrière-plan immersif = un design front-end inoubliable
Rejet : Inter/Roboto, dégradé violet sur fond blanc, mise en page monotone
📋 Liste de vérification rapide
Dimensions et éléments d'inspection
Faut-il éviter les polices Inter/Roboto ? Existe-t-il des combinaisons de couleurs originales ?
La palette de couleurs présente-t-elle une cohérence visuelle ? Faut-il éviter les dégradés de violet ?
L'animation comporte-t-elle un effet de chargement soigneusement chorégraphié ?
La disposition s'écarte-t-elle de la grille conventionnelle ?
L'arrière-plan crée-t-il de la profondeur et de l'atmosphère ?
Améliorer l'esthétique de l'interface utilisateur
Police de caractères unique, esthétique cyberpunk sombre et distinctive, mise en page dynamique asymétrique, animations de chargement méticuleusement chorégraphiées et atmosphère immersive.
installedBy
105
creditsEarned
8,800
Instructions
<frontend_aesthetics>
Évitez l'esthétique médiocre et superficielle de l'IA et créez une interface utilisateur étonnamment unique.
## Cinq dimensions fondamentales
**1. Typographie**
- ❌ Polices interdites : Inter, Roboto, Arial, polices système
- ✅ Choisissez : des polices uniques et distinctives
- ✅ Combinaison : Police de présentation + Police du corps, contraste élevé
- ✅ Conseils : Contraste extrême de graisse de police (100 contre 900), large gamme de tailles de police (3x+)
**2. Couleur et thème**
- ✅ Maintenir une esthétique cohérente grâce aux variables CSS.
- ✅ Couleur dominante + couleur d'accent vibrante
- ❌ À éviter : Dégradé violet + fond blanc
- ✅ Inspiration : Thèmes d'IDE, esthétique culturelle
**3. Mouvement**
- ✅ Les animations CSS sont prioritaires (HTML)
- ✅ Bibliothèque de mouvements
- ✅ Priorité à l'impact maximal : chargement de page soigneusement optimisé > micro-interactions dispersées
- ✅ Déclencheur de défilement, surprise au survol
**4. Aménagement spatial**
- ✅ Flux asymétrique, superposé et diagonal
- ✅ Brisez la grille, utilisez l'espace blanc de manière audacieuse OU contrôlez la densité
**5. Informations générales**
- ✅ Créer une ambiance et de la profondeur
- ✅ Maillage dégradé, bruit, motifs géométriques
- ✅ Transparence superposée, ombres dramatiques, bordures décoratives
## Principes clés
- Chaque conception doit être différente afin d'éviter une convergence répétitive.
- Parvenir à une vision esthétique adaptée à la complexité
L'extrême complexité exige une conception méticuleuse, tandis que le minimalisme requiert retenue et précision.
- Libérez-vous des idées reçues et faites des choix véritablement uniques
</frontend_aesthetics>
⚡ Résumé en une ligne
Police unique + palette de couleurs audacieuse + animation soignée + mise en page innovante + arrière-plan immersif = un design front-end inoubliable
Rejet : Inter/Roboto, dégradé violet sur fond blanc, mise en page monotone
📋 Liste de vérification rapide
Dimensions et éléments d'inspection
Faut-il éviter les polices Inter/Roboto ? Existe-t-il des combinaisons de couleurs originales ?
La palette de couleurs présente-t-elle une cohérence visuelle ? Faut-il éviter les dégradés de violet ?
L'animation comporte-t-elle un effet de chargement soigneusement chorégraphié ?
La disposition s'écarte-t-elle de la grille conventionnelle ?
L'arrière-plan crée-t-il de la profondeur et de l'atmosphère ?
