Was ist flawless-ui-ux?
flawless-ui-ux ist ein UI/UX-Design-Skill und eine lokale Inspektions-CLI für Coding-Agenten. Es hilft Agenten, Oberflächen zu erstellen, neu zu gestalten, zu verfeinern und zu überprüfen, die auf das Publikum, den Inhalt und die Identität eines Produkts ausgerichtet sind.
Der Skill leitet Entscheidungen zu Layout, Typografie, Farbe und Interaktion für Web-, native Mobile- und Desktop-Oberflächen. Die CLI inspiziert ausgewählte Quelldateien und Browser-Oberflächen und liefert Beobachtungen, die der Agent nutzen kann, um Probleme zu finden und Korrekturen zu überprüfen. Du beschreibst die Aufgabe; dein Coding-Agent wendet die Anleitung in deinem bestehenden Projekt an.
Ohne Skill vs. mit Skill
Erstellt in Codex mit GPT 6.1 Sol (niedrig), dann verfeinert mit flawless-ui-ux unter Verwendung desselben Modells und Reasoning-Settings.
Installieren
Führe von deinem Projektverzeichnis aus einen Befehl mit deinem bevorzugten Paketmanager aus:
# npm
npx flawless-ui-ux@latest install
# pnpm
pnpm dlx flawless-ui-ux@latest install
# Bun
bunx flawless-ui-ux@latest install
Erfordert Node 22.12+. Wähle in einem Terminal den Projekt- oder globalen Bereich aus, wähle einen oder mehrere Agenten aus und bestätige die Ziele, bevor kopiert wird. Verwende die Leertaste zur Auswahl und Enter zum Fortfahren. Strg+C bricht ab, bevor Installationsdateien geschrieben werden.
Explizite Flags führen direkt aus:
npx flawless-ui-ux install --codex
npx flawless-ui-ux install --codex --devin
npx flawless-ui-ux install --claude-code --global
npx flawless-ui-ux install --project ./app
npx flawless-ui-ux install --yes
--yes überspringt das Menü und verwendet die Standardeinstellungen, wenn keine anderen Flags angegeben werden: alle unterstützten Agenten im aktuellen Projekt. JSON-Ausgabe, CI und nicht-terminale Ausführung bleiben nicht-interaktiv. Verwende --format json für maschinenlesbare Ausgabe.
npx skills add smokeeaasd/flawless-ui-ux --skill flawless-ui-ux
Dies installiert den Skill über die Skills CLI. Seine Laufzeitanforderungen und Agentenauswahl folgen diesem Installationsprogramm. Die Inspektions-CLI ist separat über die npm-Befehle in dieser Anleitung verfügbar.
bash /absoluter/pfad/flawless-ui-ux/install.sh --codex --project
Die Bash-Alternative erfordert --project für die lokale Installation; ihr Standard ist global. Windows-Benutzer benötigen Git Bash oder WSL.
Skill verwenden
Beschreibe die benötigte Oberfläche und nenne den Skill:
Verwende den flawless-ui-ux-Skill, um ein Finanz-Dashboard für Freelancer zu erstellen.
In Codex rufe $flawless-ui-ux auf. Hosts mit Schrägstrich-Befehlen verwenden /flawless-ui-ux; Pi verwendet /skill:flawless-ui-ux. Du kannst den Skill auch über den Skill-Mechanismus deines Hosts anfordern. Starte nach der Installation eine neue Sitzung, falls die Erkennung aktualisiert werden muss.
Setze die Unterhaltung fort, während sich die Oberfläche entwickelt:
| Aufgabe | Beispielanfrage |
|---|---|
| Erstellen | Erstelle eine Landingpage für eine App, die Einsätze und Übergaben von Vorfällen koordiniert. |
| Neugestalten | Gestalte diesen Kontobildschirm für Mobilgeräte mit der bereitgestellten Markenpalette neu. Behalte Inhalt und Verhalten bei. |
| Verfeinern | Gib der Hauptaktion mehr Präsenz, während der visuelle Charakter der Seite erhalten bleibt. |
| Fokussieren | Verbessere Typografie und Abstände. Behalte Formulierungen, Farben und Funktionalität bei. |
| Überprüfen | Überprüfe dieses Dashboard auf Lesbarkeit, Navigation, Barrierefreiheit und wiederholte generische Muster. Melde Ergebnisse, ohne Dateien zu bearbeiten. |
Funktionsweise
Der Skill leitet Design und Implementierung. Er verbindet den Produktkontext mit Komposition, Typografie, Farbe, Dichte, Bildern und Interaktion. Fokussierte Referenzen unterstützen die Erstellung, Neugestaltung, Verfeinerung und Überprüfung in deinem bestehenden Stack.
Für neue Oberflächen und umfassende Neugestaltungen erwägt der Agent vor der Implementierung mindestens drei inhaltlich unterschiedliche Kompositionen und wählt dann einen Ansatz für das Produkt und die Aufgabe aus. Fokussierte Verfeinerungen bewahren den autorisierten Umfang und die etablierten Entscheidungen.
Die Design-Anleitung gilt für Web-, native Mobile- und Desktop-Oberflächen. Die gerenderten Checks der CLI decken Browser-Oberflächen ab; die native Überprüfung verwendet geeignete Plattform- und Projektwerkzeuge.
Verfeinerung entwickelt den beabsichtigten Charakter. Eine Oberfläche benötigt möglicherweise mehr Präsenz, weniger konkurrierende Betonung oder eine konsistentere Verarbeitung. Der richtige Eingriff hängt vom Inhalt und der Aufgabe ab. Generische Kopien, sich wiederholende Dekorationen und vertraute Muster werden im Kontext sowie auf Benutzerfreundlichkeit und Barrierefreiheit überprüft.
Die CLI überprüft die Implementierung. Sammle Projektkontext, inspiziere ausgewählte Quelldateien oder eine laufende Oberfläche und vergleiche das Ergebnis nach Korrekturen. Dein Agent nimmt die Änderungen vor; die CLI liefert Beobachtungen und zeichnet auf, was tatsächlich überprüft wurde.
Produktkontext und Workflows
Halte Produktfakten und Designentscheidungen in deinen vorhandenen Markdown-Dokumenten fest. Der Agent verwendet sie projektübergreifend; Kontextdateien sind optional. Verwende context --source docs/brief.md, um ein Dokument außerhalb der üblichen Speicherorte auszuwählen.
Um fehlende Aufzeichnungen vorzubereiten, führe Folgendes aus:
npx flawless-ui-ux init
Die CLI erstellt Markdown-Vorlagen für Produkt/Design oder verwendet vorhandene unterstützte Dokumente wieder und bewahrt deren Inhalt. Dein Agent füllt die Aufzeichnungen aus dem Projekt und deinen Entscheidungen. Lies sie später mit context; die Initialisierung generiert kein Briefing und wählt keinen visuellen Stil aus.
Überprüfe verwandte Bildschirme mit wiederholten --url-Eingaben und --consistency für ein kontextuelles Stil-Inventar. Füge --flow flows/edit-member.json hinzu, um explizit definierte UI-Aktionen, Erwartungen und benannte Zustände in einer zulässigen Testumgebung auszuführen. Die Überprüfung erfordert, dass die unveränderte Flow-Datei erneut ausgewählt wird. Siehe Workflow-Beispiele und -Grenzen.
Inspizieren und verifizieren
Verwende die CLI direkt oder bitte deinen Agenten, diese Prüfungen in seine Arbeit einzubeziehen. Ersetze npx durch pnpm dlx oder bunx.
Mit Kontext und Quelle beginnen
npx flawless-ui-ux context --project . --format json
npx flawless-ui-ux inspect --project . --source src/App.tsx --format json
Die laufende Oberfläche überprüfen
Starte deine App und bereite den Browser einmal vor:
npx [email protected] install chromium
# oder: pnpm dlx [email protected] install chromium
# oder: bunx [email protected] install chromium
Inspiziere die tatsächliche Development-Server-URL und speichere eine Basislinie:
npx flawless-ui-ux inspect --project . --source src/App.tsx --url http://localhost:5173 --output ../app-before --format json
Wiederhole nach Korrekturen den gespeicherten Umfang:
npx flawless-ui-ux verify ../app-before/run.json --output ../app-after --format json
Der Vergleich trennt dauerhafte, neue und nicht mehr beobachtete Ergebnisse. Fehlende bestätigte Ziele und geänderte Bedingungen bleiben unverifiziert.
| Bereich | Gesammelte Beweise |
|---|---|
| Barrierefreiheit | Ausgewählte axe-Kontrast- und accessible-name-Regeln, einschließlich unvollständiger Ergebnisse zur Überprüfung |
| Text und Layout | Berechnete Schriftgrößen und horizontaler Überlauf bei den getesteten Breiten |
| Assets und Laufzeit | Sichtbare defekte Bilder und unerwartete Konsolenausgaben (Logs, Fehler, Warnungen) |
| Styling | Berechnete CSS-Eigenschaften (Farben, Ränder, Abstände, Schriftarten, -gewichte, -stile) |
| Zustand und Reaktivität (über Flow-Überprüfungen) | Gemeldete Zustände, fehlgeschlagene Assertions und nicht zustande gekommene Assertions |