Design Frontend
Créez des interfaces frontend mémorables qui se démarquent de l'esthétique générique générée par l'IA grâce à des choix créatifs audacieux.
Voir aussi :
ui-designpour les fondamentaux (typographie, couleur, espacement),web-designpour les motifs CSS.
Installation
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install frontend-design
CE QUE FAIT CETTE COMPÉTENCE
Guide la création d'interfaces web visuellement distinctives en :
- Établissant une direction esthétique audacieuse avant de coder
- Faisant des choix intentionnels en typographie, couleur et espacement
- Implémentant des animations et micro-interactions qui ravissent
- Évitant les motifs prévisibles qui marquent les interfaces générées par l'IA
QUAND L'UTILISER
- Construire un nouveau composant, une page ou une application web
- Créer des pages d'accueil, des sites marketing ou des interfaces produit
- Redessiner des interfaces pour les rendre plus mémorables
- Tout travail frontend où l'impact visuel compte
MOTS-CLÉS
design frontend, interface web, design ui, page d'accueil, interface créative, esthétique web, typographie, design visuel, design d'animation, interface distinctive
Processus de Réflexion Design
Avant d'écrire du code, engagez-vous dans une direction esthétique :
1. Comprendre le Contexte
- Objectif : Quel problème cette interface résout-elle ?
- Audience : Qui l'utilise et qu'attend-elle ?
- Contraintes : Framework, performance, exigences d'accessibilité
2. Choisir une Direction Audacieuse
Choisissez une esthétique extrême : la médiocrité est oubliable :
| Direction | Caractéristiques |
|---|---|
| Minimaliste Brutal | Dépouillé, essentiel, rien de superflu |
| Chaos Maximaliste | Dense, en couches, intentionnellement écrasant |
| Rétro-Futuriste | Mélange esthétique vintage et technologie moderne |
| Organique/Naturel | Doux, fluide, inspiré de la nature |
| Luxe/Raffiné | Matériaux premium, élégance subtile |
| Ludique/Jouet | Amusant, accessible, lumineux |
| Éditorial/Magazine | Orienté typographie, basé sur une grille |
| Brutaliste/Brut | Structure exposée, anti-design |
| Art Déco/Géométrique | Formes audacieuses, symétrie, ornement |
| Industriel/Utilitaire | Fonction avant tout, robuste |
3. Identifier l'Élément Mémorable
Quelle est la seule chose dont quelqu'un se souviendra à propos de cette interface ? Engagez-vous.
Directives Esthétiques
Typographie
NE JAMAIS utiliser de polices génériques :
- Arial, Helvetica, system-ui
- Inter, Roboto (sauf si hautement intentionnel)
FAITES le choix de polices distinctives :
- Associez une police d'affichage pleine de caractère à une police de corps raffinée
- Explorez : Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader
/* Exemple d'association */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Satoshi', sans-serif;
Couleur & Thème
- Engagez-vous pour une palette cohérente — ne faites pas de concessions avec des choix sûrs
- Dominante + accent surpasse les couleurs uniformément réparties
- Utilisez des variables CSS pour la cohérence
- Évitez les dégradés violets sur fond blanc (le "défaut IA")
:root {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-text: #fafafa;
--color-accent: #ff4d00;
--color-muted: #666666;
}
Composition Spatiale
Brisez les attentes :
- Asymétrie plutôt que parfait équilibre
- Superposez les éléments intentionnellement
- Flux diagonal ou mises en page non conventionnelles
- Espace négatif généreux OU densité contrôlée — pas de compromis
- Éléments brisant la grille qui attirent l'attention
Animation & Interaction
Concentrez-vous sur les moments à fort impact :
- Chargement de page : révélations échelonnées avec
animation-delay - Animations déclenchées par le défilement qui surprennent
- États de survol avec personnalité
- Privilégiez les animations CSS pour le HTML ; la bibliothèque Motion pour React
/* Entrée échelonnée */
.card { animation: fadeUp 0.6s ease-out backwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
Arrière-plans & Atmosphère
Créez de la profondeur et de l'atmosphère :
- Grilles de dégradés et dégradés multi-arrêts
- Textures de bruit et superpositions de grain
- Motifs géométriques ou grilles subtiles
- Transparences en couches
- Ombres dramatiques ou platitude totale
- Curseurs personnalisés pour les éléments interactifs
Principes d'Implémentation
Adapter la Complexité à la Vision
- Vision maximaliste → code élaboré avec animations étendues
- Vision minimaliste → retenue, précision, espacement parfait
- L'élégance = bien exécuter la vision, pas en ajouter plus
Varier Entre les Générations
Ne convergez jamais vers des motifs :
- Alternez thèmes clair/sombre
- Utilisez différentes familles de polices à chaque fois
- Explorez différentes directions esthétiques
- Chaque design doit sembler unique
NE JAMAIS FAIRE
- NE JAMAIS utiliser de familles de polices génériques (Inter, Roboto, Arial, polices système)
- NE JAMAIS utiliser de dégradés violets sur fond blanc — "l'esthétique IA"
- NE JAMAIS utiliser de mises en page prévisibles et standardisées
- NE JAMAIS sauter la phase de réflexion design — comprendre avant de construire
- NE JAMAIS faire de compromis avec des esthétiques sûres et médiocres — engagez-vous dans une direction
- NE JAMAIS oublier qu'un design distinctif nécessite un code distinctif
- NE JAMAIS converger vers les mêmes motifs à travers les générations — variez intentionnellement
- NE JAMAIS ajouter de complexité sans objectif — le minimalisme et le maximalisme nécessitent tous deux de l'intention