Was macht ui-articulation-skill?
Codex-Skill zur Übersetzung vager UI-Rückmeldungen in präzise Designsprache und HTML-Visualvergleiche.
Beschreibung
Dieser Skill verwandelt unklare UI-Rückmeldungen in exakte, technische Designbeschreibungen und erzeugt eine HTML-Seite, die die visuellen Unterschiede zeigt.
Funktionsweise
- Eingabe: Eine vage UI-Rückmeldung (z. B. „der Button ist zu klein“) und der relevante Kontext (z. B. ein Screenshot oder ein Codeausschnitt).
- Analyse: Der Skill analysiert die Rückmeldung, identifiziert betroffene UI-Elemente und deren Eigenschaften.
- Präzise Designsprache: Generiert eine detaillierte Beschreibung der gewünschten Änderungen (z. B. „Button-Breite: 120px, Höhe: 40px, Abstand nach oben: 8px“).
- HTML-Visualvergleich: Erzeugt eine HTML-Datei, die den aktuellen und den gewünschten Zustand nebeneinander darstellt.
Verwendung
Rufen Sie den Skill mit einer UI-Rückmeldung auf:
/ui-articulation „Der Header ist zu überladen, die Symbole sind zu groß und die Schriftfarbe ist schlecht lesbar.“
Der Skill gibt eine genaue Designbeschreibung und einen HTML-Visualvergleich zurück.
Beispielausgabe (gekürzt)
Designbeschreibung:
- Header-Höhe: 48px
- Symbolgröße: 20x20px
- Schriftfarbe: #333333
- Schriftgröße: 14px
- Abstand zwischen Symbolen: 12px
HTML-Visualvergleich: (wird als separate Datei ausgegeben)
Voraussetzungen
- Codex mit Zugriff auf Dateisystem
- Keine zusätzlichen Abhängigkeiten
Lizenz
MIT