Haizhucodex Design Skill

Que fait Haizhucodex Design Skill ?

Créez des expériences frontend soignées avec une thèse visuelle claire, un modèle d'interaction utilisable, des composants accessibles, des animations retenues et une qualité d'implémentation vérifiée.

Modes de fonctionnement

Choisissez un mode en fonction de la demande et de l'état du projet :

• Design : établir la hiérarchie, la direction visuelle, les tokens, les composants, les états et l'animation avant l'implémentation.
• Build : implémenter un brief, une capture d'écran, une maquette ou un système de design existant dans la stack frontend actuelle.
• Redesign : préserver le comportement du produit tout en améliorant la hiérarchie, l'image de marque, la réactivité, l'accessibilité et la qualité perçue.
• Audit : inspecter une interface existante, classer les problèmes par impact et corriger les problèmes à plus forte valeur ajoutée.
• Design system : créer ou affiner le DESIGN.md, les tokens, les règles de composants, les règles d'animation et les motifs réutilisables.

Workflow principal

1. Inspecter le dépôt avant toute modification. Identifier le framework, le gestionnaire de paquets, les routes, les composants, le système de style, les tokens, les dépendances, les commandes de build et les conventions du projet.
2. Extraire un brief de conception compact contenant le type de produit, le public, la tâche principale, la hiérarchie du contenu, les attributs de la marque, la plateforme, les cibles responsive, les exigences d'accessibilité et les contraintes techniques.
3. Sélectionner une thèse visuelle. Définir le caractère typographique, le comportement des couleurs, la densité d'espacement, le langage des formes, l'élévation, l'imagerie et la hiérarchie des animations.
4. Acheminer le travail via les cinq compétences spécialisées lorsqu'elles sont disponibles :
   • UI UX Pro Max : schémas UX par catégorie de produit, architecture de l'information, options de palette et de typographie, conventions de plateforme et contraintes d'accessibilité.
   • Design MD Collection : langage de design au niveau du projet, tokens, règles de composants réutilisables et conseils pour DESIGN.md.
   • Taste Skill : composition, différenciation, jugement visuel, contraintes anti-génériques et direction artistique.
   • shadcn : primitives React accessibles, API de composants, formulaires, superpositions, navigation, affichage de données et états.
   • Impeccable : audit final couvrant la hiérarchie, la typographie, l'espacement, la finition, la réactivité et l'accessibilité.
5. Lire references/prompt-library.md. Sélectionner uniquement les motifs sources qui servent un objectif produit ou d'interaction spécifique.
6. Produire une carte d'implémentation couvrant les sections de page, les composants réutilisables, les états de contenu, le comportement responsive, les interactions, la propriété des animations, le comportement en mouvement réduit et les commandes de vérification.
7. Implémenter directement dans la stack existante. Réutiliser les dépendances et conventions actuelles, sauf si une nouvelle dépendance apporte une valeur claire.
8. Vérifier les états de chargement, vide, erreur, désactivé, survol, focus, actif, sélectionné, succès et destructif le cas échéant.
9. Tester la navigation au clavier, la visibilité du focus, la structure sémantique, le contraste, les cibles tactiles, la mise en page responsive, les erreurs d'exécution et prefers-reduced-motion.
10. Exécuter le formateur, le linter, le vérificateur de types, les tests et la build de production. Corriger les échecs introduits par le travail.
11. Effectuer une critique finale de style Impeccable et traiter les défauts restants ayant le plus d'impact.

Règles de sélection des motifs

• Utiliser Motion Sites pour les récits de défilement, les transitions éditoriales, les lancements, les portfolios et les sections hero immersives.
• Utiliser React Bits pour les primitives d'animation React réutilisables, le texte animé, les listes, les cartes, les arrière-plans et les transitions.
• Utiliser Uiverse pour les contrôles ciblés et les micro-interactions comme les boutons, les champs de saisie, les interrupteurs, les chargeurs et les infobulles.
• Utiliser Anime.js pour les timelines coordonnées, les séquences SVG, l'animation décalée et le mouvement piloté par l'état que le CSS seul ne peut pas exprimer proprement.
• Utiliser Aceternity UI pour les compositions premium de pages d'atterrissage React, les vitrines de fonctionnalités, la navigation, les cartes et les arrière-plans atmosphériques.

N'empilez pas d'effets signatures simplement parce qu'ils sont disponibles. Chaque effet doit soutenir la hiérarchie, le feedback, l'orientation, la narration ou la compréhension.

Garde-fous de conception

• Établir une idée visuelle dominante et l'appliquer de manière cohérente.
• Prioriser l'accomplissement des tâches et l'architecture de l'information par rapport à la décoration.
• Éviter le style IA générique et lourd en dégradés, le vitromorphisme excessif, les cartes flottantes aléatoires, les graphiques ornementaux, les rectangles uniformément arrondis et l'animation sur chaque élément.
• Limiter les polices de caractères proéminentes, les couleurs d'accentuation, les niveaux d'élévation, les rayons de bordure et les familles d'animation.
• Utiliser du HTML sémantique et des primitives de composants accessibles.
• Traiter le mobile comme une composition délibérée plutôt qu'une mise en page de bureau compressée.
• Privilégier les transitions CSS pour les changements d'état simples et introduire l'animation JavaScript uniquement lorsque la coordination ou le séquencement l'exige.
• Animer les transformations et l'opacité dans la mesure du possible. Éviter les thrashings de mise en page et les animations continues inutiles.
• Préserver le contenu lisible avant l'hydratation et lorsque l'animation est désactivée.
• Respecter les licences externes. Utiliser les API documentées ou les méthodes d'installation et ne pas redistribuer le code source tiers sans autorisation.

Politique de dépendance

Avant d'ajouter un paquet :

1. Vérifier si le projet possède déjà une dépendance équivalente.
2. Confirmer la compatibilité du framework, du modèle de rendu et de la version.
3. Expliquer pourquoi le CSS ou les utilitaires existants sont insuffisants.
4. Installer avec le gestionnaire de paquets du dépôt.
5. Garder les importations restreintes et supprimer les expériences inutilisées.
6. Enregistrer la dépendance et son objectif dans le résumé final.

Si une compétence ou une bibliothèque nommée n'est pas disponible, exécuter son rôle directement et continuer. Ne pas bloquer une implémentation de routine sur une intégration optionnelle.

Livrables requis

Pour un travail de conception uniquement, retourner :

1. Brief de conception.
2. Thèse visuelle.
3. Architecture de la page et des composants.
4. Direction des tokens et de la typographie.
5. Plan d'animation.
6. Exigences responsive et d'accessibilité.

Pour un travail d'implémentation, retourner :

1. Direction choisie et justification.
2. Fichiers modifiés et décisions clés concernant les composants.
3. Comportement de l'animation et de l'interaction.
4. Vérification de l'accessibilité et du responsive.
5. Commandes exécutées et résultats.
6. Dépendances ajoutées.
7. Hypothèses ou compromis restants.