Que fait ui-ux-pro-max ?
Intelligence de conception UI/UX. Planifiez, construisez, concevez, implémentez, révisez et améliorez le code UI/UX. Styles : image d'abord, design éditorial, minimalisme, mode sombre, responsive. Projets : page d'atterrissage, tableau de bord, SaaS, application mobile.
Aperçu
Ce skill fournit une assistance IA complète pour la conception et le développement UI/UX. Il couvre l'ensemble du flux de travail : idée, planification, maquettage, implémentation du code, révision et optimisation.
Styles pris en charge
- Image-first : Designs où les images sont le point focal central.
- Design éditorial : Mises en page riches en texte, typographiques et structurées comme un magazine.
- Minimalisme : Lignes épurées, beaucoup d'espace blanc, mise au point sur l'essentiel.
- Mode sombre : Palettes de couleurs sombres pour une fatigue oculaire réduite et une esthétique moderne.
- Responsive : Designs qui s'adaptent parfaitement à toutes les tailles d'écran.
Types de projets
- Page d'atterrissage : Pages à fort taux de conversion pour campagnes marketing ou lancements de produits.
- Tableau de bord : Affichages de données denses, souvent avec des graphiques et des widgets en temps réel.
- SaaS : Applications web multi-locataires avec flux d'authentification, abonnements et gestion de comptes.
- Application mobile : Designs optimisés pour mobile avec navigation tactile et gestuelle.
Comment l'utiliser
- Décrivez votre projet : Commencez par une brève description du type de projet (ex. "page d'atterrissage minimaliste pour une application de fitness").
- Spécifiez les styles : Mentionnez les styles souhaités parmi ceux listés ci-dessus.
- Demandez des composants : Demandez des composants spécifiques (ex. "formulaire de connexion en mode sombre") ou des pages entières.
- Affinez et améliorez : Utilisez les retours de l'IA pour itérer sur la conception et le code.
Exemple de prompt
Crée une page d'atterrissage responsive en mode sombre pour une application de suivi de fitness. Utilise un style image-first avec des photos d'athlètes. Inclus une section héros, une section fonctionnalités, une section témoignages et un pied de page. Génére le code en React + Tailwind CSS.
Bonnes pratiques
- Fournissez autant de contexte que possible sur votre public cible et les objectifs de votre projet.
- Demandez des maquettes ou des wireframes avant le code final pour valider la disposition.
- Spécifiez des exigences d'accessibilité (contraste, navigation au clavier, lecteurs d'écran).
- Demandez des optimisations de performance (images paresseuses, fractionnement de code, CSS critique).
Technologies recommandées
- Framework : React, Next.js, Vue, ou HTML/CSS vanilla selon vos besoins.
- CSS : Tailwind CSS, CSS Modules, styled-components, ou autres.
- Icônes : Lucide, Heroicons, Font Awesome, ou SVG inline.
- Polices : Google Fonts, Fontsource, ou polices système.
- Graphiques : Recharts, Chart.js, D3.js pour les tableaux de bord.
Ressources supplémentaires
- Consultez le guide de style de design system pour les composants réutilisables.
- Utilisez des outils comme Figma pour exporter des tokens de design directement en code CSS.
- Suivez les dernières tendances en UI/UX via des sites comme Dribbble, Behance, et Awwwards.