BrainLiuYH/ui-quality-workbench

UI Quality Workbench

Utilisez cette compétence pour exécuter le module local UI 走查 (inspection UI). Elle compare une image de maquette avec une capture d'écran d'implémentation dans un Worker de navigateur, regroupe les différences visibles en candidats de révision, et prend en charge la confirmation humaine et l'exportation.

L'analyseur est heuristique. Appelez ses sorties candidats ou discordances possibles jusqu'à ce qu'une personne vérifie la maquette, le chemin, l'état, le contenu et la zone d'affichage prévus. Ne présentez jamais un résultat non examiné comme un défaut confirmé.

Démarrer le poste de travail

1. Résolvez le répertoire de cette compétence à partir du SKILL.md sélectionné. Ne supposez pas la racine du dépôt et ne codez pas en dur un emplacement d'installation.

2. Vérifiez le bundle et le pont source local avant le premier lancement d'une session :

   python3 <chemin-compétence>/scripts/serve_workbench.py --check
   

3. Démarrez le serveur en tant que processus long :

   python3 <chemin-compétence>/scripts/serve_workbench.py
   

   Le lanceur imprime une ligne JSON avec event: "ready", protocol: 2, une URL de bouclage dynamique et des métadonnées de processus. Utilisez exactement l'URL renvoyée ; son fragment porte le jeton par lancement utilisé par l'application navigateur.

4. Si le contrôle du navigateur est disponible et que l'utilisateur souhaite ouvrir l'interface, naviguez vers cette URL. Sinon, donnez l'URL à l'utilisateur.

5. Laissez le processus tourner tant que le poste de travail est utilisé. Arrêtez-le avec Ctrl+C lorsque l'utilisateur demande à le fermer ou que la session n'en a plus besoin.

Si le lancement échoue avec EPERM ou une restriction explicite de socket de bouclage, demandez l'autorisation d'exécution locale et relancez la même commande. Ne modifiez pas l'adresse de liaison, ne remplacez pas par une copie hébergée et ne téléchargez pas d'images locales ailleurs.

Choisir les sources

Le poste de travail a besoin d'une image de maquette et d'une image d'implémentation. Chaque changement de source invalide les résultats précédents ; relancez l'audit après avoir remplacé l'une ou l'autre source.

• Image locale : cliquez pour sélectionner ou glissez-déposez un PNG, JPEG ou WebP dans la zone maquette/implémentation correspondante. Le décodage, la comparaison raster et le regroupement restent dans la session locale du navigateur.
• Cadre Figma : fournissez une URL Figma design ou file contenant un node-id, ainsi qu'un token d'accès personnel (PAT), ou lancez le lanceur avec FIGMA_ACCESS_TOKEN. Cela importe un rendu PNG de ce cadre via l'API Figma ; cela ne navigue pas dans le fichier et n'hérite pas d'une connexion Figma.
• Capture Web : fournissez une URL HTTP(S), des dimensions de zone d'affichage et un temps d'attente de rendu optionnel. Le pont démarre un profil temporaire de Chrome/Chromium/Edge sans tête et capture cette zone d'affichage. Il n'hérite pas du profil navigateur, des cookies, des extensions ou de la session authentifiée de l'utilisateur.

Consultez references/source-imports.md avant d'utiliser ou de dépanner l'import Figma ou la capture Web.

Exécuter et examiner un audit

1. Assurez-vous que les deux sources représentent le même chemin, l'état UI, la locale, le contenu, la zone d'affichage et la position de défilement aussi fidèlement que possible.
2. Vérifiez l'aperçu de normalisation affiché. Le moteur utilise la source la plus large comme largeur cible, la maintient à 1×, agrandit proportionnellement uniquement la source la plus étroite à cette largeur, puis aligne les deux images en haut à gauche. Il n'étire ni ne recadre les sources, et une différence de hauteur résiduelle en bas reste dans la comparaison.
3. Lancez l'audit. Avant la classification locale, le Worker vérifie si les rasters normalisés sont adaptés à une comparaison directe. Une paire à faible comparabilité s'arrête sans générer de candidats ; une paire à comparabilité moyenne continue avec un avertissement explicite. Il s'agit d'une porte heuristique conservatrice, et non d'une probabilité ou d'un jugement sémantique sur l'image correcte.
4. Inspectez les candidats dans la comparaison visuelle, la liste et le panneau de détails. Le contenu transparent unilatéral est signalé uniquement comme une différence de présence de région/disposition. Les changements ambigus de média ou de contenu utilisent un libellé neutre au lieu d'être forcés dans des défauts de couleur, texte, icône ou géométrie. Vérifiez si l'anti-crénelage, le chargement de polices, l'animation, les données dynamiques, le comportement responsive ou une maquette obsolète expliquent la différence.
5. Confirmez uniquement les candidats vérifiés. Exigez une raison lorsque vous ignorez intentionnellement une différence réelle ou rejetez un faux positif.
6. Attribuez la sévérité et la priorité indépendamment, puis exportez la liste examinée. N'inférez pas la priorité de la surface en pixels ou de la distance de couleur seule.

Consultez references/audit-model.md lors de la classification, de la priorisation, du changement d'état de révision ou de la décision d'exporter quoi. Consultez references/v0-boundaries.md avant d'expliquer la confidentialité, les intégrations prises en charge, le comportement de capture ou les limitations analytiques.

Gardez les affirmations exactes

• Le moteur de comparaison est adapté de SemineChen/yangao au commit fixe beac836ba3c81b9a1d40bac8fe75af08444ab742, avec l'autorisation de l'auteur telle que rapportée par l'utilisateur. Voir THIRD_PARTY_NOTICES.md.
• L'import Figma nécessite un PAT et un accès sortant vers Figma. Il ne s'agit pas d'OAuth, de liaison de compte, d'extraction de jetons de design ou d'analyse générale de fichiers Figma.
• La capture Web est une capture d'écran isolée de la zone d'affichage actuelle. Il ne s'agit pas d'un assemblage de page entière, de navigation interactive, d'héritage d'état de connexion, d'inspection DOM ou d'extraction de style calculé.
• Le traitement local par navigateur n'est pas une certification de sécurité. L'import Figma envoie nécessairement le PAT à Figma et télécharge le cadre sélectionné ; la capture de page Web demande nécessairement l'URL fournie.
• La porte de comparabilité n'a pas d'OCR, de DOM ou de sémantique produit. Elle peut stopper des entrées largement discordantes et avertir des changements localisés, mais elle ne peut pas prouver que deux écrans représentent le même chemin/état ou identifier le côté faisant autorité.
• UI 走查 est le module implémenté. N'affirmez pas que les modules planifiés d'expérience interactive, d'accessibilité ou de collaboration sont déjà opérationnels.