SuperDesign

• Vous avez besoin d'un agent IA pour générer du code UI (HTML/CSS/Tailwind) qui soit soigné et moderne, sans aspect générique.
• Vous créez des pages d'atterrissage, des tableaux de bord ou des interfaces riches en composants et souhaitez qu'un processus de conception structuré soit suivi automatiquement.
• Vous voulez un thème cohérent entre les modes clair/sombre avec des techniques de couleurs modernes comme oklch().
• Vous avez besoin de mises en page accessibles, adaptées aux mobiles en priorité et responsives, avec un HTML sémantique approprié dès le départ.

• Vous travaillez dans un environnement mobile natif (iOS/Android) — ces directives sont axées sur le web.
• Votre projet utilise un système de design rigide (par exemple, une adhérence stricte à Material Design) qui entre en conflit avec les modèles de thèmes avisés fournis ici.

Chaque interface utilisateur est abordée selon une séquence en quatre phases : Conception de la mise en page, Conception du thème, Conception des animations et Implémentation — dans cet ordre précis. Cette approche évite de passer directement au code avant que la structure et l'esthétique n'aient été réfléchies, ce qui permet d'obtenir des résultats plus cohérents.

La compétence évite explicitement les palettes génériques dépassées (comme le bleu Bootstrap) et promeut oklch() pour des définitions de couleurs modernes et perceptuellement uniformes. Des modèles de thèmes prêts à l'emploi pour le Mode Sombre (style Vercel/Linear), le Néo-Brutalisme et le Glassmorphisme sont inclus avec des variables CSS directement utilisables.

Une liste soigneusement sélectionnée de Google Fonts couvrant les catégories sans-serif, monospace, serif et display est fournie, accompagnée d'une intégration prête via CDN pour les icônes Lucide et les composants Flowbite — éliminant ainsi toute incertitude dans les choix typographiques.

Un système de notation concis pour planifier les micro-interactions (par ex., button: 150ms [S1→0.95→1] press) permet de maintenir des animations intentionnelles. Des plages de temporisation recommandées pour les animations d'entrée, les états de survol, les pressions de bouton et les transitions de page sont définies.

Les directives imposent l'utilisation de HTML sémantique, une hiérarchie de titres appropriée, des étiquettes ARIA, un ratio de contraste des couleurs minimum de 4,5:1, ainsi que la prise en charge de la navigation au clavier — garantissant que les résultats répondent aux normes d'accessibilité de base sans invite supplémentaire.

Des meilleures pratiques bien définies pour les Cartes, les Boutons, les Formulaires et la Navigation sont intégrées — couvrant la profondeur des ombres, le dimensionnement des zones tactiles, les états de focus, les états de chargement/désactivé, et le comportement des en-têtes fixes.

Demandez à votre agent de créer une page d'atterrissage SaaS et SuperDesign s'assure qu'elle suit une mise en page structurée (en-tête → héros → fonctionnalités → pied de page), choisit une association de polices moderne, applique un thème de couleurs cohérent et génère un CSS responsive axé sur le mobile — le tout sans direction de conception manuelle.

Lors du prototypage d'un tableau de bord analytique ou d'administration, la compétence guide l'agent pour réaliser d'abord une maquette filaire de la mise en page, appliquer un espacement cohérent et des ombres de carte subtiles, et inclure des états de survol et d'animation — produisant un prototype qui a l'apparence d'une version prête pour la production.

Utilisez cette compétence pour générer un ensemble cohérent de boutons, de champs de formulaire et de composants de navigation partageant les mêmes design tokens (variables CSS pour la couleur, le rayon et l'ombre) et répondant aux critères d'accessibilité.

Lors de la création d'une interface devant prendre en charge les modes clair et sombre, l'approche par variables CSS de SuperDesign et les directives de couleurs oklch() aident l'agent à produire un système sensible au thème dès le départ, plutôt que d'ajouter le mode sombre après coup.