BrainLiuYH/UI-Qualitätswerkbank

Was macht UI-Qualitätswerkbank?

Verwenden Sie diese Fertigkeit, um das lokale UI-Überprüfungsmodul auszuführen. Es vergleicht ein Designbild mit einem Implementierungsscreenshot in einem Browser-Worker, gruppiert sichtbare Unterschiede als Prüfkandidaten und unterstützt manuelle Bestätigung und Export.

Der Analysator ist heuristisch. Bezeichnen Sie seine Ausgabe stets als Kandidaten oder mögliche Abweichungen, bis eine Person das beabsichtigte Design, den Pfad, den Zustand, den Inhalt und den Viewport verifiziert hat. Präsentieren Sie ein ungeprüftes Ergebnis niemals als bestätigten Fehler.

Werkbank starten

1. Ermitteln Sie das Verzeichnis dieser Fertigkeit aus der ausgewählten SKILL.md. Gehen Sie nicht vom Repository-Stamm aus und codieren Sie keinen Installationspfad fest.

2. Überprüfen Sie das Bundle und die lokale Quellbrücke vor dem ersten Start in einer Sitzung:

   python3 <skill-verzeichnis>/scripts/serve_workbench.py --check
   

3. Starten Sie den Server als langlebigen Prozess:

   python3 <skill-verzeichnis>/scripts/serve_workbench.py
   

   Der Starter gibt eine JSON-Zeile mit event: "ready", protocol: 2, einer dynamischen Loopback-URL und Prozessmetadaten aus. Verwenden Sie die zurückgegebene URL exakt; ihr Fragment trägt das pro-Start-Token, das von der Browser-App verwendet wird.

4. Wenn eine Browsersteuerung verfügbar ist und der Benutzer die geöffnete Oberfläche wünscht, navigieren Sie zu dieser URL. Andernfalls geben Sie die URL an den Benutzer weiter.

5. Lassen Sie den Prozess laufen, solange die Werkbank verwendet wird. Beenden Sie ihn mit Strg+C, wenn der Benutzer das Schließen verlangt oder die Sitzung ihn nicht mehr benötigt.

Falls der Start mit EPERM oder einer expliziten Loopback-Socket-Einschränkung fehlschlägt, fordern Sie eine lokale Ausführungsberechtigung an und wiederholen Sie denselben Befehl. Ändern Sie nicht die Bindungsadresse, ersetzen Sie sie nicht durch eine gehostete Kopie und laden Sie keine lokalen Bilder woanders hoch.

Quellen auswählen

Die Werkbank benötigt ein Designbild und ein Implementierungsbild. Jede Quellenänderung macht frühere Ergebnisse ungültig; führen Sie die Prüfung nach dem Austausch einer Quelle erneut durch.

• Lokales Bild: Klicken Sie zur Auswahl oder ziehen Sie ein PNG, JPEG oder WebP in den entsprechenden Design-/Implementierungsbereich. Dekodierung, Rastervergleich und Gruppierung bleiben in der lokalen Browsersitzung.
• Figma-Frame: Geben Sie eine Figma-design- oder file-URL mit einer node-id sowie einen persönlichen Zugriffstoken (PAT) an, oder starten Sie den Starter mit FIGMA_ACCESS_TOKEN. Dies importiert eine PNG-Darstellung dieses Frames über die Figma-API; es durchsucht die Datei nicht und übernimmt kein Figma-Login.
• Webaufnahme: Geben Sie eine HTTP(S)-URL, Viewport-Dimensionen und eine optionale Render-Wartezeit an. Die Brücke startet ein temporäres, kopfloses Chrome/Chromium/Edge-Profil und zeichnet diesen Viewport auf. Es übernimmt nicht das Browser-Profil, Cookies, Erweiterungen oder die authentifizierte Sitzung des Benutzers.

Lesen Sie references/source-imports.md, bevor Sie den Figma-Import oder die Webaufnahme bedienen oder Fehler beheben.

Prüfung durchführen und überprüfen

