Que fait justesse ?
Transformez un brief, un dépôt ou une référence visuelle en UI de production cohérente. Traitez le bon goût comme un jugement contextuel sous contraintes, et non comme un framework, une esthétique ou une recette de composants préférés.
Il s'agit d'une capacité déclarative et uniquement basée sur des références. Son raisonnement de conception, ses règles et ses critères d'acceptation doivent rester indépendants du modèle, de l'environnement d'exécution de l'agent, de l'outil en ligne de commande, du fournisseur et de l'environnement hôte qui l'exécutent. La découverte propre à l'environnement d'exécution peut exposer ce répertoire, mais elle ne doit pas modifier la sémantique de la compétence ni être requise par son workflow.
Verrouiller le mode de fonctionnement
Choisissez un mode principal avant de prendre toute décision de conception. Indiquez-le dans le rapport de conception (design read) et ne changez pas de mode silencieusement. Si deux modes impliquent des livrables matériellement différents et que la demande ne les départage pas, posez une question ciblée. Une tâche peut nommer un mode secondaire, mais le mode principal contrôle le workflow et le niveau d'acceptation.
| Mode | Résultat principal | Référence requise |
|---|---|---|
| Marketing / conversion | Communiquer la valeur et amener un public vers une action mesurable | marketing-surfaces.md |
| Produit / tâche | Aider un utilisateur à comprendre l'état et à effectuer un travail récurrent, y compris les tableaux de bord | product-and-transaction.md |
| Flux transactionnel | Effectuer une action conséquente ou en plusieurs étapes de manière sûre et récupérable | product-and-transaction.md |
| Refonte : préserver | Améliorer la qualité tout en conservant une marque reconnaissable et des contrats produit | redesign-preservation.md |
| Refonte : refonte complète | Établir un nouveau langage visuel tout en conservant les contrats non approuvés pour modification | redesign-preservation.md |
| Référence vers code | Traduire des preuves visuelles fournies dans l'implémentation native du projet cible | reference-to-code.md |
| Review visuelle | Diagnostiquer la hiérarchie, la cohérence, l'utilisabilité, la réactivité et les risques de production | interface-quality.md |
| Lecture / documentation | Aider un lecteur à comprendre quelque chose via de la documentation, des guides, des articles, de l'aide ou des journaux de modifications | reading-surfaces.md |
| Expérience / vitrine | Placer un visiteur dans un travail de portfolio, galerie ou exposition pendant que l'interface s'efface | experience-surfaces.md |
| Concept d'image | Définir ou produire une direction artistique au service de l'interface | image-concepts.md |
| Visualisation de données | Transformer des mesures, comparaisons, distributions, relations et incertitudes en preuves inspectables | data-visualization.md |
| Note de décision exécutive | Transformer des preuves limitées en une présentation orientée vers une conclusion pour un décideur | decision-memo.md |
Après avoir sélectionné le mode principal, définissez le profil séparément. Cette compétence fournit le mécanisme de profil mais aucun profil. Activez personal:<nom> uniquement lorsque ce drapeau exact est explicite dans la demande ou les instructions du projet. Ne l'inférez jamais à partir du nom d'une personne, d'un type d'artefact ou de la disponibilité de cette compétence. Sans le drapeau, gardez le langage visuel, la voix, la palette, la matérialité et la couleur de surface neutres pour la marque ; une toile de papier clair n'est pas une valeur par défaut.
Un drapeau actif ouvre une déclaration obligatoire plutôt que d'accorder un système visuel. Obtenez des réponses concrètes à tous les dix champs dans profile-declaration.md avant de prendre toute décision de conception sous le profil, et ne remplissez jamais un champ sans réponse par inférence ou en empruntant une valeur à un autre profil, aux exemples de cette compétence ou à ses fixtures. Demandez chaque champ avec un exemple travaillé ci-joint, dans la forme de réponse propre à ce champ ; une question nue renvoie une humeur où la forme a besoin d'une mesure.
Workflow principal
- Inspecter avant de proposer. Lisez les fichiers pertinents du projet, les écrans et composants représentatifs, la configuration du package et de la construction, les jetons de conception, les formes de données, les routes, les tests et les références fournies. Identifiez ce qui est réel, ce qui est inféré et ce qui reste inconnu.
- Cadrer le brief. Lisez brief-and-direction.md. Enregistrez l'audience, le travail utilisateur, l'objectif métier, les preuves de contenu et de marque, les contraintes, le mode principal et le signal de réussite. Énumérez chaque livrable demandé avant l'implémentation. Préférez une interprétation défendable plutôt qu'un collage de tendances.
- Déclarer le rapport de conception. En une déclaration compacte, nommez le mode, l'audience, le travail produit, la direction visuelle, la densité et la posture de mouvement. Distinguez les décisions des hypothèses.
- Préserver le contrat produit. Gardez le framework existant, le gestionnaire de paquets, les conventions de composants, le système de conception, les contrats de données et d'API, la sémantique d'état, les routes, les formulaires, l'analytique, le comportement de consentement et légal, l'accessibilité, le SEO, le sens du contenu, les tests et les budgets de performance, sauf si l'utilisateur autorise explicitement un changement. Le mode "refonte complète" n'est pas une permission de les casser.
- Implémenter nativement. Réutilisez les dépendances installées et les primitives établies. Exprimez la direction dans le framework et le modèle de style du projet. N'introduisez pas React, Tailwind, GSAP, un autre système de conception, le mode sombre, une police ou une dépendance simplement parce que cette compétence mentionne une possibilité visuelle.
- Résoudre tout l'espace d'état. Concevez la mise en page responsive ainsi que les états de chargement, vide, partiel, erreur, succès, désactivé, permission, hors ligne, validation et action destructive applicables. Pour les tableaux de bord et les flux, protégez la lisibilité des données, la continuité des tâches et la récupération.
- Rendre et vérifier par passes limitées. Construisez d'abord complètement. Ensuite, inspectez ensemble les fenêtres d'affichage représentatives étroites et larges ainsi que les extrêmes de contenu réels en une seule passe groupée lorsque l'outil de prévisualisation existe, en comparant la hiérarchie, l'ordre de lecture, le débordement, le contraste, le focus, le retour d'interaction et la préservation du contrat. Corrigez tout ce que cette passe montre dans un lot, confirmez avec au plus une autre passe, et arrêtez de polir : une boucle d'auto-QA ouverte dépense le budget sans converger, et la limite couvre tout le cycle, les captures d'écran, les analyses de défauts, les micro-éditions et les reconstructions. N'appelez pas une maquette prête pour la production sans preuves proportionnées de build, de test et visuelles.
- Pré-vol de livraison. Lisez production-preflight.md, corrigez les échecs applicables, vérifiez chaque livrable demandé et signalez les vérifications qui n'ont pas pu être exécutées.
Routage des références
Chargez uniquement ce dont le mode actif a besoin ; chaque référence est directement liée ici.
- Lisez toujours brief-and-direction.md, interface-quality.md et production-preflight.md.
- Lisez marketing-surfaces.md pour les surfaces marketing, campagne, conversion éditoriale, tarification, lancement ou autres surfaces d'acquisition.
- Lisez reading-surfaces.md pour la documentation, les guides, les articles, l'aide, les journaux de modifications et les pages longues dont le travail est la compréhension.
- Lisez experience-surfaces.md pour les portfolios, galeries, vitrines et pages d'exposition où le travail lui-même est en tête.
- Lisez product-and-transaction.md pour les UI d'application, les tableaux de bord, les espaces de travail denses en données, les formulaires, le checkout, l'onboarding, les paramètres et les flux en plusieurs étapes.
- Lisez data-visualization.md chaque fois qu'une surface contient un KPI, un graphique, une figure analytique, une comparaison de métriques, un tableau de chiffres ou un affichage de date/période.
- Lisez redesign-preservation.md chaque fois qu'une surface existante change, en mode préserver ou refonte complète.
- Lisez reference-to-code.md lorsque des captures d'écran, maquettes, sites Web ou autres exemples visuels sont des entrées d'implémentation.
- Lisez image-concepts.md uniquement lorsque l'imagerie fait partie du brief ou que le concept d'image est le mode sélectionné.
- Lisez style-lenses.md lorsque le brief manque d'un vocabulaire visuel ou que des directions concurrentes doivent être séparées.
- Lisez finishing.md en dernier, et seulement une fois que les contrôles de qualité d'interface tiennent, pour un raffinement de niveau livraison et pour juger des candidats quasi identiques ; la finition ne remplace jamais la hiérarchie, la véracité ou les états.
- Lisez react-next-tailwind.md uniquement lorsque le projet inspecté utilise déjà React, Next.js ou Tailwind, ou que l'utilisateur autorise explicitement cette pile pour un travail sur table vierge ; ce n'est pas la valeur par défaut portable.
- Lisez decision-memo.md pour une note exécutive, un deck de décision ou toute séquence de diapositives orientée conclusion.
- Lisez pptx-safe-html.md avant de disposer la première diapositive chaque fois que le livrable est un fichier de présentation modifiable plutôt qu'une page.
- Lisez surface-translation.md lorsqu'une vision du monde doit se décliner à travers un tableau de bord, une page d'accueil rédigée, une étude de cas, un rapport et une présentation.
- Avec le drapeau exact
personal:<nom>, lisez profile-activation.md et profile-declaration.md en premier, puis profile-data-semantics.md une fois la déclaration terminée. Ne les chargez ou ne les appliquez pas autrement. - Lisez profile-calibration.md uniquement lors de l'exécution d'une comparaison de profils contrôlée, d'un contrôle négatif, d'une revue aveugle ou d'une décision de promotion.
- Lisez upstream-provenance.md uniquement pour l'attribution, l'audit, la redistribution ou la comparaison en amont.
Ne chargez pas récursivement des fichiers non liés à partir des références.
Capacités conditionnelles
Utilisez la génération d'images, la recherche d'images ou la navigation uniquement lorsque cela est disponible, autorisé et nécessaire. Pour le travail d'image, préférez les actifs existants du dépôt, puis les actifs fournis par l'utilisateur, puis un outil autorisé. Sinon, livrez un brief de concept spécifique ou un espace réservé clairement étiqueté sans prétendre qu'il s'agit d'une œuvre finale. Utilisez des espaces réservés uniquement pour les actifs externes ou les dépendances vraiment manquants ; spécifiez pour chaque espace réservé ses dimensions, son rôle et la prochaine étape de remplacement. Ne fabriquez pas de captures d'écran de produits, de clients, de métriques, de logos ou de recommandations.
Utilisez le mouvement uniquement lorsqu'il clarifie la hiérarchie, le feedback, la continuité ou la narration. Préférez le mécanisme existant du projet et la technique adéquate la plus légère. Préservez le contenu sans mouvement, honorez les préférences de mouvement réduit, évitez la capture de défilement et nettoyez les observateurs, les écouteurs et les timelines. Les bibliothèques de mouvement sont des choix d'implémentation conditionnels, jamais une exigence. Montez à motion-patterns.md uniquement lorsqu'une transition CSS native n'est plus suffisante et que le travail nécessite une chorégraphie en couches, une narration par défilement ou un moteur d'animation dédié.
Contrat de livraison
Livrez la surface implémentée ou reviewée avec le mode et le rapport de conception, les contrats préservés et intentionnellement modifiés, les preuves de vérification, et les espaces réservés ou risques non résolus. Pour une demande de review uniquement, priorisez les résultats par impact utilisateur et citez l'écran ou le composant affecté ; ne modifiez pas le projet sauf si on vous le demande.