Vedmeena21/ship-beautiful-ui

Ship Beautiful UI

Les UI construites par IA se ressemblent toutes parce que l'agent démarre avec les mêmes valeurs par défaut à chaque fois : les mêmes polices, les mêmes dégradés, les mêmes rangées de cartes identiques. Cette compétence remplace ces valeurs par défaut par un processus :

1. Brief. Définir le sujet, l'audience et l'unique objectif de l'écran.
2. Direction. Construire l'apparence à partir de l'univers du sujet, pas d'un modèle.
3. Verrouillage. Écrire chaque décision visuelle dans DESIGN.md et la vérifier.
4. Construction. Utiliser uniquement les jetons de DESIGN.md. Une idée forte par écran.
5. Mouvement. Uniquement du mouvement qui explique un changement.
6. Révision. Scanner les artefacts IA et les défauts de qualité, examiner les captures d'écran, écrire REVIEW.md.

Toujours dans cet ordre. Ne sautez pas l'étape 0 ni l'étape 5.

Qui gagne

Lorsque deux instructions sont en conflit, la plus haute l'emporte :

1. Les propres mots de l'utilisateur.
2. DESIGN.md, une fois qu'il existe.
3. Les règles de cette compétence dans references/.
4. Tout autre élément chargé, y compris les autres compétences UI.

Lorsque vous résolvez un conflit, dites-le en une ligne pour que l'utilisateur puisse vous contredire.

Outils de cette compétence

Tous les scripts sont en Python 3 (bibliothèque standard). Exécutez-les depuis le dossier de cette compétence ou passez des chemins complets.

Script	Ce qu'il fait
scripts/derive.py	Transforme les mots de l'univers du sujet en une palette vérifiée pour le contraste, en utilisant 78 matériaux
scripts/direction.py	Distribue 3 options de direction (palette + association typographique + mise en page) pour un type de produit, et rédige un brouillon de DESIGN.md
scripts/lint_design.py	Vérifie DESIGN.md : structure, ordre des sections, références aux jetons, contraste WCAG
scripts/detect.py	Scanne le code front-end pour 40 artefacts IA et lacunes de qualité

Bibliothèque	Contenu
data/materials.json	78 matériaux issus des univers des sujets (papier, nourriture, nature, artisanat, écrans, argent, soin, jeu, voyage)
data/palettes.json	60 palettes, claires et sombres, toutes vérifiées pour le contraste
data/type-pairings.json	40 associations typographiques, toutes avec des polices Google gratuites, avec rôles et notes
data/layouts.json	20 motifs de mise en page avec wireframes
references/effects.md	16 effets en CSS/JS pur avec alternatives pour mouvement réduit
references/04-motion.md	Jetons de temporisation et 12 recettes de mouvement
references/ux-rules.md	80 règles UX par domaine
references/anti-patterns.md	Les 40 règles du détecteur et 12 valeurs par défaut visuelles

Étape 0 : Brief

Lisez references/00-brief.md. Écrivez quatre lignes : sujet, audience, objectif, contraintes, plus cinq noms de l'univers du sujet. Si le brief est léger, proposez-les et confirmez en un seul message (au maximum trois questions).

Étape 1 : Direction

Lisez references/01-direction.md.

• Par défaut : dériver du sujet. Choisissez 3 à 5 des noms de l'univers et exécutez python3 scripts/derive.py --words "<noms>" (ajoutez --mode dark si le produit vit la nuit). Associez la palette avec une association typographique et une mise en page de data/ qui correspondent à l'ambiance.
• Solution de repli : distribuer depuis la bibliothèque lorsque le sujet n'a pas d'univers visuel fort ou que l'utilisateur souhaite des options rapidement : python3 scripts/direction.py --kind <type> --brief "<une ligne>". Montrez les 3 options et laissez l'utilisateur choisir.
• Marque existante : la marque est la direction. Extrayez ses couleurs et sa typographie à la place.
• Vérifiez le plan par rapport aux valeurs par défaut visuelles dans references/anti-patterns.md et révisez tout ce qui correspond, sauf si le brief le demandait.

Étape 2 : Verrouillage

Lisez references/02-lock.md.

• Écrivez DESIGN.md à la racine du projet : jetons YAML en haut, puis sections ## dans l'ordre (Présentation, Couleurs, Typographie, Mise en page, Élévation et Profondeur, Formes, Composants, À faire et à ne pas faire). direction.py --write vous donne un brouillon ; templates/DESIGN.md est le formulaire vierge.
• Placez le brief dans Présentation et les valeurs par défaut rejetées dans À faire et à ne pas faire.
• Exécutez python3 scripts/lint_design.py DESIGN.md et corrigez chaque erreur avant de construire.

Étape 3 : Construction

Lisez references/03-build.md et utilisez references/ux-rules.md en cours de route.

• Associez les jetons à des variables CSS (ou au thème du framework) une fois pour toutes ; n'utilisez que ces noms.
• Un élément mémorable par écran. Tout le reste est discret.
• Au maximum un effet de references/effects.md, sur cet élément, recoloré avec les jetons.
• Construisez jusqu'au seuil de qualité : 360 px de large, focus visible, contraste AA, mouvement réduit, texte réel, états de chargement/vide/erreur.

Étape 4 : Mouvement

Lisez references/04-motion.md. Le mouvement déclenché par l'utilisateur utilise les jetons de temporisation et les recettes qui y sont définis. Au maximum un moment de mouvement ambiant par écran. Tout a un chemin de mouvement réduit.

Étape 5 : Révision

Lisez references/05-review.md.

1. python3 scripts/detect.py <src ou fichiers>. Corrigez chaque erreur ; corrigez les avertissements ou notez pourquoi ils restent.
2. python3 scripts/lint_design.py DESIGN.md à nouveau. Le code et DESIGN.md doivent correspondre.
3. Capture d'écran en version bureau et en 390 px de large si votre environnement le permet, et critiquez les images par rapport au brief.
4. Écrivez REVIEW.md à partir de templates/REVIEW.md.

Résultat

Lorsque vous avez terminé, le projet contient DESIGN.md (valide), l'UI (construite uniquement à partir de ses jetons) et REVIEW.md. Dites à l'utilisateur en quelques lignes : la direction et pourquoi elle correspond au sujet, l'élément mémorable unique, et ce que vous avez délibérément omis.