1. Bestätigen Sie, dass beide Quellen möglichst genau denselben Pfad, UI-Zustand, dasselbe Gebietsschema, denselben Inhalt, Viewport und dieselbe Bildlaufposition darstellen.
2. Überprüfen Sie die angezeigte Normalisierungsvorschau. Die Engine verwendet die breitere Quelle als Zielbreite, behält sie bei 1×, vergrößert nur die schmalere Quelle proportional auf diese Breite und richtet beide Bilder oben links aus. Sie dehnt oder beschneidet keine Quelle, und eine verbleibende Höhendifferenz unten bleibt im Vergleich bestehen.
3. Starten Sie die Prüfung. Vor der lokalen Klassifikation prüft der Worker, ob die normalisierten Raster für einen direkten Vergleich geeignet sind. Ein Paar mit geringer Vergleichbarkeit stoppt ohne Kandidatengenerierung; ein Paar mit mittlerer Vergleichbarkeit fährt mit einer expliziten Warnung fort. Dies ist eine konservative heuristische Hürde, keine Wahrscheinlichkeit oder semantische Bewertung, welches Bild korrekt ist.
4. Untersuchen Sie die Kandidaten in der visuellen Vergleichs-, Listen- und Detailansicht. Einseitig transparenter Inhalt wird nur als regionsbezogener Layout-Unterschied gemeldet. Mehrdeutige Medien- oder Inhaltsänderungen verwenden neutrale Formulierungen, anstatt sie in Farb-, Text-, Symbol- oder Geometriefehler zu zwingen. Prüfen Sie, ob Anti-Aliasing, Schrifteinbettung, Animation, dynamische Daten, responsives Verhalten oder ein veraltetes Design den Unterschied erklärt.
5. Bestätigen Sie nur verifizierte Kandidaten. Verlangen Sie einen Grund, wenn Sie einen echten Unterschied absichtlich ignorieren oder einen falschen Positiven verwerfen.
6. Weisen Sie Schweregrad und Priorität unabhängig zu, exportieren Sie dann die überprüfte Liste. Leiten Sie die Priorität nicht allein aus der Pixelgröße oder Farbdistanz ab.

Lesen Sie references/audit-model.md bei der Klassifikation, Priorisierung, Änderung des Überprüfungsstatus oder Entscheidung über den Export. Lesen Sie references/v0-boundaries.md, bevor Sie Datenschutz, unterstützte Integrationen, Erfassungsverhalten oder analytische Einschränkungen erläutern.

Behauptungen korrekt halten

• Die Vergleichsengine ist angepasst aus SemineChen/yangao in festem Commit beac836ba3c81b9a1d40bac8fe75af08444ab742 mit Genehmigung des Autors, wie vom Benutzer gemeldet. Siehe THIRD_PARTY_NOTICES.md.
• Der Figma-Import erfordert ein PAT und ausgehenden Zugriff auf Figma. Es ist kein OAuth, keine Kontovernetzung, kein Design-Token-Extrakt und keine allgemeine Figma-Dateiverarbeitung.
• Die Webaufnahme ist ein isolierter aktueller Viewport-Screenshot. Es ist kein ganzseitiger Zusammenfüger, interaktives Surfen, Login-Zustandsübernahme, DOM-Inspektion oder berechnete Style-Extraktion.
• Die lokale Browserverarbeitung ist kein Sicherheitszertifikat. Der Figma-Import sendet das PAT zwangsläufig an Figma und lädt den ausgewählten Frame herunter; die Webseitenaufnahme fordert zwangsläufig die angegebene URL an.
• Die Vergleichbarkeitshürde hat keine OCR-, DOM- oder Produkt-Semantik. Sie kann stark abweichende Eingaben stoppen und vor lokalisieren Änderungen warnen, aber sie kann nicht beweisen, dass zwei Bildschirme denselben Pfad/Zustand darstellen oder die maßgebliche Seite identifizieren.
• UI-Überprüfung ist das implementierte Modul. Behaupten Sie nicht, dass die geplanten Interaktionserfahrungs-, Barrierefreiheits- oder Kollaborationsmodule bereits laufen.